@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/hero/index.js

@@ -0,0 +1,494 @@
+import * as React from 'react';
+import { tv } from 'tailwind-variants';
+import { useRender } from '@base-ui-components/react/use-render';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/sections/hero/hero.tsx
+var backgroundVariants = tv({
+  base: "absolute inset-0"
+});
+var Background = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: backgroundVariants({ class: className }),
+      ...props,
+      children
+    }
+  )
+);
+Background.displayName = "Background";
+var backgroundImageVariants = tv({
+  base: "absolute inset-0 size-full object-cover"
+});
+function BackgroundImage(props) {
+  const {
+    className,
+    src,
+    position = "center",
+    alt = "",
+    style,
+    render,
+    ...otherProps
+  } = props;
+  const imgClassName = backgroundImageVariants({ class: className });
+  const imgStyle = { objectPosition: position, ...style };
+  return useRender({
+    render,
+    props: {
+      src,
+      alt,
+      className: imgClassName,
+      style: imgStyle,
+      ...otherProps
+    },
+    defaultTagName: "img"
+  });
+}
+BackgroundImage.displayName = "Background.Image";
+var backgroundVideoVariants = tv({
+  base: "absolute inset-0 size-full object-cover"
+});
+function BackgroundVideo(props) {
+  const {
+    className,
+    src,
+    type,
+    poster,
+    autoPlay = true,
+    loop = true,
+    muted = true,
+    playsInline = true,
+    render,
+    children,
+    ...otherProps
+  } = props;
+  const videoClassName = backgroundVideoVariants({ class: className });
+  const rendered = useRender({
+    render,
+    props: {
+      autoPlay,
+      loop,
+      muted,
+      playsInline,
+      poster,
+      className: videoClassName,
+      ...otherProps
+    },
+    defaultTagName: "video"
+  });
+  if (!render) {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        autoPlay,
+        loop,
+        muted,
+        playsInline,
+        poster,
+        className: videoClassName,
+        ...otherProps,
+        children: /* @__PURE__ */ jsx("source", { src, type })
+      }
+    );
+  }
+  return rendered;
+}
+BackgroundVideo.displayName = "Background.Video";
+var backgroundStreamVariants = tv({
+  base: "absolute inset-0 size-full border-0 scale-[1.5] object-cover"
+});
+var BackgroundStream = React.forwardRef(
+  ({
+    className,
+    videoId,
+    poster,
+    autoplay = true,
+    loop = true,
+    muted = true,
+    controls = false,
+    customerSubdomain,
+    title = "Background video",
+    ...props
+  }, ref) => {
+    const baseUrl = customerSubdomain ? `https://${customerSubdomain}.cloudflarestream.com` : "https://iframe.videodelivery.net";
+    const params = new URLSearchParams();
+    if (autoplay) params.set("autoplay", "true");
+    if (loop) params.set("loop", "true");
+    if (muted) params.set("muted", "true");
+    if (!controls) params.set("controls", "false");
+    if (poster) params.set("poster", poster);
+    params.set("preload", "auto");
+    const streamUrl = `${baseUrl}/${videoId}?${params.toString()}`;
+    return /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref,
+        src: streamUrl,
+        title,
+        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true,
+        className: backgroundStreamVariants({ class: className }),
+        ...props
+      }
+    );
+  }
+);
+BackgroundStream.displayName = "Background.Stream";
+var backgroundOverlayVariants = tv({
+  base: "absolute inset-0 bg-bg-overlay"
+});
+var BackgroundOverlay = React.forwardRef(({ className, opacity = 0.4, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "aria-hidden": "true",
+    className: backgroundOverlayVariants({ class: className }),
+    style: {
+      opacity,
+      ...style
+    },
+    ...props
+  }
+));
+BackgroundOverlay.displayName = "Background.Overlay";
+var backgroundGradientVariants = tv({
+  base: "absolute inset-0"
+});
+var BackgroundGradient = React.forwardRef(
+  ({
+    className,
+    direction = "to-b",
+    from = "transparent",
+    via,
+    to = "black",
+    gradient,
+    style,
+    ...props
+  }, ref) => {
+    const cssDirection = direction.startsWith("to-") ? direction.replace("to-", "to ") : direction;
+    const gradientValue = gradient || (via ? `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})` : `linear-gradient(${cssDirection}, ${from}, ${to})`);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: backgroundGradientVariants({ class: className }),
+        style: {
+          backgroundImage: gradientValue,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+BackgroundGradient.displayName = "Background.Gradient";
+var BackgroundCompound = Object.assign(Background, {
+  Image: BackgroundImage,
+  Video: BackgroundVideo,
+  Stream: BackgroundStream,
+  Overlay: BackgroundOverlay,
+  Gradient: BackgroundGradient
+});
+
+// src/lib/theme.ts
+function colorToVar(token) {
+  return `var(--color-${token})`;
+}
+function spacingToVar(token) {
+  return `var(--${token})`;
+}
+function radiusToVar(token) {
+  return `var(--${token})`;
+}
+function themeToStyleVars(theme) {
+  if (!theme) return {};
+  const vars = {};
+  if (theme.colors) {
+    const { colors } = theme;
+    if (colors.bgSection)
+      vars["--theme-bg-section"] = colorToVar(colors.bgSection);
+    if (colors.cardBackground)
+      vars["--theme-card-background"] = colorToVar(colors.cardBackground);
+    if (colors.bgMuted) vars["--theme-bg-muted"] = colorToVar(colors.bgMuted);
+    if (colors.textPrimary)
+      vars["--theme-text-primary"] = colorToVar(colors.textPrimary);
+    if (colors.textSecondary)
+      vars["--theme-text-secondary"] = colorToVar(colors.textSecondary);
+    if (colors.textMuted)
+      vars["--theme-text-muted"] = colorToVar(colors.textMuted);
+    if (colors.textInverted)
+      vars["--theme-text-inverted"] = colorToVar(colors.textInverted);
+    if (colors.textLink)
+      vars["--theme-text-link"] = colorToVar(colors.textLink);
+    if (colors.textLinkHover)
+      vars["--theme-text-link-hover"] = colorToVar(colors.textLinkHover);
+    if (colors.accentBrand)
+      vars["--theme-accent-brand"] = colorToVar(colors.accentBrand);
+    if (colors.accentBrandSoft)
+      vars["--theme-accent-brand-soft"] = colorToVar(colors.accentBrandSoft);
+    if (colors.borderSubtle)
+      vars["--theme-border-subtle"] = colorToVar(colors.borderSubtle);
+    if (colors.borderStrong)
+      vars["--theme-border-strong"] = colorToVar(colors.borderStrong);
+    if (colors.borderFocus)
+      vars["--theme-border-focus"] = colorToVar(colors.borderFocus);
+    if (colors.borderDivider)
+      vars["--theme-border-divider"] = colorToVar(colors.borderDivider);
+    if (colors.buttonPrimaryBg)
+      vars["--theme-button-primary-bg"] = colorToVar(colors.buttonPrimaryBg);
+    if (colors.buttonPrimaryBgHover)
+      vars["--theme-button-primary-bg-hover"] = colorToVar(
+        colors.buttonPrimaryBgHover
+      );
+    if (colors.buttonSecondaryBg)
+      vars["--theme-button-secondary-bg"] = colorToVar(
+        colors.buttonSecondaryBg
+      );
+    if (colors.buttonSecondaryBgHover)
+      vars["--theme-button-secondary-bg-hover"] = colorToVar(
+        colors.buttonSecondaryBgHover
+      );
+  }
+  if (theme.spatial) {
+    const { spatial } = theme;
+    if (spatial.gridLargeMargin)
+      vars["--theme-grid-large-margin"] = spacingToVar(spatial.gridLargeMargin);
+    if (spatial.gridLargeGutter)
+      vars["--theme-grid-large-gutter"] = spacingToVar(spatial.gridLargeGutter);
+    if (spatial.gridLargeColumns)
+      vars["--theme-grid-large-columns"] = String(spatial.gridLargeColumns);
+    if (spatial.gridMediumMargin)
+      vars["--theme-grid-medium-margin"] = spacingToVar(
+        spatial.gridMediumMargin
+      );
+    if (spatial.gridMediumGutter)
+      vars["--theme-grid-medium-gutter"] = spacingToVar(
+        spatial.gridMediumGutter
+      );
+    if (spatial.gridMediumColumns)
+      vars["--theme-grid-medium-columns"] = String(spatial.gridMediumColumns);
+    if (spatial.gridSmallMargin)
+      vars["--theme-grid-small-margin"] = spacingToVar(spatial.gridSmallMargin);
+    if (spatial.gridSmallGutter)
+      vars["--theme-grid-small-gutter"] = spacingToVar(spatial.gridSmallGutter);
+    if (spatial.gridSmallColumns)
+      vars["--theme-grid-small-columns"] = String(spatial.gridSmallColumns);
+    if (spatial.sectionLargeGap)
+      vars["--theme-section-large-gap"] = spacingToVar(spatial.sectionLargeGap);
+    if (spatial.sectionLargePadding)
+      vars["--theme-section-large-padding"] = spacingToVar(
+        spatial.sectionLargePadding
+      );
+    if (spatial.sectionMediumGap)
+      vars["--theme-section-medium-gap"] = spacingToVar(
+        spatial.sectionMediumGap
+      );
+    if (spatial.sectionMediumPadding)
+      vars["--theme-section-medium-padding"] = spacingToVar(
+        spatial.sectionMediumPadding
+      );
+    if (spatial.sectionSmallGap)
+      vars["--theme-section-small-gap"] = spacingToVar(spatial.sectionSmallGap);
+    if (spatial.sectionSmallPadding)
+      vars["--theme-section-small-padding"] = spacingToVar(
+        spatial.sectionSmallPadding
+      );
+    if (spatial.cardLargeGap)
+      vars["--theme-card-large-gap"] = spacingToVar(spatial.cardLargeGap);
+    if (spatial.cardLargePadding)
+      vars["--theme-card-large-padding"] = spacingToVar(
+        spatial.cardLargePadding
+      );
+    if (spatial.cardSmallGap)
+      vars["--theme-card-small-gap"] = spacingToVar(spatial.cardSmallGap);
+    if (spatial.cardSmallPadding)
+      vars["--theme-card-small-padding"] = spacingToVar(
+        spatial.cardSmallPadding
+      );
+  }
+  if (theme.surface) {
+    const { surface } = theme;
+    if (surface.cardRadius)
+      vars["--theme-card-radius"] = radiusToVar(surface.cardRadius);
+    if (surface.cardStroke)
+      vars["--theme-card-stroke"] = `${surface.cardStroke}px`;
+    if (surface.buttonRadius)
+      vars["--theme-button-radius"] = radiusToVar(surface.buttonRadius);
+    if (surface.buttonStrokeWeight)
+      vars["--theme-button-stroke-weight"] = `${surface.buttonStrokeWeight}px`;
+  }
+  return vars;
+}
+var DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
+var heroVariants = tv({
+  slots: {
+    root: "relative flex w-full flex-col overflow-hidden",
+    top: "relative z-10 w-full",
+    content: [
+      "relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
+      "p-20",
+      "md:p-56"
+    ],
+    title: DEFAULT_TITLE_TYPOGRAPHY,
+    indicator: "absolute inset-x-0 bottom-0 z-10 flex justify-center pb-24"
+  },
+  variants: {
+    variant: {
+      A1: {
+        root: "min-h-[80vh]",
+        content: ["justify-end", "lg:p-72"]
+      },
+      A2: {
+        root: "min-h-[80vh]",
+        content: ["justify-start", "lg:p-64"]
+      },
+      A3: {
+        root: "min-h-[80vh]",
+        content: ["items-center justify-center", "lg:p-64"]
+      }
+    },
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+      top: {
+        content: "justify-start"
+      },
+      center: {
+        content: "items-center justify-center"
+      },
+      bottom: {
+        content: "justify-end"
+      }
+    },
+    colorScheme: {
+      dark: {
+        root: "bg-bg-page",
+        title: "text-text-primary"
+      },
+      light: {
+        root: "bg-gray-900",
+        title: "text-text-inverted"
+      }
+    },
+    hasBackground: {
+      true: {
+        root: "bg-transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "A1",
+    colorScheme: "dark"
+  }
+});
+var heroHeaderVariants = tv({
+  base: "relative z-10 w-full"
+});
+var heroContentVariants = tv({
+  base: [
+    "relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
+    "p-20",
+    "md:p-56",
+    "lg:p-72"
+  ]
+});
+var HeroHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: heroHeaderVariants({ class: className }),
+      ...props
+    }
+  )
+);
+HeroHeader.displayName = "Hero.Header";
+var HeroContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: heroContentVariants({ class: className }),
+      ...props
+    }
+  )
+);
+HeroContent.displayName = "Hero.Content";
+function isColorString(background) {
+  return typeof background === "string" && (background.startsWith("#") || background.startsWith("rgb") || background.startsWith("hsl") || /^(var\(|[a-z]+$)/i.test(background));
+}
+var Hero = React.forwardRef(
+  ({
+    className,
+    children,
+    title,
+    titleClassName,
+    colorScheme = "dark",
+    contentAlign,
+    top,
+    indicator,
+    variant,
+    background,
+    overlayOpacity = 0,
+    overlayColor = "black",
+    borderRadius,
+    theme,
+    style,
+    ...props
+  }, ref) => {
+    const isColor = isColorString(background);
+    const hasMediaBackground = background && !isColor;
+    const styles = heroVariants({
+      variant,
+      contentAlign,
+      colorScheme,
+      hasBackground: !!background
+    });
+    const themeStyles = themeToStyleVars(theme);
+    const combinedStyles = {
+      ...themeStyles,
+      ...isColor ? { backgroundColor: background } : {},
+      ...borderRadius ? { borderRadius } : {},
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: styles.root({ class: className }),
+        style: Object.keys(combinedStyles).length > 0 ? combinedStyles : void 0,
+        ...props,
+        children: [
+          hasMediaBackground && background,
+          hasMediaBackground && overlayOpacity > 0 && /* @__PURE__ */ jsx(
+            BackgroundOverlay,
+            {
+              opacity: overlayOpacity,
+              className: overlayColor !== "black" ? void 0 : "bg-black",
+              style: overlayColor !== "black" ? { backgroundColor: overlayColor } : void 0
+            }
+          ),
+          top && /* @__PURE__ */ jsx("div", { className: styles.top(), children: top }),
+          /* @__PURE__ */ jsxs("div", { className: styles.content(), children: [
+            title && /* @__PURE__ */ jsx("h1", { className: styles.title({ class: titleClassName }), children: title }),
+            children
+          ] }),
+          indicator && /* @__PURE__ */ jsx("div", { className: styles.indicator(), children: indicator })
+        ]
+      }
+    );
+  }
+);
+Hero.displayName = "Hero";
+Hero.Header = HeroHeader;
+Hero.Content = HeroContent;
+
+export { DEFAULT_TITLE_TYPOGRAPHY, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, BackgroundStream as HeroBackgroundStream, BackgroundVideo as HeroBackgroundVideo, HeroContent, BackgroundGradient as HeroGradient, HeroHeader, BackgroundOverlay as HeroOverlay, heroContentVariants, heroHeaderVariants, heroVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/hero/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/atoms/background/background.tsx","../../src/lib/theme.ts","../../src/components/sections/hero/hero.tsx"],"names":["tv","React2","jsx"],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\n\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\n// =============================================================================\n// Background Atomic Component\n// =============================================================================\n\nconst backgroundVariants = tv({\n\tbase: \"absolute inset-0\",\n});\n\n/**\n * Base container for background composition.\n * Use as a wrapper to compose multiple background layers (image, video, overlay, gradient).\n *\n * @example\n * ```tsx\n * <Background>\n *   <Background.Image src=\"/hero.jpg\" />\n *   <Background.Overlay opacity={0.4} />\n *   <Background.Gradient direction=\"to-t\" from=\"black\" to=\"transparent\" />\n * </Background>\n * ```\n */\nexport interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst Background = React.forwardRef<HTMLDivElement, BackgroundProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={backgroundVariants({ class: className })}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nBackground.displayName = \"Background\";\n\n// =============================================================================\n// Background.Image\n// =============================================================================\n\nconst backgroundImageVariants = tv({\n\tbase: \"absolute inset-0 size-full object-cover\",\n});\n\nexport interface BackgroundImageProps\n\textends useRender.ComponentProps<\"img\">,\n\t\tOmit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"render\"> {\n\t/**\n\t * URL for the background image\n\t */\n\tsrc: string;\n\t/**\n\t * Object position (default: \"center\")\n\t */\n\tposition?: string;\n}\n\n/**\n * Background image layer using an actual img element with object-cover.\n * Supports native lazy loading, srcset, and better accessibility.\n * Supports render prop for element composition.\n */\nfunction BackgroundImage(props: BackgroundImageProps) {\n\tconst {\n\t\tclassName,\n\t\tsrc,\n\t\tposition = \"center\",\n\t\talt = \"\",\n\t\tstyle,\n\t\trender,\n\t\t...otherProps\n\t} = props;\n\n\tconst imgClassName = backgroundImageVariants({ class: className });\n\tconst imgStyle = { objectPosition: position, ...style };\n\n\treturn useRender({\n\t\trender,\n\t\tprops: {\n\t\t\tsrc,\n\t\t\talt,\n\t\t\tclassName: imgClassName,\n\t\t\tstyle: imgStyle,\n\t\t\t...otherProps,\n\t\t},\n\t\tdefaultTagName: \"img\",\n\t});\n}\nBackgroundImage.displayName = \"Background.Image\";\n\n// =============================================================================\n// Background.Video\n// =============================================================================\n\nconst backgroundVideoVariants = tv({\n\tbase: \"absolute inset-0 size-full object-cover\",\n});\n\nexport interface BackgroundVideoProps\n\textends useRender.ComponentProps<\"video\">,\n\t\tOmit<\n\t\t\tReact.VideoHTMLAttributes<HTMLVideoElement>,\n\t\t\t\"children\" | \"render\" | \"src\"\n\t\t> {\n\t/**\n\t * URL for the video source\n\t */\n\tsrc: string;\n\t/**\n\t * Video MIME type (default: auto-detected from src)\n\t */\n\ttype?: string;\n\t/**\n\t * Poster image URL shown before video loads\n\t */\n\tposter?: string;\n}\n\n/**\n * Background video layer using HTML5 video element.\n * Supports render prop for element composition.\n */\nfunction BackgroundVideo(props: BackgroundVideoProps) {\n\tconst {\n\t\tclassName,\n\t\tsrc,\n\t\ttype,\n\t\tposter,\n\t\tautoPlay = true,\n\t\tloop = true,\n\t\tmuted = true,\n\t\tplaysInline = true,\n\t\trender,\n\t\tchildren,\n\t\t...otherProps\n\t} = props;\n\n\tconst videoClassName = backgroundVideoVariants({ class: className });\n\n\t// useRender must be called unconditionally\n\tconst rendered = useRender({\n\t\trender,\n\t\tprops: {\n\t\t\tautoPlay,\n\t\t\tloop,\n\t\t\tmuted,\n\t\t\tplaysInline,\n\t\t\tposter,\n\t\t\tclassName: videoClassName,\n\t\t\t...otherProps,\n\t\t},\n\t\tdefaultTagName: \"video\",\n\t});\n\n\t// If no render prop, return video with source child\n\tif (!render) {\n\t\treturn (\n\t\t\t<video\n\t\t\t\tautoPlay={autoPlay}\n\t\t\t\tloop={loop}\n\t\t\t\tmuted={muted}\n\t\t\t\tplaysInline={playsInline}\n\t\t\t\tposter={poster}\n\t\t\t\tclassName={videoClassName}\n\t\t\t\t{...otherProps}\n\t\t\t>\n\t\t\t\t<source src={src} type={type} />\n\t\t\t</video>\n\t\t);\n\t}\n\n\treturn rendered;\n}\nBackgroundVideo.displayName = \"Background.Video\";\n\n// =============================================================================\n// Background.Stream\n// =============================================================================\n\nconst backgroundStreamVariants = tv({\n\tbase: \"absolute inset-0 size-full border-0 scale-[1.5] object-cover\",\n});\n\nexport interface BackgroundStreamProps\n\textends React.IframeHTMLAttributes<HTMLIFrameElement> {\n\t/**\n\t * Cloudflare Stream video ID\n\t */\n\tvideoId: string;\n\t/**\n\t * Poster image URL (Cloudflare Stream thumbnail or custom)\n\t */\n\tposter?: string;\n\t/**\n\t * Whether the video should autoplay (default: true)\n\t */\n\tautoplay?: boolean;\n\t/**\n\t * Whether the video should loop (default: true)\n\t */\n\tloop?: boolean;\n\t/**\n\t * Whether the video should be muted (default: true)\n\t */\n\tmuted?: boolean;\n\t/**\n\t * Whether to show playback controls (default: false)\n\t */\n\tcontrols?: boolean;\n\t/**\n\t * Custom Cloudflare customer subdomain (if using custom domains)\n\t */\n\tcustomerSubdomain?: string;\n}\n\n/**\n * Background video layer using Cloudflare Stream.\n */\nconst BackgroundStream = React.forwardRef<\n\tHTMLIFrameElement,\n\tBackgroundStreamProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvideoId,\n\t\t\tposter,\n\t\t\tautoplay = true,\n\t\t\tloop = true,\n\t\t\tmuted = true,\n\t\t\tcontrols = false,\n\t\t\tcustomerSubdomain,\n\t\t\ttitle = \"Background video\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst baseUrl = customerSubdomain\n\t\t\t? `https://${customerSubdomain}.cloudflarestream.com`\n\t\t\t: \"https://iframe.videodelivery.net\";\n\n\t\tconst params = new URLSearchParams();\n\t\tif (autoplay) params.set(\"autoplay\", \"true\");\n\t\tif (loop) params.set(\"loop\", \"true\");\n\t\tif (muted) params.set(\"muted\", \"true\");\n\t\tif (!controls) params.set(\"controls\", \"false\");\n\t\tif (poster) params.set(\"poster\", poster);\n\t\tparams.set(\"preload\", \"auto\");\n\n\t\tconst streamUrl = `${baseUrl}/${videoId}?${params.toString()}`;\n\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tref={ref}\n\t\t\t\tsrc={streamUrl}\n\t\t\t\ttitle={title}\n\t\t\t\tallow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n\t\t\t\tallowFullScreen\n\t\t\t\tclassName={backgroundStreamVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBackgroundStream.displayName = \"Background.Stream\";\n\n// =============================================================================\n// Background.Overlay\n// =============================================================================\n\nconst backgroundOverlayVariants = tv({\n\tbase: \"absolute inset-0 bg-bg-overlay\",\n});\n\nexport interface BackgroundOverlayProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Overlay opacity (0-1)\n\t */\n\topacity?: number;\n}\n\n/**\n * Solid color overlay layer. Uses semantic bg-overlay token by default.\n * Override with className for different colors.\n */\nconst BackgroundOverlay = React.forwardRef<\n\tHTMLDivElement,\n\tBackgroundOverlayProps\n>(({ className, opacity = 0.4, style, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\taria-hidden=\"true\"\n\t\tclassName={backgroundOverlayVariants({ class: className })}\n\t\tstyle={{\n\t\t\topacity,\n\t\t\t...style,\n\t\t}}\n\t\t{...props}\n\t/>\n));\nBackgroundOverlay.displayName = \"Background.Overlay\";\n\n// =============================================================================\n// Background.Gradient\n// =============================================================================\n\nconst backgroundGradientVariants = tv({\n\tbase: \"absolute inset-0\",\n});\n\nexport interface BackgroundGradientProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Gradient direction (Tailwind convention: to-t, to-b, to-l, to-r, etc.)\n\t * Or CSS gradient direction (to top, to bottom, 45deg, etc.)\n\t */\n\tdirection?: string;\n\t/**\n\t * Starting color (from)\n\t */\n\tfrom?: string;\n\t/**\n\t * Optional middle color (via)\n\t */\n\tvia?: string;\n\t/**\n\t * Ending color (to)\n\t */\n\tto?: string;\n\t/**\n\t * Full custom gradient string (overrides from/via/to)\n\t */\n\tgradient?: string;\n}\n\n/**\n * Gradient overlay layer. Use for fading backgrounds or creating depth.\n */\nconst BackgroundGradient = React.forwardRef<\n\tHTMLDivElement,\n\tBackgroundGradientProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdirection = \"to-b\",\n\t\t\tfrom = \"transparent\",\n\t\t\tvia,\n\t\t\tto = \"black\",\n\t\t\tgradient,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\t// Convert Tailwind-style direction to CSS\n\t\tconst cssDirection = direction.startsWith(\"to-\")\n\t\t\t? direction.replace(\"to-\", \"to \")\n\t\t\t: direction;\n\n\t\tconst gradientValue =\n\t\t\tgradient ||\n\t\t\t(via\n\t\t\t\t? `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})`\n\t\t\t\t: `linear-gradient(${cssDirection}, ${from}, ${to})`);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={backgroundGradientVariants({ class: className })}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundImage: gradientValue,\n\t\t\t\t\t...style,\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBackgroundGradient.displayName = \"Background.Gradient\";\n\n// =============================================================================\n// Compound Export\n// =============================================================================\n\nconst BackgroundCompound = Object.assign(Background, {\n\tImage: BackgroundImage,\n\tVideo: BackgroundVideo,\n\tStream: BackgroundStream,\n\tOverlay: BackgroundOverlay,\n\tGradient: BackgroundGradient,\n});\n\nexport {\n\tBackgroundCompound as Background,\n\tBackgroundImage,\n\tBackgroundVideo,\n\tBackgroundStream,\n\tBackgroundOverlay,\n\tBackgroundGradient,\n\tbackgroundVariants,\n\tbackgroundImageVariants,\n\tbackgroundVideoVariants,\n\tbackgroundStreamVariants,\n\tbackgroundOverlayVariants,\n\tbackgroundGradientVariants,\n};\n","/**\n * Component-level theming interface\n *\n * This interface defines all the customizable design tokens that can be\n * overridden at the component level. Components accepting a `theme` prop\n * will apply these values as CSS custom properties, allowing fine-grained\n * control over appearance without creating new variants.\n *\n * All values use primitive token names (e.g., \"gray-100\", \"spacing-40\")\n * which are converted to CSS variable references internally.\n */\n\n// =============================================================================\n// Token Name Types\n// =============================================================================\n\n/**\n * Color token names - maps to `--color-{name}` CSS variables\n * @example \"gray-100\", \"ember-v300\", \"alpha-black-10\"\n */\nexport type ColorToken =\n\t// Grayscale\n\t| \"gray-50\"\n\t| \"gray-100\"\n\t| \"gray-200\"\n\t| \"gray-300\"\n\t| \"gray-400\"\n\t| \"gray-500\"\n\t| \"gray-600\"\n\t| \"gray-700\"\n\t| \"gray-800\"\n\t| \"gray-900\"\n\t| \"gray-1000\"\n\t| \"gray-1100\"\n\t| \"gray-1200\"\n\t// Steel\n\t| \"steel-50\"\n\t| \"steel-100\"\n\t| \"steel-200\"\n\t| \"steel-300\"\n\t| \"steel-400\"\n\t| \"steel-500\"\n\t| \"steel-600\"\n\t| \"steel-700\"\n\t| \"steel-800\"\n\t| \"steel-900\"\n\t| \"steel-1000\"\n\t| \"steel-1100\"\n\t| \"steel-1200\"\n\t// Brown\n\t| \"brown-50\"\n\t| \"brown-100\"\n\t| \"brown-200\"\n\t| \"brown-300\"\n\t| \"brown-400\"\n\t| \"brown-500\"\n\t| \"brown-600\"\n\t| \"brown-700\"\n\t| \"brown-800\"\n\t| \"brown-900\"\n\t| \"brown-1000\"\n\t| \"brown-1100\"\n\t| \"brown-1200\"\n\t// Ember\n\t| \"ember-50\"\n\t| \"ember-100\"\n\t| \"ember-200\"\n\t| \"ember-300\"\n\t| \"ember-400\"\n\t| \"ember-500\"\n\t| \"ember-600\"\n\t| \"ember-700\"\n\t| \"ember-800\"\n\t| \"ember-900\"\n\t| \"ember-v100\"\n\t| \"ember-v200\"\n\t| \"ember-v300\"\n\t| \"ember-v400\"\n\t// Orange\n\t| \"orange-50\"\n\t| \"orange-100\"\n\t| \"orange-200\"\n\t| \"orange-300\"\n\t| \"orange-400\"\n\t| \"orange-500\"\n\t| \"orange-600\"\n\t| \"orange-700\"\n\t| \"orange-800\"\n\t| \"orange-900\"\n\t| \"orange-v100\"\n\t| \"orange-v200\"\n\t| \"orange-v300\"\n\t| \"orange-v400\"\n\t// Amber\n\t| \"amber-50\"\n\t| \"amber-100\"\n\t| \"amber-200\"\n\t| \"amber-300\"\n\t| \"amber-400\"\n\t| \"amber-500\"\n\t| \"amber-600\"\n\t| \"amber-700\"\n\t| \"amber-800\"\n\t| \"amber-900\"\n\t| \"amber-v100\"\n\t| \"amber-v200\"\n\t| \"amber-v300\"\n\t| \"amber-v400\"\n\t// Yellow\n\t| \"yellow-50\"\n\t| \"yellow-100\"\n\t| \"yellow-200\"\n\t| \"yellow-300\"\n\t| \"yellow-400\"\n\t| \"yellow-500\"\n\t| \"yellow-600\"\n\t| \"yellow-700\"\n\t| \"yellow-800\"\n\t| \"yellow-900\"\n\t| \"yellow-v100\"\n\t| \"yellow-v200\"\n\t| \"yellow-v300\"\n\t| \"yellow-v400\"\n\t// Lime\n\t| \"lime-50\"\n\t| \"lime-100\"\n\t| \"lime-200\"\n\t| \"lime-300\"\n\t| \"lime-400\"\n\t| \"lime-500\"\n\t| \"lime-600\"\n\t| \"lime-700\"\n\t| \"lime-800\"\n\t| \"lime-900\"\n\t| \"lime-v100\"\n\t| \"lime-v200\"\n\t| \"lime-v300\"\n\t| \"lime-v400\"\n\t// Green\n\t| \"green-50\"\n\t| \"green-100\"\n\t| \"green-200\"\n\t| \"green-300\"\n\t| \"green-400\"\n\t| \"green-500\"\n\t| \"green-600\"\n\t| \"green-700\"\n\t| \"green-800\"\n\t| \"green-900\"\n\t| \"green-v100\"\n\t| \"green-v200\"\n\t| \"green-v300\"\n\t| \"green-v400\"\n\t// Sage\n\t| \"sage-50\"\n\t| \"sage-100\"\n\t| \"sage-200\"\n\t| \"sage-300\"\n\t| \"sage-400\"\n\t| \"sage-500\"\n\t| \"sage-600\"\n\t| \"sage-700\"\n\t| \"sage-800\"\n\t| \"sage-900\"\n\t| \"sage-v100\"\n\t| \"sage-v200\"\n\t| \"sage-v300\"\n\t| \"sage-v400\"\n\t// Teal\n\t| \"teal-50\"\n\t| \"teal-100\"\n\t| \"teal-200\"\n\t| \"teal-300\"\n\t| \"teal-400\"\n\t| \"teal-500\"\n\t| \"teal-600\"\n\t| \"teal-700\"\n\t| \"teal-800\"\n\t| \"teal-900\"\n\t| \"teal-v100\"\n\t| \"teal-v200\"\n\t| \"teal-v300\"\n\t| \"teal-v400\"\n\t// Cyan\n\t| \"cyan-50\"\n\t| \"cyan-100\"\n\t| \"cyan-200\"\n\t| \"cyan-300\"\n\t| \"cyan-400\"\n\t| \"cyan-500\"\n\t| \"cyan-600\"\n\t| \"cyan-700\"\n\t| \"cyan-800\"\n\t| \"cyan-900\"\n\t| \"cyan-v100\"\n\t| \"cyan-v200\"\n\t| \"cyan-v300\"\n\t| \"cyan-v400\"\n\t// Ice\n\t| \"ice-50\"\n\t| \"ice-100\"\n\t| \"ice-200\"\n\t| \"ice-300\"\n\t| \"ice-400\"\n\t| \"ice-500\"\n\t| \"ice-600\"\n\t| \"ice-700\"\n\t| \"ice-800\"\n\t| \"ice-900\"\n\t| \"ice-v100\"\n\t| \"ice-v200\"\n\t| \"ice-v300\"\n\t| \"ice-v400\"\n\t// Blue\n\t| \"blue-50\"\n\t| \"blue-100\"\n\t| \"blue-200\"\n\t| \"blue-300\"\n\t| \"blue-400\"\n\t| \"blue-500\"\n\t| \"blue-600\"\n\t| \"blue-700\"\n\t| \"blue-800\"\n\t| \"blue-900\"\n\t| \"blue-v100\"\n\t| \"blue-v200\"\n\t| \"blue-v300\"\n\t| \"blue-v400\"\n\t// Indigo\n\t| \"indigo-50\"\n\t| \"indigo-100\"\n\t| \"indigo-200\"\n\t| \"indigo-300\"\n\t| \"indigo-400\"\n\t| \"indigo-500\"\n\t| \"indigo-600\"\n\t| \"indigo-700\"\n\t| \"indigo-800\"\n\t| \"indigo-900\"\n\t| \"indigo-v100\"\n\t| \"indigo-v200\"\n\t| \"indigo-v300\"\n\t| \"indigo-v400\"\n\t// Iris\n\t| \"iris-50\"\n\t| \"iris-100\"\n\t| \"iris-200\"\n\t| \"iris-300\"\n\t| \"iris-400\"\n\t| \"iris-500\"\n\t| \"iris-600\"\n\t| \"iris-700\"\n\t| \"iris-800\"\n\t| \"iris-900\"\n\t| \"iris-v100\"\n\t| \"iris-v200\"\n\t| \"iris-v300\"\n\t| \"iris-v400\"\n\t// Purple\n\t| \"purple-50\"\n\t| \"purple-100\"\n\t| \"purple-200\"\n\t| \"purple-300\"\n\t| \"purple-400\"\n\t| \"purple-500\"\n\t| \"purple-600\"\n\t| \"purple-700\"\n\t| \"purple-800\"\n\t| \"purple-900\"\n\t| \"purple-v100\"\n\t| \"purple-v200\"\n\t| \"purple-v300\"\n\t| \"purple-v400\"\n\t// Pink\n\t| \"pink-50\"\n\t| \"pink-100\"\n\t| \"pink-200\"\n\t| \"pink-300\"\n\t| \"pink-400\"\n\t| \"pink-500\"\n\t| \"pink-600\"\n\t| \"pink-700\"\n\t| \"pink-800\"\n\t| \"pink-900\"\n\t| \"pink-v100\"\n\t| \"pink-v200\"\n\t| \"pink-v300\"\n\t| \"pink-v400\"\n\t// Red\n\t| \"red-50\"\n\t| \"red-100\"\n\t| \"red-200\"\n\t| \"red-300\"\n\t| \"red-400\"\n\t| \"red-500\"\n\t| \"red-600\"\n\t| \"red-700\"\n\t| \"red-800\"\n\t| \"red-900\"\n\t| \"red-v100\"\n\t| \"red-v200\"\n\t| \"red-v300\"\n\t| \"red-v400\"\n\t// Alpha\n\t| \"alpha-black-5\"\n\t| \"alpha-black-10\"\n\t| \"alpha-black-20\"\n\t| \"alpha-black-30\"\n\t| \"alpha-black-40\"\n\t| \"alpha-black-50\"\n\t| \"alpha-black-60\"\n\t| \"alpha-black-70\"\n\t| \"alpha-black-80\"\n\t| \"alpha-black-90\"\n\t| \"alpha-black-95\"\n\t| \"alpha-white-5\"\n\t| \"alpha-white-10\"\n\t| \"alpha-white-20\"\n\t| \"alpha-white-30\"\n\t| \"alpha-white-40\"\n\t| \"alpha-white-50\"\n\t| \"alpha-white-60\"\n\t| \"alpha-white-70\"\n\t| \"alpha-white-80\"\n\t| \"alpha-white-90\"\n\t| \"alpha-white-95\"\n\t// Special\n\t| \"white\"\n\t| \"black\";\n\n/**\n * Spacing token names - maps to `--spacing-{name}` CSS variables\n * @example \"spacing-40\", \"spacing-72\"\n */\nexport type SpacingToken =\n\t| \"spacing-0\"\n\t| \"spacing-2\"\n\t| \"spacing-4\"\n\t| \"spacing-6\"\n\t| \"spacing-8\"\n\t| \"spacing-10\"\n\t| \"spacing-11\"\n\t| \"spacing-12\"\n\t| \"spacing-16\"\n\t| \"spacing-20\"\n\t| \"spacing-24\"\n\t| \"spacing-28\"\n\t| \"spacing-32\"\n\t| \"spacing-36\"\n\t| \"spacing-40\"\n\t| \"spacing-48\"\n\t| \"spacing-56\"\n\t| \"spacing-64\"\n\t| \"spacing-72\"\n\t| \"spacing-80\"\n\t| \"spacing-96\"\n\t| \"spacing-112\"\n\t| \"spacing-128\"\n\t| \"spacing-144\"\n\t| \"spacing-160\"\n\t| \"spacing-176\"\n\t| \"spacing-192\"\n\t| \"spacing-208\"\n\t| \"spacing-224\"\n\t| \"spacing-240\"\n\t| \"spacing-256\"\n\t| \"spacing-288\"\n\t| \"spacing-320\"\n\t| \"spacing-352\"\n\t| \"spacing-384\"\n\t| \"spacing-400\";\n\n/**\n * Radius token names - maps to `--radii-{name}` CSS variables\n * @example \"radii-4\", \"radii-6\"\n */\nexport type RadiusToken =\n\t| \"radii-0\"\n\t| \"radii-2\"\n\t| \"radii-4\"\n\t| \"radii-6\"\n\t| \"radii-8\"\n\t| \"radii-10\"\n\t| \"radii-11\"\n\t| \"radii-12\"\n\t| \"radii-16\"\n\t| \"radii-20\"\n\t| \"radii-24\"\n\t| \"radii-28\"\n\t| \"radii-32\"\n\t| \"radii-36\"\n\t| \"radii-40\"\n\t| \"radii-48\"\n\t| \"radii-56\"\n\t| \"radii-64\"\n\t| \"radii-72\"\n\t| \"radii-80\"\n\t| \"radii-96\"\n\t| \"radii-112\"\n\t| \"radii-128\"\n\t| \"radii-144\"\n\t| \"radii-160\"\n\t| \"radii-176\"\n\t| \"radii-192\"\n\t| \"radii-208\"\n\t| \"radii-224\"\n\t| \"radii-240\"\n\t| \"radii-256\"\n\t| \"radii-288\"\n\t| \"radii-320\"\n\t| \"radii-352\"\n\t| \"radii-384\"\n\t| \"radii-400\";\n\n/**\n * Font size token values - primitive font sizes available in the design system\n * These correspond to Tailwind classes like `text-64`, `text-128`, etc.\n * @example 64, 128, 192\n */\nexport type FontSizeToken =\n\t| 9\n\t| 11\n\t| 12\n\t| 14\n\t| 16\n\t| 18\n\t| 21\n\t| 24\n\t| 28\n\t| 32\n\t| 36\n\t| 42\n\t| 48\n\t| 56\n\t| 64\n\t| 72\n\t| 84\n\t| 88\n\t| 96\n\t| 112\n\t| 128\n\t| 148\n\t| 168\n\t| 192\n\t| 224\n\t| 256\n\t| 280;\n\n/**\n * Array of all available font sizes for use in UI selectors/dropdowns\n */\nexport const FONT_SIZES: FontSizeToken[] = [\n\t9, 11, 12, 14, 16, 18, 21, 24, 28, 32, 36, 42, 48, 56, 64, 72, 84, 88, 96,\n\t112, 128, 148, 168, 192, 224, 256, 280,\n];\n\n/**\n * Helper to generate typography class string from font size\n * @example fontSizeToClass(128) => \"text-128 leading-128 tracking-128\"\n */\nexport function fontSizeToClass(size: FontSizeToken): string {\n\treturn `text-${size} leading-${size} tracking-${size}`;\n}\n\n/**\n * Helper to generate responsive typography class string\n * @example responsiveTypographyClass(64, 128, 192) => \"text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 xl:text-192 xl:leading-192 xl:tracking-192\"\n */\nexport function responsiveTypographyClass(\n\tmobile: FontSizeToken,\n\ttablet: FontSizeToken,\n\tdesktop: FontSizeToken,\n): string {\n\treturn [\n\t\tfontSizeToClass(mobile),\n\t\t`md:${fontSizeToClass(tablet).split(\" \").join(\" md:\")}`,\n\t\t`xl:${fontSizeToClass(desktop).split(\" \").join(\" xl:\")}`,\n\t].join(\" \");\n}\n\n// =============================================================================\n// Color Tokens\n// =============================================================================\n\nexport interface ComponentThemeColors {\n\t/**\n\t * Background color for sections\n\t * @example \"gray-100\"\n\t */\n\tbgSection?: ColorToken;\n\n\t/**\n\t * Background color for cards\n\t * @example \"white\"\n\t */\n\tcardBackground?: ColorToken;\n\n\t/**\n\t * Muted background color\n\t * @example \"gray-50\"\n\t */\n\tbgMuted?: ColorToken;\n\n\t/**\n\t * Primary text color\n\t * @example \"gray-1100\"\n\t */\n\ttextPrimary?: ColorToken;\n\n\t/**\n\t * Secondary text color\n\t * @example \"gray-800\"\n\t */\n\ttextSecondary?: ColorToken;\n\n\t/**\n\t * Muted text color\n\t * @example \"gray-600\"\n\t */\n\ttextMuted?: ColorToken;\n\n\t/**\n\t * Inverted text color (for dark backgrounds)\n\t * @example \"gray-100\"\n\t */\n\ttextInverted?: ColorToken;\n\n\t/**\n\t * Link text color\n\t * @example \"gray-1100\"\n\t */\n\ttextLink?: ColorToken;\n\n\t/**\n\t * Link hover text color\n\t * @example \"gray-700\"\n\t */\n\ttextLinkHover?: ColorToken;\n\n\t/**\n\t * Brand accent color\n\t * @example \"ember-v300\"\n\t */\n\taccentBrand?: ColorToken;\n\n\t/**\n\t * Soft brand accent color\n\t * @example \"ember-100\"\n\t */\n\taccentBrandSoft?: ColorToken;\n\n\t/**\n\t * Subtle border color\n\t * @example \"alpha-black-10\"\n\t */\n\tborderSubtle?: ColorToken;\n\n\t/**\n\t * Strong border color\n\t * @example \"alpha-black-20\"\n\t */\n\tborderStrong?: ColorToken;\n\n\t/**\n\t * Focus border color (uses accentBrand by default)\n\t * @example \"ember-v300\"\n\t */\n\tborderFocus?: ColorToken;\n\n\t/**\n\t * Divider border color\n\t * @example \"alpha-black-10\"\n\t */\n\tborderDivider?: ColorToken;\n\n\t/**\n\t * Primary button background color\n\t * @example \"gray-1100\"\n\t */\n\tbuttonPrimaryBg?: ColorToken;\n\n\t/**\n\t * Primary button hover background color\n\t * @example \"gray-600\"\n\t */\n\tbuttonPrimaryBgHover?: ColorToken;\n\n\t/**\n\t * Secondary button background color\n\t * @example \"white\"\n\t */\n\tbuttonSecondaryBg?: ColorToken;\n\n\t/**\n\t * Secondary button hover background color\n\t * @example \"gray-100\"\n\t */\n\tbuttonSecondaryBgHover?: ColorToken;\n}\n\n// =============================================================================\n// Spatial Tokens\n// =============================================================================\n\nexport interface ComponentThemeSpatial {\n\t/**\n\t * Grid margin for large breakpoint\n\t * @example \"spacing-72\"\n\t */\n\tgridLargeMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for large breakpoint\n\t * @example \"spacing-24\"\n\t */\n\tgridLargeGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for large breakpoint\n\t */\n\tgridLargeColumns?: number;\n\n\t/**\n\t * Grid margin for medium breakpoint\n\t * @example \"spacing-56\"\n\t */\n\tgridMediumMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for medium breakpoint\n\t * @example \"spacing-20\"\n\t */\n\tgridMediumGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for medium breakpoint\n\t */\n\tgridMediumColumns?: number;\n\n\t/**\n\t * Grid margin for small breakpoint\n\t * @example \"spacing-24\"\n\t */\n\tgridSmallMargin?: SpacingToken;\n\n\t/**\n\t * Grid gutter for small breakpoint\n\t * @example \"spacing-12\"\n\t */\n\tgridSmallGutter?: SpacingToken;\n\n\t/**\n\t * Number of grid columns for small breakpoint\n\t */\n\tgridSmallColumns?: number;\n\n\t/**\n\t * Section gap for large breakpoint\n\t * @example \"spacing-64\"\n\t */\n\tsectionLargeGap?: SpacingToken;\n\n\t/**\n\t * Section padding for large breakpoint\n\t * @example \"spacing-128\"\n\t */\n\tsectionLargePadding?: SpacingToken;\n\n\t/**\n\t * Section gap for medium breakpoint\n\t * @example \"spacing-56\"\n\t */\n\tsectionMediumGap?: SpacingToken;\n\n\t/**\n\t * Section padding for medium breakpoint\n\t * @example \"spacing-96\"\n\t */\n\tsectionMediumPadding?: SpacingToken;\n\n\t/**\n\t * Section gap for small breakpoint\n\t * @example \"spacing-32\"\n\t */\n\tsectionSmallGap?: SpacingToken;\n\n\t/**\n\t * Section padding for small breakpoint\n\t * @example \"spacing-64\"\n\t */\n\tsectionSmallPadding?: SpacingToken;\n\n\t/**\n\t * Card gap for large size\n\t * @example \"spacing-10\"\n\t */\n\tcardLargeGap?: SpacingToken;\n\n\t/**\n\t * Card padding for large size\n\t * @example \"spacing-24\"\n\t */\n\tcardLargePadding?: SpacingToken;\n\n\t/**\n\t * Card gap for small size\n\t * @example \"spacing-12\"\n\t */\n\tcardSmallGap?: SpacingToken;\n\n\t/**\n\t * Card padding for small size\n\t * @example \"spacing-16\"\n\t */\n\tcardSmallPadding?: SpacingToken;\n}\n\n// =============================================================================\n// Surface Tokens\n// =============================================================================\n\nexport interface ComponentThemeSurface {\n\t/**\n\t * Card border radius\n\t * @example \"radii-4\"\n\t */\n\tcardRadius?: RadiusToken;\n\n\t/**\n\t * Card stroke/border width in pixels\n\t * @example 1\n\t */\n\tcardStroke?: number;\n\n\t/**\n\t * Button border radius\n\t * @example \"radii-6\"\n\t */\n\tbuttonRadius?: RadiusToken;\n\n\t/**\n\t * Button stroke/border weight in pixels\n\t * @example 1\n\t */\n\tbuttonStrokeWeight?: number;\n}\n\n// =============================================================================\n// Combined Theme Interface\n// =============================================================================\n\n/**\n * Complete component theme interface combining colors, spatial, and surface tokens.\n *\n * @example\n * ```tsx\n * const customTheme: ComponentTheme = {\n *   colors: {\n *     textPrimary: \"gray-100\",\n *     accentBrand: \"ember-500\",\n *   },\n *   spatial: {\n *     sectionLargePadding: \"spacing-96\",\n *   },\n *   surface: {\n *     cardRadius: \"radii-8\",\n *   },\n * };\n *\n * <Tout theme={customTheme} ... />\n * ```\n */\nexport interface ComponentTheme {\n\tcolors?: ComponentThemeColors;\n\tspatial?: ComponentThemeSpatial;\n\tsurface?: ComponentThemeSurface;\n}\n\n// =============================================================================\n// Button Theme Interface\n// =============================================================================\n\n/**\n * Button-specific theme interface for customizing individual button appearance.\n *\n * @example\n * ```tsx\n * const buttonTheme: ButtonTheme = {\n *   bg: \"ember-500\",\n *   bgHover: \"ember-600\",\n *   text: \"white\",\n *   radius: \"radii-8\",\n * };\n *\n * <Button theme={buttonTheme}>Themed Button</Button>\n * ```\n */\nexport interface ButtonTheme {\n\t/** Background color */\n\tbg?: ColorToken;\n\t/** Background color on hover */\n\tbgHover?: ColorToken;\n\t/** Background color on active/press */\n\tbgActive?: ColorToken;\n\t/** Text color */\n\ttext?: ColorToken;\n\t/** Border color (if using border) */\n\tborderColor?: ColorToken;\n\t/** Border width in pixels (0 for no border) */\n\tborderWidth?: number;\n\t/** Border radius */\n\tradius?: RadiusToken;\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Converts a color token name to a CSS variable reference\n */\nfunction colorToVar(token: ColorToken): string {\n\treturn `var(--color-${token})`;\n}\n\n/**\n * Converts a spacing token name to a CSS variable reference\n */\nfunction spacingToVar(token: SpacingToken): string {\n\treturn `var(--${token})`;\n}\n\n/**\n * Converts a radius token name to a CSS variable reference\n */\nfunction radiusToVar(token: RadiusToken): string {\n\treturn `var(--${token})`;\n}\n\n/**\n * Converts a ComponentTheme object to CSS custom properties (inline style object)\n *\n * @param theme - The theme object to convert\n * @returns An object suitable for use as React inline styles\n */\nexport function themeToStyleVars(\n\ttheme: ComponentTheme | undefined,\n): React.CSSProperties {\n\tif (!theme) return {};\n\n\tconst vars: Record<string, string> = {};\n\n\t// Colors\n\tif (theme.colors) {\n\t\tconst { colors } = theme;\n\t\tif (colors.bgSection)\n\t\t\tvars[\"--theme-bg-section\"] = colorToVar(colors.bgSection);\n\t\tif (colors.cardBackground)\n\t\t\tvars[\"--theme-card-background\"] = colorToVar(colors.cardBackground);\n\t\tif (colors.bgMuted) vars[\"--theme-bg-muted\"] = colorToVar(colors.bgMuted);\n\t\tif (colors.textPrimary)\n\t\t\tvars[\"--theme-text-primary\"] = colorToVar(colors.textPrimary);\n\t\tif (colors.textSecondary)\n\t\t\tvars[\"--theme-text-secondary\"] = colorToVar(colors.textSecondary);\n\t\tif (colors.textMuted)\n\t\t\tvars[\"--theme-text-muted\"] = colorToVar(colors.textMuted);\n\t\tif (colors.textInverted)\n\t\t\tvars[\"--theme-text-inverted\"] = colorToVar(colors.textInverted);\n\t\tif (colors.textLink)\n\t\t\tvars[\"--theme-text-link\"] = colorToVar(colors.textLink);\n\t\tif (colors.textLinkHover)\n\t\t\tvars[\"--theme-text-link-hover\"] = colorToVar(colors.textLinkHover);\n\t\tif (colors.accentBrand)\n\t\t\tvars[\"--theme-accent-brand\"] = colorToVar(colors.accentBrand);\n\t\tif (colors.accentBrandSoft)\n\t\t\tvars[\"--theme-accent-brand-soft\"] = colorToVar(colors.accentBrandSoft);\n\t\tif (colors.borderSubtle)\n\t\t\tvars[\"--theme-border-subtle\"] = colorToVar(colors.borderSubtle);\n\t\tif (colors.borderStrong)\n\t\t\tvars[\"--theme-border-strong\"] = colorToVar(colors.borderStrong);\n\t\tif (colors.borderFocus)\n\t\t\tvars[\"--theme-border-focus\"] = colorToVar(colors.borderFocus);\n\t\tif (colors.borderDivider)\n\t\t\tvars[\"--theme-border-divider\"] = colorToVar(colors.borderDivider);\n\t\tif (colors.buttonPrimaryBg)\n\t\t\tvars[\"--theme-button-primary-bg\"] = colorToVar(colors.buttonPrimaryBg);\n\t\tif (colors.buttonPrimaryBgHover)\n\t\t\tvars[\"--theme-button-primary-bg-hover\"] = colorToVar(\n\t\t\t\tcolors.buttonPrimaryBgHover,\n\t\t\t);\n\t\tif (colors.buttonSecondaryBg)\n\t\t\tvars[\"--theme-button-secondary-bg\"] = colorToVar(\n\t\t\t\tcolors.buttonSecondaryBg,\n\t\t\t);\n\t\tif (colors.buttonSecondaryBgHover)\n\t\t\tvars[\"--theme-button-secondary-bg-hover\"] = colorToVar(\n\t\t\t\tcolors.buttonSecondaryBgHover,\n\t\t\t);\n\t}\n\n\t// Spatial\n\tif (theme.spatial) {\n\t\tconst { spatial } = theme;\n\t\tif (spatial.gridLargeMargin)\n\t\t\tvars[\"--theme-grid-large-margin\"] = spacingToVar(spatial.gridLargeMargin);\n\t\tif (spatial.gridLargeGutter)\n\t\t\tvars[\"--theme-grid-large-gutter\"] = spacingToVar(spatial.gridLargeGutter);\n\t\tif (spatial.gridLargeColumns)\n\t\t\tvars[\"--theme-grid-large-columns\"] = String(spatial.gridLargeColumns);\n\t\tif (spatial.gridMediumMargin)\n\t\t\tvars[\"--theme-grid-medium-margin\"] = spacingToVar(\n\t\t\t\tspatial.gridMediumMargin,\n\t\t\t);\n\t\tif (spatial.gridMediumGutter)\n\t\t\tvars[\"--theme-grid-medium-gutter\"] = spacingToVar(\n\t\t\t\tspatial.gridMediumGutter,\n\t\t\t);\n\t\tif (spatial.gridMediumColumns)\n\t\t\tvars[\"--theme-grid-medium-columns\"] = String(spatial.gridMediumColumns);\n\t\tif (spatial.gridSmallMargin)\n\t\t\tvars[\"--theme-grid-small-margin\"] = spacingToVar(spatial.gridSmallMargin);\n\t\tif (spatial.gridSmallGutter)\n\t\t\tvars[\"--theme-grid-small-gutter\"] = spacingToVar(spatial.gridSmallGutter);\n\t\tif (spatial.gridSmallColumns)\n\t\t\tvars[\"--theme-grid-small-columns\"] = String(spatial.gridSmallColumns);\n\t\tif (spatial.sectionLargeGap)\n\t\t\tvars[\"--theme-section-large-gap\"] = spacingToVar(spatial.sectionLargeGap);\n\t\tif (spatial.sectionLargePadding)\n\t\t\tvars[\"--theme-section-large-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionLargePadding,\n\t\t\t);\n\t\tif (spatial.sectionMediumGap)\n\t\t\tvars[\"--theme-section-medium-gap\"] = spacingToVar(\n\t\t\t\tspatial.sectionMediumGap,\n\t\t\t);\n\t\tif (spatial.sectionMediumPadding)\n\t\t\tvars[\"--theme-section-medium-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionMediumPadding,\n\t\t\t);\n\t\tif (spatial.sectionSmallGap)\n\t\t\tvars[\"--theme-section-small-gap\"] = spacingToVar(spatial.sectionSmallGap);\n\t\tif (spatial.sectionSmallPadding)\n\t\t\tvars[\"--theme-section-small-padding\"] = spacingToVar(\n\t\t\t\tspatial.sectionSmallPadding,\n\t\t\t);\n\t\tif (spatial.cardLargeGap)\n\t\t\tvars[\"--theme-card-large-gap\"] = spacingToVar(spatial.cardLargeGap);\n\t\tif (spatial.cardLargePadding)\n\t\t\tvars[\"--theme-card-large-padding\"] = spacingToVar(\n\t\t\t\tspatial.cardLargePadding,\n\t\t\t);\n\t\tif (spatial.cardSmallGap)\n\t\t\tvars[\"--theme-card-small-gap\"] = spacingToVar(spatial.cardSmallGap);\n\t\tif (spatial.cardSmallPadding)\n\t\t\tvars[\"--theme-card-small-padding\"] = spacingToVar(\n\t\t\t\tspatial.cardSmallPadding,\n\t\t\t);\n\t}\n\n\t// Surface\n\tif (theme.surface) {\n\t\tconst { surface } = theme;\n\t\tif (surface.cardRadius)\n\t\t\tvars[\"--theme-card-radius\"] = radiusToVar(surface.cardRadius);\n\t\tif (surface.cardStroke)\n\t\t\tvars[\"--theme-card-stroke\"] = `${surface.cardStroke}px`;\n\t\tif (surface.buttonRadius)\n\t\t\tvars[\"--theme-button-radius\"] = radiusToVar(surface.buttonRadius);\n\t\tif (surface.buttonStrokeWeight)\n\t\t\tvars[\"--theme-button-stroke-weight\"] = `${surface.buttonStrokeWeight}px`;\n\t}\n\n\treturn vars as React.CSSProperties;\n}\n\n/**\n * Converts a ButtonTheme object to CSS custom properties (inline style object)\n *\n * @param theme - The button theme object to convert\n * @returns An object suitable for use as React inline styles\n */\nexport function buttonThemeToStyleVars(\n\ttheme: ButtonTheme | undefined,\n): React.CSSProperties {\n\tif (!theme) return {};\n\n\tconst vars: Record<string, string> = {};\n\n\tif (theme.bg) vars[\"--btn-bg\"] = colorToVar(theme.bg);\n\tif (theme.bgHover) vars[\"--btn-bg-hover\"] = colorToVar(theme.bgHover);\n\tif (theme.bgActive) vars[\"--btn-bg-active\"] = colorToVar(theme.bgActive);\n\tif (theme.text) vars[\"--btn-text\"] = colorToVar(theme.text);\n\tif (theme.borderColor)\n\t\tvars[\"--btn-border-color\"] = colorToVar(theme.borderColor);\n\tif (theme.borderWidth !== undefined)\n\t\tvars[\"--btn-border-width\"] = `${theme.borderWidth}px`;\n\tif (theme.radius) vars[\"--btn-radius\"] = radiusToVar(theme.radius);\n\n\treturn vars as React.CSSProperties;\n}\n","import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { BackgroundOverlay } from \"@/components/atoms/background\";\nimport { type ComponentTheme, themeToStyleVars } from \"@/lib/theme\";\n\n// Re-export Background components for convenience as HeroBackground\nexport {\n\tBackground as HeroBackground,\n\tBackgroundGradient as HeroGradient,\n\ttype BackgroundGradientProps as HeroGradientProps,\n\tBackgroundImage as HeroBackgroundImage,\n\ttype BackgroundImageProps as HeroBackgroundImageProps,\n\tBackgroundOverlay as HeroOverlay,\n\ttype BackgroundOverlayProps as HeroOverlayProps,\n\tBackgroundStream as HeroBackgroundStream,\n\ttype BackgroundStreamProps as HeroBackgroundStreamProps,\n\tBackgroundVideo as HeroBackgroundVideo,\n\ttype BackgroundVideoProps as HeroBackgroundVideoProps,\n} from \"@/components/atoms/background\";\n\nconst DEFAULT_TITLE_TYPOGRAPHY = \"typography-h1-display\";\n\nconst heroVariants = tv({\n\tslots: {\n\t\troot: \"relative flex w-full flex-col overflow-hidden\",\n\t\ttop: \"relative z-10 w-full\",\n\t\tcontent: [\n\t\t\t\"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col\",\n\t\t\t\"p-20\",\n\t\t\t\"md:p-56\",\n\t\t],\n\t\ttitle: DEFAULT_TITLE_TYPOGRAPHY,\n\t\tindicator: \"absolute inset-x-0 bottom-0 z-10 flex justify-center pb-24\",\n\t},\n\tvariants: {\n\t\tvariant: {\n\t\t\tA1: {\n\t\t\t\troot: \"min-h-[80vh]\",\n\t\t\t\tcontent: [\"justify-end\", \"lg:p-72\"],\n\t\t\t},\n\t\t\tA2: {\n\t\t\t\troot: \"min-h-[80vh]\",\n\t\t\t\tcontent: [\"justify-start\", \"lg:p-64\"],\n\t\t\t},\n\t\t\tA3: {\n\t\t\t\troot: \"min-h-[80vh]\",\n\t\t\t\tcontent: [\"items-center justify-center\", \"lg:p-64\"],\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Vertical alignment of content within the hero.\n\t\t * Provides a simpler API than variant for basic alignment needs.\n\t\t */\n\t\tcontentAlign: {\n\t\t\ttop: {\n\t\t\t\tcontent: \"justify-start\",\n\t\t\t},\n\t\t\tcenter: {\n\t\t\t\tcontent: \"items-center justify-center\",\n\t\t\t},\n\t\t\tbottom: {\n\t\t\t\tcontent: \"justify-end\",\n\t\t\t},\n\t\t},\n\t\tcolorScheme: {\n\t\t\tdark: {\n\t\t\t\troot: \"bg-bg-page\",\n\t\t\t\ttitle: \"text-text-primary\",\n\t\t\t},\n\t\t\tlight: {\n\t\t\t\troot: \"bg-gray-900\",\n\t\t\t\ttitle: \"text-text-inverted\",\n\t\t\t},\n\t\t},\n\t\thasBackground: {\n\t\t\ttrue: {\n\t\t\t\troot: \"bg-transparent\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"A1\",\n\t\tcolorScheme: \"dark\",\n\t},\n});\n\n// =============================================================================\n// Standalone variants for sub-components (for external use)\n// =============================================================================\n\nconst heroHeaderVariants = tv({\n\tbase: \"relative z-10 w-full\",\n});\n\nconst heroContentVariants = tv({\n\tbase: [\n\t\t\"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col\",\n\t\t\"p-20\",\n\t\t\"md:p-56\",\n\t\t\"lg:p-72\",\n\t],\n});\n\nexport interface HeroHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Header slot for Hero - used for navigation, gov banners, etc.\n * Full-width with no padding, sits at the top of the hero.\n */\nconst HeroHeader = React.forwardRef<HTMLDivElement, HeroHeaderProps>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={heroHeaderVariants({ class: className })}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nHeroHeader.displayName = \"Hero.Header\";\n\nexport interface HeroContentProps\n\textends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Content container for Hero - use for main content.\n * Has padding and sits above backgrounds with z-10.\n */\nconst HeroContent = React.forwardRef<HTMLDivElement, HeroContentProps>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={heroContentVariants({ class: className })}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nHeroContent.displayName = \"Hero.Content\";\n\n// =============================================================================\n// Hero Component\n// =============================================================================\n\nexport interface HeroProps\n\textends Omit<React.HTMLAttributes<HTMLElement>, \"title\">,\n\t\tVariantProps<typeof heroVariants> {\n\t/**\n\t * The title text displayed in the hero.\n\t * If provided, renders an h1 with default typography.\n\t * Omit to use children for custom content composition.\n\t */\n\ttitle?: string;\n\t/**\n\t * Custom typography class for the title using primitive tokens.\n\t * Default: \"typography-h1-display\"\n\t */\n\ttitleClassName?: string;\n\t/**\n\t * Color scheme for text content.\n\t * - dark: Dark text for use on light backgrounds (default)\n\t * - light: Light text for use on dark backgrounds\n\t */\n\tcolorScheme?: \"dark\" | \"light\";\n\t// Note: contentAlign is provided by VariantProps<typeof heroVariants>\n\t// Options: \"top\" | \"center\" | \"bottom\"\n\t/**\n\t * Content for the top slot (full-width, no padding).\n\t * Use for USGovBanner, Navigation, etc.\n\t */\n\ttop?: React.ReactNode;\n\t/**\n\t * Indicator slot for scroll hints, arrows, or other visual cues.\n\t * Rendered at the bottom of the hero, below the main content.\n\t * @example\n\t * ```tsx\n\t * <Hero indicator={<ChevronDown className=\"animate-bounce\" />}>\n\t *   <h1>Welcome</h1>\n\t * </Hero>\n\t * ```\n\t */\n\tindicator?: React.ReactNode;\n\t/**\n\t * Background for the hero. Can be:\n\t * - A color string (hex, rgb, etc.) for solid backgrounds\n\t * - A ReactNode (use HeroBackground.Image, HeroBackground.Video, or HeroBackground.Stream)\n\t */\n\tbackground?: React.ReactNode | string;\n\t/**\n\t * Opacity of the overlay (0-1, default: 0)\n\t * Only applies when using a background slot\n\t */\n\toverlayOpacity?: number;\n\t/**\n\t * Color of the overlay (default: \"black\")\n\t */\n\toverlayColor?: string;\n\t/**\n\t * Border radius for the hero container\n\t * Useful for designs with rounded bottom corners\n\t */\n\tborderRadius?: string;\n\t/**\n\t * Theme overrides for component styling via CSS custom properties\n\t */\n\ttheme?: ComponentTheme;\n}\n\n/**\n * Checks if the background prop is a color string\n */\nfunction isColorString(\n\tbackground: React.ReactNode | string | undefined,\n): background is string {\n\treturn (\n\t\ttypeof background === \"string\" &&\n\t\t(background.startsWith(\"#\") ||\n\t\t\tbackground.startsWith(\"rgb\") ||\n\t\t\tbackground.startsWith(\"hsl\") ||\n\t\t\t/^(var\\(|[a-z]+$)/i.test(background))\n\t);\n}\n\n/**\n * Hero component for page headers with large display typography.\n *\n * Slots:\n * - `top`: Full-width slot at top for USGovBanner, Navigation (no padding)\n * - `children`: Main content slot with padding and alignment\n *\n * The `title` prop is a convenience for simple heroes - it renders an h1 with\n * responsive typography. Children are always rendered, so you can use both\n * or just children for full control.\n *\n * Variants:\n * - A1: Content at bottom (default)\n * - A2: Content at top\n * - A3: Content centered\n *\n * @example\n * ```tsx\n * // Simple - just title and background\n * <Hero title=\"Welcome\" background=\"#1a1a1a\" />\n *\n * // With top slot for banner/nav\n * <Hero\n *   variant=\"A1\"\n *   background={<HeroBackground.Image src=\"/hero.jpg\" />}\n *   top={\n *     <>\n *       <USGovBanner variant=\"inverted\" />\n *       <Navigation />\n *     </>\n *   }\n * >\n *   <h1>Board of Peace</h1>\n *   <p>Subtitle goes here</p>\n * </Hero>\n * ```\n */\nconst Hero = React.forwardRef<HTMLElement, HeroProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\ttitle,\n\t\t\ttitleClassName,\n\t\t\tcolorScheme = \"dark\",\n\t\t\tcontentAlign,\n\t\t\ttop,\n\t\t\tindicator,\n\t\t\tvariant,\n\t\t\tbackground,\n\t\t\toverlayOpacity = 0,\n\t\t\toverlayColor = \"black\",\n\t\t\tborderRadius,\n\t\t\ttheme,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isColor = isColorString(background);\n\t\tconst hasMediaBackground = background && !isColor;\n\t\tconst styles = heroVariants({\n\t\t\tvariant,\n\t\t\tcontentAlign,\n\t\t\tcolorScheme,\n\t\t\thasBackground: !!background,\n\t\t});\n\t\tconst themeStyles = themeToStyleVars(theme);\n\t\tconst combinedStyles = {\n\t\t\t...themeStyles,\n\t\t\t...(isColor ? { backgroundColor: background } : {}),\n\t\t\t...(borderRadius ? { borderRadius } : {}),\n\t\t\t...style,\n\t\t};\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={styles.root({ class: className })}\n\t\t\t\tstyle={\n\t\t\t\t\tObject.keys(combinedStyles).length > 0 ? combinedStyles : undefined\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{hasMediaBackground && background}\n\n\t\t\t\t{hasMediaBackground && overlayOpacity > 0 && (\n\t\t\t\t\t<BackgroundOverlay\n\t\t\t\t\t\topacity={overlayOpacity}\n\t\t\t\t\t\tclassName={overlayColor !== \"black\" ? undefined : \"bg-black\"}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\toverlayColor !== \"black\"\n\t\t\t\t\t\t\t\t? { backgroundColor: overlayColor }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{top && <div className={styles.top()}>{top}</div>}\n\n\t\t\t\t<div className={styles.content()}>\n\t\t\t\t\t{title && (\n\t\t\t\t\t\t<h1 className={styles.title({ class: titleClassName })}>{title}</h1>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Children - always render if provided */}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Indicator slot - scroll hints, arrows, etc. */}\n\t\t\t\t{indicator && <div className={styles.indicator()}>{indicator}</div>}\n\t\t\t</section>\n\t\t);\n\t},\n) as React.ForwardRefExoticComponent<\n\tHeroProps & React.RefAttributes<HTMLElement>\n> & {\n\tHeader: typeof HeroHeader;\n\tContent: typeof HeroContent;\n};\nHero.displayName = \"Hero\";\n\n// Attach sub-components\nHero.Header = HeroHeader;\nHero.Content = HeroContent;\n\nexport {\n\tHero,\n\theroVariants,\n\theroContentVariants,\n\theroHeaderVariants,\n\tDEFAULT_TITLE_TYPOGRAPHY,\n\tHeroHeader,\n\tHeroContent,\n};\n"]}