@theguild/components
Version:
1,342 lines (1,314 loc) • 140 kB
JavaScript
import {
DiscordIcon,
FOUR_MAIN_PRODUCTS,
GitHubIcon,
InformationCircleIcon,
PRODUCTS,
SIX_HIGHLIGHTED_PRODUCTS,
SvgAccountBox,
SvgApps,
SvgArrowIcon,
SvgBard,
SvgCaretSlim,
SvgCheck,
SvgClose,
SvgCodegen,
SvgCsaStarLevelOne,
SvgGroup,
SvgHive,
SvgHiveGateway,
SvgHonour,
SvgLinkedin,
SvgList,
SvgMesh as SvgMesh2,
SvgMoon,
SvgMore,
SvgPaper,
SvgPencil,
SvgRightCorner,
SvgSearch,
SvgShare,
SvgShieldFlash,
SvgTarget,
SvgTwitter,
SvgYoga as SvgYoga2,
SvgYoutube
} from "./chunk-UUPBT3FY.js";
import {
EnvelopLettermark,
GraphQLESlintLettermark,
InspectorLettermark,
ScalarsLettermark,
SofaLettermark,
SvgAngular,
SvgCodeGenerator,
SvgConductor,
SvgConfig,
SvgFets,
SvgGraphqlFoundation,
SvgGuild,
SvgHeltin,
SvgHiveCombinationMark,
SvgKitql,
SvgMesh,
SvgModules,
SvgNextra,
SvgSse,
SvgStitching,
SvgTheGuild,
SvgTools,
SvgWhatsapp,
SvgWs,
SvgYoga,
cn
} from "./chunk-X3SBJHCD.js";
// src/index.ts
import { default as default2 } from "@giscus/react";
import {
Bleed,
Collapse,
Navbar as Navbar2,
NotFoundPage,
useConfig as useConfig2,
useTheme as useTheme2,
useThemeConfig as useThemeConfig2
} from "nextra-theme-docs";
import { createCatchAllMeta } from "nextra/catch-all";
import {
Callout,
Cards,
Code,
FileTree,
Mermaid,
RemoteContent,
Steps,
Tabs as Tabs3,
Table,
Td,
Th,
Tr
} from "nextra/components";
import { useData, useMounted as useMounted3 } from "nextra/hooks";
import { useMDXComponents } from "nextra/mdx";
// src/components/anchor.tsx
import { forwardRef } from "react";
import NextLink from "next/link";
import clsx from "clsx";
import { Fragment, jsx } from "react/jsx-runtime";
var Anchor = forwardRef(function Anchor2({ href = "", children, newWindow, sameSite, className, ...props }, forwardedRef) {
const classes2 = clsx(className, "outline-none transition focus-visible:ring");
if (typeof href === "string") {
if (sameSite) {
const url = new URL(href);
href = url.pathname + url.search + url.hash;
}
if (href.startsWith("#")) {
return /* @__PURE__ */ jsx("a", { ref: forwardedRef, href, className: classes2, ...props, children });
}
if (newWindow && /^https?:\/\//.test(href)) {
return /* @__PURE__ */ jsx(
"a",
{
ref: forwardedRef,
href,
target: "_blank",
rel: "noreferrer",
className: classes2,
...props,
children
}
);
}
}
return /* @__PURE__ */ jsx(NextLink, { ref: forwardedRef, href, ...props, className: classes2, legacyBehavior: false, children: /* @__PURE__ */ jsx(Fragment, { children }) });
});
// src/components/button.tsx
import clsx2 from "clsx";
import { jsx as jsx2 } from "react/jsx-runtime";
var Button = ({
children,
className,
variant = "primary",
...props
}) => {
return /* @__PURE__ */ jsx2(
Anchor,
{
className: clsx2(
"flex-none rounded-md p-3 text-center text-xs font-medium hover:shadow-lg md:px-5",
variant === "primary" ? "bg-cyan-400 text-white hover:shadow-cyan-400/40" : "bg-white text-black hover:shadow-white/40",
className
),
...props,
children
}
);
};
// src/components/cards-colorful.tsx
import clsx3 from "clsx";
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var CardsColorful = ({ cards, className }) => /* @__PURE__ */ jsx3("section", { className: clsx3("bg-white py-8 dark:bg-dark", className), children: /* @__PURE__ */ jsx3("div", { className: "container flex flex-wrap space-y-6 md:flex-nowrap md:space-x-8 md:space-y-0", children: cards.map((card) => /* @__PURE__ */ jsx3(
Anchor,
{
className: "relative min-h-[200px] w-full rounded-3xl p-8 text-white [background:var(--color)] after:absolute after:right-0 after:top-0 after:h-full after:w-[calc(30%-1rem)] after:rounded-3xl after:bg-white/10 after:content-[''] md:h-72 md:w-1/2 md:hover:scale-105 md:hover:shadow-xl lg:after:w-[calc(50%-1rem)]",
style: { "--color": card.color },
...card.link,
children: /* @__PURE__ */ jsxs("div", { className: "w-3/4 lg:w-1/2", children: [
/* @__PURE__ */ jsx3("h2", { className: "pb-1.5 text-xs font-semibold uppercase opacity-60", children: card.category }),
/* @__PURE__ */ jsx3("h3", { className: "pb-2.5 text-2xl font-bold md:text-3xl", children: card.title }),
/* @__PURE__ */ jsx3("p", { className: "text-xs font-medium opacity-60", children: card.description })
] })
},
card.title
)) }) });
// src/components/feature-list.tsx
import clsx4 from "clsx";
// src/components/image.tsx
import NextImage from "next/image";
import { jsx as jsx4 } from "react/jsx-runtime";
function Image(props) {
return /* @__PURE__ */ jsx4(NextImage, { placeholder: "blur", ...props });
}
// src/components/feature-list.tsx
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
var FeatureList = ({
title,
description,
items,
link,
className
}) => /* @__PURE__ */ jsx5("section", { className: clsx4("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs2("div", { className: "container py-14", children: [
title && /* @__PURE__ */ jsxs2("div", { className: "mb-6 flex flex-col items-center", children: [
/* @__PURE__ */ jsx5("h2", { className: "mb-1.5 mt-0 text-center text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
description && /* @__PURE__ */ jsx5("div", { className: "mb-1.5 mt-1 text-center text-base text-gray-500 dark:text-gray-400", children: description }),
link && /* @__PURE__ */ jsx5(
Anchor,
{
...link,
className: clsx4("w-max text-sm text-cyan-400 hover:text-cyan-300", link.className)
}
)
] }),
/* @__PURE__ */ jsx5("div", { className: "flex flex-wrap justify-center gap-12", children: items.map((item) => /* @__PURE__ */ jsxs2("div", { className: "flex w-56 flex-col items-center", children: [
/* @__PURE__ */ jsx5(Image, { ...item.image, className: clsx4("w-28", item.image.className) }),
/* @__PURE__ */ jsx5("h3", { className: "m-0 text-lg font-bold text-black dark:text-gray-50", children: item.title }),
/* @__PURE__ */ jsx5("div", { className: "text-center text-sm text-gray-500 dark:text-gray-400", children: item.description }),
item.link && /* @__PURE__ */ jsx5(
Anchor,
{
...item.link,
className: clsx4(
"mt-2 w-max text-sm text-cyan-400 hover:text-cyan-300",
item.link.className
)
}
)
] }, item.title)) })
] }) });
// src/components/footer.tsx
import { clsx as clsx5 } from "clsx";
import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
var COMPANY = [
{
children: "About",
title: "Learn more about us",
href: "https://the-guild.dev/about-us"
},
{
children: "Blog",
title: "Read our blog",
href: "https://the-guild.dev/blog"
},
{
children: "Newsletter",
title: "Newsletter",
href: "https://the-guild.dev/newsletter"
}
];
var COMMUNITY = [
{
icon: SvgTwitter,
title: "Visit our Twitter",
href: "https://twitter.com/TheGuildDev"
},
{
icon: SvgLinkedin,
title: "Visit our LinkedIn",
href: "https://linkedin.com/company/the-guild-software"
},
{
icon: DiscordIcon,
title: "Reach us on Discord",
href: "https://discord.com/invite/xud7bH9"
},
{
icon: GitHubIcon,
title: "Check our GitHub account",
href: "https://github.com/the-guild-org"
},
{
icon: SvgYoutube,
title: "Watch Our Videos",
href: "https://youtube.com/watch?v=d_GBgH-L5c4&list=PLhCf3AUOg4PgQoY_A6xWDQ70yaNtPYtZd"
}
];
var products = [
PRODUCTS.HIVE,
PRODUCTS.MESH,
PRODUCTS.YOGA,
PRODUCTS.CODEGEN,
PRODUCTS.NEXTRA,
{ ...PRODUCTS.SOFA, name: "GraphQL to REST" }
].map(({ name, href, title }) => ({
children: name,
href,
title
}));
var classes = {
title: clsx5("mb-2.5 text-lg font-medium text-gray-900 dark:text-gray-100"),
anchor: clsx5("text-gray-500 hover:text-black dark:text-[#b4b5be] hover:dark:text-gray-100")
};
var renderLinks = (list) => /* @__PURE__ */ jsx6("ul", { className: "m-0 mb-8 list-none p-0 last:mb-0", children: list.map((link, i) => /* @__PURE__ */ jsx6("li", { className: "mb-3 last:mb-0", children: /* @__PURE__ */ jsx6(Anchor, { className: clsx5(classes.anchor, "inline-block text-sm"), ...link }) }, i)) });
function Footer({
className,
sameSite,
resources = [],
logo
}) {
return /* @__PURE__ */ jsx6(
"footer",
{
className: clsx5(
"bg-[#fafafa] py-[60px] text-base md:py-[140px] dark:bg-[#0f1114]",
className
),
children: /* @__PURE__ */ jsx6("div", { className: "container max-w-[90rem]", children: /* @__PURE__ */ jsxs3("div", { className: "relative flex justify-between gap-10 max-md:flex-col", children: [
/* @__PURE__ */ jsxs3(
Anchor,
{
className: "flex items-center gap-2 self-start",
href: "https://the-guild.dev",
sameSite,
...logo,
children: [
/* @__PURE__ */ jsx6(SvgGuild, { className: "h-9 w-auto" }),
/* @__PURE__ */ jsx6(SvgTheGuild, { className: "h-7 w-auto" })
]
}
),
/* @__PURE__ */ jsxs3("div", { children: [
/* @__PURE__ */ jsx6("h3", { className: classes.title, children: "Products" }),
/* @__PURE__ */ jsx6("div", { className: "flex gap-6", children: renderLinks(products) })
] }),
/* @__PURE__ */ jsxs3("div", { children: [
/* @__PURE__ */ jsx6("h3", { className: classes.title, children: "Resources" }),
renderLinks([
{
children: "Press Kit",
title: "Press Kit",
href: "https://the-guild.dev/logos"
},
...resources
])
] }),
/* @__PURE__ */ jsxs3("div", { children: [
/* @__PURE__ */ jsx6("h3", { className: classes.title, children: "Company" }),
renderLinks(COMPANY)
] }),
/* @__PURE__ */ jsx6("div", { className: "flex gap-5 text-[#b4b5be]", children: COMMUNITY.map(({ icon: Icon, ...iconProps }) => /* @__PURE__ */ jsx6(Anchor, { className: classes.anchor, ...iconProps, children: /* @__PURE__ */ jsx6(Icon, { className: "h-5 w-auto" }) }, iconProps.title)) }),
/* @__PURE__ */ jsx6(SvgCsaStarLevelOne, { className: "absolute right-0 ml-auto h-[4.5rem] w-auto md:bottom-0" })
] }) })
}
);
}
// src/components/hero-gradient.tsx
import { isValidElement } from "react";
import clsx6 from "clsx";
import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
var Shadow = ({ className }) => {
return /* @__PURE__ */ jsx7(
"span",
{
className: clsx6(
"absolute size-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl",
className
)
}
);
};
var HeroGradient = ({
title,
description,
link,
version,
colors = [],
image,
className
}) => {
return /* @__PURE__ */ jsx7("section", { className: clsx6("bg-white md:py-14 dark:bg-dark", className), children: /* @__PURE__ */ jsxs4(
"div",
{
className: clsx6(
"container relative z-0 flex max-w-[90rem] items-center gap-6 px-6 md:px-14",
image ? "py-6" : "py-14"
),
children: [
/* @__PURE__ */ jsxs4(
"div",
{
className: "absolute inset-0 z-[-1] overflow-hidden bg-black md:mx-6 md:rounded-3xl dark:bg-dark",
style: { "--colorA": colors[0], "--colorB": colors[1] },
children: [
/* @__PURE__ */ jsx7(Shadow, { className: "-left-10 -top-24 [background:var(--colorA)]" }),
/* @__PURE__ */ jsx7(Shadow, { className: "-top-5 hidden [background:var(--colorA)] md:right-[-28rem] md:block" }),
/* @__PURE__ */ jsx7(Shadow, { className: "bottom-[-31rem] right-[-22rem] [background:var(--colorB)]" }),
/* @__PURE__ */ jsx7(Shadow, { className: "-left-12 bottom-[-37rem] hidden [background:var(--colorB)] md:block" })
]
}
),
/* @__PURE__ */ jsxs4("div", { className: clsx6("grow md:pl-6"), children: [
/* @__PURE__ */ jsx7("h1", { className: "max-w-lg text-2xl font-bold text-white md:text-3xl", children: title }),
/* @__PURE__ */ jsx7("p", { className: "mb-4 mt-2.5 max-w-md text-base text-white opacity-70 md:text-lg", children: description }),
/* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-3 text-xs md:mt-9", children: [
link && toArray(link).map((link2, i) => /* @__PURE__ */ jsx7(
Button,
{
variant: "secondary",
...link2,
className: clsx6("!px-8", link2.className)
},
i
)),
version && isValidElement(version) ? version : /* @__PURE__ */ jsx7("span", { className: "text-gray-50 opacity-60", children: version })
] })
] }),
image && /* @__PURE__ */ jsx7(
Image,
{
...image,
className: clsx6(
"hidden w-full max-w-sm select-none sm:max-w-md md:block",
image.className
)
}
)
]
}
) });
};
function toArray(input) {
return Array.isArray(input) ? input : [input];
}
// src/components/hero-illustration.tsx
import clsx7 from "clsx";
import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
var HeroIllustration = ({
title,
description,
link,
image,
flipped,
className
}) => /* @__PURE__ */ jsx8("section", { className: clsx7("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs5(
"div",
{
className: clsx7(
"container flex flex-wrap items-center gap-8 py-8 md:flex-nowrap md:justify-around",
flipped && "md:flex-row-reverse"
),
children: [
/* @__PURE__ */ jsx8(Image, { ...image, className: clsx7("w-full max-w-md md:w-2/5", image.className) }),
/* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-start gap-3", children: [
/* @__PURE__ */ jsx8("h2", { className: "max-w-sm text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
/* @__PURE__ */ jsx8("p", { className: "max-w-md text-base text-gray-500 dark:text-gray-400", children: description }),
link && /* @__PURE__ */ jsx8(Button, { ...link })
] })
]
}
) });
// src/components/hero-marketplace.tsx
import clsx8 from "clsx";
import CubeBL from "./marketplace-cube-bl-42X7Y3KO.png";
import CubeBR from "./marketplace-cube-br-Y5MZRDIL.png";
import CubeTL from "./marketplace-cube-tl-PEJKW6RX.png";
import CubeTR from "./marketplace-cube-tr-O5XQ6Q4N.png";
import IllustrationDesktop from "./marketplace-desktop-7XUR54PR.png";
import IllustrationMobile from "./marketplace-mobile-DI462WKF.png";
import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
var Shadow2 = ({ className }) => {
return /* @__PURE__ */ jsx9(
"span",
{
className: clsx8(
"absolute size-[750px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
className
)
}
);
};
var Cube = ({ className, src }) => {
return /* @__PURE__ */ jsx9(
Image,
{
className: clsx8("absolute -translate-x-1/2 -translate-y-1/2", className),
src,
alt: "Cube"
}
);
};
var HeroMarketplace = ({
title,
description,
link,
className,
image
}) => /* @__PURE__ */ jsx9("section", { className: clsx8("overflow-hidden bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
/* @__PURE__ */ jsxs6(
"div",
{
className: "absolute inset-0 overflow-hidden bg-black dark:bg-dark",
style: { "--colorA": "#ff34ae", "--colorB": "#1cc8ee" },
children: [
/* @__PURE__ */ jsx9(Shadow2, { className: "left-[-30px] top-[-175px] [background:var(--colorA)] md:left-[-60px] md:top-[-150px]" }),
/* @__PURE__ */ jsx9(Shadow2, { className: "bottom-[-800px] right-[-700px] hidden [background:var(--colorA)] md:block" }),
/* @__PURE__ */ jsx9(Shadow2, { className: "bottom-[-600px] left-[-30px] [background:var(--colorB)] md:bottom-[-700px] md:left-5" })
]
}
),
/* @__PURE__ */ jsxs6("div", { children: [
/* @__PURE__ */ jsx9(Cube, { src: CubeTL, className: "-top-2.5 left-6 md:left-10 md:top-6" }),
/* @__PURE__ */ jsx9(Cube, { src: CubeTR, className: "-bottom-60 -right-52 top-auto md:bottom-auto md:top-20" }),
/* @__PURE__ */ jsx9(Cube, { src: CubeBR, className: "-bottom-32 -right-20 hidden md:block" }),
/* @__PURE__ */ jsx9(Cube, { src: CubeBL, className: "-bottom-40 left-10 hidden md:block" })
] }),
/* @__PURE__ */ jsxs6("div", { className: "container mb-28 mt-16 flex max-w-[90rem] flex-wrap items-center pb-1 pt-20 md:mb-20 md:mt-7 md:flex-nowrap md:pt-0", children: [
/* @__PURE__ */ jsxs6(
"picture",
{
className: "z-[1] order-last -mb-20 -ml-8 mt-5 w-full max-w-md md:order-first md:-mb-24 md:-ml-12 md:mt-0 md:w-auto md:max-w-none lg:-ml-14 lg:w-2/3",
...image,
children: [
/* @__PURE__ */ jsx9("source", { media: "(min-width:768px)", srcSet: IllustrationDesktop }),
/* @__PURE__ */ jsx9(Image, { className: "mx-auto w-auto", src: IllustrationMobile, alt: "Products List" })
]
}
),
/* @__PURE__ */ jsxs6("div", { className: "relative z-[1]", children: [
/* @__PURE__ */ jsx9("h2", { className: "mb-2.5 max-w-lg text-2xl font-bold text-white md:text-3xl dark:text-gray-50", children: title }),
/* @__PURE__ */ jsx9("p", { className: "max-w-lg text-base text-gray-300 opacity-70", children: description }),
link && /* @__PURE__ */ jsx9("div", { className: "relative z-[1] mt-4 hidden items-center text-xs md:mt-9 md:flex", children: /* @__PURE__ */ jsx9(Button, { ...link }) })
] })
] })
] }) });
// src/components/hero-video.tsx
import { useRouter } from "next/router";
import clsx9 from "clsx";
import { useMounted } from "nextra/hooks";
import ReactPlayer from "react-player/lazy";
import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
var HeroVideo = ({
title,
description,
link,
video,
flipped,
className,
videoProps
}) => {
const { basePath } = useRouter();
const mounted = useMounted();
return /* @__PURE__ */ jsx10("section", { className: clsx9("bg-gray-100 dark:bg-neutral-800", className), children: /* @__PURE__ */ jsxs7(
"div",
{
className: clsx9(
"container flex flex-wrap py-8 md:flex-nowrap md:items-center md:justify-center",
flipped && "md:flex-row-reverse"
),
children: [
/* @__PURE__ */ jsxs7("div", { className: "mb-16 mt-8 md:my-0", children: [
/* @__PURE__ */ jsx10("h2", { className: "m-0 max-w-sm text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
/* @__PURE__ */ jsx10("p", { className: "mb-3 mt-1 max-w-md text-base text-gray-500 dark:text-gray-400", children: description }),
link && /* @__PURE__ */ jsx10(
Anchor,
{
...link,
className: clsx9(
"mt-auto w-max text-sm text-cyan-400 hover:text-cyan-300",
link.className
)
}
)
] }),
/* @__PURE__ */ jsx10(
"div",
{
className: clsx9(
"h-72 w-full overflow-hidden rounded-xl bg-white shadow-xl sm:h-96 md:h-72 md:w-3/5 lg:h-96",
flipped ? "md:mr-8" : "md:ml-8"
),
children: mounted && /* @__PURE__ */ jsx10(
ReactPlayer,
{
url: video.src,
light: video.placeholder.startsWith("/") ? basePath + video.placeholder : video.placeholder,
controls: true,
height: "100%",
width: "100%",
config: {
youtube: {
playerVars: {
autoplay: 1
}
}
},
...videoProps
}
)
}
)
]
}
) });
};
// src/components/info-list.tsx
import clsx10 from "clsx";
import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
var InfoList = ({ title, items, className }) => /* @__PURE__ */ jsx11("section", { className: clsx10("bg-white dark:bg-dark", className), children: /* @__PURE__ */ jsxs8("div", { className: "container max-w-[90rem] py-12", children: [
title && /* @__PURE__ */ jsx11("h2", { className: "mb-4 mt-0 text-2xl font-bold text-black md:text-3xl dark:text-gray-50", children: title }),
/* @__PURE__ */ jsx11("div", { className: "flex flex-wrap", children: items.map((item, index) => /* @__PURE__ */ jsxs8(
"section",
{
className: "mb-9 box-border flex w-full max-w-lg flex-col pr-10 last:mb-0 md:w-1/2 lg:mb-0 lg:w-1/3",
children: [
/* @__PURE__ */ jsx11("h3", { className: "m-0 text-base font-semibold text-black dark:text-gray-50", children: item.title }),
/* @__PURE__ */ jsx11("p", { className: "mb-4 mt-2 grow text-sm text-gray-500 dark:text-gray-400", children: item.description }),
item.link && /* @__PURE__ */ jsx11(
Anchor,
{
className: "mt-auto w-max text-sm text-cyan-400 hover:text-cyan-300",
...item.link
}
)
]
},
`info-${index}`
)) })
] }) });
// src/components/legacy-package-cmd.tsx
import { useMemo } from "react";
import { Pre, Tabs } from "nextra/components";
import { jsx as jsx12 } from "react/jsx-runtime";
var PACKAGE_MANAGERS = ["yarn", "npm", "pnpm"];
var Add = {
yarn: "yarn add",
npm: "npm install",
pnpm: "pnpm add"
};
var Run = {
yarn: "yarn",
npm: "npm run",
pnpm: "pnpm"
};
var Install = {
yarn: "yarn",
npm: "npm install",
pnpm: "pnpm install"
};
var Init = {
yarn: "yarn init --yes",
npm: "npm init --yes",
pnpm: "pnpm init"
};
var Global = {
yarn: "yarn global add",
npm: "npm install --global",
pnpm: "pnpm add --global"
};
var LegacyPackageCmd = ({
packages
}) => {
const commands = useMemo(
() => PACKAGE_MANAGERS.map(
(pkgManager) => packages.map((pkg) => typeof pkg === "string" ? { name: pkg, cmd: "add" } : pkg).map((pkg) => {
switch (pkg.cmd) {
case "run":
return `${pkgManager === "npm" && pkg.isNpx ? "npx" : Run[pkgManager]} ${pkg.name}`;
case "install":
return `${Install[pkgManager]}${pkg.name ? ` ${pkg.name}` : ""}`;
case "init":
return Init[pkgManager];
default:
return `${pkg.isGlobal ? Global[pkgManager] : Add[pkgManager]} ${pkg.name}`;
}
}).join("\n")
),
[packages]
);
return /* @__PURE__ */ jsx12(Tabs, { items: PACKAGE_MANAGERS, children: PACKAGE_MANAGERS.map((pkgManager, index) => /* @__PURE__ */ jsx12(Tabs.Tab, { children: /* @__PURE__ */ jsx12(Pre, { "data-filename": "Terminal", "data-copy": "", "data-language": "sh", "data-theme": "default", children: /* @__PURE__ */ jsx12("code", { children: /* @__PURE__ */ jsx12("span", { className: "line", children: commands[index] }) }) }) }, pkgManager)) });
};
// src/components/marketplace-list.tsx
import { useEffect, useMemo as useMemo2, useState } from "react";
import ReactPaginate from "react-paginate";
// src/components/heading.tsx
import { jsx as jsx13 } from "react/jsx-runtime";
function Heading({ as: _as, size, className, children, ...rest }) {
const Level = _as || "h2";
let sizeStyle = "";
switch (size) {
// TODO: This should probably be a class, not a component, because the design expects
// an equivalent of `heading-sm lg:heading-xl.`
case "xl":
sizeStyle = "text-4xl leading-[1.2] md:text-6xl md:leading-[1.1875] tracking-[-0.64px]";
break;
case "lg":
sizeStyle = "text-4xl leading-[1.2] md:text-[56px] md:leading-[1.14286] tracking-[-0.56px]";
break;
case "md":
sizeStyle = "text-4xl leading-[1.2] md:text-5xl md:leading-[1.16667] tracking-[-0.48px]";
break;
case "sm":
sizeStyle = "text-[40px] leading-[1.2] tracking-[-0.2px]";
break;
case "xs":
sizeStyle = "text-[32px]/[1.25] tracking-[-0.16px]";
break;
}
const id = typeof children === "string" ? children.replace(/[\s.,]+/g, "-").toLowerCase() : void 0;
return /* @__PURE__ */ jsx13(Level, { className: cn(sizeStyle, className), id, ...rest, children: id ? /* @__PURE__ */ jsx13("a", { href: `#${id}`, className: "cursor-text", tabIndex: -1, onClick: preventScroll, children }) : children });
}
function preventScroll(event) {
if (event.currentTarget.tagName !== "A") return;
const href = event.currentTarget.getAttribute("href");
if (href?.[0] !== "#") return;
event.preventDefault();
const url = new URL(window.location.href);
url.hash = href.slice(1);
window.history.replaceState({}, "", url.toString());
}
// src/components/tag.tsx
import { jsx as jsx14 } from "react/jsx-runtime";
var Tag = ({ children, selected, onClick, ...rest }) => {
return /* @__PURE__ */ jsx14(
"button",
{
tabIndex: onClick ? 0 : -1,
className: cn(
"hive-focus inline cursor-pointer rounded-full border-0 px-3 py-1 text-xs font-medium outline-none",
selected ? "bg-neutral-700 text-white [.green_&]:bg-green-600" : "bg-neutral-900/5 text-neutral-800 dark:bg-neutral-200/10 dark:text-neutral-200 [.green_&]:bg-green-700 [.green_&]:text-green-200"
),
onClick,
...rest,
children
}
);
};
var TagsContainer = ({
children,
className,
focusgroup
}) => {
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
/* @__PURE__ */ jsx14(
"div",
{
className: cn("flex flex-wrap gap-2 py-2", className),
onKeyDown: focusgroup ? moveFocusWithLeftAndRight : void 0,
children
}
)
);
};
var moveFocusWithLeftAndRight = (event) => {
if (event.target instanceof HTMLElement && event.target.tagName === "BUTTON") {
let next;
switch (event.key) {
case "ArrowRight":
next = event.target.nextElementSibling;
break;
case "ArrowLeft":
next = event.target.previousElementSibling;
break;
}
if (next && next instanceof HTMLElement && next.tagName === "BUTTON") {
event.preventDefault();
next.focus();
}
}
};
// src/components/marketplace-list.tsx
import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
var formatDate = (value) => {
const months = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
const date = new Date(value);
return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
};
var numberFormat = Intl.NumberFormat("en-US", {
notation: "compact"
});
var MarketplaceList = ({
title,
placeholder,
items,
pagination,
className,
colorScheme = "neutral"
}) => {
const [currentPage, setCurrentPage] = useState(0);
const pageSize = pagination || 5;
const pageCount = items ? Math.ceil(items.length / pageSize) : 1;
useEffect(() => {
setCurrentPage(0);
}, [items]);
const pages = useMemo2(() => {
const itemsCopy = [...items];
const pagesData = [];
while (itemsCopy.length > 0) {
pagesData.push(itemsCopy.splice(0, pageSize));
}
return pagesData;
}, [items, pageSize]);
return /* @__PURE__ */ jsxs9(
"section",
{
className: cn(
// --bg and --fg are defined in style.css under .MarketplaceSearch
"MarketplaceSearch",
colorScheme,
"w-full dark:bg-neutral-900 [&.green]:bg-green-1000",
className
),
children: [
title && /* @__PURE__ */ jsx15(
Heading,
{
as: "h2",
size: "sm",
className: "mb-6 mt-4 text-2xl/8 font-medium text-[--fg,theme(colors.neutral.900)] dark:text-white",
children: title
}
),
pages[currentPage]?.length ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
/* @__PURE__ */ jsx15("ul", { className: "grid gap-4 lg:grid-cols-2 lg:gap-6", children: pages[currentPage].map((item, i) => {
return /* @__PURE__ */ jsx15("li", { className: "*:h-full", children: /* @__PURE__ */ jsx15(
MarketplaceListItem,
{
item,
tabIndex: i === 0 ? 0 : -1,
onKeyDown: (event) => {
const ul = event.currentTarget.parentElement.parentElement;
const gridTemplateColumns = ul.computedStyleMap().get("grid-template-columns")?.toString();
const columns = parseInt(gridTemplateColumns?.match(/repeat\((\d)/)?.[1]) || 1;
moveFocusOnArrowKeys(event, columns);
}
}
) }, item.title);
}) }),
pageCount > 1 && /* @__PURE__ */ jsx15(
ReactPaginate,
{
pageCount,
forcePage: currentPage,
pageRangeDisplayed: 3,
marginPagesDisplayed: 1,
onPageChange: (page) => setCurrentPage(page.selected),
containerClassName: "flex justify-center gap-2 mt-6",
previousClassName: "hidden",
nextClassName: "hidden",
breakLinkClassName: "hive-focus rounded text-[--fg-80] [.green_&]:text-green-200",
pageLinkClassName: "hive-focus text-sm font-medium rounded-lg [.green_&]:text-green-200 [.green_&]:border-green-700 border border-neutral-600 dark:text-neutral-200 size-7 flex justify-center items-center select-none",
activeLinkClassName: "text-[--bg] dark:!text-[--bg] bg-[--fg] [.green_&]:bg-green-300 [.green_&]:text-green-800"
}
)
] }) : /* @__PURE__ */ jsx15("div", { className: "flex h-24 w-full items-center justify-center", children: placeholder })
]
}
);
};
function MarketplaceListItem({ item, ...rest }) {
return /* @__PURE__ */ jsxs9(
Anchor,
{
...item.link,
...rest,
className: cn(
"hive-focus flex gap-4 rounded-2xl border border-transparent bg-neutral-50 p-6 @container hover:border-neutral-200/50 hover:bg-neutral-100 @lg:gap-6 dark:bg-neutral-800 dark:hover:border-neutral-700 dark:hover:bg-neutral-700/50 [.green_&]:bg-green-900 [.green_&]:hover:border-green-700/50 [.green_&]:hover:bg-green-800/75",
item.link.className
),
children: [
/* @__PURE__ */ jsx15(
"div",
{
className: cn(
"size-16 shrink-0 rounded-lg bg-[--bg] @lg:size-16 @2xl:size-[92px] [.green_&]:[background:linear-gradient(135deg,_#68A8B6_0%,_#3B736A_100%)]"
),
children: /* @__PURE__ */ jsx15(
Image,
{
...item.image,
placeholder: item.image.placeholder || "empty",
width: "92",
height: "92",
className: "aspect-square rounded-lg object-contain ring-1 ring-inset ring-[rgb(from_var(--fg)_r_g_b_/_0.1)]"
}
)
}
),
/* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx15("h3", { className: "m-0 line-clamp-2 font-medium text-[--fg] @lg:text-2xl", children: item.title }),
/* @__PURE__ */ jsx15("div", { className: "mb-2 line-clamp-3 text-sm text-[--fg-80] @lg:text-base", children: item.description }),
item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx15(TagsContainer, { className: "mt-auto", children: item.tags.map((tagName) => /* @__PURE__ */ jsx15(Tag, { children: tagName }, tagName)) }),
/* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-x-4 text-xs text-[--fg-80] @lg:text-sm", children: [
/* @__PURE__ */ jsxs9("span", { children: [
"Updated ",
/* @__PURE__ */ jsx15("time", { dateTime: item.update, children: formatDate(item.update) })
] }),
item.weeklyNPMDownloads && /* @__PURE__ */ jsxs9("span", { className: "hidden @sm:block", children: [
numberFormat.format(item.weeklyNPMDownloads),
" weekly downloads"
] })
] })
] })
]
}
);
}
function moveFocusOnArrowKeys(event, columns) {
let listItem;
const move = { ArrowDown: "\u2B07", ArrowUp: "\u2B06", ArrowRight: "\u27A1\uFE0F", ArrowLeft: "\u2B05\uFE0F" }[event.key];
if (!move) return;
if (move === "\u2B05\uFE0F") {
const parent = event.currentTarget.parentElement;
if (parent) {
listItem = parent.previousElementSibling;
}
} else if (move === "\u27A1\uFE0F") {
const parent = event.currentTarget.parentElement;
if (parent) {
listItem = parent.nextElementSibling;
}
} else {
listItem = event.currentTarget.parentElement;
while (columns > 0 && listItem) {
if (move === "\u2B06") {
columns--;
listItem = listItem.previousElementSibling;
} else if (move === "\u2B07") {
columns--;
listItem = listItem.nextElementSibling;
}
}
}
if (listItem && listItem instanceof HTMLElement && listItem.tagName === "LI") {
const anchor = listItem.querySelector("a");
if (anchor) {
anchor.focus();
event.preventDefault();
}
}
}
// src/components/marketplace-search.tsx
import { isValidElement as isValidElement2, useMemo as useMemo3, useState as useState2 } from "react";
import fuzzy from "fuzzy";
import { Tabs as Tabs2 } from "nextra/components";
import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
var renderQueryPlaceholder = (placeholder, query) => {
if (!query || isValidElement2(placeholder)) {
return placeholder;
}
const subStrings = placeholder.split("{query}");
return /* @__PURE__ */ jsxs10(Fragment3, { children: [
subStrings[0],
" ",
/* @__PURE__ */ jsxs10("strong", { children: [
'"',
query,
'"'
] }),
" ",
subStrings[1]
] });
};
var MarketplaceSearch = ({
title,
tagsFilter,
placeholder,
primaryList,
secondaryList,
queryList,
className,
colorScheme = "neutral"
}) => {
const [query, setQuery] = useState2("");
const handleTagClick = (tagName) => {
if (query.includes(`#${tagName}`)) {
setQuery(query.replace(`#${tagName}`, "").trim());
} else {
setQuery((prev) => `${prev} #${tagName}`);
}
};
const items = useMemo3(() => {
if (query && queryList) {
const tags = query.split(/\s+/).filter((e) => e.startsWith("#")).map((e) => e.replace("#", ""));
let filteredItems = queryList.items;
if (tags.length > 0) {
filteredItems = queryList.items.filter((item) => tags.every((e) => item.tags?.includes(e)));
}
const matchedResults = fuzzy.filter(
// Removes tags and all special characters from the query string for better fuzzy matching
// query
query.replace(/#\w+/gi, "").replace(/[^\w\s]/gi, "").trim(),
// Mapping the queryList items into a list of strings including the titles
filteredItems.map((e) => e.title)
).map((e) => e.original.toLowerCase());
return queryList.items.filter((e) => matchedResults.includes(e.title.toLowerCase()));
}
}, [query, queryList]);
return /* @__PURE__ */ jsx16(
"section",
{
className: cn(
// --bg and --fg are defined in style.css under .MarketplaceSearch
"MarketplaceSearch",
colorScheme,
"bg-[--bg]",
className
),
children: /* @__PURE__ */ jsxs10("div", { className: "container max-w-[90rem] py-12", children: [
/* @__PURE__ */ jsx16(Heading, { as: "h1", className: "mb-4 text-[32px] text-[--fg]", size: "sm", children: title }),
tagsFilter && /* @__PURE__ */ jsx16(TagsContainer, { focusgroup: "horizontal", children: tagsFilter.map((tagName, i) => /* @__PURE__ */ jsx16(
Tag,
{
selected: query.includes(`#${tagName}`),
onClick: () => handleTagClick(tagName),
tabIndex: i === 0 ? 0 : -1,
children: tagName
},
tagName
)) }),
/* @__PURE__ */ jsx16(
MarketplaceSearchInput,
{
onChange: setQuery,
value: query,
placeholder,
className: "mt-4"
}
),
items && queryList ? /* @__PURE__ */ jsx16(
MarketplaceList,
{
title: queryList.title,
items,
placeholder: renderQueryPlaceholder(queryList.placeholder, query),
pagination: queryList.pagination,
colorScheme
}
) : /* @__PURE__ */ jsx16(
MarketplaceSearchTabs,
{
tabs: [primaryList, secondaryList],
colorScheme,
className: "mt-8"
}
)
] })
}
);
};
function MarketplaceSearchInput({
onChange,
value,
placeholder,
className
}) {
return /* @__PURE__ */ jsx16("div", { className: "border-b border-[--fg-60]", children: /* @__PURE__ */ jsxs10("div", { className: cn("hive-focus-within flex items-center rounded px-2", className), children: [
/* @__PURE__ */ jsx16(SvgSearch, { className: "text-[--fg-80]" }),
/* @__PURE__ */ jsx16(
"input",
{
value,
type: "search",
placeholder,
onChange: (event) => onChange(event.currentTarget.value),
className: "ml-2 w-full border-0 bg-transparent py-2 font-medium text-[--fg] outline-none placeholder:text-[--fg-60] [&::-webkit-search-cancel-button]:hidden"
}
),
/* @__PURE__ */ jsx16(
"button",
{
onClick: () => onChange(""),
tabIndex: -1,
className: "flex size-6 items-center justify-center rounded-sm",
children: /* @__PURE__ */ jsx16(SvgClose, { className: "size-5 text-[--fg-80]" })
}
)
] }) });
}
function MarketplaceSearchTabs({
tabs: lists,
colorScheme,
className
}) {
const items = lists.filter(
(list) => list?.title != null
);
return /* @__PURE__ */ jsx16("div", { className, children: /* @__PURE__ */ jsx16(
Tabs2,
{
items: items.map((list) => list.title),
className: "grid grid-cols-2 gap-1 rounded-2xl border-none bg-neutral-800 [.green_&]:!bg-green-900 [.light_&]:bg-neutral-100 [.light_&]:text-green-200",
tabClassName: cn(
"rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 hover:bg-neutral-700/50 hover:text-white aria-selected:!cursor-default aria-selected:!bg-[--fg] aria-selected:!text-[--bg] sm:p-4 sm:text-base [.green_&]:!bg-green-900 [.green_&]:!text-green-200 [.green_&]:hover:!bg-green-700/25 [.green_&]:hover:!text-green-100 [.green_&]:aria-selected:!bg-green-300 [.green_&]:aria-selected:!text-green-800 [.light_&]:bg-neutral-100 [.light_&]:text-neutral-800 [.light_&]:hover:bg-neutral-200/80 [.light_&]:hover:text-neutral-900"
),
children: items.map((list, i) => /* @__PURE__ */ jsx16(Tabs2.Tab, { tabIndex: -1, children: /* @__PURE__ */ jsx16(
MarketplaceList,
{
...list,
title: void 0,
colorScheme
}
) }, i))
}
) });
}
// src/components/mdx-components.tsx
import { useRouter as useRouter2 } from "next/router";
import clsx11 from "clsx";
import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
var mdxComponents = {
source({ src, type, ...props }) {
if (!src) {
throw new Error("Must provide `src` prop");
}
let ext = src.replace(/.*\./, "");
if (ext === "mov") {
ext = "quicktime";
}
return /* @__PURE__ */ jsx17("source", { ...props, src, type: type || `video/${ext}` });
},
video: ({ className, children, ...props }) => /* @__PURE__ */ jsxs11("video", { className: clsx11("mt-6 w-full", className), autoPlay: true, loop: true, muted: true, ...props, children: [
children,
"Your browser does not support HTML video."
] }),
iframe: ({ className, ...props }) => /* @__PURE__ */ jsx17(
"iframe",
{
className: clsx11("mt-6 aspect-video w-full", className),
title: "YouTube Video Player",
allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
allowFullScreen: true,
...props
}
),
img({ src = "", alt, ...props }) {
const { basePath } = useRouter2();
if (!src.startsWith("http")) {
console.warn("Image", src, "doesn't use NextImage");
}
return /* @__PURE__ */ jsx17("img", { ...props, src: src.startsWith("/") ? basePath + src : src, alt });
}
};
// src/components/npm-badge.tsx
import { jsx as jsx18 } from "react/jsx-runtime";
var NPMBadge = ({ name }) => {
const encodedPackage = encodeURIComponent(name);
return /* @__PURE__ */ jsx18(Anchor, { href: `https://npmjs.com/package/${encodedPackage}`, newWindow: true, children: /* @__PURE__ */ jsx18(
"img",
{
src: `https://badge.fury.io/js/${encodedPackage}.svg`,
alt: "npm version",
className: "h-6"
}
) });
};
// src/components/guild-navbar-logo.tsx
import clsx12 from "clsx";
import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
function GuildUnifiedLogo({
children,
title,
description
}) {
return /* @__PURE__ */ jsxs12(Fragment4, { children: [
/* @__PURE__ */ jsxs12(
Anchor,
{
title: "View our website",
className: clsx12(
"flex items-center gap-x-1.5 transition-opacity hover:opacity-75",
children && "max-md:hidden"
),
href: "https://the-guild.dev",
children: [
/* @__PURE__ */ jsx19(SvgGuild, { className: "h-9 w-auto" }),
/* @__PURE__ */ jsx19(SvgTheGuild, { className: "w-11" })
]
}
),
children && /* @__PURE__ */ jsxs12(Fragment4, { children: [
/* @__PURE__ */ jsx19(
"svg",
{
height: "22",
viewBox: "0 0 10 22",
stroke: "currentColor",
className: "mx-6 shrink-0 max-md:hidden",
children: /* @__PURE__ */ jsx19("path", { d: "M8.6001 0.833313L0.600097 20.8333" })
}
),
/* @__PURE__ */ jsxs12(
Anchor,
{
title,
className: "flex shrink-0 items-center gap-x-1.5 hover:opacity-75",
href: "/",
children: [
typeof children === "function" ? children({}) : children,
/* @__PURE__ */ jsxs12("div", { children: [
/* @__PURE__ */ jsx19("h1", { className: "text-sm font-bold leading-tight", children: title }),
/* @__PURE__ */ jsx19("h2", { className: "text-xs max-lg:hidden", children: description })
] })
]
}
)
] })
] });
}
function getNavbarLogo(logo, websiteName, description) {
return websiteName === "Hive" ? /* @__PURE__ */ jsx19(Anchor, { title: websiteName, href: "/", children: typeof logo === "function" ? logo({}) : logo }) : /* @__PURE__ */ jsx19(GuildUnifiedLogo, { description, title: websiteName, children: logo });
}
// src/components/theme-switcher.tsx
import { useTheme } from "nextra-theme-docs";
import { jsx as jsx20 } from "react/jsx-runtime";
function ThemeSwitcherButton() {
const { resolvedTheme, setTheme } = useTheme();
return /* @__PURE__ */ jsx20(
"button",
{
onClick: () => setTheme(resolvedTheme === "light" ? "dark" : "light"),
className: "self-center rounded-sm p-2 outline-none focus-visible:ring",
children: /* @__PURE__ */ jsx20(SvgMoon, { className: "fill-transparent stroke-gray-500 dark:fill-gray-100 dark:stroke-gray-100" })
}
);
}
// src/components/company-menu.tsx
import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
var productsItems = Object.fromEntries(
Object.values(PRODUCTS).map((product) => [
product.name,
{
title: /* @__PURE__ */ jsxs13("span", { className: "flex items-center gap-2", title: product.title, children: [
/* @__PURE__ */ jsx21(product.logo, { className: "size-7 shrink-0" }),
product.name
] }),
href: product.href
}
])
);
function addGuildCompanyMenu(items) {
return [
{
type: "menu",
title: "Company",
items: {
about: {
title: "About",
href: "https://the-guild.dev/about-us",
newWindow: true
},
blog: {
title: "Blog",
href: "https://the-guild.dev/blog",
newWindow: true
},
contact: {
title: "Contact",
href: "https://the-guild.dev/#get-in-touch",
newWindow: true
}
},
name: "company",
route: "#"
},
{
type: "menu",
title: "Products",
items: productsItems,
name: "products",
route: "#"
},
...items
];
}
// src/components/call-to-action.tsx
import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
var variantStyles = {
primary: cn(
"bg-primary hover:bg-green-800 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800 dark:bg-neutral-100 dark:text-neutral-800 dark:hover:bg-white dark:hover:text-neutral-900"
),
"primary-inverted": cn(
"bg-primary hover:bg-white focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-white/40"
),
secondary: cn(
"bg-green-300 hover:bg-green-200 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-300/40"
),
"secondary-inverted": cn(
"bg-green-800 text-white hover:bg-green-700 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800/40"
),
tertiary: cn(
"bg-transparent text-green-1000 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-green-800"
)
};
function CallToAction(props) {
const className = cn(
"relative flex items-center justify-center gap-2 text-nowrap rounded-lg px-6 py-3 font-medium leading-6 text-green-1000 focus-visible:outline focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-fit dark:text-neutral-200 [&:hover>:first-child]:-inset-px [&:hover>:first-child]:rounded-[9px]",
variantStyles[props.variant],
props.className
);
if ("href" in props && typeof props.href === "string") {
const { className: _12, variant: _22, children: children2, ...rest2 } = props;
return /* @__PURE__ */ jsxs14(Anchor, { className, ...rest2, children: [
/* @__PURE__ */ jsx22("div", { className: "absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" }),
children2
] });
}
const { className: _1, variant: _2, children, ...rest } = props;
return /* @__PURE__ */ jsxs14("button", { className, ...rest, children: [
/* @__PURE__ */ jsx22("div", { className: "absolute inset-0 rounded-lg border border-green-800 dark:border-neutral-200" }),
children
] });
}
// src/components/decorations/arch-decoration.svg
import { jsx as jsx23 } from "react/jsx-runtime";
var SvgArchDecoration = (props) => /* @__PURE__ */ jsx23("svg", { width: 432, height: 432, viewBox: "0 0 432 432", preserveAspectRatio: "xMidYMid meet", ...props, children: /* @__PURE__ */ jsx23("path", { d: "M.75 431v.25h90.24V160.868c0-38.596 31.282-69.878 69.878-69.878H431.25V.75H191.864a47.017 47.017 0 0 0-33.23 13.771l-68.07 68.071-7.972 7.971-68.07 68.071A47.018 47.018 0 0 0 .75 191.864V431Z", fill: "url(#arch-decoration-a)", stroke: "url(#arch-decoration-b)", strokeWidth: 0.5 }) });
// src/components/decorations/arch-decoration-gradient-defs.svg
import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
var SvgArchDecorationGradientDefs = (props) => /* @__PURE__ */ jsx24("svg", { width: 432, height: 432, viewBox: "0 0 432 432", className: "absolute -z-10", ...props, children: /* @__PURE__ */ jsxs15("defs", { children: [
/* @__PURE__ */ jsxs15("linearGradient", { id: "arch-decoration-a", x1: 48.5, y1: 53.5, x2: 302.5, y2: 341, gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ jsx24("stop", { stopColor: "#fff", stopOpacity: 0.1 }),
/* @__PURE__ */ jsx24("stop", { offset: 1, stopColor: "#fff", stopOpacity: 0.3 })
] }),
/* @__PURE__ */ jsxs15("linearGradient", { id: "arch-decoration-b", x1: 1, y1: 1, x2: 431, y2: 431, gradientUnits: "userSpaceOnUse", children: [
/* @__PURE__ */ jsx24("stop", { stopColor: "#fff", stopOpacity: 0.1 }),
/* @__PURE__ */ jsx24("stop", { offset: 1, stopColor: "#fff", stopOpacity: 0.4 })
] })
] }) });
// src/components/decorations/highlight-decoration.svg
import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
var SvgHighlightDecoration = (props) => /* @__PURE__ */ jsxs16("svg", { width: 895, height: 674, viewBox: "0 0 895 674", fill: "#86B6C1", className: "firefox-highlight-fix", ...props, children: [
/* @__PURE__ */ jsx25("g", { filter: "url(#filter0_f_711_1774)", children: /* @__PURE__ */ jsx25("path", { d: "M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z" }) }),
/* @__PURE__ */ jsx25("defs", { children: /* @__PURE__ */ jsxs16("filter", { id: "filter0_f_711_1774", x: -305176e-10, y: -372, width: 1244, height: 1244, filterUnits: "userSpaceOnUs