@luxonis/component-lib 1.0.0

package/dist/index.js

@@ -0,0 +1,1227 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  Carousel: () => Carousel,
+  CarouselContent: () => CarouselContent,
+  CarouselItem: () => CarouselItem,
+  CarouselNext: () => CarouselNext,
+  CarouselPrevious: () => CarouselPrevious,
+  CodeBlock: () => CodeBlock,
+  Copyright: () => Copyright,
+  Description: () => Description,
+  FrostedCard: () => FrostedCard,
+  Hero: () => Hero,
+  HoverCard: () => HoverCard,
+  HoverCardContent: () => HoverCardContent,
+  HoverCardTrigger: () => HoverCardTrigger,
+  Input: () => Input,
+  Label: () => Label,
+  SearchBar: () => SearchBar,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectScrollDownButton: () => SelectScrollDownButton,
+  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectSeparator: () => SelectSeparator,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  Switch: () => Switch,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  Text: () => Text,
+  Textarea: () => Textarea,
+  Video: () => Video,
+  badgeVariants: () => badgeVariants,
+  buttonVariants: () => buttonVariants,
+  parseNewLines: () => parseNewLines
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Accordion.tsx
+var React = __toESM(require("react"));
+var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("@iconify/react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Accordion = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionPrimitive.Root, { slot: "root", className: (0, import_class_variance_authority.cx)(className), ...props, ref }));
+Accordion.displayName = "Accordion";
+var AccordionItem = React.forwardRef(
+  ({ className, noStyle, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      className: (0, import_class_variance_authority.cx)(
+        !noStyle && "border px-4 rounded-md border-solid bg-white/10 border-white border-opacity-25",
+        className
+      ),
+      ...props
+    }
+  )
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React.forwardRef(
+  ({ className, children, icon = "mdi:plus", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: (0, import_class_variance_authority.cx)(
+        "flex flex-1 items-center justify-between py-4  text-xxs md:text-xs font-medium transition-all [&[data-state=open]]:border-b border-mutedborder border-opacity-15 [&[data-state=open]>svg]:rotate-45",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Icon, { icon, width: "24", height: "24" })
+      ]
+    }
+  ) })
+);
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React.forwardRef(
+  ({ className, children, contentClassName, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: (0, import_class_variance_authority.cx)(
+        "overflow-hidden  text-sm p-4 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+        contentClassName
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_class_variance_authority.cx)("pb-4 pt-0", className), children })
+    }
+  )
+);
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/Badge.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority2.cva)(
+  "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "text-primary-foreground border-transparent bg-primary hover:bg-primary/80",
+        secondary: "text-secondary-foreground border-transparent bg-secondary hover:bg-secondary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_class_variance_authority2.cx)(badgeVariants({ variant }), className), ...props });
+}
+
+// src/Button.tsx
+var import_react2 = require("react");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react3 = require("@iconify/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority3.cva)(
+  `flex  items-center justify-center gap-1.5 text-nowrap rounded-full font-medium outline-none`,
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary stroke-white text-white hover:bg-gradient-to-l hover:from-white/8 hover:to-white/8 disabled:bg-[#D0D0D0]",
+        primaryAlt: "bg-gray-100 stroke-white text-primary hover:bg-gradient-to-l hover:from-white/8 hover:to-white/8",
+        icon: "border border-primaryBorder bg-white fill-black stroke-black text-black hover:bg-secondary hover:stroke-primary hover:text-primary",
+        secondary: "bg-white fill-current stroke-black text-black hover:bg-secondary hover:stroke-primary hover:text-primary",
+        steps: "group flex-col gap-3 bg-transparent text-semimuted text-opacity-40 hover:text-opacity-60 aria-selected:text-black aria-selected:opacity-100 [&>div>div>svg]:hover:border-transparent [&>div>div]:hover:bg-primary [&>div>div]:hover:text-white sm:[&>div>div]:hover:opacity-45 ",
+        unstyled: ""
+      },
+      size: {
+        sm: "h-9 px-3.5 py-2.5",
+        xs: "px-3.5 py-2.5 text-sm",
+        lg: "h-[46px] px-7 py-3.5",
+        icon: "size-14 p-3.5",
+        unset: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "lg"
+    }
+  }
+);
+var Button = (props) => {
+  const {
+    className,
+    variant,
+    size,
+    children,
+    icon,
+    role = "button",
+    onClick,
+    animate = role === "icon" || role === "steps" || variant === "unstyled" ? false : true,
+    ...rest
+  } = props;
+  const [circles, setCircles] = (0, import_react2.useState)([]);
+  const iconSize = variant === "steps" ? 24 : 20;
+  const handleClickAnimation = (event) => {
+    const { clientX: x, clientY: y } = event;
+    const buttonRect = event.currentTarget.getBoundingClientRect();
+    const buttonX = buttonRect.left;
+    const buttonY = buttonRect.top;
+    setCircles((prev) => [...prev, { top: y - buttonY - 15, left: x - buttonX - 15, key: Math.random() }]);
+  };
+  const handleAnimationEnd = (key) => {
+    setCircles((prev) => prev.filter((c) => c.key !== key));
+  };
+  const overWriteVariants = {
+    variant: role === "icon" ? "icon" : variant,
+    size: role === "icon" ? "icon" : size
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      onClick: (e) => {
+        if (onClick) {
+          onClick(e);
+        }
+        if (animate) {
+          handleClickAnimation(e);
+        }
+      },
+      className: (0, import_class_variance_authority3.cx)(buttonVariants({ ...overWriteVariants }), animate && "relative", className),
+      ...rest,
+      children: [
+        icon && (variant === "steps" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "z-[1] bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react3.Icon,
+          {
+            icon,
+            width: iconSize,
+            height: iconSize,
+            className: (0, import_class_variance_authority3.cx)(
+              "flex w-10 h-10  justify-center items-center gap-2.5 border px-2.5 py-1 rounded-full border-solid border-muted",
+              props["aria-selected"] ? "bg-primary border-none text-white" : ""
+            )
+          }
+        ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Icon, { icon, width: iconSize, height: iconSize })),
+        children,
+        circles.map((circle) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: (0, import_class_variance_authority3.cx)(
+              "pointer-events-none absolute animate-circle rounded-full bg-primary opacity-90",
+              size === "sm" ? "size-4" : "size-6"
+            ),
+            style: {
+              top: `${circle.top}px`,
+              left: `${circle.left}px`
+            },
+            onAnimationEnd: () => handleAnimationEnd(circle.key)
+          },
+          circle.key
+        )),
+        role === "continue" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex h-full w-fit items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Icon, { icon: "ri:arrow-drop-right-line", width: 16, height: 16 }) })
+      ]
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/Card.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var cardVariants = (0, import_class_variance_authority4.cva)(``, {
+  variants: {
+    variant: {
+      fullpage: "w-full page-padding ",
+      fullwidth: "w-full",
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Card = (props) => {
+  const { className, variant, children, outerStyles, ...rest } = props;
+  const cardStyles = (0, import_class_variance_authority4.cx)("rounded-xl", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_class_variance_authority4.cx)(cardVariants({ variant }), outerStyles), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cardStyles, children }) });
+};
+
+// src/Carousel.tsx
+var import_react4 = __toESM(require("react"));
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CarouselContext = import_react4.default.createContext(null);
+function useCarousel() {
+  const context = import_react4.default.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+var Carousel = import_react4.default.forwardRef(
+  ({
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    scrollable,
+    className,
+    children,
+    moveOnClick = false,
+    ...props
+  }, ref) => {
+    const [carouselRef, api] = (0, import_embla_carousel_react.default)(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y"
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = (0, import_react4.useState)(false);
+    const [canScrollNext, setCanScrollNext] = (0, import_react4.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, import_react4.useState)(0);
+    const carouselContainerRef = (0, import_react4.useRef)(null);
+    const onSelect = import_react4.default.useCallback((api2) => {
+      if (!api2) {
+        return;
+      }
+      setCanScrollPrev(api2.canScrollPrev());
+      setCanScrollNext(api2.canScrollNext());
+      setSelectedIndex(api2?.selectedScrollSnap());
+    }, []);
+    const scrollPrev = import_react4.default.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+    const scrollNext = import_react4.default.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = import_react4.default.useCallback(
+      (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+    const handleWheel = import_react4.default.useCallback(
+      (event) => {
+        if (!api) return;
+        const deltaY = event.deltaY;
+        if (deltaY < 0) {
+          if (api.canScrollPrev()) {
+            event.preventDefault();
+            api.scrollPrev();
+          }
+        } else if (deltaY > 0) {
+          if (api.canScrollNext()) {
+            event.preventDefault();
+            api.scrollNext();
+          }
+        }
+      },
+      [api]
+    );
+    (0, import_react4.useEffect)(() => {
+      if (!api || !setApi) {
+        return;
+      }
+      setApi(api);
+    }, [api, setApi]);
+    (0, import_react4.useEffect)(() => {
+      if (!api) {
+        return;
+      }
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+    (0, import_react4.useEffect)(() => {
+      const carouselNode = carouselContainerRef.current;
+      if (!carouselNode) return;
+      if (!scrollable) return;
+      carouselNode.addEventListener("wheel", handleWheel, { passive: false });
+      return () => {
+        carouselNode.removeEventListener("wheel", handleWheel);
+      };
+    }, [carouselRef, handleWheel, scrollable]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      CarouselContext.Provider,
+      {
+        value: {
+          carouselRef,
+          api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+          selectedIndex,
+          moveOnClick
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            onKeyDownCapture: handleKeyDown,
+            ref: (node) => {
+              if (node) carouselContainerRef.current = node;
+              if (ref) {
+                if (typeof ref === "function") ref(node);
+                else ref.current = node;
+              }
+            },
+            className: (0, import_class_variance_authority5.cx)("relative", className),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = import_react4.default.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: carouselRef, className: `'overflow-hidden ${props.wrapperClassName ?? ""}'`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_class_variance_authority5.cx)("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+        ...props
+      }
+    ) });
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = import_react4.default.forwardRef((props, ref) => {
+  const { className, inActieStyles, activeStyles, index = 0, children, leftStyles, rightStyles, ...rest } = props;
+  const { selectedIndex, api, moveOnClick } = useCarousel();
+  const isActive = (api && selectedIndex % api?.scrollSnapList().length === index) ?? false;
+  const isLeftFromActive = (api && selectedIndex % api?.scrollSnapList().length === index - 1) ?? false;
+  const isRightFromActive = (api && selectedIndex % api?.scrollSnapList().length === index + 1) ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: (0, import_class_variance_authority5.cx)(
+        className,
+        isActive && activeStyles,
+        isLeftFromActive && leftStyles,
+        isRightFromActive && rightStyles
+      ),
+      onClick: () => {
+        if (props.onClick) {
+          props.onClick;
+        }
+        if (moveOnClick) {
+          api?.scrollTo(index);
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = (props) => {
+  const { className, role, hideButtons = true, ...rest } = props;
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Button,
+    {
+      role: "icon",
+      size: "sm",
+      icon: "ri:arrow-drop-left-line",
+      className: (0, import_class_variance_authority5.cx)(
+        "absolute rounded-full left-12",
+        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2 -translate-x-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      style: { display: hideButtons ? canScrollPrev ? "" : "none" : "" },
+      onClick: scrollPrev,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Previous slide" })
+    }
+  );
+};
+var CarouselNext = (props) => {
+  const { className, role, hideButtons = true, ...rest } = props;
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Button,
+    {
+      role: "icon",
+      size: "sm",
+      icon: "ri:arrow-drop-right-line",
+      className: (0, import_class_variance_authority5.cx)(
+        "absolute rounded-full right-12",
+        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2 translate-x-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      style: { display: hideButtons ? canScrollNext ? "" : "none" : "" },
+      onClick: scrollNext,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sr-only", children: "Next slide" })
+    }
+  );
+};
+
+// src/CodeBlock.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CodeBlock(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { className: "bg-gray-300 rounded p-1 inline text-black whitespace-pre-wrap", children: props.children });
+}
+
+// src/Text.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var styledText = (0, import_class_variance_authority6.cva)("block", {
+  variants: {
+    breakType: {
+      character: "break-all",
+      word: "break-words",
+      space: "whitespace-break-spaces",
+      none: "whitespace-nowrap"
+    },
+    size: {
+      "h1": "text-h1-mobile font-medium uppercase leading-110 sm:text-h1",
+      "h2": "text-h2-mobile font-medium uppercase leading-110 sm:text-h2",
+      "h3": "text-h3-mobile font-medium uppercase leading-110 sm:text-h3",
+      "h4": "text-h4-mobile font-medium  leading-110 sm:text-h4",
+      "h5": "text-h5-mobile font-medium  leading-110 sm:text-h5",
+      "2xl": "text-2xl-mobile leading-164 sm:text-2xl",
+      "xl": "text-xl-mobile leading-164 sm:text-xl",
+      "lg": "text-large-mobile leading-164 sm:text-large",
+      "md": "text-medium-mobile leading-164 sm:text-medium",
+      "sm": "text-sm-mobile leading-normal sm:text-sm",
+      "caption": "text-captions-mobile leading-164 sm:text-captions"
+    },
+    color: {
+      primary: "text-primary",
+      normal: "text-black",
+      default: "",
+      white: "text-white",
+      muted: "text-muted",
+      error: "text-red-500",
+      semimuted: "text-semimuted"
+    },
+    weight: {
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      normal: ""
+    },
+    fontStyle: {
+      italic: "italic",
+      uppercase: "uppercase",
+      capitalize: "capitalize",
+      normal: ""
+    },
+    spaces: {
+      trim: "overflow-hidden text-ellipsis",
+      preserve: "whitespace-pre-wrap",
+      normal: ""
+    },
+    align: {
+      center: "text-center",
+      left: "text-left",
+      right: "text-right",
+      normal: ""
+    }
+  },
+  defaultVariants: {
+    breakType: "word",
+    align: "normal",
+    spaces: "normal",
+    fontStyle: "normal",
+    weight: "normal",
+    color: "default"
+  }
+});
+var Text = import_react5.default.forwardRef((props, ref) => {
+  const { className, size, weight, fontStyle, spaces, align, breakType, text, color, ...rest } = props;
+  const styles = (0, import_class_variance_authority6.cx)(
+    styledText({
+      size,
+      weight,
+      fontStyle,
+      spaces,
+      align,
+      breakType,
+      color
+    }),
+    className
+  );
+  const textNode = parseNewLines(text);
+  switch (size) {
+    case "h1":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { className: styles, ref, ...rest, children: textNode });
+    case "h2":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: styles, ref, ...rest, children: textNode });
+    case "h3":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: styles, ref, ...rest, children: textNode });
+    case "h4":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h4", { className: styles, ref, ...rest, children: textNode });
+    case "h5":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h5", { className: styles, ref, ...rest, children: textNode });
+    case "lg":
+    case "md":
+    case "caption":
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: styles, ref, ...rest, children: textNode });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: styles, ref, ...rest, children: textNode });
+  }
+});
+var parseNewLines = (text) => {
+  if (typeof text === "string") {
+    return text.split(/\\n|\n/gm).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react5.default.Fragment, { children: [
+      item,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {})
+    ] }, index));
+  }
+  return text;
+};
+Text.displayName = "Text";
+
+// src/Copyright.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Copyright = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "page-card-content flex flex-col justify-between gap-8 sm:flex-row sm:gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { text: `All Rights Reserved \xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} Luxonis`, size: "caption", color: "muted" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-row gap-10  text-sm text-muted", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { className: "text-muted underline", href: "/privacy", children: "Privacy Policy" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { className: "text-muted underline", href: "/terms-of-service", children: "Terms of Service" })
+    ] })
+  ] });
+};
+
+// src/Description.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DescriptionRecepie = (0, import_class_variance_authority7.cva)("flex flex-col ", {
+  variants: {
+    align: {
+      center: "items-start sm:items-center",
+      allwayscenter: "items-center",
+      left: "items-start",
+      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"
+    },
+    gap: {
+      lg: "gap-10",
+      normal: "gap-8",
+      none: "gap-0"
+    }
+  },
+  defaultVariants: {
+    gap: "lg",
+    align: "center"
+  }
+});
+var InnerGap = (0, import_class_variance_authority7.cva)("", {
+  variants: {
+    innerGap: {
+      lg: "gap-6",
+      normal: "gap-4"
+    }
+  },
+  defaultVariants: {
+    innerGap: "normal"
+  }
+});
+var Description = (props) => {
+  const {
+    description,
+    title,
+    subTitle,
+    className,
+    children,
+    align,
+    gap,
+    innerGap,
+    textStyle,
+    headingStyle,
+    descriptionStyle,
+    wrapperClassName
+  } = props;
+  const alingText = align === "left" || align === "desktopLeftMobileCenter" ? "left" : "center";
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_class_variance_authority7.cx)(DescriptionRecepie({ align, gap }), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_class_variance_authority7.cx)(`flex flex-col gap-4 sm:gap-6 w-full`, wrapperClassName ?? "", InnerGap({ innerGap })), children: [
+      subTitle && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Text,
+        {
+          size: "md",
+          text: subTitle,
+          color: "muted",
+          fontStyle: "uppercase",
+          align: alingText,
+          className: (0, import_class_variance_authority7.cx)(DescriptionRecepie({ align }), textStyle)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Text,
+        {
+          size: "h2",
+          text: title,
+          align: alingText,
+          className: (0, import_class_variance_authority7.cx)(DescriptionRecepie({ align }), textStyle, headingStyle)
+        }
+      ),
+      alingText === "center" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex w-full flex-row justify-center", children: description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        Text,
+        {
+          size: "lg",
+          text: description,
+          className: (0, import_class_variance_authority7.cx)(DescriptionRecepie({ align }), "max-w-105", textStyle, descriptionStyle),
+          align: alingText
+        }
+      ) }) : description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { size: "lg", text: description, className: (0, import_class_variance_authority7.cx)("max-w-105", textStyle), align: alingText })
+    ] }),
+    children
+  ] });
+};
+
+// src/FrostedCard.tsx
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function FrostedCard(props) {
+  const { children, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_class_variance_authority8.cx)(`rounded-lg border border-white/30 bg-white/10 p-4 backdrop-blur-sm`, className), children });
+}
+
+// src/Hero.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Hero = (props) => {
+  const { title, description, button, bgImageLink, desctipionSize = "default" } = props;
+  const descriptionSize = () => {
+    if (desctipionSize === "lg") {
+      return (0, import_class_variance_authority9.cx)("lg:max-w-[525px] max-w-96");
+    }
+    return "lg:max-w-[350px] max-w-96";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "section",
+    {
+      style: {
+        backgroundImage: bgImageLink && `url(${bgImageLink})`,
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat"
+      },
+      className: "page-card page-padding relative overflow-hidden !rounded-none bg-black bg-cover  bg-center bg-no-repeat",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "page-card-content  relative  size-full h-[810px] w-full sm:h-[914px]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex w-full flex-row justify-center text-white md:justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { text: title, size: "h1", className: "z-[2] w-96 text-h4 sm:text-h4 xl:w-auto xl:text-h1" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_class_variance_authority9.cx)("flex flex-col gap-8 md:gap-6 z-[2]", descriptionSize()), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { text: description, color: "white", size: "lg" }),
+            button
+          ] })
+        ] }) }),
+        props.children
+      ]
+    }
+  );
+};
+
+// src/HoverCard.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+var React5 = __toESM(require("react"));
+var HoverCardPrimitive = __toESM(require("@radix-ui/react-hover-card"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = React5.forwardRef(
+  ({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    HoverCardPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      className: (0, import_class_variance_authority10.cx)(
+        "z-50 rounded-md   data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+        className
+      ),
+      ...props
+    }
+  )
+);
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+// src/Input.tsx
+var import_react6 = require("react");
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Input = ({
+  className,
+  label,
+  labelPosition = "left",
+  errorMessage = "Invalid input",
+  onBlur,
+  validate = true,
+  onChange,
+  type,
+  ...rest
+}) => {
+  const [isInvalid, setIsInvalid] = (0, import_react6.useState)(false);
+  const inputId = rest.id || "input-field";
+  const errorId = `${inputId}-error`;
+  const handleBlur = (e) => {
+    if (!validate) {
+      if (isInvalid) {
+        setIsInvalid(false);
+      }
+      return;
+    }
+    setIsInvalid(!e.target.validity.valid);
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const handleChange = (e) => {
+    if (e.target.validity.valid) {
+      setIsInvalid(false);
+    }
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: (0, import_class_variance_authority11.cx)(
+          className,
+          "flex items-center gap-2 rounded-md bg-white px-4 py-2",
+          labelPosition === "left" ? "flex-row" : "flex-row-reverse"
+        ),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { htmlFor: inputId, className: "text-base text-gray-700", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "input",
+            {
+              id: inputId,
+              className: (0, import_class_variance_authority11.cx)(
+                "peer w-full bg-transparent text-base font-normal leading-8 text-black outline-none placeholder:text-muted",
+                isInvalid && "border-red-500"
+              ),
+              "aria-invalid": isInvalid,
+              "aria-describedby": isInvalid ? errorId : void 0,
+              onBlur: handleBlur,
+              onChange: handleChange,
+              type,
+              ...rest
+            }
+          )
+        ]
+      }
+    ),
+    isInvalid && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { text: errorMessage, id: errorId, size: "caption", color: "error" })
+  ] });
+};
+
+// src/Label.tsx
+var React7 = __toESM(require("react"));
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var labelVariants = (0, import_class_variance_authority12.cva)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+var Label = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LabelPrimitive.Root, { ref, className: (0, import_class_variance_authority12.cx)(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/SearchBar.tsx
+var import_react7 = require("react");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react8 = require("@iconify/react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SearchBar = (props) => {
+  const { className, placeholder = "Search our store...", setIsSearchOpen, isSearchOpen, ...rest } = props;
+  const searchRef = (0, import_react7.useRef)(null);
+  if (!isSearchOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Button,
+      {
+        variant: "unstyled",
+        className: "!h-[46px] text-white ",
+        icon: "cuida:search-outline",
+        onClick: () => {
+          setIsSearchOpen(true);
+          searchRef.current?.focus();
+        }
+      }
+    );
+  }
+  const onBlur = () => {
+    setTimeout(() => setIsSearchOpen(false), 100);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: (0, import_class_variance_authority13.cx)(
+        "flex items-center w-full h-full justify-between rounded-full border border-solid bg-white px-4 font-medium text-primary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "text",
+            ref: searchRef,
+            onBlur,
+            placeholder: placeholder ?? "Search our store...",
+            className: "size-full h-[46px] bg-transparent py-2 text-sm  text-black outline-none placeholder:text-muted",
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "submit", className: "z-10", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react8.Icon, { icon: "ri:search-line", width: 24, height: 24 }) })
+      ]
+    }
+  );
+};
+
+// src/Select.tsx
+var React9 = __toESM(require("react"));
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_react9 = require("@iconify/react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React9.forwardRef(({ className, noStyle, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: (0, import_class_variance_authority14.cx)(
+      !noStyle && "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md  bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react9.Icon, { icon: "ri:arrow-down", className: "size-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: (0, import_class_variance_authority14.cx)("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react9.Icon, { icon: "ri:arrow-up-line", className: "size-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: (0, import_class_variance_authority14.cx)("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react9.Icon, { icon: "ri:arrow-down", className: "size-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: (0, import_class_variance_authority14.cx)(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectScrollUpButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        SelectPrimitive.Viewport,
+        {
+          className: (0, import_class_variance_authority14.cx)(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.Label, { ref, className: (0, import_class_variance_authority14.cx)("px-2 py-1.5 text-sm font-semibold", className), ...props }));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: (0, import_class_variance_authority14.cx)(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none  data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react9.Icon, { icon: "ri:check-line", className: "size-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectPrimitive.Separator, { ref, className: (0, import_class_variance_authority14.cx)("-mx-1 my-1 h-px bg-muted", className), ...props }));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/Switch.tsx
+var React10 = __toESM(require("react"));
+var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"));
+var import_class_variance_authority15 = require("class-variance-authority");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Switch = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  SwitchPrimitives.Root,
+  {
+    className: (0, import_class_variance_authority15.cx)(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      SwitchPrimitives.Thumb,
+      {
+        className: (0, import_class_variance_authority15.cx)(
+          "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/Table.tsx
+var React11 = __toESM(require("react"));
+var import_class_variance_authority16 = require("class-variance-authority");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Table = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("table", { ref, className: (0, import_class_variance_authority16.cx)("w-full caption-bottom text-sm", className), ...props }) })
+);
+Table.displayName = "Table";
+var TableHeader = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { ref, className: (0, import_class_variance_authority16.cx)("[&_tr]:border-b", className), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tbody", { ref, className: (0, import_class_variance_authority16.cx)("[&_tr:last-child]:border-0", className), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tfoot", { ref, className: (0, import_class_variance_authority16.cx)("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React11.forwardRef(({ className, noStyle, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  "tr",
+  {
+    ref,
+    className: (0, import_class_variance_authority16.cx)(!noStyle && "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "th",
+    {
+      ref,
+      className: (0, import_class_variance_authority16.cx)(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableHead.displayName = "TableHead";
+var TableCell = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", { ref, className: (0, import_class_variance_authority16.cx)("p-4 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("caption", { ref, className: (0, import_class_variance_authority16.cx)("mt-4 text-sm text-muted-foreground", className), ...props })
+);
+TableCaption.displayName = "TableCaption";
+
+// src/TextArea.tsx
+var React12 = __toESM(require("react"));
+var import_class_variance_authority17 = require("class-variance-authority");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Textarea = React12.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "textarea",
+      {
+        className: (0, import_class_variance_authority17.cx)(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+// src/Video.tsx
+var import_react10 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Video = (0, import_react10.forwardRef)(({ src, className }, ref) => {
+  const videoRef = (0, import_react10.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react10.useState)(false);
+  (0, import_react10.useImperativeHandle)(ref, () => ({
+    togglePlay: () => {
+      if (videoRef.current) {
+        if (videoRef.current.paused) {
+          videoRef.current.play();
+          setIsPlaying(true);
+        } else {
+          videoRef.current.pause();
+          setIsPlaying(false);
+        }
+      }
+    }
+  }));
+  const setPlaying = () => {
+    if (videoRef.current) {
+      if (videoRef.current.paused) {
+        videoRef.current.play();
+        setIsPlaying(true);
+      } else {
+        videoRef.current.pause();
+        setIsPlaying(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: `relative ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("video", { onClick: setPlaying, ref: videoRef, className: "size-full object-cover", src, loop: true, children: "Your browser does not support the video tag." }),
+    !isPlaying && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      Button,
+      {
+        variant: "icon",
+        icon: "mdi:play",
+        role: "icon",
+        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"
+      }
+    )
+  ] });
+});
+Video.displayName = "Video";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Badge,
+  Button,
+  Card,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  CodeBlock,
+  Copyright,
+  Description,
+  FrostedCard,
+  Hero,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Input,
+  Label,
+  SearchBar,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Text,
+  Textarea,
+  Video,
+  badgeVariants,
+  buttonVariants,
+  parseNewLines
+});