@theguild/components 8.2.0 → 8.2.1-alpha-20250106114612-d54bd2260536e5ca33c2efbea0be43efafccd2a9

package/dist/components/comparison-table/index.d.mts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { FC } from 'react';
+
+declare const ComparisonTable: FC<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>> & {
+    Row: FC<react.ClassAttributes<HTMLTableRowElement> & react.HTMLAttributes<HTMLTableRowElement> & {
+        highlight?: boolean;
+    }>;
+    Header: FC<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>>;
+    Cell: FC<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>>;
+};
+
+export { ComparisonTable };

package/dist/components/comparison-table/index.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@theguild/components";
+const Table = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      className: cn(
+        "x:block x:overflow-x-auto nextra-scrollbar overflow-x-auto rounded-2xl border border-green-200",
+        className
+      ),
+      ...props
+    }
+  );
+};
+const TableRow = ({
+  highlight,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("tr", { className: cn(highlight && "bg-green-100", className), ...props });
+};
+const cellStyle = cn(
+  "border border-green-200 p-4 first:border-l-0 last:border-r-0",
+  "[tbody_&]:border-b-0 [thead_&]:border-t-0",
+  "first:sticky",
+  "first:left-0",
+  "max-sm:first:drop-shadow-2xl",
+  "first:bg-[rgb(var(--nextra-bg))]"
+);
+const TableHeader = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("th", { className: cn(cellStyle, "font-medium", className), ...props });
+};
+const TableCell = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("td", { className: cn(cellStyle, className), ...props });
+};
+const ComparisonTable = Object.assign(Table, {
+  Row: TableRow,
+  Header: TableHeader,
+  Cell: TableCell
+});
+export {
+  ComparisonTable
+};

package/dist/components/decorations/highlight-decoration.js

@@ -6,7 +6,7 @@ const SvgHighlightDecoration = (props) => /* @__PURE__ */ jsxs("svg", { width: 8
     /* @__PURE__ */ jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
     /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: 175, result: "effect1_foregroundBlur_711_1774" })
   ] }) }),
-  /* @__PURE__ */ jsx("style", { children: "\n    @supports (-moz-appearance: none) {\n      .firefox-highlight-fix {\n        opacity: 0.3;\n        filter: blur(175px);\n      }\n    }\n  " })
+  /* @__PURE__ */ jsx("style", { children: "@supports (-moz-appearance: none) {\n      .firefox-highlight-fix {\n        opacity: 0.3;\n        filter: blur(175px);\n      }\n    }" })
 ] });
 export {
   SvgHighlightDecoration as ReactComponent

package/dist/components/explore-main-product-cards.js

@@ -25,7 +25,7 @@ function ExploreMainProductCards({
             TextLink,
             {
               href: isHive ? "/ecosystem" : "https://the-guild.dev/graphql/hive/ecosystem",
-              className: "mt-4 lg:mt-6",
+              className: "mt-4 text-green-800 lg:mt-6",
               children: [
                 "Learn more",
                 /* @__PURE__ */ jsx(ArrowIcon, {})

package/dist/components/faq/attach-page-faq-schema.d.mts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+
+declare const AttachPageFAQSchema: FC<{
+    faqPages: string[];
+}>;
+
+export { AttachPageFAQSchema };

package/dist/components/faq/attach-page-faq-schema.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+const AttachPageFAQSchema = ({ faqPages }) => {
+  const pathname = usePathname();
+  useEffect(() => {
+    const html = document.querySelector("html");
+    const path = pathname.replace("/graphql/hive", "/");
+    if (faqPages.includes(path) && !html.hasAttribute("itemscope")) {
+      html.setAttribute("itemscope", "");
+      html.setAttribute("itemtype", "https://schema.org/FAQPage");
+      return () => {
+        html.removeAttribute("itemscope");
+        html.removeAttribute("itemtype");
+      };
+    }
+  }, [pathname]);
+  return null;
+};
+export {
+  AttachPageFAQSchema
+};

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

@@ -0,0 +1,9 @@
+import { FC, ComponentProps, ReactElement } from 'react';
+import { AttachPageFAQSchema } from './attach-page-faq-schema.mjs';
+
+declare const FrequentlyAskedQuestions: FC<ComponentProps<typeof AttachPageFAQSchema> & {
+    className?: string;
+    children: ReactElement;
+}>;
+
+export { FrequentlyAskedQuestions };

package/dist/components/faq/index.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  cloneElement
+} from "react";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { cn } from "../../cn";
+import { Anchor } from "../anchor";
+import { Heading } from "../heading";
+import { AttachPageFAQSchema } from "./attach-page-faq-schema";
+const UnwrapChild = (props) => props.children;
+const a = (props) => /* @__PURE__ */ jsx(
+  Anchor,
+  {
+    className: "hive-focus rounded underline hover:text-blue-700",
+    ...props,
+    href: props.href,
+    children: props.children
+  }
+);
+const h2 = (props) => /* @__PURE__ */ jsx(Heading, { as: "h2", size: "md", className: "basis-1/2", ...props });
+const FrequentlyAskedQuestions = ({ className, faqPages, children }) => {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        className,
+        "flex flex-col gap-x-6 gap-y-2 px-4 py-6 text-green-1000 md:flex-row md:px-10 lg:gap-x-24 lg:px-[120px] lg:py-24"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(AttachPageFAQSchema, { faqPages }),
+        cloneElement(children, {
+          components: {
+            a,
+            h2,
+            p: UnwrapChild,
+            ul: Accordion,
+            li: AccordionItem
+          }
+        })
+      ]
+    }
+  );
+};
+const Accordion = (props) => /* @__PURE__ */ jsx(RadixAccordion.Root, { asChild: true, type: "single", collapsible: true, children: /* @__PURE__ */ jsx("ul", { className: "basis-1/2 divide-y divide-beige-400 max-xl:grow", ...props }) });
+const AccordionItem = (props) => {
+  const texts = Children.toArray(props.children).filter((child) => child !== "\n");
+  if (texts.length === 0) {
+    return null;
+  }
+  if (texts.length < 2) {
+    console.error(texts);
+    throw new Error(`Expected a question and an answer, got ${texts.length} items`);
+  }
+  const [first, ...answers] = texts;
+  const question = typeof first === "string" ? first : typeof first === "object" && "type" in first ? first.props.children : null;
+  if (!question) return null;
+  return /* @__PURE__ */ jsx(
+    RadixAccordion.Item,
+    {
+      asChild: true,
+      value: question,
+      className: "relative pb-0 focus-within:z-10 data-[state=open]:pb-4",
+      itemScope: true,
+      itemProp: "mainEntity",
+      itemType: "https://schema.org/Question",
+      children: /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx(RadixAccordion.Header, { children: /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: "hive-focus duration-[.8s] -mx-2 my-1 flex w-[calc(100%+1rem)] items-center justify-between rounded-xl bg-white px-2 py-3 text-left font-medium transition-colors hover:bg-beige-100/80 md:my-2 md:py-4", children: [
+          /* @__PURE__ */ jsx("span", { itemProp: "name", children: question }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-5 [[data-state='open']_&]:[transform:rotateX(180deg)]" })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          RadixAccordion.Content,
+          {
+            forceMount: true,
+            className: "overflow-hidden bg-white text-green-800 data-[state=closed]:hidden",
+            itemScope: true,
+            itemProp: "acceptedAnswer",
+            itemType: "https://schema.org/Answer",
+            children: /* @__PURE__ */ jsx("div", { itemProp: "text", className: "space-y-2", children: answers.map((answer, i) => /* @__PURE__ */ jsx("p", { children: answer }, i)) })
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  FrequentlyAskedQuestions
+};

package/dist/components/giscus.d.mts

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import { GiscusProps } from '@giscus/react';
 
-declare const Giscus: FC<GiscusProps>;
+declare const Giscus: FC<Omit<GiscusProps, 'mapping'> & {
+    mapping?: GiscusProps['mapping'];
+}>;
 
 export { Giscus };

package/dist/components/giscus.js

@@ -1,13 +1,10 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useTheme } from "nextra-theme-docs";
-import { default as _Giscus } from "@giscus/react";
+import { default as Giscus_ } from "@giscus/react";
 const Giscus = (props) => {
   const { resolvedTheme } = useTheme();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("br", {}),
-    /* @__PURE__ */ jsx(_Giscus, { theme: resolvedTheme, ...props })
-  ] });
+  return /* @__PURE__ */ jsx(Giscus_, { theme: resolvedTheme, mapping: "pathname", ...props });
 };
 export {
   Giscus

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import react__default, { ReactNode, ComponentProps } from 'react';
+import react__default, { ReactNode, ReactElement, ComponentProps } from 'react';
 import { Search } from 'nextra/components';
 export { GraphQLConfCard, GraphQLConfCardProps } from './graphql-conf-card.mjs';
 import 'next/image';
@@ -18,6 +18,7 @@ type HiveNavigationProps = {
         children: ReactNode;
     }[];
     developerMenu: DeveloperMenuProps['developerMenu'];
+    search?: ReactElement;
     searchProps?: ComponentProps<typeof Search>;
 };
 /**
@@ -32,7 +33,7 @@ type HiveNavigationProps = {
  * </HiveNavigation>
  * ```
  */
-declare function HiveNavigation({ companyMenuChildren, children, className, productName, logo, navLinks, developerMenu, searchProps, }: HiveNavigationProps): react_jsx_runtime.JSX.Element;
+declare function HiveNavigation({ companyMenuChildren, children, className, productName, logo, navLinks, developerMenu, search, }: HiveNavigationProps): react_jsx_runtime.JSX.Element;
 interface ProductsMenuProps extends MenuContentColumnsProps {
     productName: string;
 }

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

@@ -51,7 +51,7 @@ function HiveNavigation({
     }
   ],
   developerMenu,
-  searchProps
+  search = /* @__PURE__ */ jsx(Search, {})
 }) {
   const containerRef = useRef(null);
   return /* @__PURE__ */ jsxs(
@@ -100,13 +100,7 @@ function HiveNavigation({
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex-1" }),
           children,
-          /* @__PURE__ */ jsx(
-            Search,
-            {
-              className: "relative ml-4 basis-64 [&_:is(input,kbd)]:text-green-700 dark:[&_:is(input,kbd)]:text-neutral-300 [&_input]:h-12 [&_input]:w-full [&_input]:rounded-lg [&_input]:border [&_input]:border-green-200 [&_input]:bg-white [&_input]:pl-4 [&_input]:pr-8 [&_input]:ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))] [&_input]:ring-offset-[rgb(var(--nextra-bg))] dark:[&_input]:border-neutral-800 [&_input]:dark:bg-inherit [&_kbd]:absolute [&_kbd]:right-4 [&_kbd]:top-1/2 [&_kbd]:my-0 [&_kbd]:-translate-y-1/2 [&_kbd]:border-none [&_kbd]:bg-green-200 dark:[&_kbd]:bg-neutral-700",
-              ...searchProps
-            }
-          ),
+          search,
           /* @__PURE__ */ jsxs(
             CallToAction,
             {

package/dist/components/icons/yoga.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-const SvgYoga = (props) => /* @__PURE__ */ jsxs("svg", { width: 53, height: 54, viewBox: "0 0 53 54", fill: "none", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M35.213 10.37h-8.231l4.943-4.943L26.5 0l-5.427 5.427 4.943 4.943h-8.231a4 4 0 0 0-2.827 1.172L.5 26l5.427 5.427 17.747-17.746a3.997 3.997 0 0 1 5.652 0l17.747 17.746L52.5 26 38.04 11.54a4 4 0 0 0-2.827-1.172v.002ZM26.5 42.197l-5.426 5.426L26.5 53.05l5.426-5.426-5.426-5.427Z", fill: "currentColor" }),
-  /* @__PURE__ */ jsx("path", { d: "M26.5 31.427h-8.713A4 4 0 0 0 14.96 32.6L10.79 36.77l5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.427-5.427-4.172-4.171a4 4 0 0 0-2.827-1.172H26.5Z", fill: "currentColor" })
+const SvgYoga = (props) => /* @__PURE__ */ jsxs("svg", { width: 53, height: 54, viewBox: "0 0 53 54", fill: "currentColor", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M35.213 10.37h-8.231l4.943-4.943L26.5 0l-5.427 5.427 4.943 4.943h-8.231a4 4 0 0 0-2.827 1.172L.5 26l5.427 5.427 17.747-17.746a3.997 3.997 0 0 1 5.652 0l17.747 17.746L52.5 26 38.04 11.54a4 4 0 0 0-2.827-1.172v.002ZM26.5 42.197l-5.426 5.426L26.5 53.05l5.426-5.426-5.426-5.427Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M26.5 31.427h-8.713A4 4 0 0 0 14.96 32.6L10.79 36.77l5.427 5.427 7.46-7.46a3.997 3.997 0 0 1 5.653 0l7.46 7.46 5.427-5.427-4.172-4.171a4 4 0 0 0-2.827-1.172H26.5Z" })
 ] });
 export {
   SvgYoga as ReactComponent

package/dist/components/index.d.mts

@@ -31,6 +31,8 @@ export { ContactButton, ContactButtonProps, ContactTextLink, ContactTextLinkProp
 export { Giscus } from './giscus.mjs';
 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 { GraphQLConfCard, GraphQLConfCardProps } from './hive-navigation/graphql-conf-card.mjs';
 import 'react';
 import 'url';
@@ -42,3 +44,4 @@ 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

@@ -30,11 +30,15 @@ export * from "./contact-us";
 import { Giscus } from "./giscus";
 export * from "./version-dropdown";
 export * from "./dropdown";
+import { FrequentlyAskedQuestions } from "./faq/index.js";
+import { ComparisonTable } from "./comparison-table/index.js";
 export {
   Anchor,
   Button,
   CardsColorful,
+  ComparisonTable,
   FeatureList,
+  FrequentlyAskedQuestions,
   GetYourAPIGameRightSection,
   Giscus,
   GraphQLConfCard,

package/dist/components/legacy-package-cmd.js

@@ -47,7 +47,7 @@ const LegacyPackageCmd = ({
     ),
     [packages]
   );
-  return /* @__PURE__ */ jsx(Tabs, { items: PACKAGE_MANAGERS, children: PACKAGE_MANAGERS.map((pkgManager, index) => /* @__PURE__ */ jsx(Tabs.Tab, { children: /* @__PURE__ */ jsx(Pre, { "data-filename": "Terminal", "data-copy": "", "data-language": "sh", "data-theme": "default", children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx("span", { className: "line", children: commands[index] }) }) }) }, pkgManager)) });
+  return /* @__PURE__ */ jsx(Tabs, { items: PACKAGE_MANAGERS, children: PACKAGE_MANAGERS.map((pkgManager, index) => /* @__PURE__ */ jsx(Tabs.Tab, { children: /* @__PURE__ */ jsx(Pre, { "data-filename": "Terminal", "data-copy": "", "data-language": "sh", "data-theme": "default", children: /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx("span", { className: "line mx-4", children: commands[index] }) }) }) }, pkgManager)) });
 };
 export {
   LegacyPackageCmd

package/dist/index.d.mts

@@ -34,6 +34,8 @@ export { ContactButton, ContactButtonProps, ContactTextLink, ContactTextLinkProp
 export { Giscus } from './components/giscus.mjs';
 export { VersionDropdown, VersionDropdownProps } from './components/version-dropdown.mjs';
 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 { 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';
@@ -46,6 +48,7 @@ import 'url';
 import 'next/image';
 import 'react/jsx-runtime';
 import '@giscus/react';
+import './components/faq/attach-page-faq-schema.mjs';
 import 'next/link';
 import 'react-player';
 import 'clsx';

package/dist/server/body.d.mts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+
+declare const Body: FC<{
+    lightOnlyPages: string[];
+    children: ReactNode;
+}>;
+
+export { Body };

package/dist/server/body.js

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

package/dist/server/index.d.mts

@@ -6,6 +6,7 @@ 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.mjs';
 export { GuildLayout, getDefaultMetadata } from './theme-layout.mjs';
 import 'next/image';
 import 'nextra';

package/dist/server/index.js

@@ -12,8 +12,10 @@ import {
 import { evaluate } from "nextra/evaluate";
 import { fetchPackageInfo } from "./npm.js";
 import { sharedMetaItems } from "./shared-meta-items";
+import { Body } from "./body";
 import { GuildLayout, getDefaultMetadata } from "./theme-layout.js";
 export {
+  Body,
   GuildLayout,
   MDXRemote,
   compileMdx,

package/dist/server/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;
@@ -184,10 +184,11 @@ declare const useMDXComponents: (components?: object) => {
     tspan?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGTSpanElement>, "ref">> | undefined;
     use?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGUseElement>, "ref">> | undefined;
     view?: keyof react.JSX.IntrinsicElements | react.FC<Omit<react.SVGProps<SVGViewElement>, "ref">> | undefined;
-    wrapper: nextra.MDXWrapper | (({ toc, children, metadata, ...props }: {
+    wrapper: nextra.MDXWrapper | (({ toc, children, metadata, bottomContent, ...props }: {
         toc: nextra.Heading[];
         children: react.ReactNode;
         metadata: nextra.NextraMetadata;
+        bottomContent?: react.ReactNode;
     }) => react_jsx_runtime.JSX.Element);
     img: react.FC<next_image.ImageProps>;
 };

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

@@ -1,9 +1,10 @@
-import { FC, ReactNode, ComponentProps } from 'react';
+import { FC, ReactNode, ComponentProps, ReactElement } from 'react';
 import { Metadata } from 'next';
 import { PageMapItem } from 'nextra';
 import { Navbar, Layout } from 'nextra-theme-docs';
 import { Head } from 'nextra/components';
 import { HiveNavigation } from '../components/hive-navigation/index.mjs';
+import { Body } from './body.mjs';
 import 'react/jsx-runtime';
 import '../components/hive-navigation/graphql-conf-card.mjs';
 import 'next/image';
@@ -37,6 +38,8 @@ declare const GuildLayout: FC<{
      */
     navbarProps: NavbarProps;
     pageMap?: PageMapItem[];
+    search?: ReactElement;
+    lightOnlyPages: ComponentProps<typeof Body>['lightOnlyPages'];
 }>;
 declare function getDefaultMetadata({ websiteName, description, productName, ...additionalMetadata }: {
     description?: string;

package/dist/server/theme-layout.js

@@ -7,6 +7,7 @@ import { HiveFooter } from "../components/hive-footer";
 import { HiveNavigation } from "../components/hive-navigation";
 import { siteOrigin, siteUrl } from "../constants";
 import { PRODUCTS } from "../products";
+import { Body } from "./body";
 const companyItem = {
   type: "menu",
   title: "Company",
@@ -41,6 +42,8 @@ const GuildLayout = async ({
   logo,
   layoutProps,
   navbarProps,
+  search,
+  lightOnlyPages,
   ...props
 }) => {
   const [meta, ...pageMap] = props.pageMap || await getPageMap();
@@ -67,8 +70,34 @@ const GuildLayout = async ({
       suppressHydrationWarning: true,
       ...htmlProps,
       children: [
-        /* @__PURE__ */ jsx(Head, { ...headProps }),
-        /* @__PURE__ */ jsx("body", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
+          Head,
+          {
+            backgroundColor: { dark: "#111", light: "#fff" },
+            color: {
+              hue: { dark: 67, light: 171 },
+              saturation: { dark: 100, light: 42 },
+              lightness: { dark: 50, light: 24 }
+            },
+            ...headProps,
+            children: /* @__PURE__ */ jsx("style", { children: `
+          ::selection {
+            background: hsl(var(--nextra-primary-hue)var(--nextra-primary-saturation)var(--nextra-primary-lightness)/.7) !important;
+          }
+          .dark:has(body.light) {
+            --nextra-primary-hue: 191deg;
+            --nextra-primary-saturation: 40%;
+            --nextra-primary-lightness: 35%;
+            --nextra-bg: 255, 255, 255;
+          }
+          .x\\:tracking-tight,
+          .nextra-steps :is(h2, h3, h4) {
+            letter-spacing: normal;
+          }
+        ` })
+          }
+        ),
+        /* @__PURE__ */ jsx(Body, { lightOnlyPages, children: /* @__PURE__ */ jsx(
           Layout,
           {
             footer: /* @__PURE__ */ jsx(
@@ -81,12 +110,14 @@ const GuildLayout = async ({
                 description
               }
             ),
+            search,
             navbar: /* @__PURE__ */ jsx(
               HiveNavigation,
               {
                 className: "max-w-[90rem]",
                 productName: websiteName,
                 navLinks: [],
+                search,
                 ...navbarProps,
                 logo: /* @__PURE__ */ jsxs(
                   Anchor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "8.2.0",
+  "version": "8.2.1-alpha-20250106114612-d54bd2260536e5ca33c2efbea0be43efafccd2a9",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"
@@ -46,18 +46,20 @@
   "dependencies": {
     "@giscus/react": "3.1.0",
     "@next/bundle-analyzer": "15.1.3",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "clsx": "2.1.1",
     "fuzzy": "0.1.3",
-    "nextra": "4.0.0-app-router.42",
-    "nextra-theme-docs": "4.0.0-app-router.42",
+    "nextra": "4.0.0-app-router.43",
+    "nextra-theme-docs": "4.0.0-app-router.43",
     "react-paginate": "8.2.0",
     "react-player": "2.16.0",
     "semver": "^7.3.8",
     "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
-    "@svgr/babel-plugin-remove-jsx-attribute": "^8.0.0",
+    "@svgr/plugin-svgo": "^8.1.0",
     "@theguild/tailwind-config": "0.6.2",
     "@types/dedent": "0.7.2",
     "@types/react": "18.3.18",

package/style.css

@@ -127,7 +127,23 @@
 :root {
   --nextra-navbar-height: 82px;
 }
-
+@media (min-width: 768px) {
+  .nextra-search {
+    @apply ml-3 basis-64;
+    input,
+    kbd {
+      @apply text-green-700 dark:text-neutral-300;
+    }
+    input {
+      @apply h-12 w-full rounded-lg border border-green-200 bg-white pl-4 pr-8;
+      @apply ring-[hsl(var(--nextra-primary-hue)_var(--nextra-primary-saturation)_32%/var(--tw-ring-opacity))];
+      @apply ring-offset-[rgb(var(--nextra-bg))] dark:border-neutral-800 dark:bg-inherit;
+    }
+    kbd {
+      @apply absolute right-4 top-1/2 my-0 -translate-y-1/2 border-none bg-green-200 dark:bg-neutral-700;
+    }
+  }
+}
 @media (max-width: 767px) {
   :root {
     --nextra-navbar-height: 64px;