@theguild/components 9.1.3 → 9.2.0-alpha-20250120155516-f6c928d42d6c65e4326439560d386eab1e950d46

package/dist/components/anchor.js

@@ -1,9 +1,9 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import NextLink from "next/link";
-import clsx from "clsx";
+import { cn } from "../cn";
 const Anchor = forwardRef(function Anchor2({ href = "", children, newWindow, className, ...props }, forwardedRef) {
-  const classes = clsx(className, "outline-none transition focus-visible:ring");
+  const classes = cn("outline-none focus-visible:ring", className);
   if (typeof href === "string") {
     if (href.startsWith("#")) {
       return /* @__PURE__ */ jsx("a", { ref: forwardedRef, href, className: classes, ...props, children });

package/dist/components/hive-footer/index.js

@@ -5,6 +5,7 @@ import { HiveCombinationMark } from "../../logos";
 import { FOUR_MAIN_PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from "../../products";
 import { Anchor } from "../anchor";
 import { ContactTextLink } from "../contact-us";
+import { __LANDING_WIDTHS_ID } from "../hive-layout-config";
 import {
   CSAStarLevelOneIcon,
   DiscordIcon,
@@ -13,6 +14,13 @@ import {
   TwitterIcon,
   YouTubeIcon
 } from "../icons/index";
+const INNER_BOX_WIDTH_STYLE = "max-w-[90rem] [body:has(#hive-l-widths)_&]:max-w-[75rem] [body:has(#hive-l-widths)_&]:mx-4";
+if (process.env.NODE_ENV === "development") {
+  console.assert(
+    __LANDING_WIDTHS_ID === "hive-l-widths",
+    "__LANDING_WIDTHS_ID diverged from the className used in HiveFooter."
+  );
+}
 function HiveFooter({
   className,
   logo = /* @__PURE__ */ jsx(HiveCombinationMark, { className: "h-8 w-auto" }),
@@ -21,58 +29,73 @@ function HiveFooter({
   items
 }) {
   items = { ...HiveFooter.DEFAULT_ITEMS, ...items };
-  return /* @__PURE__ */ jsxs("footer", { className: cn("relative flex justify-center px-4 py-6 xl:px-[120px]", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "mx-4 grid w-full max-w-[75rem] grid-cols-1 gap-x-6 text-green-800 max-lg:gap-y-16 sm:grid-cols-4 lg:gap-x-8 xl:gap-x-10 dark:text-neutral-400", children: [
-      /* @__PURE__ */ jsxs("div", { className: "max-lg:col-span-full", children: [
-        /* @__PURE__ */ jsx(
-          Anchor,
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      className: cn("relative flex justify-center px-4 pb-6 pt-[72px] xl:px-[120px]", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            href,
-            className: "hive-focus -m-1.5 flex rounded p-1.5 text-green-1000 dark:text-white",
-            children: logo
+            className: cn(
+              "grid w-full grid-cols-1 gap-x-6 text-green-800 max-lg:gap-y-16 sm:grid-cols-4 lg:gap-x-8 xl:gap-x-10 dark:text-neutral-400",
+              INNER_BOX_WIDTH_STYLE
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "max-lg:col-span-full", children: [
+                /* @__PURE__ */ jsx(
+                  Anchor,
+                  {
+                    href,
+                    className: "hive-focus -m-1.5 flex rounded p-1.5 text-green-1000 dark:text-white",
+                    children: logo
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { className: "mt-6 lg:mt-8", children: description })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "col-span-full grid grid-flow-row grid-cols-2 justify-stretch gap-6 text-sm sm:col-span-4 sm:grid-cols-3 lg:col-span-3 lg:pb-12 lg:text-base", children: [
+                /* @__PURE__ */ jsx(List, { heading: "Products", links: productLinks }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[inherit]", children: [
+                  /* @__PURE__ */ jsx(List, { heading: "Developer", links: items.developer }),
+                  /* @__PURE__ */ jsx(List, { heading: "Resources", links: items.resources })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[inherit]", children: [
+                  /* @__PURE__ */ jsx(List, { heading: "Company", links: items.company }),
+                  items.links?.map((link, i) => /* @__PURE__ */ jsx(
+                    Anchor,
+                    {
+                      className: "hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100",
+                      ...link
+                    },
+                    i
+                  )),
+                  /* @__PURE__ */ jsx(ContactTextLink, {})
+                ] }),
+                /* @__PURE__ */ jsx(CSAStarLink, { className: "sm:col-start-[-1] lg:col-start-[-2]" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "col-span-full flex flex-wrap justify-between gap-x-[inherit] gap-y-8 lg:w-full lg:pb-2 lg:pt-8", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex gap-6 lg:order-1", children: SOCIAL_ICONS.map(({ icon: Icon, ...iconProps }) => /* @__PURE__ */ jsx(
+                  Anchor,
+                  {
+                    className: "hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100",
+                    ...iconProps,
+                    children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-auto" })
+                  },
+                  iconProps.title
+                )) }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+                  "\xA9 ",
+                  (/* @__PURE__ */ new Date()).getFullYear(),
+                  " The Guild"
+                ] })
+              ] })
+            ]
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "mt-6 lg:mt-8", children: description })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "col-span-full grid grid-flow-row grid-cols-2 justify-stretch gap-6 text-sm sm:col-span-4 sm:grid-cols-3 lg:col-span-3 lg:pb-12 lg:text-base", children: [
-        /* @__PURE__ */ jsx(List, { heading: "Products", links: productLinks }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[inherit]", children: [
-          /* @__PURE__ */ jsx(List, { heading: "Developer", links: items.developer }),
-          /* @__PURE__ */ jsx(List, { heading: "Resources", links: items.resources })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[inherit]", children: [
-          /* @__PURE__ */ jsx(List, { heading: "Company", links: items.company }),
-          items.links?.map((link, i) => /* @__PURE__ */ jsx(
-            Anchor,
-            {
-              className: "hive-focus -m-2 rounded p-2 font-medium hover:text-blue-700 hover:underline dark:hover:text-blue-100",
-              ...link
-            },
-            i
-          )),
-          /* @__PURE__ */ jsx(ContactTextLink, {})
-        ] }),
-        /* @__PURE__ */ jsx(CSAStarLink, { className: "sm:col-start-[-1] lg:col-start-[-2]" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "col-span-full flex flex-wrap justify-between gap-x-[inherit] gap-y-8 lg:w-full lg:pb-2 lg:pt-8", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex gap-6 lg:order-1", children: SOCIAL_ICONS.map(({ icon: Icon, ...iconProps }) => /* @__PURE__ */ jsx(
-          Anchor,
-          {
-            className: "hive-focus -m-1 rounded-md p-1 hover:text-blue-700 dark:hover:text-blue-100",
-            ...iconProps,
-            children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-auto" })
-          },
-          iconProps.title
-        )) }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
-          "\xA9 ",
-          (/* @__PURE__ */ new Date()).getFullYear(),
-          " The Guild"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(DecorationArch, { className: "pointer-events-none absolute bottom-0 left-0 hidden mix-blend-multiply lg:block dark:opacity-5 dark:mix-blend-normal" })
-  ] });
+        /* @__PURE__ */ jsx(DecorationArch, { className: "pointer-events-none absolute bottom-0 left-0 hidden mix-blend-multiply lg:block dark:opacity-5 dark:mix-blend-normal" })
+      ]
+    }
+  );
 }
 function List({
   heading,

package/dist/components/hive-layout-config.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * @internal Don't expose this to websites.
+ */
+declare const __LANDING_WIDTHS_ID = "hive-l-widths";
+interface HiveLayoutConfigProps {
+    widths: 'landing-narrow' | 'docs-wide';
+}
+/**
+ * @see {@link HiveLayout} from `@theguild/components/server` for documentation.
+ */
+declare function HiveLayoutConfig({ widths }: HiveLayoutConfigProps): react_jsx_runtime.JSX.Element | null;
+
+export { HiveLayoutConfig, type HiveLayoutConfigProps, __LANDING_WIDTHS_ID };

package/dist/components/hive-layout-config.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+const __LANDING_WIDTHS_ID = "hive-l-widths";
+function HiveLayoutConfig({ widths }) {
+  return widths === "landing-narrow" ? /* @__PURE__ */ jsx("div", { id: __LANDING_WIDTHS_ID }) : null;
+}
+export {
+  HiveLayoutConfig,
+  __LANDING_WIDTHS_ID
+};

package/dist/components/hive-navigation/index.d.mts

@@ -1,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import react__default, { ReactNode, ReactElement, ComponentProps } from 'react';
-import { Search } from 'nextra/components';
 export { GraphQLConfCard, GraphQLConfCardProps } from './graphql-conf-card.mjs';
 import 'next/image';
 
@@ -19,7 +18,6 @@ type HiveNavigationProps = {
     }[];
     developerMenu: DeveloperMenuProps['developerMenu'];
     search?: ReactElement;
-    searchProps?: ComponentProps<typeof Search>;
 };
 /**
  *

package/dist/components/hive-navigation/index.js

@@ -18,6 +18,7 @@ import { GraphQLFoundationLogo, GuildLogo, HiveCombinationMark, TheGuild } from
 import { PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from "../../products";
 import { Anchor } from "../anchor";
 import { CallToAction } from "../call-to-action";
+import { __LANDING_WIDTHS_ID } from "../hive-layout-config";
 import {
   AccountBox,
   AppsIcon,
@@ -38,6 +39,13 @@ import {
 } from "./navigation-menu";
 export * from "./graphql-conf-card";
 const ENTERPRISE_MENU_HIDDEN = true;
+const WIDTH_STYLE = "max-w-[90rem] [body:has(#hive-l-widths)_&]:max-w-[1392px]";
+if (process.env.NODE_ENV === "development") {
+  console.assert(
+    __LANDING_WIDTHS_ID === "hive-l-widths",
+    "__LANDING_WIDTHS_ID diverged from the className used in HiveNavigation."
+  );
+}
 function HiveNavigation({
   companyMenuChildren,
   children,
@@ -51,7 +59,9 @@ function HiveNavigation({
     }
   ],
   developerMenu,
-  search = /* @__PURE__ */ jsx(Search, {})
+  // we need the background transition disabled to avoid an unpleasant flicker
+  // when navigating from a forced light mode page to a dark mode page
+  search = /* @__PURE__ */ jsx(Search, { className: "[&_input]:transition-none" })
 }) {
   const containerRef = useRef(null);
   return /* @__PURE__ */ jsxs(
@@ -59,8 +69,8 @@ function HiveNavigation({
     {
       ref: containerRef,
       className: cn(
-        "sticky top-0 z-20 border-b border-beige-400/[var(--border-opacity)] bg-[rgb(var(--nextra-bg))] px-6 py-4 text-green-1000 transition-[border-color] duration-500 md:mb-[7px] md:mt-2 dark:border-neutral-700/[var(--border-opacity)] dark:text-neutral-200 [&.light]:border-beige-400/[var(--border-opacity)] [&.light]:bg-white [&.light]:text-green-1000",
-        className?.includes("light") && "light"
+        "sticky top-0 z-20 border-b border-beige-400/[var(--border-opacity)] bg-[rgb(var(--nextra-bg))] px-6 py-4 text-green-1000 transition-[border-color] duration-500 md:mb-[7px] md:mt-2 dark:border-neutral-700/[var(--border-opacity)] dark:text-neutral-200",
+        WIDTH_STYLE
       ),
       style: { "--border-opacity": 0 },
       children: [

package/dist/components/index.d.mts

@@ -18,7 +18,6 @@ export { GetYourAPIGameRightSection } from './get-your-api-game-right-section.mj
 export { HiveNavigation, HiveNavigationProps } from './hive-navigation/index.mjs';
 export { HiveFooter } from './hive-footer/index.mjs';
 export { ToolsAndLibrariesCards } from './tools-and-libraries-cards/index.mjs';
-export { Hero } from './hero/index.mjs';
 export { AncillaryProductCard, MainProductCard, ProductCard, ProductCardProps } from './product-card/index.mjs';
 export { DecorationIsolation } from './decorations/index.mjs';
 export { CallToAction, CallToActionProps } from './call-to-action.mjs';
@@ -34,6 +33,7 @@ export { VersionDropdown, VersionDropdownProps } from './version-dropdown.mjs';
 export { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from './dropdown.mjs';
 export { FrequentlyAskedQuestions } from './faq/index.mjs';
 export { ComparisonTable } from './comparison-table/index.mjs';
+export { HiveLayoutConfig } from './hive-layout-config.mjs';
 export { GraphQLConfCard, GraphQLConfCardProps } from './hive-navigation/graphql-conf-card.mjs';
 import 'react';
 import 'url';
@@ -42,7 +42,6 @@ import 'next/image';
 import 'next/link';
 import 'react-player';
 import 'react/jsx-runtime';
-import 'nextra/components';
 import '../products.mjs';
 import '@giscus/react';
 import './faq/attach-page-faq-schema.mjs';

package/dist/components/index.js

@@ -17,7 +17,6 @@ import { GetYourAPIGameRightSection } from "./get-your-api-game-right-section";
 import { HiveNavigation, GraphQLConfCard } from "./hive-navigation";
 import { HiveFooter } from "./hive-footer";
 import { ToolsAndLibrariesCards } from "./tools-and-libraries-cards";
-import { Hero } from "./hero";
 export * from "./product-card";
 export * from "./decorations";
 export * from "./call-to-action";
@@ -34,6 +33,7 @@ export * from "./version-dropdown";
 export * from "./dropdown";
 import { FrequentlyAskedQuestions } from "./faq";
 import { ComparisonTable } from "./comparison-table";
+import { HiveLayoutConfig } from "./hive-layout-config";
 export {
   Anchor,
   Button,
@@ -44,12 +44,12 @@ export {
   GetYourAPIGameRightSection,
   Giscus,
   GraphQLConfCard,
-  Hero,
   HeroGradient,
   HeroIllustration,
   HeroMarketplace,
   HeroVideo,
   HiveFooter,
+  HiveLayoutConfig,
   HiveNavigation,
   Image,
   InfoList,

package/dist/index.d.mts

@@ -21,7 +21,6 @@ export { GetYourAPIGameRightSection } from './components/get-your-api-game-right
 export { HiveNavigation, HiveNavigationProps } from './components/hive-navigation/index.mjs';
 export { HiveFooter } from './components/hive-footer/index.mjs';
 export { ToolsAndLibrariesCards } from './components/tools-and-libraries-cards/index.mjs';
-export { Hero } from './components/hero/index.mjs';
 export { AncillaryProductCard, MainProductCard, ProductCard, ProductCardProps } from './components/product-card/index.mjs';
 export { DecorationIsolation } from './components/decorations/index.mjs';
 export { CallToAction, CallToActionProps } from './components/call-to-action.mjs';
@@ -37,6 +36,7 @@ export { VersionDropdown, VersionDropdownProps } from './components/version-drop
 export { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from './components/dropdown.mjs';
 export { FrequentlyAskedQuestions } from './components/faq/index.mjs';
 export { ComparisonTable } from './components/comparison-table/index.mjs';
+export { HiveLayoutConfig } from './components/hive-layout-config.mjs';
 export { PRODUCTS } from './products.mjs';
 export { IEditorProps, IFeatureListProps, IHeroGradientProps, IHeroIllustrationProps, IHeroMarketplaceProps, IHeroVideoProps, IInfoListProps, ILink, IMarketplaceItemProps, IMarketplaceItemsProps, IMarketplaceListProps, IMarketplaceSearchProps, ISchemaPageProps } from './types/components.mjs';
 export { AngularLettermark, ConductorLettermark, ConfigLettermark, EnvelopLettermark, FetsLettermark, GraphQLESlintLettermark, HeltinLettermark, InspectorLettermark, KitQLLettermark, ModulesLettermark, SSELettermark, ScalarsLettermark, SofaLettermark, StitchingLettermark, ToolsLettermark, WSLettermark, WhatsAppLettermark } from './logos/index.mjs';

package/dist/server/body.client.d.mts

@@ -1,8 +1,8 @@
-import { FC, ReactNode } from 'react';
+import { DetailedHTMLProps, HtmlHTMLAttributes, FC } from 'react';
 
-declare const Body: FC<{
-    lightOnlyPages: string[];
-    children: ReactNode;
-}>;
+interface BodyProps extends DetailedHTMLProps<HtmlHTMLAttributes<HTMLBodyElement>, HTMLBodyElement> {
+    lightOnlyPages?: string[];
+}
+declare const Body: FC<BodyProps>;
 
-export { Body };
+export { Body, type BodyProps };

package/dist/server/body.client.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { usePathname } from "next/navigation";
-const Body = ({ lightOnlyPages, children }) => {
+import { cn } from "../cn";
+const Body = ({ lightOnlyPages, children, className, ...rest }) => {
   const pathname = usePathname();
-  const isLightOnlyPage = lightOnlyPages.includes(pathname);
-  return /* @__PURE__ */ jsx("body", { className: isLightOnlyPage ? "light text-green-1000" : void 0, children });
+  const isLightOnlyPage = lightOnlyPages?.includes(pathname);
+  return /* @__PURE__ */ jsx("body", { className: cn(className, isLightOnlyPage && "light text-green-1000"), ...rest, children });
 };
 export {
   Body

package/dist/server/hive-layout.d.mts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DetailedHTMLProps, HtmlHTMLAttributes, ReactNode, ReactElement } from 'react';
+
+interface HiveLayoutProps extends DetailedHTMLProps<HtmlHTMLAttributes<HTMLHtmlElement>, HTMLHtmlElement> {
+    children: ReactNode;
+    head: ReactNode;
+    navbar: ReactElement;
+    footer: ReactElement;
+    fontFamily: string;
+    lightOnlyPages: string[];
+    bodyProps?: DetailedHTMLProps<HtmlHTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
+}
+/**
+ * Alternative to `GuildLayout` for Hive-branded websites.
+ *
+ * Accepts navbar and footer as slots/children props, because they're highly customizable,
+ * and their defaults belong to HiveNavigation and HiveFooter component default props.
+ *
+ * ## Configuration
+ *
+ * Pages can differ by widths and supported color schemes:
+ *
+ * - The footer in docs has 90rem width, in landing pages it has 75rem.
+ * - The navbar in docs has 90rem width, in landing pages it has 1392px.
+ * - Landing pages only support light mode for _business and prioritization reasons_.
+ *
+ * TODO: Consider unifying this in design phase.
+ *
+ * For now, a page or a layout can configue these as follows:
+ *
+ * ### Light-only pages
+ *
+ * @example
+ * ```tsx
+ * <HiveLayout bodyProps={{ lightOnlyPages: ['/', '/friends'] }} />
+ * ```
+ *
+ * This will force light theme to the pages with paths `/` and `/friends`,
+ * by adding `.light` class to the <body /> element.
+ *
+ * ### Landing page widths
+ *
+ * @example
+ * ```tsx
+ * import { HiveLayoutConfig } from '@theguild/components'
+ *
+ * <HiveLayoutConfig widths="landing-narrow" />
+ * ```
+ */
+declare const HiveLayout: ({ children, head, navbar, footer, className, fontFamily, lightOnlyPages, bodyProps, ...rest }: HiveLayoutProps) => Promise<react_jsx_runtime.JSX.Element>;
+
+export { HiveLayout, type HiveLayoutProps };

package/dist/server/hive-layout.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Layout } from "nextra-theme-docs";
+import { Head } from "nextra/components";
+import { getPageMap } from "nextra/page-map";
+import { cn } from "../cn";
+import { Body } from "./body.client";
+const HiveLayout = async ({
+  children,
+  head,
+  navbar,
+  footer,
+  className,
+  fontFamily,
+  lightOnlyPages,
+  bodyProps,
+  ...rest
+}) => {
+  const pageMap = await getPageMap();
+  return /* @__PURE__ */ jsxs(
+    "html",
+    {
+      lang: "en",
+      dir: "ltr",
+      suppressHydrationWarning: true,
+      className: cn("font-sans", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(Head, { children: [
+          /* @__PURE__ */ jsx("style", {
+            /* css */
+            children: `
+          :root {
+            --font-sans: ${fontFamily};
+          }
+          :root.dark {
+            --nextra-primary-hue: 67.1deg;
+            --nextra-primary-saturation: 100%;
+            --nextra-primary-lightness: 55%;
+            --nextra-bg: 17, 17, 17;
+          }
+          :root.dark *::selection {
+            background-color: hsl(191deg 95% 72% / 0.25)
+          }
+          :root.light, :root.dark:has(body.light) {
+            --nextra-primary-hue: 191deg;
+            --nextra-primary-saturation: 40%;
+            --nextra-bg: 255, 255, 255;
+          }
+          
+          .x\\:tracking-tight,
+          .nextra-steps :is(h2, h3, h4) {
+            letter-spacing: normal;
+          }
+
+          html:has(body.light) {
+            scroll-behavior: smooth;
+            background: #fff;
+            color-scheme: light !important;
+          }
+          
+          html:has(body.light) .nextra-search-results mark {
+            background: oklch(0.611752 0.07807 214.47 / 0.8);
+          }
+          
+          html:has(body.light) .nextra-sidebar-footer {
+            display: none;
+          }
+          
+          #crisp-chatbox { z-index: 40 !important; }
+        `
+          }),
+          head
+        ] }),
+        /* @__PURE__ */ jsx(Body, { lightOnlyPages, ...bodyProps, children: /* @__PURE__ */ jsx(
+          Layout,
+          {
+            editLink: "Edit this page on GitHub",
+            docsRepositoryBase: "https://github.com/graphql-hive/platform/tree/main/packages/web/docs",
+            pageMap,
+            feedback: {
+              labels: "kind/docs"
+            },
+            sidebar: {
+              defaultMenuCollapseLevel: 1
+            },
+            navbar,
+            footer,
+            children
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  HiveLayout
+};

package/dist/server/index.d.mts

@@ -8,9 +8,10 @@ export { convertToPageMap, createIndexPage, getPageMap, mergeMetaWithPageMap, no
 export { evaluate } from 'nextra/evaluate';
 export { fetchPackageInfo } from './npm.mjs';
 export { sharedMetaItems } from './shared-meta-items.mjs';
-export { Body } from './body.client.mjs';
+export { Body, BodyProps } from './body.client.mjs';
 export { remarkLinkRewrite } from './remark-link-rewrite.mjs';
 export { GuildLayout, getDefaultMetadata } from './theme-layout.mjs';
+export { HiveLayout } from './hive-layout.mjs';
 import 'next/image';
 import 'nextra';
 import 'nextra/mdx-components/pre/index';

package/dist/server/index.js

@@ -12,12 +12,15 @@ import {
 import { evaluate } from "nextra/evaluate";
 import { fetchPackageInfo } from "./npm.js";
 import { sharedMetaItems } from "./shared-meta-items.js";
-import { Body } from "./body.client.js";
+import { Body, BodyProps } from "./body.client.js";
 import { remarkLinkRewrite } from "./remark-link-rewrite.js";
 import { GuildLayout, getDefaultMetadata } from "./theme-layout.js";
+import { HiveLayout } from "./hive-layout.js";
 export {
   Body,
+  BodyProps,
   GuildLayout,
+  HiveLayout,
   MDXRemote,
   compileMdx,
   convertToPageMap,

package/dist/server/mdx-components/mdx-components.d.mts

@@ -9,25 +9,27 @@ declare const useMDXComponents: (components?: object) => {
     object?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.ObjectHTMLAttributes<HTMLObjectElement>, HTMLObjectElement>, "ref">> | undefined;
     map?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>, "ref">> | undefined;
     filter?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGFilterElement>, "ref">> | undefined;
-    code: keyof react.JSX.IntrinsicElements | react.FC<react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & {
-        "data-language"?: string;
-    }> | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">>;
-    path?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGPathElement>, "ref">> | undefined;
     footer?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
-    set?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGSetElement>, "ref">> | undefined;
-    search?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
+    article?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     title?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, "ref">> | undefined;
+    menu?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.MenuHTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
+    search?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     big?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     link?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>, "ref">> | undefined;
     small?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     sub?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     sup?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
-    data?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>, "ref">> | undefined;
+    code: keyof react.JSX.IntrinsicElements | react.FC<react.ClassAttributes<HTMLElement> & react.HTMLAttributes<HTMLElement> & {
+        "data-language"?: string;
+    }> | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">>;
+    path?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGPathElement>, "ref">> | undefined;
+    set?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGSetElement>, "ref">> | undefined;
+    time?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, "ref">> | undefined;
+    span?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">> | undefined;
     a: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">>;
     abbr?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     address?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     area?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>, "ref">> | undefined;
-    article?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     aside?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     audio?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "ref">> | undefined;
     b?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
@@ -44,6 +46,7 @@ declare const useMDXComponents: (components?: object) => {
     cite?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     col?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.ColHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, "ref">> | undefined;
     colgroup?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.ColgroupHTMLAttributes<HTMLTableColElement>, HTMLTableColElement>, "ref">> | undefined;
+    data?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.DataHTMLAttributes<HTMLDataElement>, HTMLDataElement>, "ref">> | undefined;
     datalist?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDataListElement>, HTMLDataListElement>, "ref">> | undefined;
     dd?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     del?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.DelHTMLAttributes<HTMLModElement>, HTMLModElement>, "ref">> | undefined;
@@ -81,7 +84,6 @@ declare const useMDXComponents: (components?: object) => {
     li: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">> | ((props: Omit<react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">) => react_jsx_runtime.JSX.Element);
     main?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     mark?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
-    menu?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.MenuHTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     menuitem?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     meta?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>, "ref">> | undefined;
     meter?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.MeterHTMLAttributes<HTMLMeterElement>, HTMLMeterElement>, "ref">> | undefined;
@@ -108,7 +110,6 @@ declare const useMDXComponents: (components?: object) => {
     section?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     select?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">> | undefined;
     source?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.SourceHTMLAttributes<HTMLSourceElement>, HTMLSourceElement>, "ref">> | undefined;
-    span?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">> | undefined;
     strong?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;
     style?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement>, "ref">> | undefined;
     summary: keyof react.JSX.IntrinsicElements | react.FC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>> | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">>;
@@ -120,7 +121,6 @@ declare const useMDXComponents: (components?: object) => {
     tfoot?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">> | undefined;
     th: keyof react.JSX.IntrinsicElements | react.FC<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>> | react.FC<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">>;
     thead?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">> | undefined;
-    time?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, "ref">> | undefined;
     tr: keyof react.JSX.IntrinsicElements | react.FC<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>> | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref">>;
     track?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.TrackHTMLAttributes<HTMLTrackElement>, HTMLTrackElement>, "ref">> | undefined;
     u?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.1.3",
+  "version": "9.2.0-alpha-20250120155516-f6c928d42d6c65e4326439560d386eab1e950d46",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"
@@ -51,8 +51,8 @@
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "clsx": "2.1.1",
     "fuzzy": "0.1.3",
-    "nextra": "4.0.4",
-    "nextra-theme-docs": "4.0.4",
+    "nextra": "4.0.3",
+    "nextra-theme-docs": "4.0.3",
     "react-paginate": "8.2.0",
     "react-player": "2.16.0",
     "semver": "^7.3.8",

package/dist/components/hero/index.d.mts

@@ -1,12 +0,0 @@
-import { FC, ReactElement, ComponentProps, ReactNode } from 'react';
-
-declare const Hero: FC<{
-    className?: string;
-    heading: string;
-    text: string;
-    checkmarks: string[];
-    logo: ReactElement<ComponentProps<'svg'>>;
-    children?: ReactNode;
-}>;
-
-export { Hero };

package/dist/components/hero/index.js

@@ -1,132 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, useId } from "react";
-import { cn } from "../../cn";
-import { DecorationIsolation } from "../decorations";
-import { Heading } from "../heading";
-import { CheckIcon } from "../icons";
-const Hero = (props) => {
-  const gradientWhiteId = useId();
-  const gradientWhiteId2 = useId();
-  const greenBgId = useId();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "relative isolate mx-4 flex max-w-[90rem] flex-col items-center justify-center gap-6 overflow-hidden rounded-3xl bg-blue-400 px-4 py-6 max-sm:mt-2 sm:py-12 md:mx-6 md:gap-8 lg:py-24",
-        props.className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(DecorationIsolation, { className: "-z-10", children: [
-          cloneElement(props.logo, {
-            className: cn(
-              "absolute stroke-white/10 max-lg:hidden",
-              "-left-1/2 top-1/2 -translate-y-1/2"
-            ),
-            fill: `url(#${gradientWhiteId2})`,
-            strokeWidth: "0.1",
-            width: "auto",
-            height: "50%"
-          }),
-          cloneElement(props.logo, {
-            className: cn(
-              "absolute top-1/2 -translate-y-1/2 stroke-white/10",
-              "-right-1/2 lg:-right-1/3",
-              "h-2/3 lg:h-[calc(100%-5%)]"
-            ),
-            fill: `url(#${gradientWhiteId2})`,
-            strokeWidth: "0.1",
-            width: "auto"
-          })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          cloneElement(props.logo, {
-            fill: `url(#${gradientWhiteId})`,
-            className: "absolute inset-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2"
-          }),
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              width: "96",
-              height: "96",
-              viewBox: "0 0 96 96",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              children: [
-                /* @__PURE__ */ jsx("rect", { width: "96", height: "96", rx: "24", fill: `url(#${greenBgId})` }),
-                /* @__PURE__ */ jsx(
-                  "rect",
-                  {
-                    x: "0.5",
-                    y: "0.5",
-                    width: "95",
-                    height: "95",
-                    rx: "23.5",
-                    stroke: `url(#${gradientWhiteId})`
-                  }
-                ),
-                /* @__PURE__ */ jsx("path", { d: "M57.0264 32.1652H48.9577L53.8032 27.3197L48.4855 22L43.1658 27.3197L48.0114 32.1652H39.9427C38.9042 32.1652 37.9069 32.5786 37.1721 33.3134L23 47.4855L28.3197 52.8052L45.715 35.4099C47.2452 33.8797 49.7258 33.8797 51.2561 35.4099L68.6513 52.8052L73.971 47.4855L59.797 33.3114C59.0622 32.5767 58.0649 32.1632 57.0264 32.1632V32.1652ZM48.4854 63.3623L43.1665 68.6811L48.4854 74L53.8042 68.6811L48.4854 63.3623ZM39.9446 52.8054H48.4855H48.4894H57.0303C58.0688 52.8054 59.0661 53.2188 59.8008 53.9536L63.89 58.0428L58.5704 63.3625L51.258 56.0501C49.7277 54.5198 47.2472 54.5198 45.7169 56.0501L38.4045 63.3625L33.0848 58.0428L37.174 53.9536C37.9088 53.2188 38.9061 52.8054 39.9446 52.8054Z" }),
-                /* @__PURE__ */ jsxs("defs", { children: [
-                  /* @__PURE__ */ jsxs(
-                    "linearGradient",
-                    {
-                      id: greenBgId,
-                      x1: "0",
-                      y1: "0",
-                      x2: "96",
-                      y2: "96",
-                      gradientUnits: "userSpaceOnUse",
-                      children: [
-                        /* @__PURE__ */ jsx("stop", { stopColor: "#3B736A" }),
-                        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#15433C" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "linearGradient",
-                    {
-                      id: gradientWhiteId,
-                      x1: "0",
-                      y1: "0",
-                      x2: "96",
-                      y2: "96",
-                      gradientUnits: "userSpaceOnUse",
-                      children: [
-                        /* @__PURE__ */ jsx("stop", { stopColor: "white", stopOpacity: "0.8" }),
-                        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.4" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "linearGradient",
-                    {
-                      id: gradientWhiteId2,
-                      x1: "1",
-                      y1: "2",
-                      x2: "161",
-                      y2: "171",
-                      gradientUnits: "userSpaceOnUse",
-                      children: [
-                        /* @__PURE__ */ jsx("stop", { stopColor: "white", stopOpacity: "0.1" }),
-                        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.5" })
-                      ]
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(Heading, { as: "h1", size: "xl", className: "mx-auto max-w-3xl text-balance text-center", children: props.heading }),
-        /* @__PURE__ */ jsx("p", { className: "mx-auto w-[512px] max-w-[80%] text-center leading-6 text-green-800", children: props.text }),
-        /* @__PURE__ */ jsx("ul", { className: "mx-auto flex list-none gap-x-6 gap-y-2 text-sm font-medium max-md:flex-col", children: props.checkmarks.map((text) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-800" }),
-          text
-        ] }, text)) }),
-        /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center gap-2 px-0.5 max-sm:flex-col sm:gap-4", children: props.children })
-      ]
-    }
-  );
-};
-export {
-  Hero
-};