@puzzle-ui/pieces 0.0.0-stage → 0.5.0

package/dist/components/hero/hero.cjs

@@ -0,0 +1,98 @@
+const require_hero_video = require("./hero-video.cjs");
+;/* empty css           */
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/hero/hero.tsx
+const Hero = ({ as: Component = "section", titleAs: Heading = "h1", id, testId, className, contentClassName, mediaClassName, style, layout = "split", mediaPosition = "right", alignment = "start", height = "auto", theme = "light", overlay = "none", contentWidth = "normal", reverseOnMobile = true, eyebrow, title, description, media, backgroundImage, backgroundVideo, actions, search, meta, children, role, ariaLabel, ariaLabelledBy }) => {
+	const hasMedia = Boolean(media || backgroundImage || backgroundVideo);
+	const hasBackground = Boolean(backgroundImage || backgroundVideo || mediaPosition === "background" && media);
+	const rootClassName = ["puzzle-hero", className].filter(Boolean).join(" ");
+	const contentClasses = ["puzzle-hero__content", contentClassName].filter(Boolean).join(" ");
+	const mediaClasses = ["puzzle-hero__media", mediaClassName].filter(Boolean).join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Component, {
+		id,
+		"data-testid": testId,
+		className: rootClassName,
+		style,
+		"data-layout": layout,
+		"data-media-position": mediaPosition,
+		"data-alignment": alignment,
+		"data-height": height,
+		"data-theme": theme,
+		"data-overlay": overlay,
+		"data-content-width": contentWidth,
+		"data-has-media": hasMedia,
+		"data-has-background": hasBackground,
+		"data-reverse-mobile": reverseOnMobile,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		role,
+		children: [hasBackground && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "puzzle-hero__background",
+			"aria-hidden": "true",
+			"data-hero-background": true,
+			children: [
+				backgroundImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					className: "puzzle-hero__background-image",
+					src: backgroundImage,
+					alt: "",
+					loading: "eager",
+					decoding: "async",
+					draggable: false
+				}),
+				backgroundVideo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_hero_video.HeroVideo, {
+					source: backgroundVideo,
+					className: "puzzle-hero__background-video"
+				}),
+				mediaPosition === "background" && media && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "puzzle-hero__background-media",
+					children: media
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "puzzle-hero__overlay" })
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "puzzle-hero__inner",
+			"data-hero-inner": true,
+			children: [media && mediaPosition !== "background" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: mediaClasses,
+				"data-hero-media": true,
+				children: media
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: contentClasses,
+				"data-hero-content": true,
+				children: [
+					eyebrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-hero__eyebrow",
+						children: eyebrow
+					}),
+					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heading, {
+						className: "puzzle-hero__title",
+						children: title
+					}),
+					description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-hero__description",
+						children: description
+					}),
+					children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-hero__children",
+						children
+					}),
+					actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-hero__actions",
+						children: actions
+					}),
+					search && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-hero__search",
+						children: search
+					}),
+					meta && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-hero__meta",
+						children: meta
+					})
+				]
+			})]
+		})]
+	});
+};
+exports.Hero = Hero;
+
+//# sourceMappingURL=hero.cjs.map

package/dist/components/hero/hero.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.cjs","names":["HeroVideo"],"sources":["../../../src/components/hero/hero.tsx"],"sourcesContent":["import { HeroVideo } from \"./hero-video\";\n\nimport type { HeroProps } from \"./hero.types\";\n\nimport \"./hero.css\";\n\nconst Hero = ({\n  as: Component = \"section\",\n  titleAs: Heading = \"h1\",\n\n  id,\n  testId,\n  className,\n  contentClassName,\n  mediaClassName,\n  style,\n\n  layout = \"split\",\n  mediaPosition = \"right\",\n  alignment = \"start\",\n  height = \"auto\",\n  theme = \"light\",\n  overlay = \"none\",\n  contentWidth = \"normal\",\n\n  reverseOnMobile = true,\n\n  eyebrow,\n  title,\n  description,\n\n  media,\n  backgroundImage,\n  backgroundVideo,\n\n  actions,\n  search,\n  meta,\n\n  children,\n\n  role,\n  ariaLabel,\n  ariaLabelledBy,\n}: HeroProps) => {\n  const hasMedia = Boolean(media || backgroundImage || backgroundVideo);\n\n  const hasBackground = Boolean(\n    backgroundImage ||\n    backgroundVideo ||\n    (mediaPosition === \"background\" && media),\n  );\n\n  const rootClassName = [\"puzzle-hero\", className].filter(Boolean).join(\" \");\n\n  const contentClasses = [\"puzzle-hero__content\", contentClassName]\n    .filter(Boolean)\n    .join(\" \");\n\n  const mediaClasses = [\"puzzle-hero__media\", mediaClassName]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Component\n      id={id}\n      data-testid={testId}\n      className={rootClassName}\n      style={style}\n      data-layout={layout}\n      data-media-position={mediaPosition}\n      data-alignment={alignment}\n      data-height={height}\n      data-theme={theme}\n      data-overlay={overlay}\n      data-content-width={contentWidth}\n      data-has-media={hasMedia}\n      data-has-background={hasBackground}\n      data-reverse-mobile={reverseOnMobile}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      role={role}\n    >\n      {hasBackground && (\n        <div\n          className=\"puzzle-hero__background\"\n          aria-hidden=\"true\"\n          data-hero-background\n        >\n          {backgroundImage && (\n            <img\n              className=\"puzzle-hero__background-image\"\n              src={backgroundImage}\n              alt=\"\"\n              loading=\"eager\"\n              decoding=\"async\"\n              draggable={false}\n            />\n          )}\n\n          {backgroundVideo && (\n            <HeroVideo\n              source={backgroundVideo}\n              className=\"puzzle-hero__background-video\"\n            />\n          )}\n\n          {mediaPosition === \"background\" && media && (\n            <div className=\"puzzle-hero__background-media\">{media}</div>\n          )}\n\n          <div className=\"puzzle-hero__overlay\" />\n        </div>\n      )}\n\n      <div className=\"puzzle-hero__inner\" data-hero-inner>\n        {media && mediaPosition !== \"background\" && (\n          <div className={mediaClasses} data-hero-media>\n            {media}\n          </div>\n        )}\n\n        <div className={contentClasses} data-hero-content>\n          {eyebrow && <div className=\"puzzle-hero__eyebrow\">{eyebrow}</div>}\n\n          {title && <Heading className=\"puzzle-hero__title\">{title}</Heading>}\n\n          {description && (\n            <div className=\"puzzle-hero__description\">{description}</div>\n          )}\n\n          {children && <div className=\"puzzle-hero__children\">{children}</div>}\n\n          {actions && <div className=\"puzzle-hero__actions\">{actions}</div>}\n\n          {search && <div className=\"puzzle-hero__search\">{search}</div>}\n\n          {meta && <div className=\"puzzle-hero__meta\">{meta}</div>}\n        </div>\n      </div>\n    </Component>\n  );\n};\n\nexport { Hero };\n"],"mappings":"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"}

package/dist/components/hero/hero.css

@@ -0,0 +1,312 @@
+.puzzle-hero {
+  --puzzle-hero-background: var(--puzzle-color-background);
+  --puzzle-hero-foreground: var(--puzzle-color-text);
+  --puzzle-hero-muted: var(--puzzle-color-text-muted);
+  --puzzle-hero-padding-inline: var(--puzzle-space-5);
+  --puzzle-hero-padding-block: var(--puzzle-space-12);
+  --puzzle-hero-gap: var(--puzzle-space-8);
+  --puzzle-hero-content-width: var(--puzzle-content-width);
+  isolation: isolate;
+  width: 100%;
+  min-height: 0;
+  color: var(--puzzle-hero-foreground);
+  background: var(--puzzle-hero-background);
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.puzzle-hero[data-theme="light"] {
+  --puzzle-hero-background: var(--puzzle-color-background);
+  --puzzle-hero-foreground: var(--puzzle-color-text);
+  --puzzle-hero-muted: var(--puzzle-color-text-muted);
+}
+
+.puzzle-hero[data-theme="dark"] {
+  --puzzle-hero-background: var(--puzzle-color-text);
+  --puzzle-hero-foreground: var(--puzzle-color-background);
+  --puzzle-hero-muted: var(--puzzle-color-background);
+}
+
+.puzzle-hero[data-theme="contrast"] {
+  --puzzle-hero-background: var(--puzzle-color-surface);
+  --puzzle-hero-foreground: var(--puzzle-color-text);
+  --puzzle-hero-muted: var(--puzzle-color-text-muted);
+}
+
+.puzzle-hero[data-theme="brand"] {
+  --puzzle-hero-background: var(--puzzle-color-primary);
+  --puzzle-hero-foreground: var(--puzzle-color-background);
+  --puzzle-hero-muted: var(--puzzle-color-background);
+}
+
+.puzzle-hero__background {
+  z-index: 0;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.puzzle-hero__background-image, .puzzle-hero__background-video, .puzzle-hero__background-media {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-hero__background-image, .puzzle-hero__background-video {
+  object-position: center;
+}
+
+.puzzle-hero__background-media {
+  overflow: hidden;
+}
+
+.puzzle-hero__background-media img, .puzzle-hero__background-media video, .puzzle-hero__background-media picture {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.puzzle-hero__overlay {
+  z-index: 1;
+  background: none;
+  position: absolute;
+  inset: 0;
+}
+
+.puzzle-hero[data-overlay="subtle"] .puzzle-hero__overlay {
+  background: var(--puzzle-color-overlay-subtle);
+}
+
+.puzzle-hero[data-overlay="strong"] .puzzle-hero__overlay {
+  background: var(--puzzle-color-overlay-strong);
+}
+
+.puzzle-hero[data-overlay="gradient"] .puzzle-hero__overlay {
+  background: linear-gradient(90deg,
+        var(--puzzle-color-overlay-strong) 0%,
+        var(--puzzle-color-overlay-subtle) 65%,
+        transparent 100%);
+}
+
+.puzzle-hero__inner {
+  z-index: 2;
+  width: min(calc(100% - var(--puzzle-hero-padding-inline) * 2), var(--puzzle-container-width));
+  min-height: inherit;
+  padding-block: var(--puzzle-hero-padding-block);
+  align-items: center;
+  gap: var(--puzzle-hero-gap);
+  grid-template-columns: minmax(0, 1fr);
+  margin-inline: auto;
+  display: grid;
+  position: relative;
+}
+
+.puzzle-hero[data-layout="split"] .puzzle-hero__inner {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.puzzle-hero[data-layout="asymmetric"] .puzzle-hero__inner {
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
+}
+
+.puzzle-hero[data-layout="full-width"] .puzzle-hero__inner {
+  width: 100%;
+  max-width: none;
+  padding-inline: var(--puzzle-hero-padding-inline);
+}
+
+.puzzle-hero[data-layout="centered"] .puzzle-hero__inner, .puzzle-hero[data-media-position="background"] .puzzle-hero__inner, .puzzle-hero[data-has-media="false"] .puzzle-hero__inner {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.puzzle-hero__content {
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--puzzle-space-5);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-hero[data-alignment="start"] .puzzle-hero__content {
+  text-align: start;
+  align-items: flex-start;
+}
+
+.puzzle-hero[data-alignment="center"] .puzzle-hero__content {
+  text-align: center;
+  align-items: center;
+  margin-inline: auto;
+}
+
+.puzzle-hero[data-alignment="end"] .puzzle-hero__content {
+  text-align: end;
+  align-items: flex-end;
+  margin-inline-start: auto;
+}
+
+.puzzle-hero[data-content-width="narrow"] .puzzle-hero__content {
+  max-width: var(--puzzle-prose-width);
+}
+
+.puzzle-hero[data-content-width="normal"] .puzzle-hero__content {
+  max-width: var(--puzzle-content-width);
+}
+
+.puzzle-hero[data-content-width="wide"] .puzzle-hero__content {
+  max-width: var(--puzzle-container-width);
+}
+
+.puzzle-hero[data-content-width="full"] .puzzle-hero__content {
+  max-width: none;
+}
+
+.puzzle-hero[data-layout="centered"] .puzzle-hero__content {
+  width: 100%;
+  margin-inline: auto;
+}
+
+.puzzle-hero__eyebrow {
+  color: var(--puzzle-hero-muted);
+  font-family: var(--puzzle-font-body);
+  font-size: var(--puzzle-font-size-sm);
+  font-weight: var(--puzzle-font-weight-semibold);
+  line-height: var(--puzzle-font-line-height-normal);
+  letter-spacing: var(--puzzle-font-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.puzzle-hero__title {
+  max-width: 100%;
+  color: inherit;
+  font-family: var(--puzzle-font-heading);
+  font-size: clamp(var(--puzzle-font-size-4xl), 5.5vw, var(--puzzle-font-size-6xl));
+  font-weight: var(--puzzle-font-weight-bold);
+  line-height: var(--puzzle-font-line-height-tight);
+  letter-spacing: var(--puzzle-font-letter-spacing-tighter);
+  text-wrap: balance;
+  margin: 0;
+}
+
+.puzzle-hero__description {
+  max-width: var(--puzzle-prose-width);
+  color: var(--puzzle-hero-muted);
+  font-family: var(--puzzle-font-body);
+  font-size: var(--puzzle-font-size-lg);
+  line-height: var(--puzzle-font-line-height-relaxed);
+}
+
+.puzzle-hero__children {
+  width: 100%;
+}
+
+.puzzle-hero__actions {
+  align-items: center;
+  gap: var(--puzzle-space-3);
+  flex-wrap: wrap;
+  width: 100%;
+  display: flex;
+}
+
+.puzzle-hero__search {
+  width: 100%;
+  max-width: var(--puzzle-container-width);
+}
+
+.puzzle-hero__meta {
+  align-items: center;
+  gap: var(--puzzle-space-4);
+  color: var(--puzzle-hero-muted);
+  font-size: var(--puzzle-font-size-sm);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.puzzle-hero__media {
+  justify-content: center;
+  align-self: stretch;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.puzzle-hero__media img, .puzzle-hero__media video, .puzzle-hero__media picture {
+  max-width: 100%;
+}
+
+.puzzle-hero__media img, .puzzle-hero__media video {
+  object-fit: cover;
+  height: auto;
+}
+
+.puzzle-hero[data-layout="split"][data-media-position="left"] .puzzle-hero__media, .puzzle-hero[data-layout="asymmetric"][data-media-position="left"] .puzzle-hero__media {
+  grid-area: 1 / 1;
+}
+
+.puzzle-hero[data-layout="split"][data-media-position="left"] .puzzle-hero__content, .puzzle-hero[data-layout="asymmetric"][data-media-position="left"] .puzzle-hero__content, .puzzle-hero[data-layout="split"][data-media-position="right"] .puzzle-hero__media, .puzzle-hero[data-layout="asymmetric"][data-media-position="right"] .puzzle-hero__media {
+  grid-area: 1 / 2;
+}
+
+.puzzle-hero[data-layout="split"][data-media-position="right"] .puzzle-hero__content, .puzzle-hero[data-layout="asymmetric"][data-media-position="right"] .puzzle-hero__content {
+  grid-area: 1 / 1;
+}
+
+.puzzle-hero[data-height="large"] {
+  min-height: clamp(var(--puzzle-space-20), 75svh, var(--puzzle-space-24) * 2);
+}
+
+.puzzle-hero[data-height="viewport"] {
+  min-height: 100svh;
+}
+
+@media (width <= 48rem) {
+  .puzzle-hero {
+    --puzzle-hero-padding-inline: var(--puzzle-space-4);
+    --puzzle-hero-padding-block: var(--puzzle-space-8);
+    --puzzle-hero-gap: var(--puzzle-space-6);
+  }
+
+  .puzzle-hero__inner, .puzzle-hero[data-layout="split"] .puzzle-hero__inner, .puzzle-hero[data-layout="asymmetric"] .puzzle-hero__inner {
+    gap: var(--puzzle-hero-gap);
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .puzzle-hero[data-height="large"] {
+    min-height: auto;
+  }
+
+  .puzzle-hero[data-layout="split"] .puzzle-hero__content, .puzzle-hero[data-layout="asymmetric"] .puzzle-hero__content, .puzzle-hero[data-layout="split"] .puzzle-hero__media, .puzzle-hero[data-layout="asymmetric"] .puzzle-hero__media {
+    grid-area: auto / 1;
+  }
+
+  .puzzle-hero[data-reverse-mobile="true"] .puzzle-hero__media, .puzzle-hero[data-reverse-mobile="false"] .puzzle-hero__content {
+    order: -1;
+  }
+
+  .puzzle-hero__title {
+    font-size: clamp(var(--puzzle-font-size-3xl), 10vw, var(--puzzle-font-size-5xl));
+  }
+
+  .puzzle-hero[data-overlay="gradient"] .puzzle-hero__overlay {
+    background: linear-gradient(180deg,
+            var(--puzzle-color-overlay-strong) 0%,
+            var(--puzzle-color-overlay-subtle) 65%,
+            transparent 100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-hero, .puzzle-hero *, .puzzle-hero :before, .puzzle-hero :after {
+    scroll-behavior: auto;
+    animation-duration: var(--puzzle-duration-0);
+    transition-duration: var(--puzzle-duration-0);
+    animation-iteration-count: 1;
+  }
+}

package/dist/components/hero/hero.d.cts

@@ -0,0 +1,3 @@
+import { HeroProps } from "./hero.types.cjs";
+declare const Hero: ({ as: Component, titleAs: Heading, id, testId, className, contentClassName, mediaClassName, style, layout, mediaPosition, alignment, height, theme, overlay, contentWidth, reverseOnMobile, eyebrow, title, description, media, backgroundImage, backgroundVideo, actions, search, meta, children, role, ariaLabel, ariaLabelledBy }: HeroProps) => import("react").JSX.Element;
+export { Hero };

package/dist/components/hero/hero.d.ts

@@ -0,0 +1,3 @@
+import { HeroProps } from "./hero.types.js";
+declare const Hero: ({ as: Component, titleAs: Heading, id, testId, className, contentClassName, mediaClassName, style, layout, mediaPosition, alignment, height, theme, overlay, contentWidth, reverseOnMobile, eyebrow, title, description, media, backgroundImage, backgroundVideo, actions, search, meta, children, role, ariaLabel, ariaLabelledBy }: HeroProps) => import("react").JSX.Element;
+export { Hero };

package/dist/components/hero/hero.js

@@ -0,0 +1,98 @@
+import { HeroVideo } from "./hero-video.js";
+import "./hero.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/hero/hero.tsx
+const Hero = ({ as: Component = "section", titleAs: Heading = "h1", id, testId, className, contentClassName, mediaClassName, style, layout = "split", mediaPosition = "right", alignment = "start", height = "auto", theme = "light", overlay = "none", contentWidth = "normal", reverseOnMobile = true, eyebrow, title, description, media, backgroundImage, backgroundVideo, actions, search, meta, children, role, ariaLabel, ariaLabelledBy }) => {
+	const hasMedia = Boolean(media || backgroundImage || backgroundVideo);
+	const hasBackground = Boolean(backgroundImage || backgroundVideo || mediaPosition === "background" && media);
+	const rootClassName = ["puzzle-hero", className].filter(Boolean).join(" ");
+	const contentClasses = ["puzzle-hero__content", contentClassName].filter(Boolean).join(" ");
+	const mediaClasses = ["puzzle-hero__media", mediaClassName].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Component, {
+		id,
+		"data-testid": testId,
+		className: rootClassName,
+		style,
+		"data-layout": layout,
+		"data-media-position": mediaPosition,
+		"data-alignment": alignment,
+		"data-height": height,
+		"data-theme": theme,
+		"data-overlay": overlay,
+		"data-content-width": contentWidth,
+		"data-has-media": hasMedia,
+		"data-has-background": hasBackground,
+		"data-reverse-mobile": reverseOnMobile,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		role,
+		children: [hasBackground && /* @__PURE__ */ jsxs("div", {
+			className: "puzzle-hero__background",
+			"aria-hidden": "true",
+			"data-hero-background": true,
+			children: [
+				backgroundImage && /* @__PURE__ */ jsx("img", {
+					className: "puzzle-hero__background-image",
+					src: backgroundImage,
+					alt: "",
+					loading: "eager",
+					decoding: "async",
+					draggable: false
+				}),
+				backgroundVideo && /* @__PURE__ */ jsx(HeroVideo, {
+					source: backgroundVideo,
+					className: "puzzle-hero__background-video"
+				}),
+				mediaPosition === "background" && media && /* @__PURE__ */ jsx("div", {
+					className: "puzzle-hero__background-media",
+					children: media
+				}),
+				/* @__PURE__ */ jsx("div", { className: "puzzle-hero__overlay" })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "puzzle-hero__inner",
+			"data-hero-inner": true,
+			children: [media && mediaPosition !== "background" && /* @__PURE__ */ jsx("div", {
+				className: mediaClasses,
+				"data-hero-media": true,
+				children: media
+			}), /* @__PURE__ */ jsxs("div", {
+				className: contentClasses,
+				"data-hero-content": true,
+				children: [
+					eyebrow && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-hero__eyebrow",
+						children: eyebrow
+					}),
+					title && /* @__PURE__ */ jsx(Heading, {
+						className: "puzzle-hero__title",
+						children: title
+					}),
+					description && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-hero__description",
+						children: description
+					}),
+					children && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-hero__children",
+						children
+					}),
+					actions && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-hero__actions",
+						children: actions
+					}),
+					search && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-hero__search",
+						children: search
+					}),
+					meta && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-hero__meta",
+						children: meta
+					})
+				]
+			})]
+		})]
+	});
+};
+export { Hero };
+
+//# sourceMappingURL=hero.js.map

package/dist/components/hero/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.js","names":[],"sources":["../../../src/components/hero/hero.tsx"],"sourcesContent":["import { HeroVideo } from \"./hero-video\";\n\nimport type { HeroProps } from \"./hero.types\";\n\nimport \"./hero.css\";\n\nconst Hero = ({\n  as: Component = \"section\",\n  titleAs: Heading = \"h1\",\n\n  id,\n  testId,\n  className,\n  contentClassName,\n  mediaClassName,\n  style,\n\n  layout = \"split\",\n  mediaPosition = \"right\",\n  alignment = \"start\",\n  height = \"auto\",\n  theme = \"light\",\n  overlay = \"none\",\n  contentWidth = \"normal\",\n\n  reverseOnMobile = true,\n\n  eyebrow,\n  title,\n  description,\n\n  media,\n  backgroundImage,\n  backgroundVideo,\n\n  actions,\n  search,\n  meta,\n\n  children,\n\n  role,\n  ariaLabel,\n  ariaLabelledBy,\n}: HeroProps) => {\n  const hasMedia = Boolean(media || backgroundImage || backgroundVideo);\n\n  const hasBackground = Boolean(\n    backgroundImage ||\n    backgroundVideo ||\n    (mediaPosition === \"background\" && media),\n  );\n\n  const rootClassName = [\"puzzle-hero\", className].filter(Boolean).join(\" \");\n\n  const contentClasses = [\"puzzle-hero__content\", contentClassName]\n    .filter(Boolean)\n    .join(\" \");\n\n  const mediaClasses = [\"puzzle-hero__media\", mediaClassName]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Component\n      id={id}\n      data-testid={testId}\n      className={rootClassName}\n      style={style}\n      data-layout={layout}\n      data-media-position={mediaPosition}\n      data-alignment={alignment}\n      data-height={height}\n      data-theme={theme}\n      data-overlay={overlay}\n      data-content-width={contentWidth}\n      data-has-media={hasMedia}\n      data-has-background={hasBackground}\n      data-reverse-mobile={reverseOnMobile}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      role={role}\n    >\n      {hasBackground && (\n        <div\n          className=\"puzzle-hero__background\"\n          aria-hidden=\"true\"\n          data-hero-background\n        >\n          {backgroundImage && (\n            <img\n              className=\"puzzle-hero__background-image\"\n              src={backgroundImage}\n              alt=\"\"\n              loading=\"eager\"\n              decoding=\"async\"\n              draggable={false}\n            />\n          )}\n\n          {backgroundVideo && (\n            <HeroVideo\n              source={backgroundVideo}\n              className=\"puzzle-hero__background-video\"\n            />\n          )}\n\n          {mediaPosition === \"background\" && media && (\n            <div className=\"puzzle-hero__background-media\">{media}</div>\n          )}\n\n          <div className=\"puzzle-hero__overlay\" />\n        </div>\n      )}\n\n      <div className=\"puzzle-hero__inner\" data-hero-inner>\n        {media && mediaPosition !== \"background\" && (\n          <div className={mediaClasses} data-hero-media>\n            {media}\n          </div>\n        )}\n\n        <div className={contentClasses} data-hero-content>\n          {eyebrow && <div className=\"puzzle-hero__eyebrow\">{eyebrow}</div>}\n\n          {title && <Heading className=\"puzzle-hero__title\">{title}</Heading>}\n\n          {description && (\n            <div className=\"puzzle-hero__description\">{description}</div>\n          )}\n\n          {children && <div className=\"puzzle-hero__children\">{children}</div>}\n\n          {actions && <div className=\"puzzle-hero__actions\">{actions}</div>}\n\n          {search && <div className=\"puzzle-hero__search\">{search}</div>}\n\n          {meta && <div className=\"puzzle-hero__meta\">{meta}</div>}\n        </div>\n      </div>\n    </Component>\n  );\n};\n\nexport { Hero };\n"],"mappings":";;;;AAMA,MAAM,QAAQ,EACZ,IAAI,YAAY,WAChB,SAAS,UAAU,MAEnB,IACA,QACA,WACA,kBACA,gBACA,OAEA,SAAS,SACT,gBAAgB,SAChB,YAAY,SACZ,SAAS,QACT,QAAQ,SACR,UAAU,QACV,eAAe,UAEf,kBAAkB,MAElB,SACA,OACA,aAEA,OACA,iBACA,iBAEA,SACA,QACA,MAEA,UAEA,MACA,WACA,qBACe;CACf,MAAM,WAAW,QAAQ,SAAS,mBAAmB,eAAe;CAEpE,MAAM,gBAAgB,QACpB,mBACA,mBACC,kBAAkB,gBAAgB,KACrC;CAEA,MAAM,gBAAgB,CAAC,eAAe,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEzE,MAAM,iBAAiB,CAAC,wBAAwB,gBAAgB,CAAC,CAC9D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,eAAe,CAAC,sBAAsB,cAAc,CAAC,CACxD,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,qBAAC,WAAD;EACM;EACJ,eAAa;EACb,WAAW;EACJ;EACP,eAAa;EACb,uBAAqB;EACrB,kBAAgB;EAChB,eAAa;EACb,cAAY;EACZ,gBAAc;EACd,sBAAoB;EACpB,kBAAgB;EAChB,uBAAqB;EACrB,uBAAqB;EACrB,cAAY;EACZ,mBAAiB;EACX;EAjBR,UAAA,CAmBG,iBACC,qBAAC,OAAD;GACE,WAAU;GACV,eAAY;GACZ,wBAAA;GAHF,UAAA;IAKG,mBACC,oBAAC,OAAD;KACE,WAAU;KACV,KAAK;KACL,KAAI;KACJ,SAAQ;KACR,UAAS;KACT,WAAW;IACZ,CAAA;IAGF,mBACC,oBAAC,WAAD;KACE,QAAQ;KACR,WAAU;IACX,CAAA;IAGF,kBAAkB,gBAAgB,SACjC,oBAAC,OAAD;KAAK,WAAU;KAAiC,UAAA;IAAW,CAAA;IAG7D,oBAAC,OAAD,EAAK,WAAU,uBAAwB,CAAA;GACpC;EAGP,CAAA,GAAA,qBAAC,OAAD;GAAK,WAAU;GAAqB,mBAAA;GAApC,UAAA,CACG,SAAS,kBAAkB,gBAC1B,oBAAC,OAAD;IAAK,WAAW;IAAc,mBAAA;IAC3B,UAAA;GACE,CAAA,GAGP,qBAAC,OAAD;IAAK,WAAW;IAAgB,qBAAA;IAAhC,UAAA;KACG,WAAW,oBAAC,OAAD;MAAK,WAAU;MAAwB,UAAA;KAAa,CAAA;KAE/D,SAAS,oBAAC,SAAD;MAAS,WAAU;MAAsB,UAAA;KAAe,CAAA;KAEjE,eACC,oBAAC,OAAD;MAAK,WAAU;MAA4B,UAAA;KAAiB,CAAA;KAG7D,YAAY,oBAAC,OAAD;MAAK,WAAU;MAAyB;KAAc,CAAA;KAElE,WAAW,oBAAC,OAAD;MAAK,WAAU;MAAwB,UAAA;KAAa,CAAA;KAE/D,UAAU,oBAAC,OAAD;MAAK,WAAU;MAAuB,UAAA;KAAY,CAAA;KAE5D,QAAQ,oBAAC,OAAD;MAAK,WAAU;MAAqB,UAAA;KAAU,CAAA;IACpD;GACF,CAAA,CAAA;EACI,CAAA,CAAA;;AAEf"}

package/dist/components/hero/hero.types.d.cts

@@ -0,0 +1,44 @@
+import { AriaRole, CSSProperties, ElementType, ReactNode } from "react";
+export type HeroLayout = "centered" | "split" | "full-width" | "asymmetric";
+export type HeroMediaPosition = "left" | "right" | "background";
+export type HeroAlignment = "start" | "center" | "end";
+export type HeroHeight = "auto" | "large" | "viewport";
+export type HeroTheme = "light" | "dark" | "contrast" | "brand";
+export type HeroOverlay = "none" | "subtle" | "strong" | "gradient";
+export type HeroContentWidth = "narrow" | "normal" | "wide" | "full";
+export type HeroVideoSource = {
+  src: string;
+  type?: string;
+  poster?: string;
+};
+export type HeroProps = {
+  as?: ElementType;
+  titleAs?: ElementType;
+  id?: string;
+  testId?: string;
+  className?: string;
+  contentClassName?: string;
+  mediaClassName?: string;
+  style?: CSSProperties;
+  layout?: HeroLayout;
+  mediaPosition?: HeroMediaPosition;
+  alignment?: HeroAlignment;
+  height?: HeroHeight;
+  theme?: HeroTheme;
+  overlay?: HeroOverlay;
+  contentWidth?: HeroContentWidth;
+  reverseOnMobile?: boolean;
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  media?: ReactNode;
+  backgroundImage?: string;
+  backgroundVideo?: HeroVideoSource;
+  actions?: ReactNode;
+  search?: ReactNode;
+  meta?: ReactNode;
+  children?: ReactNode;
+  role?: AriaRole;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+};

package/dist/components/hero/hero.types.d.ts

@@ -0,0 +1,44 @@
+import { AriaRole, CSSProperties, ElementType, ReactNode } from "react";
+export type HeroLayout = "centered" | "split" | "full-width" | "asymmetric";
+export type HeroMediaPosition = "left" | "right" | "background";
+export type HeroAlignment = "start" | "center" | "end";
+export type HeroHeight = "auto" | "large" | "viewport";
+export type HeroTheme = "light" | "dark" | "contrast" | "brand";
+export type HeroOverlay = "none" | "subtle" | "strong" | "gradient";
+export type HeroContentWidth = "narrow" | "normal" | "wide" | "full";
+export type HeroVideoSource = {
+  src: string;
+  type?: string;
+  poster?: string;
+};
+export type HeroProps = {
+  as?: ElementType;
+  titleAs?: ElementType;
+  id?: string;
+  testId?: string;
+  className?: string;
+  contentClassName?: string;
+  mediaClassName?: string;
+  style?: CSSProperties;
+  layout?: HeroLayout;
+  mediaPosition?: HeroMediaPosition;
+  alignment?: HeroAlignment;
+  height?: HeroHeight;
+  theme?: HeroTheme;
+  overlay?: HeroOverlay;
+  contentWidth?: HeroContentWidth;
+  reverseOnMobile?: boolean;
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  media?: ReactNode;
+  backgroundImage?: string;
+  backgroundVideo?: HeroVideoSource;
+  actions?: ReactNode;
+  search?: ReactNode;
+  meta?: ReactNode;
+  children?: ReactNode;
+  role?: AriaRole;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+};

package/dist/components/hero/hero.utils.cjs

@@ -0,0 +1,8 @@
+// src/components/hero/hero.utils.ts
+const mergeHeroPresetProps = (defaults, props) => ({
+	...defaults,
+	...props
+});
+exports.mergeHeroPresetProps = mergeHeroPresetProps;
+
+//# sourceMappingURL=hero.utils.cjs.map

package/dist/components/hero/hero.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.utils.cjs","names":[],"sources":["../../../src/components/hero/hero.utils.ts"],"sourcesContent":["import type { HeroProps } from \"./hero.types\";\n\nexport const mergeHeroPresetProps = <T extends HeroProps>(\n  defaults: Partial<HeroProps>,\n  props: T,\n): T & Partial<HeroProps> => ({\n  ...defaults,\n  ...props,\n});\n"],"mappings":";AAEA,MAAa,wBACX,UACA,WAC4B;CAC5B,GAAG;CACH,GAAG;AACL"}

package/dist/components/hero/hero.utils.js

@@ -0,0 +1,8 @@
+// src/components/hero/hero.utils.ts
+const mergeHeroPresetProps = (defaults, props) => ({
+	...defaults,
+	...props
+});
+export { mergeHeroPresetProps };
+
+//# sourceMappingURL=hero.utils.js.map

package/dist/components/hero/hero.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero.utils.js","names":[],"sources":["../../../src/components/hero/hero.utils.ts"],"sourcesContent":["import type { HeroProps } from \"./hero.types\";\n\nexport const mergeHeroPresetProps = <T extends HeroProps>(\n  defaults: Partial<HeroProps>,\n  props: T,\n): T & Partial<HeroProps> => ({\n  ...defaults,\n  ...props,\n});\n"],"mappings":";AAEA,MAAa,wBACX,UACA,WAC4B;CAC5B,GAAG;CACH,GAAG;AACL"}