@theguild/components 9.2.0-alpha-20250121201855-4665b7b7379ce16ff723f516a6d331ab85ae8056 → 9.2.0

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

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

package/dist/components/hero/index.js

@@ -1,6 +1,7 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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) => {
@@ -15,13 +16,32 @@ const Hero = (props) => {
         props.className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "relative", children: props.top && ("logo" in props.top ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          cloneElement(props.top.logo, {
-            fill: `url(#${gradientWhiteId})`,
+        /* @__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 inset-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2",
-              props.top.logo.props.className
-            )
+              "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",
@@ -95,7 +115,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.0-alpha-20250121201855-4665b7b7379ce16ff723f516a6d331ab85ae8056",
+  "version": "9.2.0",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"