@theguild/components 9.2.0-alpha-20250121194203-3d7d719b2d39bcb4147b97dec9f32984d6092fcd → 9.2.0-alpha-20250121194235-45c3db9a4724043d5997a5308bbc1d147c177a0d

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 { 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,14 +16,33 @@ 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: [
-          props.top && ("logo" in props.top ? cloneElement(props.top.logo, {
+          cloneElement(props.logo, {
             fill: `url(#${gradientWhiteId})`,
-            className: cn(
-              "absolute inset-1/2 size-1/2 -translate-x-1/2 -translate-y-1/2",
-              props.top.logo.props.className
-            )
-          }) : props.top.children),
+            className: "absolute inset-1/2 -translate-x-1/2 -translate-y-1/2 size-1/2"
+          }),
           /* @__PURE__ */ jsxs(
             "svg",
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theguild/components",
-  "version": "9.2.0-alpha-20250121194203-3d7d719b2d39bcb4147b97dec9f32984d6092fcd",
+  "version": "9.2.0-alpha-20250121194235-45c3db9a4724043d5997a5308bbc1d147c177a0d",
   "repository": {
     "url": "https://github.com/the-guild-org/docs",
     "directory": "packages/components"