@luxonis/component-lib 1.0.12 → 1.1.1

package/dist/index.mjs

@@ -578,6 +578,7 @@ var DescriptionRecepie = cva5("flex flex-col ", {
       center: "items-start sm:items-center",
       allwayscenter: "items-center",
       left: "items-start",
+      right: "items-end",
       leftCenterMobile: "items-start sm:items-center",
       desktopCenterMobileLeft: "w-full items-start !text-left sm:items-center sm:!text-center",
       desktopLeftMobileCenter: "w-full items-center !text-center lg:items-start lg:!text-left"
@@ -619,7 +620,7 @@ var Description = (props) => {
     descriptionStyle,
     wrapperClassName
   } = props;
-  const alingText = align === "left" || align === "desktopLeftMobileCenter" ? "left" : "center";
+  const alingText = align === "left" || align === "desktopLeftMobileCenter" ? "left" : align === "right" ? "right" : "center";
   return /* @__PURE__ */ jsxs5("div", { className: cx7(DescriptionRecepie({ align, gap }), className), children: [
     /* @__PURE__ */ jsxs5("div", { className: cx7(`flex flex-col gap-4 sm:gap-6 w-full`, wrapperClassName ?? "", InnerGap({ innerGap })), children: [
       subTitle && /* @__PURE__ */ jsx9(
@@ -1544,6 +1545,687 @@ var TabsContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// src/ProgressBar.tsx
+import * as React16 from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cx as cx22 } from "class-variance-authority";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Progress = React16.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx26(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    className: cx22("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
+    ...props,
+    children: /* @__PURE__ */ jsx26(
+      ProgressPrimitive.Indicator,
+      {
+        className: "size-full flex-1 bg-primary transition-all",
+        style: { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    )
+  }
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+// src/EdgeSlideshow.tsx
+import { useEffect as useEffect3, useState as useState6 } from "react";
+import { useInView } from "react-intersection-observer";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var slides = [
+  "ai-performance",
+  //'stereo-depth',
+  //'video-streaming',
+  "processing-efficiency",
+  "custom-vision"
+];
+function getNextSlide(currentSlide) {
+  const currentIndex = slides.indexOf(currentSlide);
+  const nextIndex = (currentIndex + 1) % slides.length;
+  return slides[nextIndex];
+}
+function getSlideInfo(slide) {
+  switch (slide) {
+    case "ai-performance":
+      return {
+        title: "AI Performance",
+        imageUrl: "ai-performance.webp",
+        imageAlt: "AI Performance",
+        content: /* @__PURE__ */ jsxs14(Fragment2, { children: [
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowTextPoint,
+            {
+              title: "48 TOPS INT8 / 12 TOPS FP16:",
+              description: "Handle complex neural models effortlessly, from object detection to segmentation."
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowTextPoint,
+            {
+              title: "Run YOLO, ResNet, MobileNet (90+Models):",
+              description: "Optimized for high throughput and low latency."
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowTextPoint,
+            {
+              title: "Inference Speed:",
+              description: /* @__PURE__ */ jsxs14("article", { className: "flex flex-row flex-wrap items-start gap-2 lg:items-center", children: [
+                /* @__PURE__ */ jsx27(EdgeSlideshowTextPointButton, { text: "YOLOv5m: 280 FPS" }),
+                /* @__PURE__ */ jsx27(EdgeSlideshowTextPointButton, { text: "ResNet-50: 934 FPS" }),
+                /* @__PURE__ */ jsx27(EdgeSlideshowTextPointButton, { text: "BiseNetv1-MBNV2: 647 FPS" })
+              ] })
+            }
+          )
+        ] })
+      };
+    //case 'stereo-depth':
+    //  return {
+    //    title: 'Stereo Depth Precision',
+    //    imageUrl: 'stereo-depth.webp',
+    //    imageAlt: 'Stereo Depth',
+    //    content: (
+    //      <>
+    //        <EdgeSlideshowTextPoint
+    //          title="Subpixel Accuracy:"
+    //          description="Up to 1/32 subpixel, enabling precise depth maps for real-world applications."
+    //        />
+    //        <EdgeSlideshowTextPoint
+    //          title="High Resolution:"
+    //          description="Stereo depth at 720p @ 60 FPS with configurable disparity ranges."
+    //        />
+    //        <EdgeSlideshowTextPoint
+    //          title="Advanced Features:"
+    //          description="Confidence mapping, neural network based depth matching, and fine-tuning parameters tailored to any environment."
+    //        />
+    //      </>
+    //    ),
+    //  };
+    //case 'video-streaming':
+    //  return {
+    //    title: 'Video Streaming',
+    //    imageUrl: 'video-streaming.webp',
+    //    imageAlt: 'Video Streaming',
+    //    content: (
+    //      <>
+    //        <EdgeSlideshowTextPoint
+    //          title="Encoding:"
+    //          description={<EdgeSlideshowTextPointButton text={'4K @ 120 FPS (H.264/H.265)'} />}
+    //        />
+    //        <EdgeSlideshowTextPoint
+    //          title="Decoding:"
+    //          description={<EdgeSlideshowTextPointButton text={'4K @ 240 FPS, with VP9 and AV1 support'} />}
+    //        />
+    //        <EdgeSlideshowTextPoint
+    //          title="ISP:"
+    //          description={
+    //            <article className="flex flex-row flex-wrap gap-2 items-start lg:items-center">
+    //              <EdgeSlideshowTextPointButton text={'5 camera streams'} />
+    //              <EdgeSlideshowTextPointButton text={'HDR'} />
+    //              <EdgeSlideshowTextPointButton text={'EIS'} />
+    //              <EdgeSlideshowTextPointButton text={'3A'} />
+    //              <EdgeSlideshowTextPointButton text={'up to 3x 8K @ 30FPS'} />
+    //            </article>
+    //          }
+    //        />
+    //      </>
+    //    ),
+    //  };
+    case "processing-efficiency":
+      return {
+        title: "Processing Efficiency",
+        imageUrl: "processing-efficiency.webp",
+        imageAlt: "Processing Efficiency",
+        content: /* @__PURE__ */ jsxs14(Fragment2, { children: [
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowTextPoint,
+            {
+              title: "Power Consumption:",
+              description: "Average 10\u201315W, balancing performance and energy efficiency for edge deployments."
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowTextPoint,
+            {
+              title: "Compact Design:",
+              description: "Fully integrated processing in a device that fits in your hand."
+            }
+          )
+        ] })
+      };
+    case "custom-vision":
+      return {
+        title: "Custom Vision Engines",
+        imageUrl: "custom-vision.webp",
+        imageAlt: "Custom Vision",
+        content: /* @__PURE__ */ jsxs14(Fragment2, { children: [
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowTextPoint,
+            {
+              title: "Processing:",
+              description: "Stereo depth, optical flow, and feature detection are processed in parallel on dedicated hardware blocks."
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowTextPoint,
+            {
+              title: "Throughput:",
+              description: /* @__PURE__ */ jsxs14("article", { className: "flex flex-col items-start gap-2", children: [
+                /* @__PURE__ */ jsx27(EdgeSlideshowTextPointButton, { text: "Optical Flow:\nFull-dense at VGA @ 60 FPS" }),
+                /* @__PURE__ */ jsx27(EdgeSlideshowTextPointButton, { text: "Template Matching:\n 1080p with 1.2 ms for 500 templates" })
+              ] })
+            }
+          )
+        ] })
+      };
+  }
+}
+function EdgeSlideshowTextPointButton(props) {
+  return /* @__PURE__ */ jsx27(
+    Button,
+    {
+      variant: "primaryAlt",
+      className: "min-h-fit cursor-default whitespace-pre-line rounded-md !p-4 text-start",
+      animate: false,
+      children: props.text
+    }
+  );
+}
+function EdgeSlideshowImage(props) {
+  const { imageAlt, imageUrl } = getSlideInfo(props.activeSlide);
+  return /* @__PURE__ */ jsx27(
+    "img",
+    {
+      src: `/assets/edge-interference/slideshow/${imageUrl}`,
+      alt: imageAlt,
+      className: "size-full max-w-[1/2] rounded-lg object-cover"
+    }
+  );
+}
+function EdgeSlideshowHeader() {
+  return /* @__PURE__ */ jsxs14("header", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx27(Text, { text: "The Benchmark for Edge AI", size: "h2", color: "default" }),
+    /* @__PURE__ */ jsx27(
+      Text,
+      {
+        text: "Luxonis devices deliver unparalleled AI performance at the edge, combining neural inference, stereo depth, and real-time vision in one compact package.",
+        size: "lg",
+        color: "default"
+      }
+    )
+  ] });
+}
+function EdgeSlideshowNav(props) {
+  const { activeSlide, setActiveSlide, autoscrolling, inView } = props;
+  const [progress, setProgress] = useState6(0);
+  useEffect3(() => {
+    let intervalId;
+    const startTime = Date.now();
+    if (autoscrolling && inView) {
+      intervalId = window.setInterval(() => {
+        const elapsed = Date.now() - startTime;
+        const newProgress = Math.min(elapsed / 1e4 * 100, 100);
+        setProgress(newProgress);
+        if (newProgress >= 100) {
+          clearInterval(intervalId);
+          setProgress(0);
+        }
+      }, 100);
+    }
+    return () => {
+      if (intervalId !== void 0) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [autoscrolling, activeSlide, inView]);
+  return /* @__PURE__ */ jsx27("nav", { className: "flex flex-row items-center gap-3", children: slides.map(
+    (slide, index) => autoscrolling && slides.indexOf(slide) === slides.indexOf(activeSlide) ? /* @__PURE__ */ jsx27(
+      Progress,
+      {
+        onClick: () => setActiveSlide(slide),
+        value: progress,
+        max: 100,
+        className: "!h-3 w-16 cursor-pointer select-none"
+      },
+      index
+    ) : /* @__PURE__ */ jsx27(
+      Badge,
+      {
+        onClick: () => setActiveSlide(slide),
+        variant: activeSlide === slide ? "default" : "secondary",
+        className: "h-3  w-16 cursor-pointer select-none"
+      },
+      slide
+    )
+  ) });
+}
+function EdgeSlideshowTextPoint(props) {
+  return /* @__PURE__ */ jsxs14("article", { className: `flex flex-col items-start gap-2`, children: [
+    /* @__PURE__ */ jsx27(Text, { text: props.title, size: "md", color: "default", weight: "bold" }),
+    typeof props.description === "string" ? /* @__PURE__ */ jsx27(Text, { text: props.description, size: "md", color: "default" }) : props.description
+  ] });
+}
+function EdgeSlideshowText(props) {
+  const { activeSlide, setActiveSlide, autoscrolling, inView } = props;
+  const slideInfo = getSlideInfo(activeSlide);
+  return /* @__PURE__ */ jsxs14("section", { className: "flex size-full flex-col justify-between gap-4", children: [
+    /* @__PURE__ */ jsx27("section", { className: "hidden xl:flex", children: /* @__PURE__ */ jsx27(EdgeSlideshowHeader, {}) }),
+    /* @__PURE__ */ jsxs14("article", { className: "flex flex-col items-start gap-8", children: [
+      /* @__PURE__ */ jsx27(Text, { text: slideInfo.title, size: "h4", color: "primary" }),
+      slideInfo.content,
+      /* @__PURE__ */ jsx27(
+        EdgeSlideshowNav,
+        {
+          activeSlide,
+          autoscrolling,
+          inView,
+          setActiveSlide
+        }
+      )
+    ] })
+  ] });
+}
+function EdgeSlideshow() {
+  const [activeSlide, setActiveSlide] = useState6("ai-performance");
+  const [autoscrolling, setAutoscrolling] = useState6(true);
+  const { ref, inView } = useInView({});
+  useEffect3(() => {
+    let intervalId;
+    if (inView) {
+      intervalId = window.setInterval(() => {
+        setActiveSlide(getNextSlide(activeSlide));
+        setAutoscrolling(true);
+      }, 1e4);
+    }
+    return () => {
+      if (intervalId !== void 0) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [inView, activeSlide, setActiveSlide]);
+  return /* @__PURE__ */ jsxs14("section", { className: "page-card  page-padding bg-white", children: [
+    /* @__PURE__ */ jsx27("section", { className: "flex pb-8  xl:hidden", children: /* @__PURE__ */ jsx27(EdgeSlideshowHeader, {}) }),
+    /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        ref,
+        className: "page-card-content grid grid-cols-1 items-center justify-center gap-8 lg:justify-around lg:gap-24 xl:grid-cols-2 ",
+        children: [
+          /* @__PURE__ */ jsx27(EdgeSlideshowImage, { activeSlide }),
+          /* @__PURE__ */ jsx27(
+            EdgeSlideshowText,
+            {
+              inView,
+              activeSlide,
+              setActiveSlide,
+              autoscrolling
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/StereoDepthCalibration.tsx
+import { Icon as Icon8 } from "@iconify/react";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+var cards = [
+  {
+    title: "Extreme Precision",
+    text: "Alignment on 42 key metrics ensures unparalleled accuracy across stereo pairs.",
+    icon: "uil:crosshair"
+  },
+  {
+    title: "Wide Lens Compatibility",
+    text: "Accommodates a variety of lenses, including super wide-angle optics.",
+    icon: "mage:lens-fill"
+  },
+  {
+    title: "Temperature Compensation",
+    text: "Calibrated for stability across temperature fluctuations.",
+    icon: "fluent:temperature-16-regular"
+  },
+  {
+    title: "Housing Calibration",
+    text: "Fine-tuned for alignment between the camera and its physical enclosure.",
+    icon: "f7:gear-alt-fill"
+  }
+];
+function StereoDepthCalibrationWrapper() {
+  return /* @__PURE__ */ jsxs15("section", { className: "page-card-content relative flex size-full flex-col items-center justify-center gap-8 overflow-hidden rounded-lg  bg-black", children: [
+    /* @__PURE__ */ jsx28(
+      "img",
+      {
+        alt: "Stereo Depth Calibration Background Overlay",
+        src: "https://www.luxonis.com/assets/stereo-depth/stereo-depth-calibration-bg.webp",
+        className: "absolute size-full bg-cover bg-center bg-no-repeat object-cover md:h-5/6"
+      }
+    ),
+    /* @__PURE__ */ jsx28(StereoDepthCalibrationBody, {})
+  ] });
+}
+function StereoDepthCalibrationHeader() {
+  return /* @__PURE__ */ jsxs15("header", { className: "flex flex-col items-center justify-center gap-4 pt-6 text-center lg:w-1/2", children: [
+    /* @__PURE__ */ jsx28(Text, { text: "Rail Calibration", size: "md", color: "muted", className: "uppercase" }),
+    /* @__PURE__ */ jsx28(Text, { text: "Starting on the Right Track", size: "h2", color: "white" }),
+    /* @__PURE__ */ jsx28(
+      Text,
+      {
+        text: "Our patent pending rail calibration process guarantees unmatched consistency.",
+        size: "lg",
+        color: "white"
+      }
+    )
+  ] });
+}
+function StereoDepthCalibrationFooter() {
+  return /* @__PURE__ */ jsxs15("footer", { className: "mt-10 flex flex-col items-start gap-8", children: [
+    /* @__PURE__ */ jsx28(
+      Text,
+      {
+        text: "From lenses to housing, every component is precisely aligned for dependable performance.",
+        size: "h4",
+        color: "white",
+        className: "w-full lg:w-2/5"
+      }
+    ),
+    /* @__PURE__ */ jsx28(StereoDepthCalibrationFooterCards, {})
+  ] });
+}
+function StereoDepthCalibrationFooterCard(props) {
+  return /* @__PURE__ */ jsxs15(FrostedCard, { className: "flex h-full flex-col items-start justify-start gap-2", children: [
+    /* @__PURE__ */ jsx28(Icon8, { icon: props.icon, width: 32, height: 32, className: "card-icon" }),
+    /* @__PURE__ */ jsx28(Text, { text: props.title, size: "lg", color: "white", weight: "semibold" }),
+    /* @__PURE__ */ jsx28(Text, { text: props.text, size: "sm", color: "white" })
+  ] });
+}
+function StereoDepthCalibrationFooterCards() {
+  return /* @__PURE__ */ jsx28("section", { className: "grid size-full grid-cols-1 items-center justify-center gap-8 md:grid-cols-2 xl:grid-cols-4", children: cards.map((card) => /* @__PURE__ */ jsx28(StereoDepthCalibrationFooterCard, { ...card }, card.title)) });
+}
+function StereoDepthCalibrationBody() {
+  return /* @__PURE__ */ jsxs15("section", { className: " z-[1] flex size-full flex-col items-center justify-start overflow-hidden rounded-lg p-4 lg:p-12", children: [
+    /* @__PURE__ */ jsx28(StereoDepthCalibrationHeader, {}),
+    /* @__PURE__ */ jsx28(StereoDepthCalibrationFooter, {})
+  ] });
+}
+function StereoDepthCalibration() {
+  return /* @__PURE__ */ jsx28("section", { className: "page-card page-padding bg-white", children: /* @__PURE__ */ jsx28(StereoDepthCalibrationWrapper, {}) });
+}
+
+// src/Support.tsx
+import { cx as cx23 } from "class-variance-authority";
+
+// src/links.ts
+var github = "https://github.com/luxonis/";
+var twitter = "https://twitter.com/luxonis";
+var linkedin = "https://www.linkedin.com/company/luxonis/";
+var youtube = "https://www.youtube.com/c/Luxonis";
+var discord = "https://www.luxonis.com/discord";
+var docs = "https://docs.luxonis.com/en/latest/";
+var forum = "https://discuss.luxonis.com/";
+var status = "https://status.luxonis.com/";
+var store = "https://shop.luxonis.com/";
+var oakRealsenseDocs = "https://docs.luxonis.com/projects/hardware/en/latest/pages/guides/realsense_comparison.html";
+var distributorForm = "https://docs.google.com/forms/d/e/1FAIpQLSeVo9QREQxPsIxiHCAfyEgnI2kK88W4r6dUkCTbYfH_R5emAQ/viewform?vc=0&c=0&w=1&flr=0";
+var kickstarter = "https://www.kickstarter.com/projects/opencv/rae-0";
+var raeStorepage = "https://shop.luxonis.com/collections/early-access/products/rae";
+var robothub = "https://hub.luxonis.com/join";
+var depthaiHardwareProject = "https://github.com/luxonis/depthai-hardware/tree/master/DM1095_OAK-D-LITE-DEV_DepthAI_USB3C";
+var getStoreSearchLink = (search) => {
+  return `https://shop.luxonis.com/search?q=${search}`;
+};
+var supportMail = "mailto:support@luxonis.com";
+var supportMailClean = "support@luxonis.com";
+var salesMail = "mailto:orders@luxonis.com";
+var salesMailClean = "orders@luxonis.com";
+var applyMail = "mailto:careers@luxonis.com";
+var applyMailClean = "careers@luxonis.com";
+var showcaseMail = "mailto:support@luxonis.com";
+var showcaseMailClean = "support@luxonis.com";
+var blog = "https://discuss.luxonis.com/blog";
+var privacy = "/privacy";
+var termsOfService = "/terms-of-service";
+var aboutUs = "/about-us";
+var showcase = "/solutions";
+var careers = "/careers";
+var distributors = "/distributors";
+var marketing = "/marketing";
+var robothubInternal = "/hub";
+var certificates = "/certificates";
+var services = "/services";
+var bloomberg = "https://www.bloomberg.com/news/articles/2021-03-11/oak-d-device-paves-the-way-for-future-spatial-ai";
+var forbes = "https://www.forbes.com/sites/gusalexiou/2021/03/24/cutting-edge-intel-ai-powered-backpack-could-replace-a-guide-dog-for-blind-people/?sh=70bb63d01b36";
+var techcrunch = "https://techcrunch.com/2020/07/14/opencv-ai-kit-aims-to-do-for-computer-vision-what-raspberry-pi-did-for-hobbyist-hardware/";
+var camerasProducts = "https://shop.luxonis.com/collections/oak-cameras-1";
+var modulesProducts = "https://shop.luxonis.com/collections/oak-modules";
+var accessoriesProducts = "https://shop.luxonis.com/collections/accessories";
+var earlyAccessProducts = "https://shop.luxonis.com/collections/early-access";
+var supportForm = "https://share-eu1.hsforms.com/1qY1TD1LgRU27qYXxzRyHNgf2chh";
+var servicesMeetLink = "https://meetings-eu1.hubspot.com/bradley1/luxonis-services-";
+var replayInstructions = "https://docs-beta.luxonis.com/cloud/perception-apps/robothub-library/replay/";
+var contactLink = "https://meetings-eu1.hubspot.com/cj-mann/cj-demo";
+
+// src/TalkToSalesButton.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+function TalkToSalesButton() {
+  return /* @__PURE__ */ jsx29("a", { href: contactLink, target: "_blank", children: /* @__PURE__ */ jsx29(Button, { variant: "secondary", color: "white", role: "continue", children: "Talk to Sales" }) });
+}
+
+// src/ContactUsForm.tsx
+import { z } from "zod";
+import React17 from "react";
+
+// src/useRudderAnalytics.ts
+import { useEffect as useEffect4, useState as useState7 } from "react";
+var useRudderStackAnalytics = () => {
+  const [analytics, setAnalytics] = useState7();
+  useEffect4(() => {
+    if (!analytics) {
+      const initialize = async () => {
+        const { RudderAnalytics } = await import("@rudderstack/analytics-js");
+        const analyticsInstance = new RudderAnalytics();
+        if (!process.env.NEXT_PUBLIC_RUDDERSTACK_WRITE_KEY || !process.env.NEXT_PUBLIC_RUDDERSTACK_DATAPLANE) {
+          console.warn("RudderStack not configured");
+          return;
+        }
+        analyticsInstance.load(
+          process.env.NEXT_PUBLIC_RUDDERSTACK_WRITE_KEY,
+          process.env.NEXT_PUBLIC_RUDDERSTACK_DATAPLANE,
+          {
+            storage: { type: "memoryStorage" }
+          }
+          // Disables storage of events in local storage or cookies
+        );
+        window.rudderanalytics = analyticsInstance;
+        setAnalytics(analyticsInstance);
+      };
+      initialize().catch((e) => console.log(e));
+    }
+  }, [analytics]);
+  return analytics;
+};
+
+// src/ContactUsForm.tsx
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+var formSchema = z.object({
+  name: z.string().min(1),
+  company: z.string().min(1),
+  email: z.string().email(),
+  message: z.string().min(1),
+  inquiry: z.string().min(1)
+});
+function ContactUsForm() {
+  const [formSubmitted, setFormSubmitted] = React17.useState(false);
+  const [formHasError, setFormHasError] = React17.useState(false);
+  const [formIsLoading, setFormIsLoading] = React17.useState(false);
+  const analytics = useRudderStackAnalytics();
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    setFormIsLoading(true);
+    const [nameInput, companyInput, emailInput, inquiryInput, messageInput] = [
+      document.getElementById("name"),
+      document.getElementById("company"),
+      document.getElementById("email"),
+      document.getElementById("inquiry"),
+      document.getElementById("message")
+    ];
+    const formData = {
+      name: nameInput.value,
+      company: companyInput.value,
+      email: emailInput.value,
+      inquiry: inquiryInput.textContent,
+      message: messageInput.value
+    };
+    setFormHasError(false);
+    const parsedData = formSchema.safeParse(formData);
+    if (parsedData.error || !parsedData.data) {
+      console.warn("Form contains errors!", parsedData.error);
+      setFormHasError(true);
+      setFormIsLoading(false);
+      return;
+    }
+    if (!analytics) {
+      console.warn("Rudder Stack not running");
+      setFormIsLoading(false);
+      return;
+    }
+    analytics.identify(
+      parsedData.data.email,
+      {
+        ...parsedData
+      },
+      () => {
+        console.debug("User identified.");
+      }
+    );
+    analytics.track(
+      "Contact Form Submitted",
+      {
+        message: "Message from contact form",
+        reasonForContact: parsedData.data,
+        privacyPolicyAccepted: true,
+        formData
+      },
+      () => {
+        setFormIsLoading(false);
+        console.debug("Form submission event tracked.");
+      }
+    );
+    setFormSubmitted(true);
+  };
+  if (formSubmitted) {
+    return /* @__PURE__ */ jsx30("div", { className: "m-auto flex size-full  h-[456px]  flex-col items-center justify-center px-4", children: /* @__PURE__ */ jsx30(
+      Text,
+      {
+        size: "h4",
+        text: "Thank you for your message. We will get back to you soon.",
+        color: "white",
+        className: "my-auto text-center"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs16("form", { id: "contact-form-anchor", className: "flex w-full flex-col gap-6  text-white", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-6 lg:flex-row", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsx30(Label, { className: "font-normal", htmlFor: "name", children: "Name *" }),
+        /* @__PURE__ */ jsx30(Input, { type: "text", id: "name", placeholder: "E.g. Hanna Johns" })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsx30(Label, { className: "font-normal", htmlFor: "Company", children: "Company *" }),
+        /* @__PURE__ */ jsx30(Input, { type: "text", id: "company", placeholder: "E.g. Hanna" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx30(Label, { className: "font-normal", htmlFor: "email", children: "E-mail *" }),
+      /* @__PURE__ */ jsx30(Input, { type: "email", id: "email", placeholder: "E.g. info@email.com" })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx30(Label, { className: "font-normal", htmlFor: "inquiry", children: "Type of Inquiry *" }),
+      /* @__PURE__ */ jsxs16(Select, { children: [
+        /* @__PURE__ */ jsx30(SelectTrigger, { className: "h-[48px] bg-white text-black ", children: /* @__PURE__ */ jsx30(SelectValue, { id: "inquiry", placeholder: "Select..." }) }),
+        /* @__PURE__ */ jsxs16(SelectContent, { className: "bg-white", children: [
+          /* @__PURE__ */ jsx30(SelectItem, { value: "Hub assistance", children: "Hub assistance" }),
+          /* @__PURE__ */ jsx30(SelectItem, { value: "hardware-issue", children: "Hardware issue" }),
+          /* @__PURE__ */ jsx30(SelectItem, { value: "support", children: "Support" }),
+          /* @__PURE__ */ jsx30(SelectItem, { value: "training", children: "Training" }),
+          /* @__PURE__ */ jsx30(SelectItem, { value: "other", children: "Other" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx30(Label, { className: "font-normal", htmlFor: "message", children: "Message *" }),
+      /* @__PURE__ */ jsx30(Input, { type: "text", id: "message", placeholder: "Type..." })
+    ] }),
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-row items-center justify-start gap-8", children: [
+      /* @__PURE__ */ jsx30(Button, { type: "submit", variant: "secondary", size: "lg", role: "continue", className: "w-fit", children: formIsLoading ? "Submitting..." : "Submit" }),
+      formHasError && /* @__PURE__ */ jsx30(Text, { text: "Please fill out all fields", color: "error", size: "xl" })
+    ] })
+  ] });
+}
+
+// src/Support.tsx
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var Support = (props) => {
+  const { variant = "fullpage", text } = props;
+  return /* @__PURE__ */ jsx31("div", { className: "page-card page-padding", children: /* @__PURE__ */ jsxs17(
+    Card,
+    {
+      variant,
+      outerStyles: "h-full",
+      className: cx23(
+        "page-card-content mx-auto flex w-full h-full flex-col gap-x-20 gap-y-4 justify-between overflow-hidden bg-gradient-stereo-depth pt-12  xl:p-8  xl:flex-row"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col items-center gap-8 px-4 text-white xl:w-fit xl:items-start xl:gap-10 xl:px-0", children: [
+          /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col items-center gap-4 text-white xl:items-start xl:gap-6", children: [
+            /* @__PURE__ */ jsx31(Text, { size: "h2", text: text ?? "Need More Help?", className: "max-w-[650px] text-center xl:text-left" }),
+            /* @__PURE__ */ jsx31(
+              Text,
+              {
+                size: "lg",
+                text: "Our dedicated team is available for technical support, business solutions, and more. Let us provide the help you need.",
+                className: "w-full max-w-105 text-center xl:text-left"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs17("div", { className: "flex w-fit flex-col gap-4 md:flex-row", children: [
+            /* @__PURE__ */ jsx31(TalkToSalesButton, {}),
+            /* @__PURE__ */ jsx31("a", { href: "https://chat.luxonis.com", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx31(Button, { size: "lg", variant: "secondary", role: "continue", children: "Get Instant Support" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx31("div", { className: "w-full p-4 xl:p-0", children: /* @__PURE__ */ jsx31(FrostedCard, { className: "h-full", children: /* @__PURE__ */ jsx31(ContactUsForm, {}) }) })
+      ]
+    }
+  ) });
+};
+
+// src/ContactUs.tsx
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+var ContactUsSection = (props) => {
+  const {
+    title = "Let\u2019s Build \n the Future of \n Vision Together",
+    description = "Our dedicated team is available for technical support, business solutions, and more. Let us provide the help you need."
+  } = props;
+  return /* @__PURE__ */ jsx32("section", { id: "contact-us", className: "page-card page-padding", children: /* @__PURE__ */ jsxs18("section", { className: "page-card-content flex flex-col gap-8 rounded-lg p-4 pt-12 [background:radial-gradient(416.66%_106.71%_at_76.3%_37.11%,#5724E8_0%,#000_100%),#000] md:p-12 lg:flex-row  lg:justify-between", children: [
+    /* @__PURE__ */ jsx32(
+      Description,
+      {
+        title,
+        align: "left",
+        textStyle: "max-w-none w-fit lg:max-w-auto  lg:justify-start justify-center lg:text-left text-center",
+        wrapperClassName: "lg:items-start items-center lg:text-left text-center flex",
+        description,
+        className: "text-white ",
+        children: /* @__PURE__ */ jsxs18("div", { className: "flex w-full max-w-[500px] flex-col flex-wrap items-center gap-4 lg:flex-row lg:justify-start", children: [
+          /* @__PURE__ */ jsx32("a", { href: "https://hub.luxonis.com", target: "_blank", className: "w-fit", children: /* @__PURE__ */ jsx32(Button, { variant: "secondary", size: "lg", role: "continue", className: "w-full", children: "Start for Free" }) }),
+          /* @__PURE__ */ jsx32(TalkToSalesButton, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx32(FrostedCard, { className: "!p-6", children: /* @__PURE__ */ jsx32(ContactUsForm, {}) })
+  ] }) });
+};
 export {
   Accordion,
   AccordionContent,
@@ -1560,9 +2242,12 @@ export {
   ChatButton,
   Checkbox,
   CodeBlock,
+  ContactUsForm,
+  ContactUsSection,
   Copyright,
   Description,
   DualRangeSlider,
+  EdgeSlideshow,
   FrostedCard,
   Hero,
   HoverCard,
@@ -1570,6 +2255,7 @@ export {
   HoverCardTrigger,
   Input,
   Label,
+  Progress,
   SearchBar,
   Select,
   SelectContent,
@@ -1581,6 +2267,8 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  StereoDepthCalibration,
+  Support,
   Switch,
   Table,
   TableBody,
@@ -1594,6 +2282,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  TalkToSalesButton,
   Text,
   Textarea,
   Tooltip,
@@ -1601,7 +2290,54 @@ export {
   TooltipProvider,
   TooltipTrigger,
   Video,
+  aboutUs,
+  accessoriesProducts,
+  applyMail,
+  applyMailClean,
   badgeVariants,
+  blog,
+  bloomberg,
   buttonVariants,
-  parseNewLines
+  camerasProducts,
+  careers,
+  certificates,
+  contactLink,
+  depthaiHardwareProject,
+  discord,
+  distributorForm,
+  distributors,
+  docs,
+  earlyAccessProducts,
+  forbes,
+  forum,
+  getStoreSearchLink,
+  github,
+  kickstarter,
+  linkedin,
+  marketing,
+  modulesProducts,
+  oakRealsenseDocs,
+  parseNewLines,
+  privacy,
+  raeStorepage,
+  replayInstructions,
+  robothub,
+  robothubInternal,
+  salesMail,
+  salesMailClean,
+  services,
+  servicesMeetLink,
+  showcase,
+  showcaseMail,
+  showcaseMailClean,
+  status,
+  store,
+  supportForm,
+  supportMail,
+  supportMailClean,
+  techcrunch,
+  termsOfService,
+  twitter,
+  useRudderStackAnalytics,
+  youtube
 };