@iniguezmarc/design-system 0.0.17 → 0.1.0

package/README.md

@@ -1,37 +1,37 @@
-# 🎨 Design System
+# Design System
 
 A modern, scalable, and accessible UI component library built to streamline frontend development.
 
-🚀 **[View Documentation (Storybook)](https://IniguezMarc.github.io/design-system/)**
+**[View Documentation (Storybook)](https://IniguezMarc.github.io/design-system/)**
 
 ---
 
-## 🛠 Tech Stack & Tools
+## Tech Stack & Tools
 
 This project leverages a modern ecosystem to ensure performance, type safety, and developer experience:
 
-* **⚛️ React 18:** Library for building the component-based UI architecture.
-* **📘 TypeScript:** Provides static typing to catch errors early and improve code maintainability.
-* **⚡ Vite:** Next-generation frontend tooling for ultra-fast development and optimized builds.
-* **💨 Tailwind CSS (v3):** A utility-first CSS framework for rapid, responsive, and consistent styling without leaving the HTML.
-* **📕 Storybook:** An isolated environment to build, test, and document UI components independently from the main app.
-* **🚀 GitHub Pages:** Automated hosting for the static documentation via CI/CD pipelines.
+*   **React 19:** Library for building the component-based UI architecture.
+*   **TypeScript:** Provides static typing to catch errors early and improve code maintainability.
+*   **Vite:** Next-generation frontend tooling for ultra-fast development and optimized builds.
+*   **Tailwind CSS (v3):** A utility-first CSS framework for rapid, responsive, and consistent styling without leaving the HTML.
+*   **Storybook:** An isolated environment to build, test, and document UI components independently from the main app.
+*   **GitHub Pages:** Automated hosting for the static documentation via CI/CD pipelines.
 
-## 🏗 Architecture: Atomic Design
+## Architecture: Atomic Design
 
 The library is organized following the **Atomic Design** methodology to ensure modularity:
 
-* **Atoms:** Basic building blocks (Buttons, Inputs, Typography).
-* **Molecules:** Groups of atoms functioning together (Project Cards, Form Groups).
-* **Organisms:** Complex UI sections (Responsive Grids, Navbars).
+*   **Atoms:** Basic building blocks (Buttons, Inputs, Typography).
+*   **Molecules:** Groups of atoms functioning together (Project Cards, Form Groups).
+*   **Organisms:** Complex UI sections (Responsive Grids, Navbars).
 
-## 📦 Local Installation
+## Local Installation
 
 To clone and run this project on your local machine:
 
 1.  **Clone the repository:**
     ```bash
-    git clone [https://github.com/IniguezMarc/design-system.git](https://github.com/IniguezMarc/design-system.git)
+    git clone https://github.com/IniguezMarc/design-system.git
     cd design-system
     ```
 
@@ -40,15 +40,17 @@ To clone and run this project on your local machine:
     npm install
     ```
 
-3.  **Start Storybook:**
     ```bash
-    npm run storybook
-    ```
-    npm run storybook
+    npm run ds
     ```
     Visit `http://localhost:6006` to view the library.
 
-## 📦 Usage as a Package
+4.  **Build the library:**
+    ```bash
+    npm run build
+    ```
+
+## Usage as a Package
 
 1.  **Install the package:**
     ```bash
@@ -58,9 +60,8 @@ To clone and run this project on your local machine:
 2.  **Import styles:**
     Import the CSS in your main entry file (e.g., `main.tsx` or `App.tsx`):
     ```tsx
-    import '@iniguezmarc/design-system/dist/style.css'; // Adjust path if needed based on build output
+    import '@iniguezmarc/design-system/dist/style.css';
     ```
-    *Note: If `style.css` is not generated, ensure Tailwind is configured to scan node_modules or exported correctly.*
 
 3.  **Use components:**
     ```tsx
@@ -71,6 +72,15 @@ To clone and run this project on your local machine:
     }
     ```
 
+4.  **Configure Tailwind (optional):**
+    Add the design system preset to your `tailwind.config.js`:
+    ```js
+    module.exports = {
+      presets: [require('@iniguezmarc/design-system/tailwind.preset')],
+      // ... your config
+    }
+    ```
+
 ---
 
 Created by **Marc Iñiguez**.

package/dist/components/atoms/Button/BasicButton.d.ts

@@ -1,31 +1,73 @@
+/**
+ * Custom CSS class slots for styling different parts of the button.
+ */
 export interface ButtonSlots {
+    /** Additional classes for the button container */
     container?: string;
+    /** Additional classes for the label wrapper */
     label?: string;
 }
+/**
+ * Props for the BasicButton component.
+ */
 export interface ButtonProps {
+    /** Text displayed inside the button */
     label: string;
+    /** Visual style variant */
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /** Button size preset */
     size?: 'small' | 'medium' | 'large';
+    /** Click handler function */
     onClick?: () => void;
+    /** Additional CSS classes */
     className?: string;
+    /** Custom styling slots */
     customStyles?: ButtonSlots;
+    /** If provided, renders as an anchor link */
     href?: string;
+    /** Link target (used with href) */
     target?: string;
+    /** Primary variant background class */
     primaryColor?: string;
+    /** Primary variant hover background class */
     primaryHoverColor?: string;
+    /** Primary variant dark mode background class */
     darkPrimaryColor?: string;
+    /** Primary variant dark mode hover class */
     darkPrimaryHoverColor?: string;
+    /** Secondary variant background class */
     secondaryColor?: string;
+    /** Secondary variant hover class */
     secondaryHoverColor?: string;
+    /** Secondary variant dark mode background class */
     darkSecondaryColor?: string;
+    /** Secondary variant dark mode hover class */
     darkSecondaryHoverColor?: string;
+    /** Outline variant text/border class */
     outlineColor?: string;
+    /** Outline variant hover class */
     outlineHoverColor?: string;
+    /** Outline variant dark mode text/border class */
     darkOutlineColor?: string;
+    /** Outline variant dark mode hover class */
     darkOutlineHoverColor?: string;
+    /** Ghost variant text/bg class */
     ghostColor?: string;
+    /** Ghost variant hover class */
     ghostHoverColor?: string;
+    /** Ghost variant dark mode class */
     darkGhostColor?: string;
+    /** Ghost variant dark mode hover class */
     darkGhostHoverColor?: string;
 }
+/**
+ * A versatile button component with multiple variants and full color customization.
+ * Supports both button and anchor rendering based on the `href` prop.
+ *
+ * @example
+ * ```tsx
+ * <BasicButton label="Click me" variant="primary" onClick={() => {}} />
+ * <BasicButton label="Link" href="/page" target="_blank" />
+ * ```
+ */
 export declare const BasicButton: ({ label, variant, size, onClick, className, customStyles, href, target, primaryColor, primaryHoverColor, darkPrimaryColor, darkPrimaryHoverColor, secondaryColor, secondaryHoverColor, darkSecondaryColor, darkSecondaryHoverColor, outlineColor, outlineHoverColor, darkOutlineColor, darkOutlineHoverColor, ghostColor, ghostHoverColor, darkGhostColor, darkGhostHoverColor, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Button/Button.d.ts

@@ -1,3 +1,4 @@
 import { BasicButton, ButtonProps } from './BasicButton';
 export { BasicButton as Button };
 export type { ButtonProps };
+export * from './CreativeButton';

package/dist/components/atoms/Button/CreativeButton.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+/**
+ * Props for the CreativeButton component.
+ * Extends Framer Motion's button props for animation support.
+ */
+export interface CreativeButtonProps extends HTMLMotionProps<"button"> {
+    /** Visual variant style */
+    variant?: 'magnetic' | 'glow' | 'cyber' | 'shimmer' | 'threeD' | 'delete-expand' | 'arrow-slide' | 'pushable' | 'retro-shadow';
+    /** Button text */
+    label: string;
+    /** Default/fallback background color (hex) */
+    primaryColor?: string;
+    /** Explicit background override (hex) */
+    customColor?: string;
+    /** Click animation color (hex) */
+    animationColor?: string;
+    /** Custom text color (hex) */
+    textColor?: string;
+    /** Dark mode fallback color (hex) */
+    darkPrimaryColor?: string;
+    /** Dark mode background override (hex) */
+    darkCustomColor?: string;
+    /** Dark mode animation color (hex) */
+    darkAnimationColor?: string;
+    /** Dark mode text color (hex) */
+    darkTextColor?: string;
+    /** Click animation style */
+    clickAnimation?: 'burst' | 'ring' | 'pulse' | 'none';
+    /** Optional icon element */
+    icon?: React.ReactNode;
+}
+/**
+ * A creative button component with 9 unique animated variants.
+ * Features magnetic effects, glow, cyber styling, shimmer, 3D depth,
+ * expand animations, arrow slides, pushable depth, and retro shadows.
+ *
+ * @example
+ * ```tsx
+ * <CreativeButton label="Glow" variant="glow" primaryColor="#8b5cf6" />
+ * <CreativeButton label="Magnetic" variant="magnetic" clickAnimation="ring" />
+ * ```
+ */
+export declare const CreativeButton: React.FC<CreativeButtonProps>;

package/dist/components/effects/FloatingElement/FloatingElement.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface FloatingElementProps {
+    children: ReactNode;
+    /**
+     * Duration of one full float cycle in seconds.
+     * @default 3
+     */
+    duration?: number;
+    /**
+     * Vertical floating distance in pixels.
+     * @default 15
+     */
+    yOffset?: number;
+    /**
+     * Delay before animation starts (seconds).
+     * @default 0
+     */
+    delay?: number;
+    className?: string;
+}
+export declare const FloatingElement: ({ children, duration, yOffset, delay, className, }: FloatingElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/ParallaxOnScroll/ParallaxOnScroll.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface ParallaxOnScrollProps {
+    children: ReactNode;
+    /**
+     * Parallax speed factor.
+     * Positive values move slower than scroll (adding depth).
+     * Negative values move faster/opposite to scroll.
+     * @default 0.5
+     */
+    speed?: number;
+    className?: string;
+}
+export declare const ParallaxOnScroll: ({ children, speed, className, }: ParallaxOnScrollProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/ScrollReveal/ScrollReveal.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+export interface ScrollRevealProps {
+    children: ReactNode;
+    /**
+     * The base animation style.
+     * @default 'fade'
+     */
+    base?: 'fade' | 'slide' | 'zoom' | 'rotate';
+    /**
+    * Direction of the entrance.
+    * @default 'up'
+    */
+    direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+    /**
+    * Distance of movement in pixels.
+    * @default 20
+    */
+    distance?: number;
+    /**
+    * Whether to apply a blur effect (aesthetic mist).
+    * @default true
+    */
+    blur?: boolean;
+    /**
+     * Duration of the animation in seconds.
+     * @default 0.6
+     */
+    duration?: number;
+    /**
+     * Delay before animation starts in seconds.
+     * @default 0
+     */
+    delay?: number;
+    /**
+    * Amount of element visible before triggering (0 to 1).
+    * @default 0.2
+    */
+    threshold?: number;
+    /**
+     * Whether to animate only once.
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * Custom className for the wrapper.
+     */
+    className?: string;
+}
+/**
+ * A scroll-triggered reveal animation wrapper using Framer Motion.
+ * Supports fade, slide, zoom, and rotate animations with customizable
+ * direction, distance, blur, and timing.
+ *
+ * @example
+ * ```tsx
+ * <ScrollReveal base="slide" direction="up" distance={30}>
+ *   <Card />
+ * </ScrollReveal>
+ * ```
+ */
+export declare const ScrollReveal: ({ children, base, direction, distance, blur, duration, delay, threshold, once, className, }: ScrollRevealProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/ScrollSvg/ScrollSvg.d.ts

@@ -0,0 +1,75 @@
+export interface ScrollSvgProps {
+    /**
+     * The SVG path data (d attribute).
+     */
+    path: string;
+    /**
+     * ViewBox for the SVG.
+     * @default "0 0 100 100"
+     */
+    viewBox?: string;
+    /**
+     * Stroke color.
+     * @default "currentColor"
+     */
+    strokeColor?: string;
+    /**
+     * Stroke width.
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Whether to add a neon glow effect.
+     * @default false
+     */
+    glow?: boolean;
+    /**
+     * Whether the line should be dashed.
+     * @default false
+     */
+    dashed?: boolean;
+    /**
+     * Additional classes for the container.
+     */
+    className?: string;
+    /**
+     * Optional gradient colors [start, end]. If provided, overrides strokeColor.
+     */
+    gradient?: [string, string];
+    /**
+     * Where in the viewport the animation should complete.
+     * 'center' = finishes when bottom of SVG hits center of screen.
+     * 'bottom' = finishes when bottom of SVG hits bottom of screen.
+     * 'top' = finishes when bottom of SVG hits top of screen (default).
+     */
+    animationEnd?: 'center' | 'bottom' | 'top';
+    /**
+     * Optional inline styles.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom scroll offsets for Framer Motion's useScroll.
+     * Overrides animationEnd logic if provided.
+     * Example: ['start end', 'end center']
+     */
+    scrollOffset?: any;
+    /**
+     * Speed multiplier for the drawing animation relative to scroll.
+     * 1 = 1:1 with scroll.
+     * > 1 = Faster (completes earlier).
+     * < 1 = Slower (might not complete).
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Whether to animate the line drawing from 0 to the current scroll position on mount.
+     * @default true
+     */
+    animateOnMount?: boolean;
+    /**
+     * SVG preserveAspectRatio attribute.
+     * Pass "none" to stretch the SVG to fill the container.
+     */
+    preserveAspectRatio?: string;
+}
+export declare const ScrollSvg: ({ path, viewBox, strokeColor, strokeWidth, glow, dashed, className, style, gradient, animationEnd, scrollOffset, speed, animateOnMount, preserveAspectRatio, }: ScrollSvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Typewriter/Typewriter.d.ts

@@ -0,0 +1,57 @@
+export interface TypewriterProps {
+    /**
+     * The text to display.
+     */
+    text: string;
+    /**
+     * Speed of typing in ms per character.
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * Delay before starting in ms.
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Whether to show a blinking cursor.
+     * @default true
+     */
+    cursor?: boolean;
+    /**
+     * Whether to start only when in view.
+     * @default true
+     */
+    startWhenInView?: boolean;
+    /**
+     * Additional classes for the cursor
+     */
+    cursorClassName?: string;
+    /**
+     * Inline styles for the cursor
+     */
+    cursorStyle?: import('react').CSSProperties;
+    /**
+     * Additional classes for the container.
+     */
+    className?: string;
+    /**
+     * Inline styles for the container.
+     */
+    style?: import('react').CSSProperties;
+    /**
+     * Element type to render as.
+     * @default "span"
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'div' | 'span' | 'p';
+}
+/**
+ * An animated typewriter text effect that types out characters one by one.
+ * Supports custom speed, delay, cursor styling, and in-view triggering.
+ *
+ * @example
+ * ```tsx
+ * <Typewriter text="Hello World" speed={80} cursor={true} />
+ * ```
+ */
+export declare const Typewriter: ({ text, speed, delay, cursor, startWhenInView, className, style, cursorClassName, cursorStyle, as: Component, }: TypewriterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/ProjectCard/BasicProjectCard.d.ts

@@ -24,5 +24,11 @@ export interface BasicProjectCardProps {
     /** Hooks to customize internal style parts */
     customStyles?: ProjectCardSlots;
     className?: string;
+    renderAction?: (props: {
+        label?: string;
+        onClick?: () => void;
+        href?: string;
+        target?: string;
+    }) => React.ReactNode;
 }
-export declare const BasicProjectCard: ({ title, description, image, tags, orientation, actionLabel, projectUrl, linkTarget, onViewProject, customStyles, className }: BasicProjectCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BasicProjectCard: ({ title, description, image, tags, orientation, actionLabel, projectUrl, linkTarget, onViewProject, customStyles, className, renderAction }: BasicProjectCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Timeline/BasicTimeline.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+export interface TimelineItem {
+    id: string;
+    date: string;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    tags?: string[];
+}
+export interface BasicTimelineProps {
+    items: TimelineItem[];
+    layout?: 'left' | 'center' | 'right';
+    renderIcon?: (item: TimelineItem, index: number) => ReactNode;
+    className?: string;
+    lineColor?: string;
+    darkLineColor?: string;
+    dotColor?: string;
+    darkDotColor?: string;
+    cardBackgroundColor?: string;
+    darkCardBackgroundColor?: string;
+    textColor?: string;
+    darkTextColor?: string;
+    dateColor?: string;
+    darkDateColor?: string;
+    subtitleColor?: string;
+    darkSubtitleColor?: string;
+    descColor?: string;
+    darkDescColor?: string;
+    tagBgColor?: string;
+    darkTagBgColor?: string;
+    tagTextColor?: string;
+    darkTagTextColor?: string;
+}
+export declare const BasicTimeline: ({ items, layout, renderIcon, className, lineColor, darkLineColor, dotColor, darkDotColor, cardBackgroundColor, darkCardBackgroundColor, textColor, darkTextColor, dateColor, darkDateColor, subtitleColor, darkSubtitleColor, descColor, darkDescColor, tagBgColor, darkTagBgColor, tagTextColor, darkTagTextColor, }: BasicTimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Timeline/CreativeTimeline.d.ts

@@ -0,0 +1,24 @@
+import { TimelineItem } from './BasicTimeline';
+export interface CreativeTimelineProps {
+    items: TimelineItem[];
+    title?: string;
+    subtitle?: string;
+    backgroundColor?: string;
+    darkBackgroundColor?: string;
+    lineColor?: string;
+    dotColor?: string;
+    cardBackgroundColor?: string;
+    titleColor?: string;
+    darkTitleColor?: string;
+    subtitleColor?: string;
+    darkSubtitleColor?: string;
+    dateColor?: string;
+    darkDateColor?: string;
+    descColor?: string;
+    darkDescColor?: string;
+    tagBgColor?: string;
+    darkTagBgColor?: string;
+    tagTextColor?: string;
+    darkTagTextColor?: string;
+}
+export declare const CreativeTimeline: ({ items, title, subtitle, backgroundColor, darkBackgroundColor, lineColor, dotColor, cardBackgroundColor, titleColor, darkTitleColor, subtitleColor, darkSubtitleColor, dateColor, darkDateColor, descColor, darkDescColor, tagBgColor, darkTagBgColor, tagTextColor, darkTagTextColor, }: CreativeTimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/Timeline/Timeline.d.ts

@@ -0,0 +1,4 @@
+import { BasicTimelineProps, TimelineItem } from './BasicTimeline';
+export declare const Timeline: (props: BasicTimelineProps) => import("react/jsx-runtime").JSX.Element;
+export * from './CreativeTimeline';
+export type { BasicTimelineProps, TimelineItem };

package/dist/components/organisms/ContentGrid/BasicContentGrid.d.ts

@@ -1,3 +1,5 @@
+import { ProjectCardSlots } from '../../molecules/ProjectCard/BasicProjectCard';
+import { ReactNode } from 'react';
 export interface GridItem {
     id: string;
     title: string;
@@ -17,9 +19,22 @@ export interface BasicContentGridProps {
     itemButtonLabel?: string;
     onItemClick?: (id: string) => void;
     customStyles?: ContentGridSlots;
+    /**
+     * Custom styles passed down to each ProjectCard
+     */
+    cardCustomStyles?: ProjectCardSlots;
+    /**
+     * Optional wrapper for items, allowing injection of animations (e.g. ScrollReveal)
+     */
+    renderItemWrapper?: (children: ReactNode, item: GridItem, index: number) => ReactNode;
     backgroundColor?: string;
     darkBackgroundColor?: string;
     titleColor?: string;
     darkTitleColor?: string;
+    /**
+     * Optional renderer for the action button of each item
+     */
+    renderItemAction?: (item: GridItem) => React.ReactNode;
+    children?: ReactNode;
 }
-export declare const BasicContentGrid: ({ title, items, layout, itemButtonLabel, onItemClick, customStyles, backgroundColor, darkBackgroundColor, titleColor, darkTitleColor, }: BasicContentGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BasicContentGrid: ({ title, items, layout, itemButtonLabel, onItemClick, customStyles, cardCustomStyles, renderItemWrapper, backgroundColor, darkBackgroundColor, titleColor, darkTitleColor, renderItemAction, children }: BasicContentGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/Footer/CreativeFooter.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { BasicFooterProps } from './BasicFooter';
+export interface CreativeFooterProps extends BasicFooterProps {
+    /** Whether to show ambient background blobs */
+    ambientBackground?: boolean;
+    /** Enable glassmorphism (transparent background) */
+    glass?: boolean;
+    /** Optional Large CTA section content */
+    ctaTitle?: ReactNode;
+    ctaSubtitle?: ReactNode;
+    ctaAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    blobColors?: {
+        primary: string;
+        secondary: string;
+    };
+    ctaTitleColor?: string;
+    darkCtaTitleColor?: string;
+    ctaSubtitleColor?: string;
+    darkCtaSubtitleColor?: string;
+    ctaBorderColor?: string;
+    darkCtaBorderColor?: string;
+}
+export declare const CreativeFooter: ({ ambientBackground, glass, ctaTitle, ctaSubtitle, ctaAction, blobColors, className, ctaTitleColor, darkCtaTitleColor, ctaSubtitleColor, darkCtaSubtitleColor, ctaBorderColor, darkCtaBorderColor, ...basicProps }: CreativeFooterProps & {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/Footer/Footer.d.ts

@@ -1,3 +1,4 @@
 import { BasicFooter, BasicFooterProps, SocialLink, FooterLink, FooterSlots } from './BasicFooter';
 export { BasicFooter as Footer };
+export * from './CreativeFooter';
 export type { BasicFooterProps as FooterProps, SocialLink, FooterLink, FooterSlots };

package/dist/components/organisms/Hero/BasicHero.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface HeroAction {
     label: string;
     onClick: () => void;
@@ -11,12 +12,14 @@ export interface HeroSlots {
     imageWrapper?: string;
 }
 export interface BasicHeroProps {
-    greeting?: string;
-    title: string;
-    subtitle: string;
+    greeting?: ReactNode;
+    title: ReactNode;
+    subtitle: ReactNode;
     imageUrl?: string;
     actions?: HeroAction[];
     customStyles?: HeroSlots;
+    /** Optional background elements (for effects) */
+    renderBackground?: () => ReactNode;
     backgroundColor?: string;
     darkBackgroundColor?: string;
     greetingColor?: string;
@@ -26,4 +29,4 @@ export interface BasicHeroProps {
     subtitleColor?: string;
     darkSubtitleColor?: string;
 }
-export declare const BasicHero: ({ greeting, title, subtitle, imageUrl, actions, customStyles, backgroundColor, darkBackgroundColor, greetingColor, darkGreetingColor, titleColor, darkTitleColor, subtitleColor, darkSubtitleColor, }: BasicHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BasicHero: ({ greeting, title, subtitle, imageUrl, actions, customStyles, renderBackground, backgroundColor, darkBackgroundColor, greetingColor, darkGreetingColor, titleColor, darkTitleColor, subtitleColor, darkSubtitleColor, }: BasicHeroProps) => import("react/jsx-runtime").JSX.Element;