@luxonis/component-lib 1.1.0 → 1.1.2

package/dist/index.mjs

@@ -578,8 +578,9 @@ 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",
+      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"
     },
     gap: {
@@ -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(
@@ -670,6 +671,9 @@ import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var Hero = (props) => {
   const { title, description, button, bgImageLink, desctipionSize = "default" } = props;
   const descriptionSize = () => {
+    if (!description) {
+      return "";
+    }
     if (desctipionSize === "lg") {
       return cx9("lg:max-w-[525px] max-w-96");
     }
@@ -688,7 +692,7 @@ var Hero = (props) => {
         /* @__PURE__ */ jsx11("div", { className: "page-card-content  relative  size-full h-[810px] w-full sm:h-[914px]", children: /* @__PURE__ */ jsxs6("div", { className: " absolute inset-x-0 bottom-10 mx-auto flex w-full flex-col items-center  justify-between gap-4 md:flex-row md:items-end ", children: [
           /* @__PURE__ */ jsx11("div", { className: "flex w-full flex-row justify-center text-white md:justify-start", children: /* @__PURE__ */ jsx11(Text, { text: title, size: "h1", className: "z-[2] w-96 text-h4 sm:text-h4 xl:w-auto xl:text-h1" }) }),
           /* @__PURE__ */ jsxs6("div", { className: cx9("flex flex-col gap-8 md:gap-6 z-[2]", descriptionSize()), children: [
-            /* @__PURE__ */ jsx11(Text, { text: description, color: "white", size: "lg" }),
+            description && /* @__PURE__ */ jsx11(Text, { text: description, color: "white", size: "lg" }),
             button
           ] })
         ] }) }),
@@ -1047,62 +1051,101 @@ var Textarea = React12.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/Video.tsx
-import { useRef as useRef3, forwardRef as forwardRef8, useImperativeHandle, useState as useState4 } from "react";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
+import { cx as cx18 } from "class-variance-authority";
+import { Icon as Icon6 } from "@iconify/react";
+import { useInView } from "react-intersection-observer";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
-var Video = forwardRef8(({ src, className }, ref) => {
+function Video(props) {
+  const {
+    src,
+    buttonPlay,
+    buttonRepeat,
+    className,
+    wrapperClassName,
+    autoPlayInView,
+    buttonFullscreen,
+    ...rest
+  } = props;
   const videoRef = useRef3(null);
-  const [isPlaying, setIsPlaying] = useState4(false);
-  useImperativeHandle(ref, () => ({
-    togglePlay: () => {
-      if (videoRef.current) {
-        if (videoRef.current.paused) {
-          videoRef.current.play();
-          setIsPlaying(true);
-        } else {
-          videoRef.current.pause();
-          setIsPlaying(false);
-        }
-      }
-    }
-  }));
+  const { ref, inView } = useInView({});
+  const [isPlaying, setIsPlaying] = useState4(true);
   const setPlaying = () => {
-    if (videoRef.current) {
-      if (videoRef.current.paused) {
-        videoRef.current.play();
-        setIsPlaying(true);
-      } else {
-        videoRef.current.pause();
-        setIsPlaying(false);
-      }
+    if (isPlaying) {
+      videoRef.current?.pause();
+      setIsPlaying(false);
+      return;
     }
+    setIsPlaying(true);
+    videoRef.current?.play();
   };
-  return /* @__PURE__ */ jsxs10("div", { className: `relative ${className}`, children: [
-    /* @__PURE__ */ jsx20("video", { onClick: setPlaying, ref: videoRef, className: "size-full object-cover", src, loop: true, children: "Your browser does not support the video tag." }),
-    !isPlaying && /* @__PURE__ */ jsx20(
-      Button,
+  useEffect2(() => {
+    if (autoPlayInView && inView) {
+      videoRef.current?.play();
+    }
+  }, [autoPlayInView, inView]);
+  const setStart = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.pause();
+    v.currentTime = 0;
+    void v.play();
+  };
+  const handle = useFullScreenHandle();
+  return /* @__PURE__ */ jsx20(FullScreen, { handle, className: `flex items-center justify-center `, children: /* @__PURE__ */ jsxs10("div", { className: cx18("relative size-full", handle.active ? "!max-h-none" : "", wrapperClassName), ref, children: [
+    /* @__PURE__ */ jsx20(
+      "video",
       {
-        variant: "icon",
-        icon: "mdi:play",
-        role: "icon",
+        ...rest,
         onClick: () => setPlaying(),
-        className: "absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white p-2 shadow-md"
+        ref: videoRef,
+        className: cx18("size-full object-cover", className, handle.active ? "!max-h-none" : ""),
+        src,
+        children: "Your browser does not support the video tag."
       }
-    )
-  ] });
-});
+    ),
+    /* @__PURE__ */ jsxs10("div", { className: "absolute  bottom-2 right-2 z-10 flex items-center justify-center gap-2", children: [
+      buttonRepeat && /* @__PURE__ */ jsx20(
+        "button",
+        {
+          className: " flex size-10 items-center justify-center rounded-full bg-black/50 text-white",
+          onClick: () => setStart(),
+          children: /* @__PURE__ */ jsx20(Icon6, { icon: "fa:repeat", className: "" })
+        }
+      ),
+      buttonPlay && /* @__PURE__ */ jsx20(
+        "button",
+        {
+          className: " flex size-10 items-center justify-center rounded-full bg-black/50 p-1.5 text-white",
+          onClick: () => setPlaying(),
+          children: /* @__PURE__ */ jsx20(Icon6, { icon: isPlaying ? "mdi:pause" : "mdi:play", className: "" })
+        }
+      ),
+      buttonFullscreen && /* @__PURE__ */ jsx20(
+        "button",
+        {
+          className: " flex size-10 items-center justify-center rounded-full bg-black/50 p-1.5 text-white",
+          onClick: () => handle.active ? handle.exit() : handle.enter(),
+          children: /* @__PURE__ */ jsx20(Icon6, { icon: handle.active ? "mdi:fullscreen-exit" : "mdi:fullscreen", className: "" })
+        }
+      )
+    ] })
+  ] }) });
+}
 Video.displayName = "Video";
 
 // src/Checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { cx as cx18 } from "class-variance-authority";
-import { Icon as Icon6 } from "@iconify/react";
+import { cx as cx19 } from "class-variance-authority";
+import { Icon as Icon7 } from "@iconify/react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 function Checkbox({ className, ...props }) {
   return /* @__PURE__ */ jsx21(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
-      className: cx18(
+      className: cx19(
         "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
@@ -1112,7 +1155,7 @@ function Checkbox({ className, ...props }) {
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ jsx21(Icon6, { className: "size-3.5 text-white", icon: "lucide:check" })
+          children: /* @__PURE__ */ jsx21(Icon7, { className: "size-3.5 text-white", icon: "lucide:check" })
         }
       )
     }
@@ -1120,25 +1163,25 @@ function Checkbox({ className, ...props }) {
 }
 
 // src/DualRangeSlider.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { cx as cx19 } from "class-variance-authority";
+import { cx as cx20 } from "class-variance-authority";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
-var DualRangeSlider = React14.forwardRef(
+var DualRangeSlider = React13.forwardRef(
   ({ className, label, labelPosition = "top", ...props }, ref) => {
     const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max];
     return /* @__PURE__ */ jsxs11(
       SliderPrimitive.Root,
       {
         ref,
-        className: cx19("relative flex w-full touch-none select-none items-center", className),
+        className: cx20("relative flex w-full touch-none select-none items-center", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx22(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx22(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-          initialValue.map((value, index) => /* @__PURE__ */ jsx22(React14.Fragment, { children: /* @__PURE__ */ jsx22(SliderPrimitive.Thumb, { className: "ring-offset-background focus-visible:ring-ring relative block size-4 rounded-full border-2 border-primary bg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: label && /* @__PURE__ */ jsx22(
+          initialValue.map((value, index) => /* @__PURE__ */ jsx22(React13.Fragment, { children: /* @__PURE__ */ jsx22(SliderPrimitive.Thumb, { className: "ring-offset-background focus-visible:ring-ring relative block size-4 rounded-full border-2 border-primary bg-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: label && /* @__PURE__ */ jsx22(
             "span",
             {
-              className: cx19(
+              className: cx20(
                 "absolute flex w-full justify-center",
                 labelPosition === "top" && "-top-7",
                 labelPosition === "bottom" && "top-4"
@@ -1154,13 +1197,13 @@ var DualRangeSlider = React14.forwardRef(
 DualRangeSlider.displayName = "DualRangeSlider";
 
 // src/LuxonisChat.tsx
-import { useCallback, useEffect as useEffect2, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback, useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
 import markdownit from "markdown-it";
-import { Icon as Icon7 } from "@iconify/react";
+import { Icon as Icon8 } from "@iconify/react";
 
 // src/Tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cx as cx20 } from "class-variance-authority";
+import { cx as cx21 } from "class-variance-authority";
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 function TooltipProvider({ delayDuration = 0, ...props }) {
   return /* @__PURE__ */ jsx23(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
@@ -1182,7 +1225,7 @@ function TooltipContent({
     {
       "data-slot": "tooltip-content",
       sideOffset,
-      className: cx20(
+      className: cx21(
         "bg-white text-black   shadow-md shadow-secondaryBorder animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
         className
       ),
@@ -1310,13 +1353,13 @@ function ChatButton(props) {
     },
     [userInput, onSubmit]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if (messageListRef.current) {
       const messageList = messageListRef.current;
       messageList.scrollTop = messageList.scrollHeight;
     }
   }, [messages]);
-  useEffect2(() => {
+  useEffect3(() => {
     async function fetchSearchQuery() {
       setUserInput(`Can you tell me about ${messageFromSearch}`);
       await onSubmit(void 0);
@@ -1357,7 +1400,7 @@ function ChatButton(props) {
                       animationTimingFunction: "ease-in"
                     },
                     className: "flex size-full items-center justify-center",
-                    children: chatOpened ? /* @__PURE__ */ jsx24(Icon7, { icon: "mdi:close", className: "size-[32px] text-white" }) : /* @__PURE__ */ jsx24("img", { src: "https://docs.luxonis.com/static/images/icons/chat-icon.svg", width: "32", height: "32", alt: "Chat" })
+                    children: chatOpened ? /* @__PURE__ */ jsx24(Icon8, { icon: "mdi:close", className: "size-[32px] text-white" }) : /* @__PURE__ */ jsx24("img", { src: "https://docs.luxonis.com/static/images/icons/chat-icon.svg", width: "32", height: "32", alt: "Chat" })
                   },
                   iconKey
                 )
@@ -1367,7 +1410,7 @@ function ChatButton(props) {
               /* @__PURE__ */ jsxs13("div", { className: "flex h-8 flex-row  justify-between gap-2", children: [
                 /* @__PURE__ */ jsxs13("h2", { className: "relative text-2xl", children: [
                   /* @__PURE__ */ jsx24("a", { target: "_blank", rel: "noopener noreferrer", href: "https://chat.luxonis.com", children: "Chat with Luxonis AI" }),
-                  /* @__PURE__ */ jsx24(Icon7, { icon: "mingcute:ai-fill", className: "absolute -right-4 -top-2 size-5 text-primary" })
+                  /* @__PURE__ */ jsx24(Icon8, { icon: "mingcute:ai-fill", className: "absolute -right-4 -top-2 size-5 text-primary" })
                 ] }),
                 /* @__PURE__ */ jsxs13("div", { className: "flex  flex-row items-center justify-end ", children: [
                   /* @__PURE__ */ jsxs13(Tooltip, { children: [
@@ -1389,7 +1432,7 @@ function ChatButton(props) {
                           setSlackThreadTs(null);
                         },
                         children: /* @__PURE__ */ jsx24(
-                          Icon7,
+                          Icon8,
                           {
                             icon: "fluent:chat-add-16-regular",
                             className: loading ? "text-black/40" : "text-primary",
@@ -1408,7 +1451,7 @@ function ChatButton(props) {
                         setChatOpened(false);
                         setMessageFromSearch("");
                       },
-                      children: /* @__PURE__ */ jsx24(Icon7, { icon: "mdi:close", className: "text-black", width: 32, height: 32 })
+                      children: /* @__PURE__ */ jsx24(Icon8, { icon: "mdi:close", className: "text-black", width: 32, height: 32 })
                     }
                   )
                 ] })
@@ -1464,7 +1507,7 @@ function ChatButton(props) {
                         name: "sendButton",
                         variant: "primary",
                         className: "!size-10  !p-2 " + (loading || inputRef.current?.value.length === 0 ? "bg-gray-100 transition-colors cursor-not-allowed" : "bg-primary cursor-pointer"),
-                        children: /* @__PURE__ */ jsx24(Icon7, { icon: "mdi:send", className: "!text-white" })
+                        children: /* @__PURE__ */ jsx24(Icon8, { icon: "mdi:send", className: "!text-white" })
                       }
                     ) })
                   ]
@@ -1483,7 +1526,7 @@ var ChatMessage = (props) => {
     {
       className: `flex h-fit w-full gap-2 ${props.user === "bot" ? props.loading ? "bg-gray-100 transition-colors" : "bg-gray-100" : "bg-white"}`,
       children: [
-        /* @__PURE__ */ jsx24("div", { className: "flex min-h-10 min-w-10 items-start overflow-x-auto pl-2 pt-1.5 ", children: /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center pb-1.5", children: props.user === "user" ? /* @__PURE__ */ jsx24(Icon7, { icon: "mdi:account", className: "h-[38px] w-[32px]" }) : props.loading ? /* @__PURE__ */ jsx24("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) : /* @__PURE__ */ jsx24("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) }) }),
+        /* @__PURE__ */ jsx24("div", { className: "flex min-h-10 min-w-10 items-start overflow-x-auto pl-2 pt-1.5 ", children: /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center pb-1.5", children: props.user === "user" ? /* @__PURE__ */ jsx24(Icon8, { icon: "mdi:account", className: "h-[38px] w-[32px]" }) : props.loading ? /* @__PURE__ */ jsx24("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) : /* @__PURE__ */ jsx24("img", { src: "https://static.luxonis.com/images/chatbot.webp", width: "32", height: "32", alt: "Chatbot Icon" }) }) }),
         /* @__PURE__ */ jsx24(
           "div",
           {
@@ -1505,14 +1548,14 @@ var ChatMessage = (props) => {
 // src/Tabs.tsx
 import * as React15 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cx as cx21 } from "class-variance-authority";
+import { cx as cx22 } from "class-variance-authority";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
 var TabsList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   TabsPrimitive.List,
   {
     ref,
-    className: cx21(
+    className: cx22(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
       className
     ),
@@ -1524,7 +1567,7 @@ var TabsTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   TabsPrimitive.Trigger,
   {
     ref,
-    className: cx21(
+    className: cx22(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     ),
@@ -1536,7 +1579,7 @@ var TabsContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   TabsPrimitive.Content,
   {
     ref,
-    className: cx21(
+    className: cx22(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     ),
@@ -1548,13 +1591,13 @@ 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 { cx as cx23 } 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),
+    className: cx23("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
     ...props,
     children: /* @__PURE__ */ jsx26(
       ProgressPrimitive.Indicator,
@@ -1568,8 +1611,8 @@ var Progress = React16.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/EdgeSlideshow.tsx
-import { useEffect as useEffect3, useState as useState6 } from "react";
-import { useInView } from "react-intersection-observer";
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useInView as useInView2 } from "react-intersection-observer";
 import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var slides = [
   "ai-performance",
@@ -1757,7 +1800,7 @@ function EdgeSlideshowHeader() {
 function EdgeSlideshowNav(props) {
   const { activeSlide, setActiveSlide, autoscrolling, inView } = props;
   const [progress, setProgress] = useState6(0);
-  useEffect3(() => {
+  useEffect4(() => {
     let intervalId;
     const startTime = Date.now();
     if (autoscrolling && inView) {
@@ -1827,8 +1870,8 @@ function EdgeSlideshowText(props) {
 function EdgeSlideshow() {
   const [activeSlide, setActiveSlide] = useState6("ai-performance");
   const [autoscrolling, setAutoscrolling] = useState6(true);
-  const { ref, inView } = useInView({});
-  useEffect3(() => {
+  const { ref, inView } = useInView2({});
+  useEffect4(() => {
     let intervalId;
     if (inView) {
       intervalId = window.setInterval(() => {
@@ -1867,7 +1910,7 @@ function EdgeSlideshow() {
 }
 
 // src/StereoDepthCalibration.tsx
-import { Icon as Icon8 } from "@iconify/react";
+import { Icon as Icon9 } from "@iconify/react";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var cards = [
   {
@@ -1897,7 +1940,7 @@ function StereoDepthCalibrationWrapper() {
       "img",
       {
         alt: "Stereo Depth Calibration Background Overlay",
-        src: "/assets/stereo-depth/stereo-depth-calibration-bg.webp",
+        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"
       }
     ),
@@ -1934,7 +1977,7 @@ function StereoDepthCalibrationFooter() {
 }
 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(Icon9, { 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" })
   ] });
@@ -1953,7 +1996,7 @@ function StereoDepthCalibration() {
 }
 
 // src/Support.tsx
-import { cx as cx23 } from "class-variance-authority";
+import { cx as cx24 } from "class-variance-authority";
 
 // src/links.ts
 var github = "https://github.com/luxonis/";
@@ -1983,6 +2026,7 @@ var applyMailClean = "careers@luxonis.com";
 var showcaseMail = "mailto:support@luxonis.com";
 var showcaseMailClean = "support@luxonis.com";
 var blog = "https://discuss.luxonis.com/blog";
+var stereoTuningAssistance = "/stereo-tuning-assistance";
 var privacy = "/privacy";
 var termsOfService = "/terms-of-service";
 var aboutUs = "/about-us";
@@ -2011,15 +2055,45 @@ 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/Support.tsx
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+var Support = (props) => {
+  const { variant = "fullpage", text } = props;
+  return /* @__PURE__ */ jsx30("div", { className: "page-card page-padding", children: /* @__PURE__ */ jsx30(
+    Card,
+    {
+      variant,
+      outerStyles: "h-full",
+      className: cx24(
+        "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   xl:p-8  xl:flex-row py-8 px-4"
+      ),
+      children: /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col items-center gap-8  text-white xl:w-fit xl:items-start xl:gap-10 xl:px-0", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex w-full flex-col items-center gap-4 text-white xl:items-start xl:gap-6", children: [
+          /* @__PURE__ */ jsx30(Text, { size: "h2", text: text ?? "Need More Help?", className: "text-center xl:text-left" }),
+          /* @__PURE__ */ jsx30(
+            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  text-center xl:text-left"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs16("div", { className: "flex w-fit flex-col items-center gap-4 md:flex-row", children: [
+          /* @__PURE__ */ jsx30(TalkToSalesButton, {}),
+          /* @__PURE__ */ jsx30("a", { href: "https://chat.luxonis.com", target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx30(Button, { size: "lg", variant: "secondary", role: "continue", children: "Get Instant Support" }) }),
+          /* @__PURE__ */ jsx30("a", { href: supportMail, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx30(Button, { size: "lg", variant: "secondary", role: "continue", children: "Support via Email" }) })
+        ] })
+      ] })
+    }
+  ) });
+};
 
 // src/useRudderAnalytics.ts
-import { useEffect as useEffect4, useState as useState7 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 var useRudderStackAnalytics = () => {
   const [analytics, setAnalytics] = useState7();
-  useEffect4(() => {
+  useEffect5(() => {
     if (!analytics) {
       const initialize = async () => {
         const { RudderAnalytics } = await import("@rudderstack/analytics-js");
@@ -2046,7 +2120,9 @@ var useRudderStackAnalytics = () => {
 };
 
 // src/ContactUsForm.tsx
-import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { z } from "zod";
+import React17 from "react";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var formSchema = z.object({
   name: z.string().min(1),
   company: z.string().min(1),
@@ -2114,7 +2190,7 @@ function ContactUsForm() {
     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(
+    return /* @__PURE__ */ jsx31("div", { className: "m-auto flex size-full  h-[456px]  flex-col items-center justify-center px-4", children: /* @__PURE__ */ jsx31(
       Text,
       {
         size: "h4",
@@ -2124,107 +2200,80 @@ function ContactUsForm() {
       }
     ) });
   }
-  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" })
+  return /* @__PURE__ */ jsxs17("form", { id: "contact-form-anchor", className: "flex w-full flex-col gap-6  text-white", onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-6 lg:flex-row", children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsx31(Label, { className: "font-normal", htmlFor: "name", children: "Name *" }),
+        /* @__PURE__ */ jsx31(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__ */ jsxs17("div", { className: "flex w-full flex-col gap-2", children: [
+        /* @__PURE__ */ jsx31(Label, { className: "font-normal", htmlFor: "Company", children: "Company *" }),
+        /* @__PURE__ */ jsx31(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__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx31(Label, { className: "font-normal", htmlFor: "email", children: "E-mail *" }),
+      /* @__PURE__ */ jsx31(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__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx31(Label, { className: "font-normal", htmlFor: "inquiry", children: "Type of Inquiry *" }),
+      /* @__PURE__ */ jsxs17(Select, { children: [
+        /* @__PURE__ */ jsx31(SelectTrigger, { className: "h-[48px] bg-white text-black ", children: /* @__PURE__ */ jsx31(SelectValue, { id: "inquiry", placeholder: "Select..." }) }),
+        /* @__PURE__ */ jsxs17(SelectContent, { className: "bg-white", children: [
+          /* @__PURE__ */ jsx31(SelectItem, { value: "Hub assistance", children: "Hub assistance" }),
+          /* @__PURE__ */ jsx31(SelectItem, { value: "hardware-issue", children: "Hardware issue" }),
+          /* @__PURE__ */ jsx31(SelectItem, { value: "support", children: "Support" }),
+          /* @__PURE__ */ jsx31(SelectItem, { value: "training", children: "Training" }),
+          /* @__PURE__ */ jsx31(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__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx31(Label, { className: "font-normal", htmlFor: "message", children: "Message *" }),
+      /* @__PURE__ */ jsx31(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" })
+    /* @__PURE__ */ jsxs17("div", { className: "flex flex-row items-center justify-start gap-8", children: [
+      /* @__PURE__ */ jsx31(Button, { type: "submit", variant: "secondary", size: "lg", role: "continue", className: "w-fit", children: formIsLoading ? "Submitting..." : "Submit" }),
+      formHasError && /* @__PURE__ */ jsx31(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" } = 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: "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",
+    title = "Let\u2019s Build  the Future of  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, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsx32("section", { id: "contact-us", className: "page-card page-padding", children: /* @__PURE__ */ jsx32("section", { className: "page-card-content flex flex-col gap-8 rounded-lg px-4 py-8 [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  xl:p-8", children: /* @__PURE__ */ jsx32(
+    Description,
+    {
+      title,
+      align: "left",
+      textStyle: "max-w-none w-fit lg:max-w-none  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  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("a", { href: supportMail, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx32(Button, { size: "lg", variant: "secondary", role: "continue", children: "Support via Email" }) })
+      ] })
+    }
+  ) }) });
 };
+
+// src/useChat.tsx
+import React18 from "react";
+var useChatContext = React18.createContext(null);
+function useChat() {
+  const context = React18.useContext(useChatContext);
+  if (!context) {
+    throw new Error("useChat must be used within a <ChatProvider />");
+  }
+  return context;
+}
 export {
   Accordion,
   AccordionContent,
@@ -2330,6 +2379,7 @@ export {
   showcaseMail,
   showcaseMailClean,
   status,
+  stereoTuningAssistance,
   store,
   supportForm,
   supportMail,
@@ -2337,6 +2387,8 @@ export {
   techcrunch,
   termsOfService,
   twitter,
+  useChat,
+  useChatContext,
   useRudderStackAnalytics,
   youtube
 };