@theguild/components 9.2.1-alpha-20250122154428-0f46da0bab772b4d58b324087399866cb0821a48 → 9.3.0-alpha-20250122154323-ee0b61f5fe0da0adf9f686e3bf67c7532e1aa794

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

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

package/dist/components/hero/index.js

@@ -1,7 +1,6 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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) => {
@@ -16,32 +15,13 @@ const Hero = (props) => {
         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, {
+        /* @__PURE__ */ jsx("div", { className: "relative", children: props.top && ("logo" in props.top ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          cloneElement(props.top.logo, {
             fill: `url(#${gradientWhiteId})`,
-            className: "absolute inset-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2"
+            className: cn(
+              "absolute inset-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2",
+              props.top.logo.props.className
+            )
           }),
           /* @__PURE__ */ jsxs(
             "svg",
@@ -115,7 +95,7 @@ const Hero = (props) => {
               ]
             }
           )
-        ] }),
+        ] }) : props.top.children) }),
         /* @__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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.2.1-alpha-20250122154428-0f46da0bab772b4d58b324087399866cb0821a48",
+  "version": "9.3.0-alpha-20250122154323-ee0b61f5fe0da0adf9f686e3bf67c7532e1aa794",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"