@stackshift-ui/header 6.0.6 → 6.0.7

package/dist/chunk-35OWV2LA.mjs

@@ -0,0 +1,89 @@
+// src/header_d.tsx
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Header_D({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  mainImage
+}) {
+  return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", className: "flex-col lg:flex-row", gap: 4, children: [
+    /* @__PURE__ */ jsx(Flex, { align: "center", className: "w-full basis-1/2", direction: "col", children: /* @__PURE__ */ jsxs(Container, { className: "mx-auto items-center text-center lg:text-left", maxWidth: "md", children: [
+      /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
+      /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
+    ] }) }),
+    /* @__PURE__ */ jsx(MainImage, { mainImage })
+  ] }) }) });
+}
+function TitleAndDescription({ title, description }) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    title ? /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", type: "h1", children: title }) : null,
+    description ? /* @__PURE__ */ jsx(Text, { className: "my-6", muted: true, children: description }) : null
+  ] });
+}
+function Buttons({
+  primaryButton,
+  secondaryButton
+}) {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      className: "flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row",
+      gap: 2,
+      children: [
+        (primaryButton == null ? void 0 : primaryButton.label) ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: "link",
+            link: primaryButton,
+            ariaLabel: (_a = primaryButton == null ? void 0 : primaryButton.ariaLabel) != null ? _a : primaryButton == null ? void 0 : primaryButton.label,
+            variant: "solid",
+            className: "bg-primary hover:bg-primary/50 rounded-global px-6 py-3 text-white",
+            children: primaryButton.label
+          }
+        ) : null,
+        (secondaryButton == null ? void 0 : secondaryButton.label) ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: "link",
+            link: secondaryButton,
+            ariaLabel: (_b = secondaryButton.ariaLabel) != null ? _b : secondaryButton == null ? void 0 : secondaryButton.label,
+            variant: "solid",
+            className: "bg-secondary hover:bg-secondary/50 rounded-global px-6 py-3",
+            children: secondaryButton.label
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MainImage({ mainImage }) {
+  var _a;
+  if (!(mainImage == null ? void 0 : mainImage.image)) return null;
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
+    Image,
+    {
+      alt: (_a = mainImage.alt) != null ? _a : "header-main-image",
+      className: "rounded-md",
+      height: 700,
+      sizes: "100vw",
+      src: `${mainImage == null ? void 0 : mainImage.image}`,
+      style: { objectFit: "contain" },
+      width: 1050
+    }
+  ) });
+}
+
+export {
+  Header_D
+};

package/dist/chunk-3SLHYG4E.mjs

@@ -0,0 +1,33 @@
+// src/header.tsx
+import { lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+var Variants = {
+  variant_a: lazy(() => import("./header_a.mjs")),
+  variant_b: lazy(() => import("./header_b.mjs")),
+  variant_c: lazy(() => import("./header_c.mjs")),
+  variant_d: lazy(() => import("./header_d.mjs")),
+  variant_e: lazy(() => import("./header_e.mjs"))
+};
+var displayName = "Header";
+var Header = ({ data }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const variant = data == null ? void 0 : data.variant;
+  const Variant = variant && Variants[variant];
+  const props = {
+    mainImage: (_b = (_a = data == null ? void 0 : data.variants) == null ? void 0 : _a.mainImage) != null ? _b : void 0,
+    images: (_d = (_c = data == null ? void 0 : data.variants) == null ? void 0 : _c.images) != null ? _d : void 0,
+    title: (_f = (_e = data == null ? void 0 : data.variants) == null ? void 0 : _e.title) != null ? _f : void 0,
+    description: (_h = (_g = data == null ? void 0 : data.variants) == null ? void 0 : _g.description) != null ? _h : void 0,
+    primaryButton: (_j = (_i = data == null ? void 0 : data.variants) == null ? void 0 : _i.primaryButton) != null ? _j : void 0,
+    secondaryButton: (_l = (_k = data == null ? void 0 : data.variants) == null ? void 0 : _k.secondaryButton) != null ? _l : void 0,
+    videoLink: (_n = (_m = data == null ? void 0 : data.variants) == null ? void 0 : _m.youtubeLink) != null ? _n : void 0,
+    formLinks: (_p = (_o = data == null ? void 0 : data.variants) == null ? void 0 : _o.formLinks) != null ? _p : void 0,
+    form: (_r = (_q = data == null ? void 0 : data.variants) == null ? void 0 : _q.form) != null ? _r : void 0
+  };
+  return Variant ? /* @__PURE__ */ jsx(Variant, { ...props }) : null;
+};
+Header.displayName = displayName;
+
+export {
+  Header
+};

package/dist/chunk-534QIB7N.mjs

@@ -0,0 +1,65 @@
+// src/header_c.tsx
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Header_C({
+  videoLink,
+  title,
+  primaryButton,
+  secondaryButton
+}) {
+  let videoLinkId;
+  if (videoLink) {
+    if (videoLink.includes("embed")) {
+      videoLinkId = videoLink.split("/")[4];
+    } else {
+      videoLinkId = videoLink.split("/watch?v=")[1] || videoLink.split("/")[3];
+    }
+  }
+  return /* @__PURE__ */ jsx(Section, { className: "py-20 md:py-52 bg-background", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 1280, children: [
+    /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mb-12 text-center md:mb-20", children: [
+      title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-10", children: title }),
+      /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "md:mx-20 lg:mx-60 xl:mx-60", children: videoLinkId && /* @__PURE__ */ jsx(VideoPlayer, { videoLinkId, title }) })
+  ] }) });
+}
+function VideoPlayer({ videoLinkId, title }) {
+  return /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      "aria-label": "Show Video Frame",
+      className: "w-full h-full border-4 rounded-3xl border-primary",
+      src: `https://www.youtube.com/embed/${videoLinkId}`,
+      srcDoc: `<style>*{padding:0;margin:0;overflow:hidden;border-radius:24px}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${`https://www.youtube.com/embed/${videoLinkId}`}><img src=${`https://i.ytimg.com/vi_webp/${videoLinkId}/maxresdefault.webp`} alt=${title} loading="lazy" /><span>\u25B6</span></a>`,
+      loading: "lazy",
+      allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true
+    }
+  ) });
+}
+function Buttons({
+  primaryButton,
+  secondaryButton
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, justify: "center", className: "flex-col lg:flex-row", children: [
+    (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", ariaLabel: primaryButton == null ? void 0 : primaryButton.label, link: primaryButton, children: primaryButton == null ? void 0 : primaryButton.label }),
+    (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: "link",
+        ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
+        link: secondaryButton,
+        className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4",
+        children: secondaryButton == null ? void 0 : secondaryButton.label
+      }
+    )
+  ] });
+}
+
+export {
+  Header_C
+};

package/dist/chunk-6DDP6YE5.mjs

@@ -0,0 +1,54 @@
+// src/header_e.tsx
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { SigninSignup_A } from "@stackshift-ui/signin-signup";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Header_E({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  formLinks,
+  form
+}) {
+  return /* @__PURE__ */ jsx(Section, { className: "relative py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", className: "flex-col lg:flex-row", gap: 4, children: [
+    /* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
+      /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
+      /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsx("div", { className: "max-w-sm mx-auto text-center", children: /* @__PURE__ */ jsx(SigninSignup_A, { form, formLinks }) }) })
+  ] }) }) });
+}
+function TitleAndDescription({ title, description }) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
+    description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
+  ] });
+}
+function Buttons({
+  primaryButton,
+  secondaryButton
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, className: "flex-col md:flex-row justify-center lg:justify-start", children: [
+    (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
+    (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
+      Button,
+      {
+        as: "link",
+        link: secondaryButton,
+        className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3",
+        ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
+        children: secondaryButton == null ? void 0 : secondaryButton.label
+      }
+    )
+  ] });
+}
+
+export {
+  Header_E
+};

package/dist/chunk-OIGPQF35.mjs

@@ -0,0 +1,139 @@
+// src/header_a.tsx
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Header_A({
+  mainImage,
+  title,
+  description,
+  primaryButton,
+  secondaryButton
+}) {
+  return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, className: "flex-col lg:flex-row", children: [
+    /* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
+      /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
+      /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
+    ] }) }),
+    /* @__PURE__ */ jsx(MainImage, { mainImage })
+  ] }) }) });
+}
+function TitleAndDescription({ title, description }) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
+    description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
+  ] });
+}
+function Buttons({
+  primaryButton,
+  secondaryButton
+}) {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      justify: "center",
+      gap: 2,
+      direction: "col",
+      className: "lg:justify-start md:flex-row",
+      children: [
+        (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
+        (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: "link",
+            link: secondaryButton,
+            className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4",
+            ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
+            children: secondaryButton == null ? void 0 : secondaryButton.label
+          }
+        )
+      ]
+    }
+  );
+}
+function MainImage({ mainImage }) {
+  var _a;
+  if (!(mainImage == null ? void 0 : mainImage.image)) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-md", children: [
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: "overflow-hidden rounded-md object-cover md:rounded-br-none lg:h-[448px] relative z-10",
+        src: `${mainImage.image}`,
+        sizes: "(min-width: 520px) 448px, 90vw",
+        width: 448,
+        height: 448,
+        alt: (_a = mainImage.alt) != null ? _a : "header-main-image"
+      }
+    ),
+    /* @__PURE__ */ jsx(DecorativeImages, {})
+  ] });
+}
+function DecorativeImages() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ImageElement,
+      {
+        src: "/assets/elements/webriq-blue-dark-up.png",
+        alt: "webriq-blue-dark-up-mainImage-element",
+        className: "absolute hidden md:block",
+        style: { top: "-2rem", right: "3rem", zIndex: 2 },
+        width: 112,
+        height: 112
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageElement,
+      {
+        src: "/assets/elements/wing-webriq-blue-down.png",
+        alt: "wing-webriq-blue-down-mainImage-element",
+        className: "absolute hidden md:block",
+        style: { bottom: "-2rem", right: "-2rem", zIndex: 2 },
+        width: 144,
+        height: 144
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageElement,
+      {
+        src: "/assets/elements/bullets-gray-right.svg",
+        alt: "bullets-gray-right-mainImage-element",
+        className: "absolute hidden md:block",
+        style: { top: "3rem", right: "-3rem", zIndex: 2 },
+        width: 115,
+        height: 157
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageElement,
+      {
+        src: "/assets/elements/bullets-gray-left.svg",
+        alt: "bullets-gray-left-mainImage-element",
+        className: "absolute hidden md:block",
+        style: { bottom: "2.5rem", left: "-4.5rem", zIndex: 2 },
+        width: 157,
+        height: 115
+      }
+    )
+  ] });
+}
+function ImageElement({
+  src,
+  alt,
+  className,
+  style,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ jsx(Image, { src, alt, className, style, width, height });
+}
+
+export {
+  Header_A
+};

package/dist/chunk-QKD3MWOT.mjs

@@ -0,0 +1,115 @@
+// src/header_b.tsx
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Header_B({
+  images,
+  title,
+  description,
+  primaryButton,
+  secondaryButton
+}) {
+  return /* @__PURE__ */ jsx(Section, { className: "relative z-10 py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { align: "center", direction: "col", gap: 4, className: "lg:flex-row", children: [
+    /* @__PURE__ */ jsx(Flex, { align: "center", direction: "col", className: "w-full basis-1/2", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto text-center lg:text-left", children: [
+      /* @__PURE__ */ jsx(TitleAndDescription, { title, description }),
+      /* @__PURE__ */ jsx(Buttons, { primaryButton, secondaryButton })
+    ] }) }),
+    images && /* @__PURE__ */ jsx(ImageGallery, { images })
+  ] }) }) });
+}
+function TitleAndDescription({ title, description }) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    title && /* @__PURE__ */ jsx(Heading, { fontSize: "3xl", className: "mb-3", children: title }),
+    description && /* @__PURE__ */ jsx(Text, { muted: true, className: "my-6", children: description })
+  ] });
+}
+function Buttons({
+  primaryButton,
+  secondaryButton
+}) {
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      gap: 2,
+      className: "flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row",
+      children: [
+        (primaryButton == null ? void 0 : primaryButton.label) && /* @__PURE__ */ jsx(Button, { as: "link", link: primaryButton, ariaLabel: primaryButton == null ? void 0 : primaryButton.label, children: primaryButton == null ? void 0 : primaryButton.label }),
+        (secondaryButton == null ? void 0 : secondaryButton.label) && /* @__PURE__ */ jsx(
+          Button,
+          {
+            as: "link",
+            link: secondaryButton,
+            className: "bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3",
+            ariaLabel: secondaryButton == null ? void 0 : secondaryButton.label,
+            children: secondaryButton == null ? void 0 : secondaryButton.label
+          }
+        )
+      ]
+    }
+  );
+}
+function ImageGallery({ images }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+  if (!images) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full px-4 lg:w-1/2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 sm:flex lg:mb-4 lg:ml-6", children: [
+      ((_a = images == null ? void 0 : images[0]) == null ? void 0 : _a.image) && /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "relative object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:mb-0 sm:w-1/3 md:rounded-3xl lg:rounded-br-none",
+          sizes: "100vw",
+          src: `${(_b = images == null ? void 0 : images[0]) == null ? void 0 : _b.image}`,
+          width: 941,
+          height: 734,
+          alt: (_d = (_c = images == null ? void 0 : images[0]) == null ? void 0 : _c.alt) != null ? _d : "header-image-1"
+        }
+      ),
+      ((_e = images == null ? void 0 : images[1]) == null ? void 0 : _e.image) && /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "relative object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-2/3 md:rounded-3xl lg:rounded-bl-none",
+          sizes: "100vw",
+          src: `${(_f = images == null ? void 0 : images[1]) == null ? void 0 : _f.image}`,
+          width: 1050,
+          height: 701,
+          alt: (_h = (_g = images == null ? void 0 : images[1]) == null ? void 0 : _g.alt) != null ? _h : "header-image-2"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 sm:flex lg:mb-4 lg:mr-6", children: [
+      ((_i = images == null ? void 0 : images[2]) == null ? void 0 : _i.image) && /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:w-2/3 md:mb-0 md:rounded-3xl lg:rounded-br-none",
+          sizes: "100vw",
+          src: `${(_j = images == null ? void 0 : images[2]) == null ? void 0 : _j.image}`,
+          width: 1050,
+          height: 701,
+          alt: (_l = (_k = images == null ? void 0 : images[2]) == null ? void 0 : _k.alt) != null ? _l : "header-image-3"
+        }
+      ),
+      ((_m = images == null ? void 0 : images[3]) == null ? void 0 : _m.image) && /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-1/3 md:rounded-3xl lg:rounded-bl-none",
+          sizes: "100vw",
+          src: `${(_n = images == null ? void 0 : images[3]) == null ? void 0 : _n.image}`,
+          width: 941,
+          height: 734,
+          alt: (_p = (_o = images == null ? void 0 : images[3]) == null ? void 0 : _o.alt) != null ? _p : "header-image-4"
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  Header_B
+};