@uoguelph/react-components 1.0.0-rc.0

package/dist/embedded-video-modal-button.js

@@ -0,0 +1,25 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { e as s } from "./solid-DM6GVhkF.js";
+import { FontAwesomeIcon as m } from "@fortawesome/react-fontawesome";
+import { useContext as l } from "react";
+import { twMerge as u } from "tailwind-merge";
+import { Button as a } from "./button.js";
+import { EmbeddedVideoContext as w } from "./embedded-video-context.js";
+function p({ type: e, children: n, className: r }) {
+  const t = l(w);
+  if (e === "play-button") {
+    const d = u(
+      "tw:flex tw:aspect-square tw:w-24 tw:items-center tw:justify-center tw:rounded-full tw:bg-black/30 tw:text-4xl tw:text-white tw:transition-colors tw:hover:bg-red/30 tw:focus:bg-red/30",
+      r
+    );
+    return /* @__PURE__ */ i("button", { type: "button", className: d, onClick: () => t == null ? void 0 : t.setModalOpen(!0), children: [
+      /* @__PURE__ */ o(m, { icon: s }),
+      /* @__PURE__ */ o("span", { className: "sr-only", children: "Show Video" })
+    ] });
+  }
+  return /* @__PURE__ */ o(a, { type: "button", color: e, className: r, onClick: () => t == null ? void 0 : t.setModalOpen(!0), children: n });
+}
+p.displayName = "EmbeddedVideoModalButton";
+export {
+  p as EmbeddedVideoModalButton
+};

package/dist/embedded-video.d.ts

@@ -0,0 +1,81 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactElement } from 'react';
+
+declare type ButtonElementType = ElementType<{
+    href?: string;
+}, 'a'> | 'button';
+
+declare type ButtonProps<T extends ButtonElementType = typeof defaultElement> = PropsWithChildren<ButtonPropsAs<T> & ComponentPropsWithoutRef<T> & ButtonPropsBase>;
+
+declare type ButtonPropsAs<T extends ButtonElementType> = {
+    as?: T;
+};
+
+declare type ButtonPropsBase = {
+    /**
+     * The color of the button
+     *
+     * @default 'red'
+     */
+    color?: 'red' | 'yellow' | 'blue' | 'green' | 'light-grey' | 'dark-grey' | 'black' | 'white';
+    /**
+     * Whether the button should be outlined
+     *
+     * @default false
+     */
+    outlined?: boolean;
+    /** Additional classes to apply to the button */
+    className?: string;
+    /**
+     * Whether the button is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare const defaultElement = "button";
+
+/**
+ * The EmbeddedVideo component is used for embedding videos from YouTube and Vimeo. It can be used to render a video
+ * directly or as a modal.
+ */
+export declare function EmbeddedVideo({ src, title, transcript, className, children }: EmbeddedVideoProps): JSX.Element;
+
+export declare namespace EmbeddedVideo {
+    var displayName: string;
+}
+
+export declare function EmbeddedVideoModalButton({ type, children, className }: EmbeddedVideoModalButtonProps): JSX.Element;
+
+export declare namespace EmbeddedVideoModalButton {
+    var displayName: string;
+}
+
+declare type EmbeddedVideoModalButtonProps = PropsWithChildren<{
+    /** The type of button to render, either a play button or a color which will be passed to a Button component */
+    type: 'play-button' | ButtonProps['color'];
+    /** Additional classes to apply to the button */
+    className?: string;
+}>;
+
+declare type EmbeddedVideoProps = VideoProps & {
+    /** If passed the video will render as a modal, with the button being used to open the video. */
+    children?: ReactElement<typeof EmbeddedVideoModalButton>;
+};
+
+declare type VideoProps = {
+    /** The URL of the video to embed. */
+    src: string;
+    /** The title of the video. */
+    title?: string;
+    /** The URL to a human readable transcript of the video. */
+    transcript?: string;
+    /** Additional classes to apply to the video container. */
+    className?: string;
+};
+
+export { }

package/dist/embedded-video.js

@@ -0,0 +1,108 @@
+import { jsxs as c, Fragment as p, jsx as n } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { twMerge as f } from "tailwind-merge";
+import { tv as w } from "tailwind-variants";
+import { Button as h } from "./button.js";
+import { Modal as x } from "./modal.js";
+import { EmbeddedVideoContext as y } from "./embedded-video-context.js";
+import { EmbeddedVideoModalButton as D } from "./embedded-video-modal-button.js";
+function b(l) {
+  var o;
+  if (!(l instanceof URL))
+    return null;
+  if (l.searchParams.has("v"))
+    return l.searchParams.get("v");
+  const e = (o = l.pathname.split("/")) == null ? void 0 : o.filter((t) => t !== "");
+  switch (e == null ? void 0 : e[0]) {
+    case "v":
+    case "embed":
+    case "watch":
+    case "e":
+    case "shorts":
+    case "live":
+      return (e == null ? void 0 : e[1]) ?? null;
+    case "oembed":
+      return b(new URL(decodeURIComponent(l.searchParams.get("url") ?? "")));
+    case "attribution_link":
+      return null;
+    default:
+      return (e == null ? void 0 : e[0]) ?? null;
+  }
+}
+function V(l) {
+  var o;
+  const e = (o = l.pathname.split("/")) == null ? void 0 : o.filter((t) => t !== "");
+  return (e == null ? void 0 : e[0]) ?? null;
+}
+function N(l) {
+  let e = null, o = null;
+  try {
+    const t = new URL(l);
+    t != null && t.hostname.includes("youtube") || t != null && t.hostname.includes("youtu.be") ? (e = "youtube", o = b(t)) : t != null && t.hostname.includes("vimeo") && (e = "vimeo", o = V(t));
+  } catch {
+  }
+  return { type: e, id: o };
+}
+function u({ src: l, title: e, transcript: o, className: t }) {
+  const { id: d, type: i } = N(l), r = w({
+    slots: {
+      base: f("tw:flex tw:flex-col", t),
+      iframe: "tw:w-full tw:h-full tw:aspect-video",
+      transcriptButton: "tw:p-3 tw:w-full"
+    }
+  }), { base: a, iframe: s, transcriptButton: m } = r();
+  return /* @__PURE__ */ c("div", { className: a(), children: [
+    i === "youtube" && d && /* @__PURE__ */ n(
+      "iframe",
+      {
+        className: s(),
+        allowFullScreen: !0,
+        src: `https://www.youtube.com/embed/${d}`,
+        title: e ?? "YouTube Embedded Video Player"
+      }
+    ),
+    i === "vimeo" && d && /* @__PURE__ */ n(
+      "iframe",
+      {
+        className: s(),
+        allowFullScreen: !0,
+        src: `https://player.vimeo.com/video/${d}`,
+        title: e ?? "Vimeo Embedded Video Player"
+      }
+    ),
+    o && /* @__PURE__ */ n(h, { as: "a", color: "red", className: m(), href: o, download: !0, children: "Download Transcript" })
+  ] });
+}
+function E({ src: l, title: e, transcript: o, className: t, children: d }) {
+  const [i, r] = g(!1);
+  if (d) {
+    const a = w({
+      slots: {
+        container: "tw:bg-dark-grey-bg tw:flex tw:w-screen tw:max-w-6xl tw:lg:max-w-7xl tw:flex-col tw:gap-4 tw:p-4 tw:text-dark-grey-contrast",
+        video: "tw:w-full",
+        title: "tw:text-xl tw:font-bold"
+      }
+    }), { container: s, video: m, title: v } = a();
+    return /* @__PURE__ */ c(p, { children: [
+      /* @__PURE__ */ n(y.Provider, { value: { modalOpen: i, setModalOpen: r }, children: d }),
+      /* @__PURE__ */ n(x, { open: i, onClose: () => r(!1), children: /* @__PURE__ */ c("div", { className: `uofg-embedded-video-container ${s()}`, children: [
+        /* @__PURE__ */ n("span", { className: `uofg-embedded-video-title ${v()}`, children: e }),
+        /* @__PURE__ */ n(
+          u,
+          {
+            src: l,
+            title: e,
+            transcript: o,
+            className: `uofg-embedded-video ${f(m(), t)}`
+          }
+        )
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ n(u, { src: l, title: e, transcript: o, className: `uofg-embedded-video ${t}` });
+}
+E.displayName = "EmbeddedVideo";
+export {
+  E as EmbeddedVideo,
+  D as EmbeddedVideoModalButton
+};

package/dist/hero-caption.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+export declare function HeroCaption({ children, className }: HeroCaptionProps): JSX.Element;
+
+export declare namespace HeroCaption {
+    var displayName: string;
+}
+
+export declare type HeroCaptionProps = PropsWithChildren<{
+    /** Additional classes to apply to the caption */
+    className?: string;
+}>;
+
+export { }

package/dist/hero-caption.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+function r({ children: o, className: t }) {
+  return /* @__PURE__ */ e("p", { className: `uofg-hero-caption tw:text-xl ${t}`, children: o });
+}
+r.displayName = "HeroCaption";
+export {
+  r as HeroCaption
+};

package/dist/hero-content.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The HeroContent component is used to display the content of a hero. */
+export declare function HeroContent({ children, alignment }: HeroContentProps): JSX.Element;
+
+export declare namespace HeroContent {
+    var displayName: string;
+}
+
+export declare type HeroContentProps = PropsWithChildren<{
+    /**
+     * The alignment of the content
+     *
+     * @default 'left'
+     */
+    alignment?: 'left' | 'center' | 'right' | 'fullWidth';
+}>;
+
+export { }

package/dist/hero-content.js

@@ -0,0 +1,47 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as i } from "react";
+import { tv as m } from "tailwind-variants";
+import { Container as s } from "./container.js";
+import { HeroContext as g } from "./hero-context.js";
+function c({ children: r, alignment: o = "left" }) {
+  const t = i(g), l = m({
+    slots: {
+      base: "",
+      wrapper: "tw:lg:bg-black/80 tw:lg:backdrop-blur tw:flex tw:w-full tw:bg-black tw:p-7 tw:text-white",
+      container: "tw:container tw:mx-auto tw:flex tw:flex-col tw:gap-5"
+    },
+    variants: {
+      variant: {
+        spotlight: {
+          base: "tw:lg:container tw:lg:absolute tw:lg:bottom-0 tw:lg:left-1/2 tw:lg:max-w-max-content tw:lg:-translate-x-1/2 tw:lg:p-4 tw:flex tw:items-center"
+        },
+        basic: {
+          base: "tw:absolute tw:bottom-0 tw:left-1/2 tw:w-full tw:-translate-x-1/2 tw:p-0 tw:flex tw:h-full tw:items-end"
+        }
+      },
+      alignment: {
+        left: {
+          wrapper: "tw:mr-auto tw:lg:max-w-[50%]"
+        },
+        center: {
+          wrapper: "tw:mx-auto tw:lg:max-w-[50%]",
+          container: "tw:lg:text-center tw:lg:items-center",
+          link: "tw:lg:mx-auto"
+        },
+        right: {
+          wrapper: "tw:ml-auto tw:lg:max-w-[50%]",
+          container: "tw:lg:text-right tw:lg:items-end",
+          link: "tw:lg:ml-auto"
+        },
+        fullWidth: {
+          wrapper: "tw:mx-auto"
+        }
+      }
+    }
+  }), { base: a, wrapper: n, container: w } = l({ alignment: o, variant: t == null ? void 0 : t.variant });
+  return (t == null ? void 0 : t.variant) === "spotlight" ? /* @__PURE__ */ e("div", { className: `uofg-hero-content ${a()}`, children: /* @__PURE__ */ e("div", { className: `uofg-hero-content-wrapper ${n()}`, children: /* @__PURE__ */ e("div", { className: `uofg-hero-content-container ${w()}`, children: r }) }) }) : /* @__PURE__ */ e(s, { centered: !0, className: `uofg-hero-content ${a()}`, children: r });
+}
+c.displayName = "HeroContent";
+export {
+  c as HeroContent
+};

package/dist/hero-context.d.ts

@@ -0,0 +1,9 @@
+import { Context } from 'react';
+
+export declare const HeroContext: Context<HeroContextType | null>;
+
+export declare type HeroContextType = {
+    variant: 'spotlight' | 'basic';
+};
+
+export { }

package/dist/hero-context.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+const e = t(null);
+export {
+  e as HeroContext
+};

package/dist/hero-link.d.ts

@@ -0,0 +1,29 @@
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The HeroLink component is used to display a link within a hero. */
+export declare function HeroLink<T extends HeroLinkElementType = 'a'>({ as, href, children, className, ...rest }: HeroLinkProps<T>): JSX.Element;
+
+export declare namespace HeroLink {
+    var displayName: string;
+}
+
+export declare type HeroLinkElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+export declare type HeroLinkProps<T extends HeroLinkElementType = 'a'> = PropsWithChildren<{
+    /**
+     * The element type to render the link as
+     *
+     * @default 'a'
+     */
+    as?: T;
+    /** The URL to link to */
+    href: string;
+    /** Additional classes to apply to the link */
+    className?: string;
+}>;
+
+export { }

package/dist/hero-link.js

@@ -0,0 +1,26 @@
+import { jsx as m } from "react/jsx-runtime";
+import { twMerge as i } from "tailwind-merge";
+import { Button as p } from "./button.js";
+function a({
+  as: o,
+  href: t,
+  children: r,
+  className: e,
+  ...n
+}) {
+  return /* @__PURE__ */ m(
+    p,
+    {
+      ...n,
+      as: o ?? "a",
+      color: "yellow",
+      href: t,
+      className: `uofg-hero-link ${i("tw:p-3 tw:w-fit", e)}`,
+      children: r
+    }
+  );
+}
+a.displayName = "HeroLink";
+export {
+  a as HeroLink
+};

package/dist/hero-title.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The HeroTitle component is used to display the title of a hero. */
+export declare function HeroTitle<T extends HeroTitleElementType = 'h1'>({ as, children, className, ...rest }: HeroTitleProps<T>): JSX.Element;
+
+export declare namespace HeroTitle {
+    var displayName: string;
+}
+
+export declare type HeroTitleElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+
+export declare type HeroTitleProps<T extends HeroTitleElementType = 'h1'> = PropsWithChildren<{
+    /**
+     * The element type to render the title as
+     *
+     * @default 'h1'
+     */
+    as?: T;
+    /** Additional classes to apply to the title */
+    className?: string;
+}>;
+
+export { }

package/dist/hero-title.js

@@ -0,0 +1,26 @@
+import { jsx as l } from "react/jsx-runtime";
+import { useContext as m } from "react";
+import { twMerge as w } from "tailwind-merge";
+import { tv as f } from "tailwind-variants";
+import { HeroContext as p } from "./hero-context.js";
+function x({
+  as: o,
+  children: e,
+  className: r,
+  ...i
+}) {
+  const t = m(p), s = o ?? "h1", n = f({
+    base: "tw:font-serif tw:font-bold tw:text-3xl tw:w-fit",
+    variants: {
+      variant: {
+        spotlight: "tw:text-white",
+        basic: "tw:bg-yellow tw:md:text-4xl tw:text-yellow-contrast tw:p-1"
+      }
+    }
+  }), a = `uofg-hero-title ${w(n({ variant: t == null ? void 0 : t.variant }), r)}`;
+  return /* @__PURE__ */ l(s, { ...i, className: a, children: e });
+}
+x.displayName = "HeroTitle";
+export {
+  x as HeroTitle
+};

package/dist/hero-video.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+/** The HeroVideo component is used to display a video modal in a hero. */
+export declare function HeroVideo({ src, title, transcript, children }: HeroVideo): JSX.Element;
+
+export declare type HeroVideo = PropsWithChildren<{
+    /** The URL of the video to embed. */
+    src: string;
+    /** The title of the video. */
+    title: string;
+    /** The URL to a human readable transcript of the video. */
+    transcript?: string;
+    /** Additional classes to apply to the video container */
+    className?: string;
+}>;
+
+export declare namespace HeroVideo {
+    var displayName: string;
+}
+
+export { }

package/dist/hero-video.js

@@ -0,0 +1,27 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { e as p } from "./solid-DM6GVhkF.js";
+import { FontAwesomeIcon as l } from "@fortawesome/react-fontawesome";
+import { useContext as f } from "react";
+import { tv as w } from "tailwind-variants";
+import { EmbeddedVideo as s } from "./embedded-video.js";
+import { HeroContext as c } from "./hero-context.js";
+import { EmbeddedVideoModalButton as m } from "./embedded-video-modal-button.js";
+function h({ src: e, title: r, transcript: a, children: n }) {
+  const o = f(c), i = `uofg-hero-video ${w({
+    base: "",
+    variants: {
+      variant: {
+        basic: "tw:absolute tw:top-1/2 tw:left-1/2 tw:-translate-x-1/2 tw:-translate-y-1/2",
+        spotlight: "tw:w-fit tw:gap-2 tw:p-3"
+      }
+    }
+  })({ variant: o == null ? void 0 : o.variant })}`;
+  return (o == null ? void 0 : o.variant) === "spotlight" ? /* @__PURE__ */ t(s, { src: e, title: r, transcript: a, children: /* @__PURE__ */ d(m, { type: "yellow", className: i, children: [
+    /* @__PURE__ */ t(l, { icon: p }),
+    /* @__PURE__ */ t("span", { children: n })
+  ] }) }) : /* @__PURE__ */ t(s, { src: e, title: r, transcript: a, children: /* @__PURE__ */ t(m, { type: "play-button", className: i }) });
+}
+h.displayName = "HeroVideo";
+export {
+  h as HeroVideo
+};

package/dist/hero.d.ts

@@ -0,0 +1,141 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ElementType } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+declare const defaultElement = "img";
+
+/** The Hero component is a layout component that displays a large image with accompanying content. */
+export declare function Hero<T extends HeroElementType = typeof defaultElement>({ as, variant, src, alt, width, height, alignment, children, ...rest }: HeroProps<T>): JSX.Element;
+
+export declare namespace Hero {
+    var displayName: string;
+}
+
+export declare function HeroCaption({ children, className }: HeroCaptionProps): JSX.Element;
+
+export declare namespace HeroCaption {
+    var displayName: string;
+}
+
+declare type HeroCaptionProps = PropsWithChildren<{
+    /** Additional classes to apply to the caption */
+    className?: string;
+}>;
+
+/** The HeroContent component is used to display the content of a hero. */
+export declare function HeroContent({ children, alignment }: HeroContentProps): JSX.Element;
+
+export declare namespace HeroContent {
+    var displayName: string;
+}
+
+declare type HeroContentProps = PropsWithChildren<{
+    /**
+     * The alignment of the content
+     *
+     * @default 'left'
+     */
+    alignment?: 'left' | 'center' | 'right' | 'fullWidth';
+}>;
+
+declare type HeroElementType = ElementType<{
+    src: string;
+    alt: string;
+    height?: number;
+    width?: number;
+    className?: string;
+}, 'img'>;
+
+/** The HeroLink component is used to display a link within a hero. */
+export declare function HeroLink<T extends HeroLinkElementType = 'a'>({ as, href, children, className, ...rest }: HeroLinkProps<T>): JSX.Element;
+
+export declare namespace HeroLink {
+    var displayName: string;
+}
+
+declare type HeroLinkElementType = ElementType<{
+    href?: string;
+}, 'a'>;
+
+declare type HeroLinkProps<T extends HeroLinkElementType = 'a'> = PropsWithChildren<{
+    /**
+     * The element type to render the link as
+     *
+     * @default 'a'
+     */
+    as?: T;
+    /** The URL to link to */
+    href: string;
+    /** Additional classes to apply to the link */
+    className?: string;
+}>;
+
+export declare type HeroProps<T extends HeroElementType = typeof defaultElement> = PropsWithChildren<{
+    /**
+     * The element type to render the hero image as
+     *
+     * @default 'img'
+     */
+    as?: T;
+    /**
+     * The variant of the hero
+     *
+     * @default 'basic'
+     */
+    variant: 'spotlight' | 'basic';
+    /** The URL of the image to display */
+    src: string;
+    /** The alt text for the image */
+    alt: string;
+    /** The width of the image in pixels */
+    width?: number;
+    /** The height of the image in pixels */
+    height?: number;
+    /**
+     * The alignment of the hero content, only applies to the spotlight variant
+     *
+     * @default 'left'
+     */
+    alignment?: 'left' | 'center' | 'right' | 'fullWidth';
+} & ComponentPropsWithoutRef<T>>;
+
+/** The HeroTitle component is used to display the title of a hero. */
+export declare function HeroTitle<T extends HeroTitleElementType = 'h1'>({ as, children, className, ...rest }: HeroTitleProps<T>): JSX.Element;
+
+export declare namespace HeroTitle {
+    var displayName: string;
+}
+
+declare type HeroTitleElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+
+declare type HeroTitleProps<T extends HeroTitleElementType = 'h1'> = PropsWithChildren<{
+    /**
+     * The element type to render the title as
+     *
+     * @default 'h1'
+     */
+    as?: T;
+    /** Additional classes to apply to the title */
+    className?: string;
+}>;
+
+/** The HeroVideo component is used to display a video modal in a hero. */
+export declare function HeroVideo({ src, title, transcript, children }: HeroVideo): JSX.Element;
+
+export declare type HeroVideo = PropsWithChildren<{
+    /** The URL of the video to embed. */
+    src: string;
+    /** The title of the video. */
+    title: string;
+    /** The URL to a human readable transcript of the video. */
+    transcript?: string;
+    /** Additional classes to apply to the video container */
+    className?: string;
+}>;
+
+export declare namespace HeroVideo {
+    var displayName: string;
+}
+
+export { }

package/dist/hero.js

@@ -0,0 +1,52 @@
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { tv as d } from "tailwind-variants";
+import { HeroCaption as y } from "./hero-caption.js";
+import { HeroContent as h } from "./hero-content.js";
+import { HeroContext as v } from "./hero-context.js";
+import { HeroLink as I } from "./hero-link.js";
+import { HeroTitle as P } from "./hero-title.js";
+import { HeroVideo as V } from "./hero-video.js";
+const H = "img";
+function b({
+  as: o,
+  variant: t = "basic",
+  src: r,
+  alt: a,
+  width: i,
+  height: m,
+  alignment: s,
+  children: l,
+  ...c
+}) {
+  const n = o ?? H, f = d({
+    slots: {
+      base: "tw:relative tw:flex tw:w-full tw:flex-col tw:overflow-hidden",
+      image: "tw:aspect-[16/9] tw:w-full tw:object-cover tw:md:aspect-[2.625]"
+    },
+    variants: {
+      variant: {
+        basic: {
+          base: "tw:h-fit",
+          image: "tw:max-h-[calc(85vh-14rem)]"
+        },
+        spotlight: {
+          base: "",
+          image: "tw:max-h-[80vh]"
+        }
+      }
+    }
+  }), { base: w, image: p } = f({ variant: t });
+  return /* @__PURE__ */ x("div", { className: w(), children: [
+    /* @__PURE__ */ e(n, { ...c, src: r, alt: a, width: i, height: m, className: p() }),
+    /* @__PURE__ */ e(v.Provider, { value: { variant: t }, children: /* @__PURE__ */ e(h, { alignment: s, children: l }) })
+  ] });
+}
+b.displayName = "Hero";
+export {
+  b as Hero,
+  y as HeroCaption,
+  h as HeroContent,
+  I as HeroLink,
+  P as HeroTitle,
+  V as HeroVideo
+};