qstd 0.1.0

package/dist/react/index.js

@@ -0,0 +1,3128 @@
+import "./index.css";
+import * as React11 from 'react';
+import React11__default from 'react';
+import { createPortal } from 'react-dom';
+import { motion, MotionConfig, LayoutGroup, AnimatePresence, useDragControls, useMotionValue } from 'framer-motion';
+import { useFloating, offset, flip, shift, hide, autoUpdate, FloatingPortal, arrow, useHover, safePolygon, useFocus, useDismiss, useRole, useInteractions } from '@floating-ui/react';
+import { css } from 'panda/css';
+import { BeatLoader } from 'react-spinners';
+import { Oval, ThreeDots, TailSpin, RotatingLines } from 'react-loader-spinner';
+import { styled } from 'panda/jsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { nanoid } from 'nanoid';
+import * as mmb from 'music-metadata-browser';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { useImmer } from 'use-immer';
+
+// src/react/index.ts
+var base = styled("div", { base: { m: 0 } });
+var tags = {
+  div: base,
+  a: styled("a"),
+  br: styled("br"),
+  button: styled("button"),
+  canvas: styled("canvas"),
+  form: styled("form"),
+  h1: styled("h1"),
+  h2: styled("h2"),
+  h3: styled("h3"),
+  hr: styled("hr"),
+  nav: styled("nav"),
+  main: styled("main"),
+  aside: styled("aside"),
+  article: styled("article"),
+  section: styled("section"),
+  details: styled("details"),
+  header: styled("header"),
+  footer: styled("footer"),
+  strong: styled("strong"),
+  em: styled("em"),
+  img: styled("img"),
+  del: styled("del"),
+  ins: styled("ins"),
+  kbd: styled("kbd"),
+  code: styled("code"),
+  mark: styled("mark"),
+  samp: styled("samp"),
+  small: styled("small"),
+  sub: styled("sub"),
+  sup: styled("sup"),
+  u: styled("u"),
+  var: styled("var"),
+  input: styled("input"),
+  label: styled("label"),
+  legend: styled("legend"),
+  p: styled("p"),
+  select: styled("select"),
+  span: styled("span"),
+  svg: styled("svg"),
+  textarea: styled("textarea"),
+  table: styled("table"),
+  tr: styled("tr"),
+  th: styled("th"),
+  td: styled("td"),
+  tbody: styled("tbody"),
+  thead: styled("thead"),
+  tfoot: styled("tfoot"),
+  progress: styled("progress"),
+  ol: styled("ol"),
+  ul: styled("ul"),
+  li: styled("li"),
+  blockquote: styled("blockquote"),
+  pre: styled("pre")
+};
+var motionTags = {
+  div: styled(motion.div, { base: { m: 0 } }),
+  a: styled(motion.a),
+  br: styled(motion.br),
+  button: styled(motion.button),
+  canvas: styled(motion.canvas),
+  form: styled(motion.form),
+  h1: styled(motion.h1),
+  h2: styled(motion.h2),
+  h3: styled(motion.h3),
+  hr: styled(motion.hr),
+  nav: styled(motion.nav),
+  main: styled(motion.main),
+  aside: styled(motion.aside),
+  article: styled(motion.article),
+  section: styled(motion.section),
+  details: styled(motion.details),
+  header: styled(motion.header),
+  footer: styled(motion.footer),
+  strong: styled(motion.strong),
+  em: styled(motion.em),
+  img: styled(motion.img),
+  del: styled(motion.del),
+  ins: styled(motion.ins),
+  kbd: styled(motion.kbd),
+  code: styled(motion.code),
+  mark: styled(motion.mark),
+  samp: styled(motion.samp),
+  small: styled(motion.small),
+  sub: styled(motion.sub),
+  sup: styled(motion.sup),
+  u: styled(motion.u),
+  var: styled(motion.var),
+  input: styled(motion.input),
+  label: styled(motion.label),
+  legend: styled(motion.legend),
+  p: styled(motion.p),
+  select: styled(motion.select),
+  span: styled(motion.span),
+  svg: styled(motion.svg),
+  textarea: styled(motion.textarea),
+  table: styled(motion.table),
+  tr: styled(motion.tr),
+  th: styled(motion.th),
+  td: styled(motion.td),
+  tbody: styled(motion.tbody),
+  thead: styled(motion.thead),
+  tfoot: styled(motion.tfoot),
+  progress: styled(motion.progress),
+  ol: styled(motion.ol),
+  ul: styled(motion.ul),
+  li: styled(motion.li),
+  blockquote: styled(motion.blockquote),
+  pre: styled(motion.pre)
+};
+var loadingIconsMap = {
+  rotatingLines: RotatingLines,
+  spinner: TailSpin,
+  beat: BeatLoader,
+  dots: ThreeDots,
+  oval: Oval
+};
+var loadingIcons = Object.keys(loadingIconsMap);
+var Div = tags.div;
+var MotionDiv = motionTags.div;
+function MenuContainer(props) {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(Div, { ...rest, role: "menu", "data-menu-container": true, children });
+}
+function Menu(props) {
+  const {
+    variant = "click",
+    isOpen: isOpenControlled,
+    children,
+    trigger,
+    ...rest
+  } = props;
+  const hoverTimeoutRef = React11__default.useRef(null);
+  const [isOpen, setOpen] = React11__default.useState(isOpenControlled ?? false);
+  const onOpenChange = (open) => {
+    const newOpenState = typeof open === "function" ? open(isOpen) : open;
+    props.onOpenOrClose?.(newOpenState);
+    setOpen(newOpenState);
+  };
+  React11__default.useEffect(() => {
+    if (typeof isOpenControlled !== "boolean") return;
+    setOpen(isOpenControlled);
+  }, [isOpenControlled]);
+  const {
+    refs,
+    x,
+    y,
+    middlewareData: { hide: hideData },
+    context: floatingContext
+  } = useFloating({
+    placement: props.placement ?? "bottom-start",
+    whileElementsMounted: autoUpdate,
+    open: isOpen,
+    onOpenChange,
+    middleware: [
+      offset({ crossAxis: props.offset?.x, mainAxis: props.offset?.y }),
+      flip({ fallbackPlacements: ["top-end"] }),
+      shift({ padding: 5 }),
+      hide({ strategy: "referenceHidden" })
+    ]
+  });
+  const openMenu = () => {
+    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = null;
+    onOpenChange(true);
+  };
+  const closeMenuHover = () => {
+    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = setTimeout(
+      () => onOpenChange(false),
+      props.hoverDelay ?? 150
+    );
+  };
+  const closeMenuImmediate = () => {
+    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = null;
+    onOpenChange(false);
+  };
+  const handleTriggerClick = () => {
+    if (variant === "click") onOpenChange((prev) => !prev);
+  };
+  const handleTriggerMouseEnter = () => {
+    if (variant === "hover") {
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = setTimeout(() => {
+        openMenu();
+      }, props.hoverDelay ?? 250);
+    }
+  };
+  const handleTriggerMouseLeave = () => {
+    if (variant === "hover") {
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+      closeMenuHover();
+    }
+  };
+  const handleMenuMouseEnter = () => {
+    if (variant === "hover") openMenu();
+  };
+  const handleMenuMouseLeave = () => {
+    if (variant === "hover") closeMenuHover();
+  };
+  useOutsideClick(
+    refs.floating,
+    (event) => {
+      const referenceElement = refs.reference.current;
+      if (isOpen && referenceElement instanceof Element && !referenceElement.contains(event.target)) {
+        closeMenuImmediate();
+      }
+    },
+    isOpen
+  );
+  React11__default.useEffect(() => {
+    if (!hideData?.referenceHidden) return;
+    closeMenuImmediate();
+  }, [hideData, closeMenuImmediate]);
+  React11__default.useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+    };
+  }, []);
+  const menuVariants = {
+    hidden: {
+      opacity: 0,
+      scale: 0.9,
+      transition: { duration: 0.1, ease: "easeOut" }
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.15, ease: "easeIn" }
+    }
+  };
+  const triggerEventProps = variant === "hover" ? {
+    onMouseEnter: handleTriggerMouseEnter,
+    onMouseLeave: handleTriggerMouseLeave
+  } : { onClick: handleTriggerClick };
+  const menuEventProps = variant === "hover" ? {
+    onMouseEnter: handleMenuMouseEnter,
+    onMouseLeave: handleMenuMouseLeave
+  } : {};
+  const transformOrigin = floatingContext.placement.startsWith("top") ? "bottom left" : "top left";
+  const childArray = React11__default.Children.toArray(children);
+  let customContainerEl = null;
+  for (const c of childArray) {
+    if (React11__default.isValidElement(c)) {
+      const anyType = c.type;
+      if (c.props?.["data-menu-container"] || anyType?.isBlockMenuContainer) {
+        customContainerEl = c;
+        break;
+      }
+    }
+  }
+  let floatingLayer = null;
+  if (customContainerEl) {
+    const childProps = customContainerEl.props || {};
+    const { style: restStyle, ...restPanda } = rest || {};
+    const defaultStyles = {};
+    if (childProps.borderRadius === void 0 && childProps.rounded === void 0 && childProps.style?.borderRadius === void 0)
+      defaultStyles.borderRadius = "md";
+    if (childProps.shadow === void 0 && childProps.boxShadow === void 0 && childProps.style?.boxShadow === void 0)
+      defaultStyles.shadow = "lg";
+    if (childProps.bg === void 0 && childProps.background === void 0 && !(childProps.style?.background || childProps.style?.backgroundColor))
+      defaultStyles.bg = { base: "neutral.100", _dark: "neutral.900" };
+    if (childProps.overflow === void 0 && childProps.style?.overflow === void 0)
+      defaultStyles.overflow = "hidden";
+    if (childProps.outline === void 0 && childProps.style?.outline === void 0)
+      defaultStyles.outline = "none";
+    const defaultsClassName = Object.keys(defaultStyles).length > 0 ? css(defaultStyles) : "";
+    const mergedStyle = {
+      ...childProps.style || {},
+      ...restStyle || {}
+    };
+    const mergedClassName = [defaultsClassName, childProps.className].filter(Boolean).join(" ");
+    const contentNode = React11__default.cloneElement(
+      customContainerEl,
+      {
+        // Defaults are now in mergedClassName via css()
+        // Then Panda props coming from the parent <Block is="menu" ...>
+        ...restPanda,
+        // Finally explicit props on the provided container win
+        ...childProps,
+        // Apply merged className
+        className: mergedClassName,
+        // Apply menu event props to the actual container
+        ...menuEventProps,
+        role: childProps.role ?? "menu",
+        "aria-orientation": childProps["aria-orientation"] ?? "vertical",
+        css: {
+          ...restPanda.css || {},
+          ...childProps.css || {},
+          ring: (childProps.css && childProps.css.ring) ?? (restPanda.css && restPanda.css.ring) ?? "1px solid rgba(208, 58, 58, 0.05)"
+        },
+        style: mergedStyle
+      },
+      childProps.children
+    );
+    floatingLayer = /* @__PURE__ */ jsx(
+      MotionDiv,
+      {
+        zIndex: props.zIndex,
+        ref: refs.setFloating,
+        onClick: (e) => e.stopPropagation(),
+        style: { position: "absolute", top: y, left: x, transformOrigin },
+        variants: menuVariants,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        children: contentNode
+      }
+    );
+  } else {
+    const { style: restStyle, ...restPanda } = rest || {};
+    const container = /* @__PURE__ */ jsx(
+      MenuContainer,
+      {
+        role: "menu",
+        "aria-orientation": "vertical",
+        borderRadius: "md",
+        shadow: "lg",
+        bg: { base: "neutral.100", _dark: "neutral.900" },
+        overflow: "hidden",
+        outline: "none",
+        css: { ring: "1px solid rgba(208, 58, 58, 0.05)" },
+        ...restPanda,
+        ...menuEventProps,
+        style: { ...restStyle || {} },
+        children
+      }
+    );
+    floatingLayer = /* @__PURE__ */ jsx(
+      MotionDiv,
+      {
+        zIndex: props.zIndex,
+        ref: refs.setFloating,
+        onClick: (e) => e.stopPropagation(),
+        style: { position: "absolute", top: y, left: x, transformOrigin },
+        variants: menuVariants,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        children: container
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Div,
+    {
+      ref: refs.setReference,
+      h: "max-content",
+      style: { width: props.width || "max-content" },
+      ...triggerEventProps,
+      children: [
+        trigger,
+        /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && floatingLayer }) })
+      ]
+    }
+  );
+}
+function useOutsideClick(ref, handler, enabled = true) {
+  React11__default.useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler, enabled]);
+}
+var extractImageMetadata = (f) => {
+  return new Promise((res, rej) => {
+    if (!f) rej("No image file provided.");
+    const ext = f.type.split("/").pop();
+    const id = `${ext}_${nanoid()}.${ext}`;
+    const preview = URL.createObjectURL(f);
+    const image = new Image();
+    image.onload = () => {
+      const { height, width } = image;
+      let orientation = "";
+      if (height === width) orientation = "square";
+      else if (height > width) orientation = "portrait";
+      else orientation = "landscape";
+      res({ id, preview, orientation, height, width });
+    };
+    image.onerror = (e, x, y, z, a) => {
+      if (ext?.includes("tif")) {
+        const { height, width } = image;
+        let orientation = "";
+        if (height === width) orientation = "square";
+        else if (height > width) orientation = "portrait";
+        else orientation = "landscape";
+        res({ id, preview, orientation, height, width });
+      } else {
+        console.log("image error");
+        rej("Image failed to load.");
+      }
+    };
+    image.src = preview;
+  });
+};
+var extractAudioMetadata = async (f) => {
+  const meta = await mmb.parseBlob(f, { duration: true });
+  return new Promise((res, rej) => {
+    if (!f) rej("No audio file provided.");
+    const ext = f.name.split(".").pop();
+    const id = `${ext}_${nanoid()}.${ext}`;
+    const [cover] = meta.common.picture ?? [];
+    const preview = URL.createObjectURL(
+      new Blob([cover.data], { type: cover.format })
+    );
+    const audioMetadata = {
+      id,
+      preview,
+      source: { ...meta.format, ...meta.common }
+    };
+    res(audioMetadata);
+  });
+};
+var extractVideoMetadata = (f) => {
+  return new Promise((res, rej) => {
+    if (!f) rej("No video file provided.");
+    const ext = f.type.split("/").pop();
+    const id = `${ext}_${nanoid()}.${ext}`;
+    const video = document.createElement("video");
+    video.addEventListener("loadedmetadata", () => {
+      const height = video.videoHeight;
+      const width = video.videoWidth;
+      const duration = video.duration;
+      let orientation = "";
+      if (height === width) orientation = "square";
+      else if (height > width) orientation = "portrait";
+      else orientation = "landscape";
+      res({ id, orientation, duration, height, width });
+    });
+    video.src = URL.createObjectURL(f);
+  });
+};
+var prepareFiles = async (acceptedFiles) => {
+  return Promise.all(
+    acceptedFiles.map(async (f) => {
+      if (f.type.startsWith("image")) {
+        const metadata = await extractImageMetadata(f);
+        return Object.assign(f, metadata);
+      } else if (f.type.startsWith("audio")) {
+        const metadata = await extractAudioMetadata(f);
+        return Object.assign(f, metadata);
+      } else if (f.type.startsWith("video")) {
+        const metadata = await extractVideoMetadata(f);
+        return Object.assign(f, metadata);
+      } else {
+        const ext = f.type.split("/").pop();
+        const id = `${ext}_${nanoid()}.${ext}`;
+        const metadata = { id };
+        return Object.assign(f, metadata);
+      }
+    })
+  );
+};
+var findChildrenByDisplayName = (children, displayName2) => {
+  return React11__default.Children.toArray(children).find(
+    (child) => {
+      if (React11__default.isValidElement(child)) {
+        const childType = child.type;
+        return childType.displayName === displayName2;
+      } else {
+        return false;
+      }
+    }
+  );
+};
+var extractElType = (is, props) => {
+  let el = "div";
+  if (is === "txt") el = "p";
+  else if (is === "hr") el = "hr";
+  else if (is === "btn") el = "button";
+  else if (is === "link") el = "button";
+  else if (is === "img") el = "img";
+  else if (is === "input") el = "input";
+  else if (is === "accordion") el = "div";
+  else if (is === "textarea") el = "textarea";
+  else if (is === "checkbox") el = "button";
+  else if (is === "radio") el = "div";
+  else if (is === "skeleton") el = "div";
+  else if (is === "switch") el = "button";
+  else if (is === "select") el = "select";
+  else if (is === "blockquote") el = "blockquote";
+  else if (is === "pre") el = "pre";
+  else if (is === "progress") el = "progress";
+  else if (is === "drawer") el = "div";
+  else if (is === "menu") el = "div";
+  else if (is === "form") el = "form";
+  else if (is === "table") el = "table";
+  else if (is === "list") el = "ul";
+  else if (is === "seo") el = "section";
+  else el = "div";
+  const isHr = is === "hr";
+  const isLink = is === "link";
+  const isMenu = is === "menu";
+  const isInput = is === "input";
+  const isRadio = is === "radio";
+  const isDrawer = is === "drawer";
+  const isSwitch = is === "switch";
+  const isSkeleton = is === "skeleton";
+  const isCheckbox = is === "checkbox";
+  const isTextarea = is === "textarea";
+  const isProgress = is === "progress";
+  const isAccordion = is === "accordion";
+  const isBtnLike = is === "btn" || is === "link";
+  const filepickerAllowed = !is && props.filepicker || is && (is === "txt" || is === "btn" || is === "link" || is === "img") && props.filepicker;
+  return {
+    el,
+    is,
+    isMenu,
+    isLink,
+    isInput,
+    isRadio,
+    isSwitch,
+    isBtnLike,
+    isAccordion,
+    filepickerAllowed,
+    isTextarea,
+    isCheckbox,
+    isSkeleton,
+    isProgress,
+    isDrawer,
+    isHr
+  };
+};
+var extractElAndStyles = (extract, anyProps) => {
+  const {
+    _motion,
+    layout,
+    initial,
+    animate,
+    exit,
+    whileTap,
+    whileHover,
+    whileFocus,
+    transition,
+    variants,
+    ...rest
+  } = anyProps;
+  const StdComp = tags[extract.el] || tags.div;
+  const MotionComp = motionTags[extract.el] || motionTags.div;
+  const hasMotionProps = layout !== void 0 || initial !== void 0 || animate !== void 0 || exit !== void 0 || whileHover !== void 0 || whileTap !== void 0 || whileFocus !== void 0 || variants !== void 0 || transition !== void 0;
+  const comp = hasMotionProps ? MotionComp : StdComp;
+  const motionProps = hasMotionProps ? {
+    layout,
+    initial,
+    animate,
+    exit,
+    whileHover,
+    whileTap,
+    whileFocus,
+    variants,
+    transition
+  } : void 0;
+  const remaining = omit(rest, ["loadingPosition", "loadingIcon", "isLoading"]);
+  const cursor = anyProps.isLoading ? "not-allowed" : "pointer";
+  const btnClassName = extract.is === "btn" ? css({ display: "flex", alignI: "center", cursor }) : "";
+  const linkClassName = extract.isLink ? css({
+    color: { base: "blue.500", _dark: "blue.400" },
+    _hover: { textDecoration: "underline" },
+    cursor
+  }) : "";
+  const mergedClassName = [btnClassName, linkClassName, anyProps.className].filter(Boolean).join(" ");
+  return [
+    comp,
+    {
+      ...motionProps,
+      ...remaining,
+      className: mergedClassName
+    }
+  ];
+};
+function getIcon(position, Icon2, props) {
+  const {
+    loadingIcon,
+    iconPrefix = "solid",
+    loadingPosition = "start",
+    loadingIconSize,
+    isLoading,
+    _loading,
+    strokeColor,
+    strokeWidth
+  } = props;
+  const prefix = iconPrefix === "solid" ? "fas" : iconPrefix === "regular" ? "far" : "fab";
+  if (isLoading && position === loadingPosition) {
+    const chosen = Icon2 ?? loadingIcon ?? null;
+    if (chosen) {
+      if (typeof chosen === "string" && loadingIcons.includes(chosen)) {
+        const Cmp = loadingIconsMap[chosen];
+        const sizePx = typeof loadingIconSize === "number" ? `${loadingIconSize}px` : "12px";
+        return Cmp({ width: sizePx, height: sizePx });
+      } else if (React11__default.isValidElement(chosen)) {
+        return chosen;
+      } else if (typeof chosen === "function") {
+        return chosen();
+      } else if (chosen?.iconName) {
+        return /* @__PURE__ */ jsx(
+          FontAwesomeIcon,
+          {
+            icon: chosen,
+            className: props.className,
+            spinPulse: props.pulse,
+            size: props.size,
+            spin: props.spin
+          }
+        );
+      }
+    }
+    const widthPx = typeof loadingIconSize === "number" ? `${loadingIconSize}px` : "12px";
+    const resolvedStrokeWidth = _loading?.strokeWidth ?? strokeWidth ?? 4;
+    const resolvedStrokeColor = typeof _loading?.strokeColor === "string" && _loading.strokeColor || typeof strokeColor === "string" && strokeColor || "var(--colors-neutral-200)";
+    return /* @__PURE__ */ jsx(
+      RotatingLines,
+      {
+        strokeWidth: `${resolvedStrokeWidth}`,
+        strokeColor: resolvedStrokeColor,
+        width: widthPx
+      }
+    );
+  }
+  if (!Icon2) return null;
+  else if (typeof Icon2 === "string") {
+    return /* @__PURE__ */ jsx(
+      FontAwesomeIcon,
+      {
+        icon: { prefix, iconName: Icon2 },
+        className: props.className,
+        spinPulse: props.pulse,
+        size: props.size,
+        spin: props.spin
+      }
+    );
+  } else if ("iconName" in Icon2) {
+    return /* @__PURE__ */ jsx(
+      FontAwesomeIcon,
+      {
+        icon: Icon2,
+        className: props.className,
+        spinPulse: props.pulse,
+        size: props.size,
+        spin: props.spin
+      }
+    );
+  } else if (typeof Icon2 === "function") {
+    return Icon2(props);
+  } else return Icon2;
+}
+var getIcons = (extract, anyProps) => {
+  const { icon, startIcon, endIcon } = anyProps;
+  let isLoading;
+  let loadingIcon;
+  let loadingPosition;
+  if (extract.isBtnLike) {
+    const loadingProps = anyProps;
+    loadingPosition = loadingProps.loadingPosition;
+    loadingIcon = loadingProps.loadingIcon;
+    isLoading = loadingProps.isLoading;
+  }
+  const leftArg = isLoading && loadingPosition === "start" ? loadingIcon ?? null : icon ?? startIcon;
+  const rightArg = isLoading && loadingPosition === "end" ? loadingIcon ?? null : endIcon ?? null;
+  const leftIcon = getIcon("start", leftArg, anyProps);
+  const rightIcon = getIcon("end", rightArg, anyProps);
+  return { leftIcon, rightIcon };
+};
+var omit = (obj, keys) => {
+  const result = {};
+  if (keys.length === 0) {
+    for (const k in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, k)) {
+        result[k] = obj[k];
+      }
+    }
+    return result;
+  }
+  const skip = new Set(keys);
+  for (const k in obj) {
+    if (!Object.prototype.hasOwnProperty.call(obj, k)) continue;
+    if (!skip.has(k)) {
+      result[k] = obj[k];
+    }
+  }
+  return result;
+};
+var TrackNameKey = "Track";
+var ThumbNameKey = "Thumb";
+var Button = motionTags.button;
+var Base = motionTags.div;
+var SwitchContext = React11__default.createContext(null);
+var useSwitchContext = () => {
+  const context = React11__default.useContext(SwitchContext);
+  if (!context) {
+    throw new Error("Switch compound components must be used within Switch");
+  }
+  return context;
+};
+function Switch(props) {
+  const {
+    checked = false,
+    disabled = false,
+    thumbSize = 20,
+    onChange,
+    children,
+    _motion,
+    ...rest
+  } = props;
+  const [x, setX] = React11__default.useState(0);
+  const [pressed, setPressed] = React11__default.useState(false);
+  const [growThumb, setGrowThumb] = React11__default.useState(false);
+  const borderWidth = 4;
+  const trackWidth = thumbSize * 1.5;
+  const borderRadius = thumbSize * 2.5;
+  const xWhileOn = thumbSize;
+  const checkedPosition = xWhileOn * 0.5;
+  const stopwatch = useStopwatch();
+  React11__default.useEffect(() => {
+    if (pressed && !disabled) {
+      stopwatch.start();
+    } else {
+      setGrowThumb(false);
+      stopwatch.clear();
+    }
+  }, [pressed, disabled]);
+  React11__default.useEffect(() => {
+    if (stopwatch.time > 200) {
+      setGrowThumb(true);
+    }
+  }, [stopwatch.time]);
+  React11__default.useEffect(() => {
+    setX(checked ? checkedPosition : 0);
+  }, [checked, checkedPosition]);
+  const toggle = () => {
+    if (disabled) return;
+    if (growThumb) {
+      setGrowThumb(false);
+      setPressed(false);
+      setTimeout(() => {
+        const isOff = x === 0;
+        setX(isOff ? checkedPosition : 0);
+        onChange?.(isOff);
+      }, 50);
+    } else {
+      const isOff = x === 0;
+      setX(isOff ? checkedPosition : 0);
+      onChange?.(isOff);
+    }
+  };
+  const handlePointerDown = () => {
+    if (disabled) return;
+    setPressed(true);
+  };
+  const handlePointerUp = () => setPressed(false);
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (event.code === "Space" || event.key === " ") {
+      event.preventDefault();
+      if (!pressed) {
+        setPressed(true);
+      }
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (disabled) return;
+    if (event.code === "Space" || event.key === " ") {
+      event.preventDefault();
+      if (pressed) {
+        toggle();
+      }
+      setPressed(false);
+    }
+  };
+  const contextValue = {
+    checked,
+    disabled,
+    pressed,
+    growThumb,
+    thumbSize,
+    trackWidth,
+    thumbOffset: x,
+    // Use actual x position for animations
+    borderRadius,
+    borderWidth,
+    setPressed,
+    toggle
+  };
+  const track = findChildrenByDisplayName(
+    children,
+    TrackNameKey
+  );
+  const thumb = findChildrenByDisplayName(
+    children,
+    ThumbNameKey
+  );
+  const trackElement = track ? React11__default.cloneElement(track, {
+    _motion,
+    children: thumb ? React11__default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsx(Thumb, { _motion })
+  }) : /* @__PURE__ */ jsx(Track, { _motion, children: thumb ? React11__default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsx(Thumb, { _motion }) });
+  return /* @__PURE__ */ jsx(SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      flex: true,
+      alignItems: "center",
+      justifyContent: "center",
+      m: 0,
+      px: 1,
+      py: 1,
+      h: "fit-content",
+      outlineOffset: 1,
+      initial: false,
+      animate: {
+        outlineOffset: pressed ? "-2px" : "0px",
+        transition: { duration: 0.1, ease: "linear" }
+      },
+      cursor: disabled ? "not-allowed" : "pointer",
+      _hover: { bg: "none!" },
+      _active: {
+        bg: "none",
+        transform: "none!",
+        scale: "none!"
+        // Disable any button press effects that might shrink the toggle
+      },
+      background: "none",
+      style: { borderRadius },
+      onClick: toggle,
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp,
+      onPointerLeave: handlePointerUp,
+      onTouchStart: handlePointerDown,
+      onTouchEnd: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      disabled,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        Base,
+        {
+          flex: true,
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          boxSizing: "border-box",
+          children: trackElement
+        }
+      )
+    }
+  ) }) });
+}
+function Track(props) {
+  const { _motion, children, ...rest } = props;
+  const {
+    checked,
+    trackWidth,
+    thumbSize,
+    borderWidth,
+    borderRadius: toggleBorderRadius
+  } = useSwitchContext();
+  const defaultBg = checked ? "#60a5fa !important" : "#d1d5db !important";
+  return /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsx(
+    Base,
+    {
+      flex: true,
+      relative: true,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      boxSizing: "content-box",
+      cursor: "pointer",
+      bg: defaultBg,
+      transition: "background-color 0.2s ease-in-out",
+      style: {
+        minHeight: thumbSize,
+        width: trackWidth,
+        border: `${borderWidth}px solid transparent`,
+        borderRadius: toggleBorderRadius
+      },
+      ...rest,
+      children
+    }
+  ) });
+}
+function Thumb(props) {
+  const { _motion, ...rest } = props;
+  const {
+    pressed,
+    growThumb,
+    thumbSize,
+    thumbOffset,
+    borderRadius: toggleBorderRadius
+  } = useSwitchContext();
+  const thumbWidth = thumbSize + (pressed && growThumb ? thumbSize * 0.2 : 0);
+  const shouldUseRightAnchor = thumbOffset && growThumb;
+  return /* @__PURE__ */ jsx(
+    MotionConfig,
+    {
+      transition: _motion || { type: "spring", stiffness: 700, damping: 30 },
+      children: /* @__PURE__ */ jsx(
+        Base,
+        {
+          grid: true,
+          bg: "white",
+          style: {
+            height: thumbSize,
+            //   width: thumbWidth,
+            borderRadius: toggleBorderRadius,
+            transition: "background-color 0.2s ease-in-out"
+          },
+          animate: {
+            // Always use consistent x positioning - no switching
+            x: thumbOffset,
+            width: thumbWidth,
+            // Use negative margin to create left-directional growth when ON
+            marginLeft: shouldUseRightAnchor ? -(thumbWidth - thumbSize) : 0
+          },
+          ...rest
+        }
+      )
+    }
+  );
+}
+Track.displayName = TrackNameKey;
+Thumb.displayName = ThumbNameKey;
+function useStopwatch(props = {}) {
+  const [active, setActive] = React11__default.useState(false);
+  const [time, setTime] = React11__default.useState(0);
+  const timeInterval = props?.interval ?? 10;
+  React11__default.useEffect(() => {
+    let interval = null;
+    if (active) {
+      interval = setInterval(() => {
+        setTime((prevTime) => prevTime + timeInterval);
+      }, timeInterval);
+    } else {
+      clearInterval(interval);
+    }
+    return () => clearInterval(interval);
+  }, [active, timeInterval]);
+  const start = () => setActive(true);
+  const stop = () => setActive(false);
+  const clear = () => {
+    setActive(false);
+    setTime(0);
+  };
+  return { time, start, stop, clear };
+}
+var switch_default = Switch;
+var RadioContext = React11__default.createContext(null);
+var Base2 = base;
+var MotionDiv2 = motionTags.div;
+function Radio(props) {
+  const {
+    value: controlledValue,
+    defaultValue = null,
+    disabled,
+    onChange,
+    name,
+    options,
+    renderOption,
+    onKeyDown: onKeyDownProp,
+    ...rest
+  } = props;
+  const groupId = React11__default.useId();
+  const isControlled = controlledValue !== void 0;
+  const [uncontrolled, setUncontrolled] = React11__default.useState(
+    defaultValue
+  );
+  const selectedValue = isControlled ? controlledValue : uncontrolled;
+  const itemsRef = React11__default.useRef([]);
+  const [activeId, setActiveId] = React11__default.useState("");
+  const setSelectedValue = (val) => {
+    if (!isControlled) setUncontrolled(val);
+    onChange?.(val);
+  };
+  const registerItem = (entry) => {
+    const exists = itemsRef.current.find((x) => x.id === entry.id);
+    if (exists) {
+      exists.value = entry.value;
+      exists.disabled = entry.disabled;
+      exists.ref = entry.ref;
+    } else {
+      itemsRef.current.push(entry);
+    }
+    if (!activeId) {
+      const selected = selectedValue ? itemsRef.current.find((x) => x.value === selectedValue) : void 0;
+      const firstEnabled = itemsRef.current.find((x) => !x.disabled);
+      const initial = (selected || firstEnabled)?.id;
+      if (initial) setActiveId(initial);
+    }
+  };
+  const unregisterItem = (id) => {
+    itemsRef.current = itemsRef.current.filter((x) => x.id !== id);
+    if (activeId === id) {
+      const firstEnabled = itemsRef.current.find((x) => !x.disabled);
+      if (firstEnabled) setActiveId(firstEnabled.id);
+      else setActiveId("");
+    }
+  };
+  const getIndexById = (id) => itemsRef.current.findIndex((x) => x.id === id);
+  const moveActive = (delta) => {
+    if (!itemsRef.current.length) return;
+    const currentIndex = getIndexById(activeId);
+    const total = itemsRef.current.length;
+    let next = currentIndex;
+    for (let i = 0; i < total; i++) {
+      next = (next + delta + total) % total;
+      const candidate = itemsRef.current[next];
+      if (candidate && !candidate.disabled) {
+        setActiveId(candidate.id);
+        candidate.ref.current?.focus();
+        setSelectedValue(candidate.value);
+        break;
+      }
+    }
+  };
+  const isActiveId = (id) => id === activeId;
+  const setActiveById = (id) => {
+    const found = itemsRef.current.find((x) => x.id === id && !x.disabled);
+    if (found) {
+      setActiveId(found.id);
+    }
+  };
+  React11__default.useEffect(() => {
+    if (!selectedValue) return;
+    const selected = itemsRef.current.find((x) => x.value === selectedValue);
+    if (selected && !selected.disabled) setActiveId(selected.id);
+  }, [selectedValue]);
+  const ctx = {
+    groupId,
+    disabled,
+    selectedValue: selectedValue ?? null,
+    setSelectedValue,
+    unregisterItem,
+    registerItem,
+    isActiveId,
+    setActiveById
+  };
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    Base2,
+    {
+      role: "radiogroup",
+      "aria-disabled": disabled,
+      ...rest,
+      onKeyDown: (e) => {
+        if (disabled) return;
+        if (["ArrowUp", "ArrowLeft"].includes(e.code)) {
+          e.preventDefault();
+          moveActive(-1);
+        } else if (["ArrowDown", "ArrowRight"].includes(e.code)) {
+          e.preventDefault();
+          moveActive(1);
+        } else if (["Space", "Enter"].includes(e.code)) {
+          e.preventDefault();
+          const current = itemsRef.current.find((x) => x.id === activeId);
+          if (current && !current.disabled) {
+            setSelectedValue(current.value);
+            current.ref.current?.focus();
+          }
+        }
+        onKeyDownProp?.(e);
+      },
+      children: [
+        (options ?? []).map(
+          (opt) => renderOption ? /* @__PURE__ */ jsx(React11__default.Fragment, { children: renderOption(opt) }, opt.value) : /* @__PURE__ */ jsx(
+            Item,
+            {
+              value: opt.value,
+              disabled: !!(disabled || opt.disabled),
+              alignI: true,
+              gap: "8px",
+              whiteSpace: "nowrap",
+              children: opt.label
+            },
+            opt.value
+          )
+        ),
+        typeof name === "string" && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValue ?? "" })
+      ]
+    }
+  ) });
+}
+function Item(props) {
+  const {
+    value,
+    children,
+    grid: gridProp,
+    cols: colsProp,
+    disabled: itemDisabled,
+    onClick: onClickProp,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    ...rest
+  } = props;
+  const ctx = React11__default.useContext(RadioContext);
+  if (!ctx) {
+    return /* @__PURE__ */ jsxs(Base2, { flex: true, alignI: true, cursor: "pointer", ...rest, children: [
+      /* @__PURE__ */ jsx(Base2, { "data-radio-circle": true, w: 24, h: 24, br: 9999, mr: 8 }),
+      children
+    ] });
+  }
+  const {
+    groupId,
+    registerItem,
+    unregisterItem,
+    selectedValue,
+    setSelectedValue,
+    isActiveId,
+    setActiveById,
+    disabled: groupDisabled
+  } = ctx;
+  const disabled = !!(groupDisabled || itemDisabled);
+  const id = `radio-item-${groupId}-${value}`;
+  const ref = React11__default.useRef(null);
+  React11__default.useEffect(() => {
+    registerItem({ id, value, disabled, ref });
+    return () => unregisterItem(id);
+  }, [id, value, disabled]);
+  const isSelected = selectedValue === value;
+  const isActive = isActiveId(id);
+  const [isFocused, setIsFocused] = React11__default.useState(false);
+  const shouldUseGrid = gridProp || !!colsProp;
+  const renderLabel = () => {
+    const onlyChild = React11__default.Children.count(children) === 1 ? React11__default.Children.toArray(children)[0] : null;
+    if (typeof onlyChild === "string") {
+      return /* @__PURE__ */ jsx(Base2, { "data-radio-label": true, children: onlyChild });
+    }
+    if (React11__default.isValidElement(onlyChild)) {
+      return React11__default.cloneElement(
+        onlyChild,
+        {
+          ...onlyChild.props || {},
+          ["data-radio-label"]: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Base2, { "data-radio-label": true, children });
+  };
+  return /* @__PURE__ */ jsxs(
+    Base2,
+    {
+      ref,
+      flex: true,
+      alignI: true,
+      outline: "none",
+      role: "radio",
+      tabIndex: isActive ? 0 : -1,
+      "aria-checked": isSelected,
+      "aria-disabled": disabled,
+      ...shouldUseGrid ? { grid: true } : { flex: true, alignI: true },
+      ...colsProp && { cols: colsProp },
+      gap: shouldUseGrid ? void 0 : "8px",
+      cursor: disabled ? "not-allowed" : "pointer",
+      userSelect: "none",
+      ...isSelected && { "data-selected": true },
+      ...disabled && { "data-disabled": true },
+      _disabled: {
+        _radioLabel: { color: { base: "neutral.400", _dark: "neutral.600" } }
+      },
+      onClick: (e) => {
+        if (!disabled) setSelectedValue(value);
+        onClickProp?.(e);
+      },
+      onFocus: (e) => {
+        setActiveById(id);
+        setIsFocused(true);
+        onFocusProp?.(e);
+      },
+      onBlur: (e) => {
+        setIsFocused(false);
+        onBlurProp?.(e);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Base2,
+          {
+            "data-radio-outer": true,
+            relative: true,
+            ...isSelected && { "data-selected": true },
+            ...disabled && { "data-disabled": true },
+            w: "24px",
+            h: "24px",
+            grid: true,
+            placeI: true,
+            br: 9999,
+            boxSizing: "border-box",
+            borderWidth: 2,
+            borderStyle: "solid",
+            mr: shouldUseGrid ? void 0 : "8px",
+            borderColor: { base: "neutral.400", _dark: "neutral.400" },
+            _selected: { borderColor: { base: "blue.500", _dark: "blue.400" } },
+            _disabled: {
+              borderColor: { base: "neutral.400", _dark: "neutral.600" }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                MotionDiv2,
+                {
+                  "data-radio-focusring": true,
+                  absolute: true,
+                  top: 0,
+                  left: 0,
+                  w: "100%",
+                  h: "100%",
+                  br: 9999,
+                  pointerEvents: "none",
+                  boxShadow: {
+                    base: "0 0 0 6px rgba(0,0,0,.08)",
+                    _dark: "0 0 0 6px rgba(255,255,255,.08)"
+                  },
+                  initial: { scale: 0, opacity: 0 },
+                  animate: {
+                    scale: isFocused ? 1 : 0,
+                    opacity: isFocused ? 1 : 0,
+                    transition: { type: "spring", stiffness: 520, damping: 34 }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MotionDiv2,
+                {
+                  "data-radio-inner": true,
+                  ...isSelected && { "data-selected": true },
+                  ...disabled && { "data-disabled": true },
+                  w: "12px",
+                  h: "12px",
+                  br: 9999,
+                  bg: { base: "blue.500", _dark: "blue.400" },
+                  initial: { scale: 0 },
+                  animate: {
+                    scale: isSelected ? 1 : 0,
+                    transition: { type: "spring", stiffness: 520, damping: 34 }
+                  },
+                  _disabled: { bg: { base: "neutral.400", _dark: "neutral.600" } }
+                }
+              )
+            ]
+          }
+        ),
+        renderLabel()
+      ]
+    }
+  );
+}
+var LabelNameKey = "Label";
+var Base3 = base;
+var isBrowser = typeof window !== "undefined";
+var useIsomorphicLayoutEffect = isBrowser ? React11__default.useLayoutEffect : React11__default.useEffect;
+function pick(props, obj) {
+  return props.reduce(
+    (acc, prop) => {
+      acc[prop] = obj[prop];
+      return acc;
+    },
+    {}
+  );
+}
+function assignRefs(targetRef, userRef) {
+  return (node) => {
+    targetRef.current = node;
+    if (!userRef) return;
+    if (typeof userRef === "function") userRef(node);
+    else userRef.current = node;
+  };
+}
+var HIDDEN_TEXTAREA_STYLE = {
+  display: "block",
+  position: "absolute",
+  "max-height": "none",
+  "min-height": "0",
+  height: "0",
+  top: "0",
+  right: "0",
+  "z-index": "-1000",
+  visibility: "hidden",
+  overflow: "hidden"
+};
+var forceHiddenStyles = (node) => {
+  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {
+    node.style.setProperty(
+      key,
+      HIDDEN_TEXTAREA_STYLE[key],
+      "important"
+    );
+  });
+};
+var SIZING_STYLE = [
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderRightWidth",
+  "borderTopWidth",
+  "boxSizing",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  // Non-standard but may affect sizing
+  "tabSize",
+  "textIndent",
+  "textRendering",
+  "textTransform",
+  "width",
+  "wordBreak",
+  "wordSpacing",
+  "scrollbarGutter"
+];
+var getSizingData = (node) => {
+  const style = window.getComputedStyle(node);
+  if (!style) return null;
+  const sizingStyle = pick(SIZING_STYLE, style);
+  const { boxSizing } = sizingStyle;
+  if (!boxSizing) return null;
+  const paddingSize = parseFloat(sizingStyle.paddingBottom) + parseFloat(sizingStyle.paddingTop);
+  const borderSize = parseFloat(sizingStyle.borderBottomWidth) + parseFloat(sizingStyle.borderTopWidth);
+  return { sizingStyle, paddingSize, borderSize };
+};
+var hiddenTextarea = null;
+var getHeight = (node, sizingData) => {
+  const height = node.scrollHeight;
+  if (sizingData.sizingStyle.boxSizing === "border-box") {
+    return height + sizingData.borderSize;
+  }
+  return height - sizingData.paddingSize;
+};
+function calculateNodeHeight(sizingData, value, minRows = 1, maxRows = Infinity) {
+  if (!hiddenTextarea) {
+    hiddenTextarea = document.createElement("textarea");
+    hiddenTextarea.setAttribute("tabindex", "-1");
+    hiddenTextarea.setAttribute("aria-hidden", "true");
+    forceHiddenStyles(hiddenTextarea);
+  }
+  if (hiddenTextarea.parentNode === null) {
+    document.body.appendChild(hiddenTextarea);
+  }
+  const { paddingSize, borderSize, sizingStyle } = sizingData;
+  const { boxSizing } = sizingStyle;
+  Object.keys(sizingStyle).forEach((_key) => {
+    const key = _key;
+    hiddenTextarea.style[key] = sizingStyle[key];
+  });
+  forceHiddenStyles(hiddenTextarea);
+  hiddenTextarea.value = value;
+  let height = getHeight(hiddenTextarea, sizingData);
+  hiddenTextarea.value = value;
+  height = getHeight(hiddenTextarea, sizingData);
+  hiddenTextarea.value = "x";
+  const rowHeight = hiddenTextarea.scrollHeight - paddingSize;
+  let minHeight = rowHeight * minRows;
+  if (boxSizing === "border-box") {
+    minHeight = minHeight + paddingSize + borderSize;
+  }
+  height = Math.max(minHeight, height);
+  let maxHeight = rowHeight * maxRows;
+  if (boxSizing === "border-box") {
+    maxHeight = maxHeight + paddingSize + borderSize;
+  }
+  height = Math.min(maxHeight, height);
+  return [height, rowHeight];
+}
+var Txtarea = tags.textarea;
+function Textarea(props) {
+  const {
+    maxRows,
+    minRows,
+    onChange,
+    onHeightChange,
+    ref: userRef,
+    children,
+    _motion,
+    error,
+    ...rest
+  } = props;
+  const isControlled = rest.value !== void 0;
+  const libRef = React11__default.useRef(null);
+  const ref = assignRefs(libRef, userRef);
+  const heightRef = React11__default.useRef(0);
+  const [_value, _setValue] = React11__default.useState("");
+  const value = props.value ?? _value;
+  const label = findChildrenByDisplayName(
+    children,
+    LabelNameKey
+  );
+  const labelWithProps = label ? React11__default.cloneElement(label, {
+    required: props.required,
+    value: props.value,
+    error
+  }) : null;
+  const resizeTextarea = () => {
+    const node = libRef.current;
+    if (!node) return;
+    const nodeSizingData = getSizingData(node);
+    if (!nodeSizingData) return;
+    const value2 = node.value || node.placeholder || "x";
+    const [height, rowHeight] = calculateNodeHeight(
+      nodeSizingData,
+      value2,
+      minRows,
+      maxRows
+    );
+    if (heightRef.current !== height) {
+      heightRef.current = height;
+      node.style.setProperty("height", `${height}px`, "important");
+      onHeightChange?.(height, { rowHeight });
+    }
+  };
+  const handleChange = (e) => {
+    if (!isControlled) resizeTextarea();
+    _setValue(e.target.value);
+    onChange?.(e);
+  };
+  useIsomorphicLayoutEffect(() => {
+    resizeTextarea();
+  }, [rest.value, rest.placeholder, minRows, maxRows]);
+  React11__default.useEffect(() => {
+    if (!isBrowser) return;
+    const onResize = () => resizeTextarea();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [minRows, maxRows, rest.placeholder, rest.value]);
+  React11__default.useEffect(() => {
+    const fonts = isBrowser ? document.fonts : void 0;
+    if (!fonts || typeof fonts.addEventListener !== "function") return;
+    const onFontsLoaded = () => resizeTextarea();
+    fonts.addEventListener("loadingdone", onFontsLoaded);
+    return () => fonts.removeEventListener("loadingdone", onFontsLoaded);
+  }, [minRows, maxRows, rest.placeholder, rest.value]);
+  React11__default.useEffect(() => {
+    const node = libRef.current;
+    const form = node?.form;
+    if (!node || !form || isControlled) return;
+    const onReset = () => {
+      const currentValue = node.value;
+      requestAnimationFrame(() => {
+        if (node && currentValue !== node.value) resizeTextarea();
+      });
+    };
+    form.addEventListener("reset", onReset);
+    return () => form.removeEventListener("reset", onReset);
+  }, [isControlled]);
+  const resize = props.resize ?? "none";
+  return /* @__PURE__ */ jsxs(Base3, { grid: true, rows: "/ 4", children: [
+    /* @__PURE__ */ jsxs(Base3, { grid: true, relative: true, children: [
+      labelWithProps,
+      /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsx(
+        Txtarea,
+        {
+          ref,
+          value,
+          onContextMenu: (e) => e.preventDefault(),
+          resize,
+          py: 0.5,
+          px: 2,
+          color: "text-primary",
+          border: "1.5px solid",
+          borderColor: error ? "input-border-color-error" : "input-border-color",
+          ...error && { outlineColor: "input-outline-color-error" },
+          borderRadius: 8,
+          placeholder: props.placeholder ?? " ",
+          _placeholder: {
+            color: "input-label-color",
+            opacity: label ? 0 : 1
+          },
+          _focusWithin: { _placeholder: { opacity: 1 } },
+          css: {
+            boxSizing: "border-box",
+            /* Works on Firefox */
+            scrollbarWidth: "thin",
+            scrollbarColor: "neutral.300 neutral.300",
+            /* Works on Chrome, Edge, and Safari */
+            "&::-webkit-scrollbar": { height: 6, width: 6 },
+            "&::-webkit-scrollbar-track": {
+              background: "transparent !important"
+            },
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: "neutral.300",
+              borderRadius: 20
+            }
+          },
+          ...rest,
+          onChange: handleChange
+        }
+      ) })
+    ] }),
+    error && /* @__PURE__ */ jsx(Base3, { pl: 3, fontSize: "sm", color: "text-alert", children: error })
+  ] });
+}
+function Label(props) {
+  const { value, error, required, children, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    Base3,
+    {
+      position: "absolute",
+      gridAutoFlow: "column",
+      top: 1,
+      transformOrigin: "top left",
+      transform: "translate(0, 0) scale(1)",
+      transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
+      ml: 1,
+      mr: 1,
+      px: 2,
+      py: 0.5,
+      br: 8,
+      pointerEvents: "none",
+      color: "input-label-color",
+      zIndex: 1,
+      css: {
+        // lift label when sibling textarea has focus or blurred but not empty
+        "&:has(+ textarea:focus, + textarea:not(:placeholder-shown))": {
+          transformOrigin: "top left",
+          transform: "scale(0.8)",
+          top: "-14px",
+          color: value ? "input-label-color-lifted" : "input-label-color",
+          // only when lifted since autocomplete has lightblue background
+          bg: "input-label-bg"
+        },
+        ...error && { color: "text-alert" }
+      },
+      ...rest,
+      children: [
+        children,
+        required && "*"
+      ]
+    }
+  );
+}
+Label.displayName = LabelNameKey;
+library.add(fas, far, fab);
+function Icon(props) {
+  const { className, iconPrefix, pulse, spin } = props;
+  const iconSize = props.iconSize;
+  const IconComp = props.icon ?? props.startIcon;
+  const prefix = !iconPrefix || iconPrefix === "solid" ? "fas" : iconPrefix === "regular" ? "far" : "fab";
+  if (!IconComp) return null;
+  else if (typeof IconComp === "string") {
+    return /* @__PURE__ */ jsx(
+      FontAwesomeIcon,
+      {
+        icon: { prefix, iconName: IconComp },
+        className,
+        spinPulse: pulse,
+        size: iconSize,
+        spin
+      }
+    );
+  } else if ("iconName" in IconComp) {
+    return /* @__PURE__ */ jsx(
+      FontAwesomeIcon,
+      {
+        icon: IconComp,
+        className,
+        spinPulse: pulse,
+        size: iconSize,
+        spin
+      }
+    );
+  } else if (typeof IconComp === "function") {
+    return IconComp(props);
+  } else return IconComp;
+}
+var LabelNameKey2 = "Label";
+var LeftSideNameKey = "LeftIcon";
+var RightSideNameKey = "RightSide";
+var InputBase = tags.input;
+var Base4 = base;
+function Input(props) {
+  const { _motion, error, children, ...rest } = props;
+  const label = findChildrenByDisplayName(
+    children,
+    LabelNameKey2
+  );
+  const leftIcon = findChildrenByDisplayName(
+    children,
+    LeftSideNameKey
+  );
+  const rightSide = findChildrenByDisplayName(
+    children,
+    RightSideNameKey
+  );
+  const labelWithProps = label ? React11__default.cloneElement(label, {
+    hasLeftIcon: !!leftIcon,
+    required: props.required,
+    value: props.value,
+    error
+  }) : null;
+  const rightSideWithProps = rightSide ? React11__default.cloneElement(rightSide, {
+    onChange: props.onChange,
+    value: props.value
+  }) : null;
+  return /* @__PURE__ */ jsxs(Base4, { grid: true, rows: "/ 4", children: [
+    /* @__PURE__ */ jsxs(Base4, { grid: true, relative: true, children: [
+      leftIcon,
+      labelWithProps,
+      /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsx(
+        InputBase,
+        {
+          py: 0.5,
+          pl: leftIcon ? 7 : 2,
+          pr: rightSide ? 6 : 2,
+          color: "text-primary",
+          border: "1.5px solid",
+          borderColor: error ? "input-border-color-error" : "input-border-color",
+          ...error && { outlineColor: "input-outline-color-error" },
+          borderRadius: 8,
+          placeholder: props.placeholder ?? " ",
+          _placeholder: {
+            color: "input-label-color",
+            opacity: label ? 0 : 1
+          },
+          _focusWithin: { _placeholder: { opacity: 1 } },
+          ...rest
+        }
+      ) }),
+      rightSideWithProps
+    ] }),
+    error && /* @__PURE__ */ jsx(Base4, { pl: 3, fontSize: "sm", color: "text-alert", children: error })
+  ] });
+}
+function LeftIcon(props) {
+  const remaining = omit(props, [
+    "iconPrefix",
+    "startIcon",
+    "endIcon",
+    "icon",
+    "spin",
+    "size",
+    "pulse"
+  ]);
+  return /* @__PURE__ */ jsx(
+    Base4,
+    {
+      position: "absolute",
+      transform: "translateY(-50%)",
+      top: "50%",
+      left: "11px",
+      ...remaining,
+      children: /* @__PURE__ */ jsx(Icon, { ...props })
+    }
+  );
+}
+LeftIcon.displayName = LeftSideNameKey;
+function RightSide(props) {
+  const { clearable, ...rest } = props;
+  if (clearable && !props.value) return null;
+  return /* @__PURE__ */ jsx(
+    Base4,
+    {
+      position: "absolute",
+      top: "50%",
+      transform: "translateY(-50%)",
+      right: "11px",
+      ...rest,
+      ...clearable && {
+        cursor: "pointer",
+        onClick: (e) => {
+          const clearedValueEvent = {
+            ...e,
+            target: { ...e.target, value: "" }
+          };
+          props.onChange?.(clearedValueEvent);
+        }
+      }
+    }
+  );
+}
+RightSide.displayName = RightSideNameKey;
+function Label2(props) {
+  const { value, error, required, children, hasLeftIcon, ...rest } = props;
+  const ml = hasLeftIcon ? 6 : 1;
+  return /* @__PURE__ */ jsxs(
+    Base4,
+    {
+      gridAutoFlow: "column",
+      position: "absolute",
+      pointerEvents: "none",
+      top: "50%",
+      transformOrigin: "top left",
+      transform: "translate(0, -50%) scale(1)",
+      transition: "200ms cubic-bezier(0, 0, 0.2, 1) 0ms, .2s color ease-in-out, .2s background ease-in-out",
+      ml,
+      mr: 1,
+      px: 2,
+      py: 0.5,
+      br: 8,
+      color: "input-label-color",
+      lineHeight: 1.1,
+      css: {
+        // lift label when sibling input has focus or blurred but empty
+        "&:has(+ input:focus, + input:not(:placeholder-shown))": {
+          transformOrigin: "top left",
+          transform: "scale(0.8)",
+          top: "-10px",
+          ml,
+          color: value ? "input-label-color-lifted" : "input-label-color",
+          // only when lifted since autocomplete has lightblue background
+          bg: "input-label-bg"
+        },
+        ...error && { color: "text-alert" }
+      },
+      ...rest,
+      children: [
+        children,
+        required && "*"
+      ]
+    }
+  );
+}
+Label2.displayName = LabelNameKey2;
+function useResizeObserver(opts = {}) {
+  const onResize = opts.onResize;
+  const onResizeRef = React11__default.useRef(void 0);
+  onResizeRef.current = onResize;
+  const round = opts.round || Math.round;
+  const resizeObserverRef = React11__default.useRef(null);
+  const [size, setSize] = React11__default.useState({
+    width: void 0,
+    height: void 0
+  });
+  const didUnmount = React11__default.useRef(false);
+  React11__default.useEffect(() => {
+    didUnmount.current = false;
+    return () => {
+      didUnmount.current = true;
+    };
+  }, []);
+  const previous = React11__default.useRef({
+    width: void 0,
+    height: void 0
+  });
+  const refCallback = useResolvedElement(
+    React11__default.useCallback(
+      (element) => {
+        if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
+          resizeObserverRef.current = {
+            box: opts.box,
+            round,
+            instance: new ResizeObserver((entries) => {
+              const entry = entries[0];
+              const boxProp = opts.box === "border-box" ? "borderBoxSize" : opts.box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize";
+              const reportedWidth = extractSize(entry, boxProp, "inlineSize");
+              const reportedHeight = extractSize(entry, boxProp, "blockSize");
+              const newWidth = reportedWidth ? round(reportedWidth) : void 0;
+              const newHeight = reportedHeight ? round(reportedHeight) : void 0;
+              if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
+                const newSize = { width: newWidth, height: newHeight };
+                previous.current.width = newWidth;
+                previous.current.height = newHeight;
+                if (onResizeRef.current) {
+                  onResizeRef.current(newSize);
+                } else {
+                  if (!didUnmount.current) {
+                    setSize(newSize);
+                  }
+                }
+              }
+            })
+          };
+        }
+        resizeObserverRef.current.instance.observe(element, { box: opts.box });
+        return () => {
+          if (resizeObserverRef.current) {
+            resizeObserverRef.current.instance.unobserve(element);
+          }
+        };
+      },
+      [opts.box, round]
+    ),
+    opts.ref
+  );
+  return React11__default.useMemo(
+    () => ({
+      ref: refCallback,
+      width: size.width,
+      height: size.height
+    }),
+    // Note: when `onResize` is provided, width/height will remain whatever the
+    // state was initialized to; consumers should rely on the callback in that mode.
+    [refCallback, size.width, size.height]
+  );
+}
+function useResolvedElement(subscriber, refOrElement) {
+  const lastReportRef = React11__default.useRef(null);
+  const refOrElementRef = React11__default.useRef(null);
+  refOrElementRef.current = refOrElement;
+  const cbElementRef = React11__default.useRef(null);
+  React11__default.useEffect(() => {
+    evaluateSubscription();
+  });
+  const evaluateSubscription = React11__default.useCallback(() => {
+    const cbElement = cbElementRef.current;
+    const refOrElement2 = refOrElementRef.current;
+    const element = cbElement ? cbElement : refOrElement2 ? refOrElement2 instanceof Element ? refOrElement2 : refOrElement2.current : null;
+    if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.subscriber === subscriber) {
+      return;
+    }
+    if (lastReportRef.current && lastReportRef.current.cleanup) {
+      lastReportRef.current.cleanup();
+    }
+    lastReportRef.current = {
+      element,
+      subscriber,
+      // Only calling the subscriber, if there's an actual element to report.
+      // Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.
+      cleanup: element ? subscriber(element) : void 0
+    };
+  }, [subscriber]);
+  React11__default.useEffect(() => {
+    return () => {
+      if (lastReportRef.current && lastReportRef.current.cleanup) {
+        lastReportRef.current.cleanup();
+        lastReportRef.current = null;
+      }
+    };
+  }, []);
+  return React11__default.useCallback(
+    (element) => {
+      cbElementRef.current = element;
+      evaluateSubscription();
+    },
+    [evaluateSubscription]
+  );
+}
+function extractSize(entry, boxProp, sizeType) {
+  if (!entry[boxProp]) {
+    if (boxProp === "contentBoxSize") {
+      return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
+    }
+    return void 0;
+  }
+  return entry[boxProp][0] ? entry[boxProp][0][sizeType] : (
+    // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
+    // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
+    // @ts-ignore
+    entry[boxProp][sizeType]
+  );
+}
+var use_resize_observer_default = useResizeObserver;
+var MotionDiv3 = motionTags.div;
+var MotionBtn = motionTags.button;
+var displayName = "AccordionItem";
+var AccordionContext = React11__default.createContext({});
+function AccordionProvider(props) {
+  const [state, setState] = useImmer({
+    allowMultiple: false,
+    allowToggle: true,
+    open: []
+  });
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { setState, state }, children: props.children });
+}
+function useAccordion() {
+  const context = React11__default.useContext(AccordionContext);
+  if (context === void 0) {
+    throw new Error("useAccordion must be used within a AccordionProvider");
+  }
+  return context;
+}
+function AccordionComponent(props) {
+  const accordion = useAccordion();
+  const accordionState = accordion.state;
+  React11__default.useEffect(() => {
+    accordion.setState((draft) => {
+      draft.allowMultiple = !!props.allowMultiple;
+      draft.allowToggle = !!props.allowToggle;
+    });
+  }, [props.allowMultiple, props.allowToggle]);
+  React11__default.Children.forEach(props.children, (x) => {
+    if (typeof x.type === "function" && "displayName" in x.type && x.type.displayName !== displayName) {
+      throw new Error("Accordion can only have AccordionItems as children");
+    }
+  });
+  const children = React11__default.Children.map(props.children, (child, i) => {
+    if (!React11__default.isValidElement(child)) return child;
+    return React11__default.cloneElement(child, { idx: i });
+  });
+  React11__default.useEffect(() => {
+    if (accordionState.open.length === children.length) return;
+    const defaultOpenIdx = props.defaultOpenIdx;
+    const items = new Array(children.length).fill(null).map((x, i) => {
+      if (defaultOpenIdx) return defaultOpenIdx.includes(i);
+      else return false;
+    });
+    accordion.setState((draft) => {
+      draft.open = items;
+    });
+  }, [
+    accordionState.open.length,
+    children.length,
+    props.defaultOpenIdx?.length
+  ]);
+  return /* @__PURE__ */ jsx(MotionDiv3, { grid: true, children });
+}
+function Accordion(props) {
+  return /* @__PURE__ */ jsx(AccordionProvider, { children: /* @__PURE__ */ jsx(AccordionComponent, { ...props }) });
+}
+function Item2(props) {
+  const { ref, height } = use_resize_observer_default();
+  const { idx, children, rightIndicator, rightStatusIcon, title, ...rest } = props;
+  const accordion = useAccordion();
+  const accordionState = accordion.state;
+  const isOpen = accordionState.open.at(idx);
+  const isLastItem = idx === accordionState.open.length - 1;
+  const toggle = () => {
+    const updatedItems = accordionState.open.map((x, i) => {
+      if (accordionState.allowMultiple) return i === idx ? !x : x;
+      else return i === idx ? !x : false;
+    });
+    accordion.setState((draft) => {
+      draft.open = updatedItems;
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    MotionDiv3,
+    {
+      grid: true,
+      alignC: "start",
+      overflow: "auto",
+      style: {
+        borderBottom: isLastItem ? `1px solid ${props.borderBottomColor ?? props.borderColor ?? "var(--colors-neutral-300)!"}` : void 0,
+        borderTop: `1px solid ${props.borderTopColor ?? props.borderColor ?? "var(--colors-neutral-300)!"}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          MotionBtn,
+          {
+            flex: true,
+            py: 2,
+            rows: "between",
+            borderRadius: 0,
+            boxSizing: "border-box",
+            cursor: "pointer",
+            transition: ".2s all ease-in-out",
+            _hover: { bg: { base: "neutral.100", _dark: "neutral.700" } },
+            _active: { scale: 0.98 },
+            overflow: "auto",
+            zIndex: 1,
+            ...rest,
+            onClick: (e) => {
+              toggle();
+              props.onClick?.(e);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Fragment, { children: title }),
+              rightIndicator ? rightIndicator?.(isOpen) : /* @__PURE__ */ jsx(MotionDiv3, { grid: true, pr: ".5rem", color: "neutral.500", children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  fontSize: ".8rem",
+                  icon: isOpen ? "chevron-up" : "chevron-down"
+                }
+              ) }),
+              rightStatusIcon ? rightStatusIcon : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(MotionDiv3, { grid: true, overflowY: "auto", maxH: "100%", children: /* @__PURE__ */ jsx(
+          MotionDiv3,
+          {
+            grid: true,
+            animate: { height: isOpen ? height ?? 0 : 0 },
+            overflowY: "hidden",
+            children: /* @__PURE__ */ jsx(MotionDiv3, { grid: true, ref, children: isOpen && /* @__PURE__ */ jsx(
+              MotionDiv3,
+              {
+                grid: true,
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                children
+              }
+            ) })
+          }
+        ) })
+      ]
+    }
+  );
+}
+Item2.displayName = displayName;
+var accordion_default = Accordion;
+var MotionDiv4 = motionTags.div;
+var MotionBtn2 = motionTags.button;
+var breakpoint = ["(min-width: 600px)"];
+function DrawerComponent(props) {
+  const ref = React11__default.useRef(null);
+  const dragHandleRef = React11__default.useRef(null);
+  const [isDesktop] = useMatchMedia(breakpoint);
+  const closeFnRef = React11__default.useRef(null);
+  const dragControls = useDragControls();
+  const { open, setOpen } = useDrawer();
+  const { onClose, ...rest } = props;
+  const y = useMotionValue(0);
+  const openDrawer = () => {
+    y.stop();
+    y.set(0);
+    setOpen(true);
+  };
+  const closeDrawer = () => setOpen(false);
+  closeFnRef.current = () => {
+    closeDrawer();
+    onClose?.();
+  };
+  const onDragStart = (e, info) => {
+    console.log({ e });
+    if (isDesktop) return;
+    const noDragEl = document.querySelector("[data-no-drag]");
+    if (!noDragEl || !noDragEl.contains(e.target)) {
+      dragControls.start(e);
+    } else {
+      dragControls.componentControls.forEach((entry) => {
+        entry.stop(e, info);
+      });
+    }
+  };
+  React11__default.useEffect(() => {
+    if (props.open) openDrawer();
+    else closeFnRef.current();
+  }, [props.open]);
+  React11__default.useEffect(() => {
+    const container = ref.current;
+    if (!open || !container) return;
+    container.setAttribute("tabindex", "0");
+    const trapFocus = (e) => {
+      if (container.contains(e.relatedTarget)) return;
+      container.focus();
+    };
+    const closeOnEsc = (e) => {
+      if (e.key !== "Escape" || props.closeOnEsc === false) return;
+      console.log("[close] esc key");
+      closeFnRef.current();
+    };
+    container.addEventListener("focusout", trapFocus);
+    container.addEventListener("keydown", closeOnEsc);
+    document.body.style.overflow = "hidden";
+    return () => {
+      container.removeEventListener("focusout", trapFocus);
+      container.removeEventListener("keydown", closeOnEsc);
+      document.body.style.overflow = "auto";
+    };
+  }, [open]);
+  React11__default.useEffect(() => {
+    const unsubscribeY = y.on("change", (latestY) => {
+      if (latestY > 150) {
+        console.log("[close] latestY > 150");
+        closeFnRef.current();
+      }
+    });
+    return () => {
+      unsubscribeY();
+    };
+  }, [y]);
+  const onBackdropClick = () => {
+    const outsideClickClose = props.outsideClickClose ?? true;
+    if (!outsideClickClose) return;
+    console.log("[close] clicked backdrop");
+    closeFnRef.current();
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: open && /* @__PURE__ */ jsx(
+      Backdrop,
+      {
+        onClick: () => onBackdropClick(),
+        children: /* @__PURE__ */ jsx(
+          MotionDiv4,
+          {
+            grid: true,
+            onClick: (e) => e.stopPropagation(),
+            position: "fixed",
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            ...isDesktop ? {
+              drag: false,
+              style: void 0,
+              dragControls: null,
+              dragConstraints: void 0,
+              // style: null,
+              // dragConstraints: null,
+              height: props.height ?? "max-content!",
+              // "min(50%, 300px)",
+              width: props.width ?? "clamp(50%, 700px, 90%)",
+              pt: 6,
+              // px: 4,
+              margin: "auto",
+              borderRadius: 12,
+              zIndex: 1,
+              variants: {
+                initial: { opacity: 0, scale: 0.5 },
+                animate: {
+                  opacity: 1,
+                  scale: 1,
+                  transition: {
+                    type: "spring",
+                    damping: 20,
+                    stiffness: 300
+                  }
+                },
+                exit: {
+                  opacity: 0,
+                  scale: 0.3,
+                  transition: { type: "spring", duration: 0.45 }
+                }
+              }
+            } : {
+              w: "100vw",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              borderTopLeftRadius: 12,
+              borderTopRightRadius: 12,
+              variants: {
+                initial: { height: 0, opacity: 0 },
+                animate: {
+                  height: "auto",
+                  opacity: 1,
+                  // transition: { type: "spring", damping: 26, stiffness: 300 },
+                  transition: { type: "spring", duration: 0.3 }
+                },
+                exit: { height: 0, opacity: 0 }
+              },
+              drag: "y",
+              style: { y },
+              dragControls,
+              // @ts-ignore
+              onPointerDown: (...args) => onDragStart(args[0], args[1]),
+              // onPointerDown: (x, y) => onDragStart(x, y),
+              //   drag={hasBackdrop ? "y" : false}
+              dragElastic: 0,
+              // prevent drawer from being dragged higher than what its opened to
+              dragConstraints: { top: 0 },
+              onDragEnd: (_, drag) => {
+                if (props.drag === false) return;
+                const pageHeight = document.documentElement.scrollHeight;
+                const yCoord = drag.point.y;
+                const velocity = drag.velocity.y;
+                const releaseThreshold = 0.8;
+                const releasePct = yCoord / pageHeight;
+                if (velocity > 25 && releasePct >= releaseThreshold || velocity > 750) {
+                  props.onClose?.();
+                }
+              }
+            },
+            boxSizing: "border-box",
+            boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
+            bg: { base: "neutral.100", _dark: "neutral.900" },
+            color: "text-primary",
+            ref,
+            ...rest,
+            children: /* @__PURE__ */ jsxs(
+              MotionDiv4,
+              {
+                grid: true,
+                ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
+                children: [
+                  !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsx(
+                    MotionDiv4,
+                    {
+                      grid: true,
+                      justifySelf: "center",
+                      h: 6,
+                      w: 34,
+                      mt: "16px",
+                      mb: 4,
+                      br: 20,
+                      bg: { base: "neutral.400", _dark: "neutral.600" },
+                      cursor: props.drag ? "row-resize" : "default",
+                      ref: dragHandleRef
+                    }
+                  ),
+                  props.children
+                ]
+              }
+            )
+          },
+          "drawer"
+        )
+      }
+    ) }),
+    document.getElementById("portal")
+  );
+}
+var DrawerContext = React11__default.createContext({
+  open: false,
+  setOpen: (_value) => {
+    return;
+  }
+});
+function DrawerProvider(props) {
+  const [open, setOpen] = React11__default.useState(false);
+  const value = { open, setOpen };
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value, children: props.children });
+}
+function useDrawer() {
+  const context = React11__default.useContext(DrawerContext);
+  if (context === void 0) {
+    throw new Error("useDrawer must be used within a DrawerProvider");
+  }
+  return context;
+}
+function Drawer(props) {
+  return /* @__PURE__ */ jsx(DrawerProvider, { children: /* @__PURE__ */ jsx(DrawerComponent, { ...props }) });
+}
+function BtnGroup(props) {
+  const [isDesktop] = useMatchMedia(breakpoint);
+  const { children, ...rest } = props;
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(MotionDiv4, { flex: true, alignI: true, gap: 4, ...rest, children: React11__default.Children.toArray(children).toReversed() });
+  } else {
+    return /* @__PURE__ */ jsx(MotionDiv4, { grid: true, rowG: 14, ...props });
+  }
+}
+function CloseBtn(props) {
+  const [isDesktop] = useMatchMedia(breakpoint);
+  const { children, ...rest } = props;
+  if (isDesktop) {
+    return /* @__PURE__ */ jsx(
+      MotionBtn2,
+      {
+        transition: ".14s all ease-out",
+        _after: {
+          content: '""',
+          position: "absolute",
+          inset: 0,
+          scale: 0,
+          rounded: true,
+          transition: ".14s all ease-out",
+          zIndex: -1
+        },
+        _hover: {
+          _after: {
+            scale: 1,
+            bg: { base: "neutral.200", _dark: "neutral.800" }
+          }
+        },
+        _active: {
+          scale: 0.9,
+          _after: { scale: 0.94 },
+          bg: { base: "neutral.200", _dark: "neutral.800" }
+        },
+        position: "absolute",
+        h: 32,
+        w: 32,
+        top: -2,
+        right: 3,
+        borderRadius: 32,
+        cursor: "pointer",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "times",
+            placeC: true,
+            h: 16,
+            w: 16,
+            fontSize: 16,
+            color: { base: "neutral.400", _dark: "neutral.300" }
+          }
+        )
+      }
+    );
+  } else if (children) {
+    return /* @__PURE__ */ jsx(MotionDiv4, { grid: true, children: /* @__PURE__ */ jsx(MotionBtn2, { ...props, children: "Close" }) });
+  } else {
+    return;
+  }
+}
+function Backdrop(props) {
+  const [allowOutsideClick, setAllowOutsideClick] = React11__default.useState(true);
+  const [isDesktop] = useMatchMedia(breakpoint);
+  return /* @__PURE__ */ jsx(
+    MotionDiv4,
+    {
+      grid: true,
+      "data-backdrop": true,
+      background: "hsl(0 0% 0% / 0.3)",
+      zIndex: 1,
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: { duration: 0.2 } },
+      exit: { opacity: 0, transition: { duration: 0.3 } },
+      onAnimationStart: () => {
+        setAllowOutsideClick(false);
+      },
+      onAnimationComplete: () => {
+        setAllowOutsideClick(true);
+      },
+      position: "fixed",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: "100%",
+      placeI: isDesktop,
+      onClick: () => allowOutsideClick ? props.onClick() : void 0,
+      children: props.children
+    }
+  );
+}
+function useMatchMedia(queries, defaultValues = []) {
+  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
+  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+  const getValue = () => {
+    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
+    return matchedQueries;
+  };
+  const [value, setValue] = React11__default.useState(getValue);
+  React11__default.useLayoutEffect(() => {
+    const handler = () => setValue(getValue);
+    mediaQueryLists.forEach((mql) => mql.addListener(handler));
+    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+  }, []);
+  if (typeof window === "undefined") return initialValues;
+  return value;
+}
+var MotionDiv5 = motionTags.div;
+var TrackBgNameKey = "TrackBg";
+var TrackFillNameKey = "TrackFill";
+function Progress(props) {
+  const { children, steps, value, max: maxProp, ...rest } = props;
+  const [progress, setProgress] = React11__default.useState(0);
+  const max = maxProp ?? 100;
+  React11__default.useEffect(() => {
+    setProgress(Math.min((value ?? 0) / max, 1) * 100);
+  }, [value, max]);
+  const width = `${progress}%`;
+  const barBackground = "var(--colors-blue-500)";
+  const trackBackground = "var(--colors-neutral-300)";
+  if (typeof steps === "number") {
+    const stepSize = max / steps;
+    return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(MotionDiv5, { autoCols: "1fr", colG: 8, children: /* @__PURE__ */ jsx(AnimatePresence, { children: Array.from({ length: steps }, (_, i) => {
+      const normalizedValue = stepSize * i;
+      const isComplete = normalizedValue < (value ?? 0);
+      const defaultBgColor = trackBackground;
+      return /* @__PURE__ */ jsx(
+        MotionDiv5,
+        {
+          layout: true,
+          h: 8,
+          rounded: true,
+          initial: { scale: 0, width: 0, opacity: 0 },
+          animate: {
+            scale: 1,
+            opacity: 1,
+            width: "100%",
+            background: isComplete ? barBackground : defaultBgColor
+          },
+          exit: { scale: 0, width: 0, opacity: 0 }
+        },
+        i
+      );
+    }) }) }) });
+  }
+  const trackBgChild = findChildrenByDisplayName(
+    children,
+    TrackBgNameKey
+  );
+  const trackFillChild = findChildrenByDisplayName(
+    children,
+    TrackFillNameKey
+  );
+  const barHeight = rest.h ?? 8;
+  const bgEl = trackBgChild ? React11__default.cloneElement(trackBgChild, {
+    gridArea: "1 / 1",
+    h: barHeight,
+    w: trackBgChild.props.w ?? true
+  }) : /* @__PURE__ */ jsx(
+    MotionDiv5,
+    {
+      "data-progress-bg": true,
+      gridArea: "1 / 1",
+      rounded: true,
+      h: barHeight,
+      w: true,
+      bg: { base: "neutral.200", _dark: "neutral.700" }
+    }
+  );
+  const fillEl = trackFillChild ? React11__default.cloneElement(trackFillChild, {
+    gridArea: "1 / 1",
+    h: barHeight,
+    roundedLeft: 9999,
+    roundedRight: width === "100%" ? 9999 : void 0,
+    // Pass width via both animation and style for custom implementations
+    animate: {
+      ...trackFillChild.props.animate || {},
+      width
+    },
+    style: {
+      ...trackFillChild.props.style || {},
+      width
+    },
+    progressWidth: width,
+    progressPercent: progress,
+    progressValue: value ?? 0,
+    progressMax: max
+  }) : /* @__PURE__ */ jsx(
+    MotionDiv5,
+    {
+      "data-progress-bar": true,
+      gridArea: "1 / 1",
+      h: barHeight,
+      roundedLeft: 9999,
+      roundedRight: width === "100%" ? 9999 : void 0,
+      animate: { width, background: barBackground },
+      style: { width, background: barBackground }
+    }
+  );
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(MotionDiv5, { layout: true, grid: true, cols: "1", rows: "1", w: true, ...rest, children: [
+    bgEl,
+    fillEl
+  ] }) });
+}
+function TrackBg(props) {
+  const { h, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    MotionDiv5,
+    {
+      "data-track-bg": true,
+      gridArea: "1 / 1",
+      rounded: true,
+      h: h ?? 8,
+      w: true,
+      bg: { base: "neutral.200", _dark: "neutral.700" },
+      ...rest
+    }
+  );
+}
+TrackBg.displayName = TrackBgNameKey;
+function TrackFill(props) {
+  const { progressWidth, animate, style, h, ...rest } = props;
+  const mergedAnimate = progressWidth ? animate && typeof animate === "object" && !Array.isArray(animate) ? { ...animate, width: progressWidth } : { width: progressWidth } : animate;
+  const mergedStyle = progressWidth ? Object.assign({}, style, { width: progressWidth }) : style;
+  return /* @__PURE__ */ jsx(
+    MotionDiv5,
+    {
+      "data-track-fill": true,
+      gridArea: "1 / 1",
+      rounded: true,
+      h: h ?? 8,
+      bg: { base: "neutral.200", _dark: "neutral.700" },
+      ...rest,
+      animate: mergedAnimate,
+      style: mergedStyle
+    }
+  );
+}
+TrackFill.displayName = TrackFillNameKey;
+var Base5 = base;
+var TooltipContainer = React11__default.forwardRef(function TooltipContainer2(props, ref) {
+  const { children, className, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Base5,
+    {
+      className,
+      style,
+      ref,
+      role: "tooltip",
+      ...rest,
+      children
+    }
+  );
+});
+function Tooltip(props) {
+  const {
+    children,
+    content,
+    placement = "auto",
+    interactive = true,
+    disabled = false,
+    showArrow = true,
+    follow = false,
+    offsetVal = 8,
+    delay = 80,
+    className
+  } = props;
+  const referenceRef = React11__default.useRef(null);
+  const arrowRef = React11__default.useRef(null);
+  const [open, setOpen] = React11__default.useState(false);
+  const { x, y, refs, strategy, middlewareData, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: placement === "auto" ? "top" : placement,
+    middleware: [
+      offset(offsetVal),
+      flip(),
+      shift({ padding: 6 }),
+      arrow({ element: arrowRef })
+    ],
+    whileElementsMounted: autoUpdate,
+    strategy: "fixed"
+  });
+  const hover = useHover(context, {
+    delay: { open: delay, close: 120 },
+    handleClose: safePolygon(),
+    move: true
+  });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    dismiss,
+    role
+  ]);
+  const referenceProps = getReferenceProps({});
+  React11__default.useEffect(() => {
+    if (!follow || !referenceRef.current) return;
+    const el = referenceRef.current;
+    const onMove = (e) => {
+      const virtualElement = {
+        getBoundingClientRect: () => new DOMRect(e.clientX, e.clientY, 0, 0),
+        contextElement: document.body
+      };
+      refs.setReference(virtualElement);
+    };
+    el.addEventListener("pointermove", onMove);
+    return () => {
+      el.removeEventListener("pointermove", onMove);
+    };
+  }, [follow, refs]);
+  const arrowX = middlewareData?.arrow?.x ?? 0;
+  const arrowY = middlewareData?.arrow?.y ?? 0;
+  const side = context.placement || "top";
+  const ARROW_SIZE = 10;
+  const anchorOffset = Math.max(ARROW_SIZE / 2 - 1, 3);
+  const arrowAnchorStyle = side.startsWith("top") ? { bottom: -anchorOffset } : side.startsWith("bottom") ? { top: -anchorOffset } : side.startsWith("left") ? { right: -anchorOffset } : { left: -anchorOffset };
+  const arrowStyle = side.startsWith("top") || side.startsWith("bottom") ? { left: arrowX || void 0, ...arrowAnchorStyle } : { top: arrowY || void 0, ...arrowAnchorStyle };
+  const transformOrigin = side.startsWith("top") ? "center bottom" : side.startsWith("bottom") ? "center top" : side.startsWith("left") ? "right center" : side.startsWith("right") ? "left center" : "center";
+  const childrenArray = React11__default.Children.toArray(children);
+  const hasMultipleChildren = childrenArray.length > 1;
+  let child;
+  if (hasMultipleChildren) {
+    child = /* @__PURE__ */ jsx("div", { style: { display: "inline-block" }, children });
+  } else {
+    const only = React11__default.Children.only(children);
+    const isDomElement = React11__default.isValidElement(only) && typeof only.type === "string";
+    child = isDomElement ? only : (
+      // Ensure the wrapper reliably captures mouseenter/pointerenter and can contain block elements
+      /* @__PURE__ */ jsx("div", { style: { display: "inline-block" }, children: only })
+    );
+  }
+  const mergedRef = (node) => {
+    referenceRef.current = node;
+    if (!follow) {
+      refs.setReference(node);
+    }
+    const childWithRef = child;
+    const originalRef = childWithRef?.ref;
+    if (typeof originalRef === "function") originalRef(node);
+    else if (originalRef && "current" in originalRef)
+      originalRef.current = node;
+  };
+  const refAttrs = referenceProps;
+  const cloned = React11__default.cloneElement(
+    child,
+    {
+      ...refAttrs,
+      ref: mergedRef,
+      "data-tooltip-ref": true
+    }
+  );
+  if (disabled) return /* @__PURE__ */ jsx(Fragment, { children: cloned });
+  const [isMounted, setIsMounted] = React11__default.useState(false);
+  const closeTimerRef = React11__default.useRef(
+    null
+  );
+  React11__default.useEffect(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (open) {
+      setIsMounted(true);
+    } else {
+      closeTimerRef.current = setTimeout(() => {
+        setIsMounted(false);
+        closeTimerRef.current = null;
+      }, 160);
+    }
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [open]);
+  let arrowEl = null;
+  let floatingNode = null;
+  const findRoleTooltipElement = (node) => {
+    if (!React11__default.isValidElement(node)) return null;
+    const el = node;
+    if (el.props?.role === "tooltip") return el;
+    const kids = el.props?.children;
+    if (!kids) return null;
+    const arr = React11__default.Children.toArray(kids);
+    for (const c of arr) {
+      if (React11__default.isValidElement(c) && c.props?.role === "tooltip") {
+        return c;
+      }
+    }
+    return null;
+  };
+  const isCustomTooltip = React11__default.isValidElement(content) && !!(content.type && content.type.isBlockTooltipContainer);
+  const customEl = isCustomTooltip ? content : findRoleTooltipElement(content);
+  const containerRef = React11__default.useRef(null);
+  const [containerBg, setContainerBg] = React11__default.useState();
+  React11__default.useEffect(() => {
+    if (!(open || isMounted)) return;
+    const el = containerRef.current;
+    if (!el) return;
+    try {
+      const cs = getComputedStyle(el);
+      const bg = cs.backgroundColor;
+      if (bg && bg !== "transparent" && bg !== "rgba(0, 0, 0, 0)") {
+        setContainerBg(bg);
+      } else {
+        setContainerBg("rgba(20,20,20,0.95)");
+      }
+    } catch {
+    }
+  }, [open, isMounted, isCustomTooltip]);
+  if (isCustomTooltip) {
+    const el = customEl;
+    const childProps = el.props || {};
+    const floatingProps = getFloatingProps({});
+    const defaultStyles = {};
+    if (childProps.bg === void 0 && childProps.background === void 0 && !(childProps.style?.background || childProps.style?.backgroundColor)) {
+      defaultStyles.background = "rgba(20,20,20,0.95)";
+    }
+    if (childProps.color === void 0 && !childProps.style?.color) {
+      defaultStyles.color = "white";
+    }
+    const hasPadding = childProps.p !== void 0 || childProps.padding !== void 0 || childProps.px !== void 0 || childProps.py !== void 0 || childProps.paddingLeft !== void 0 || childProps.paddingRight !== void 0 || childProps.paddingTop !== void 0 || childProps.paddingBottom !== void 0 || childProps.style?.padding !== void 0 || childProps.style?.paddingLeft !== void 0 || childProps.style?.paddingRight !== void 0 || childProps.style?.paddingTop !== void 0 || childProps.style?.paddingBottom !== void 0;
+    if (!hasPadding) {
+      defaultStyles.paddingLeft = "10px";
+      defaultStyles.paddingRight = "10px";
+      defaultStyles.paddingTop = "8px";
+      defaultStyles.paddingBottom = "8px";
+    }
+    if (childProps.borderRadius === void 0 && childProps.rounded === void 0 && childProps.style?.borderRadius === void 0) {
+      defaultStyles.borderRadius = "6px";
+    }
+    if (childProps.boxShadow === void 0 && childProps.shadow === void 0 && childProps.style?.boxShadow === void 0) {
+      defaultStyles.boxShadow = "0 6px 18px rgba(0,0,0,0.18)";
+    }
+    if (childProps.fontSize === void 0 && childProps.style?.fontSize === void 0) {
+      defaultStyles.fontSize = "13px";
+    }
+    const mergedClassName = [childProps.className, className ?? "tooltip-root"].filter(Boolean).join(" ");
+    const mergedStyle = { ...defaultStyles, ...childProps.style };
+    ({
+      ...childProps,
+      ...floatingProps});
+    Object.keys(floatingProps).forEach((key) => {
+      if (key.startsWith("on") && typeof floatingProps[key] === "function") {
+        floatingProps[key];
+        childProps[key];
+      }
+    });
+    const originalRef = el.ref;
+    const mergedFloatingRef = (node) => {
+      refs.setFloating(node);
+      if (typeof originalRef === "function") originalRef(node);
+      else if (originalRef && typeof originalRef === "object")
+        originalRef.current = node;
+    };
+    arrowEl = showArrow ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          arrowRef.current = node;
+        },
+        style: {
+          position: "absolute",
+          width: ARROW_SIZE,
+          height: ARROW_SIZE,
+          transform: "rotate(45deg) translateZ(0)",
+          background: containerBg ?? "rgba(20,20,20,0.95)",
+          ...arrowStyle
+        },
+        "data-arrow": true
+      }
+    ) : null;
+    floatingNode = /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: mergedFloatingRef,
+        ...floatingProps,
+        className,
+        style: {
+          // Required runtime positioning (highest precedence - cannot be overridden)
+          position: strategy,
+          left: x || 0,
+          top: y || 0,
+          transformOrigin,
+          pointerEvents: (open || isMounted) && interactive ? "auto" : "none",
+          zIndex: 9999,
+          maxWidth: 320,
+          display: "inline-block",
+          overflow: "visible"
+        },
+        initial: { opacity: 0, scale: 0.92 },
+        animate: { opacity: open ? 1 : 0, scale: open ? 1 : 0.92 },
+        transition: { type: "spring", stiffness: 520, damping: 34 },
+        role: "tooltip",
+        children: [
+          (() => {
+            const originalChildRef = el.ref;
+            const mergedChildRef = (node) => {
+              containerRef.current = node;
+              if (typeof originalChildRef === "function") originalChildRef(node);
+              else if (originalChildRef && typeof originalChildRef === "object")
+                originalChildRef.current = node;
+            };
+            return React11__default.cloneElement(
+              el,
+              {
+                // Spread childProps first
+                ...childProps,
+                ref: mergedChildRef,
+                // Then override className with merged value (must be after ...childProps)
+                className: mergedClassName,
+                style: {
+                  // Apply inline defaults first, then user styles, then position
+                  ...mergedStyle,
+                  position: "relative"
+                }
+              },
+              childProps.children
+            );
+          })(),
+          arrowEl
+        ]
+      }
+    );
+  } else {
+    arrowEl = showArrow ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          arrowRef.current = node;
+        },
+        style: {
+          position: "absolute",
+          width: ARROW_SIZE,
+          height: ARROW_SIZE,
+          transform: "rotate(45deg) translateZ(0)",
+          background: containerBg ?? "rgba(20,20,20,0.95)",
+          ...arrowStyle
+        },
+        "data-arrow": true
+      }
+    ) : null;
+    floatingNode = /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: (node) => {
+          refs.setFloating(node);
+        },
+        ...getFloatingProps({}),
+        className,
+        role: "tooltip",
+        style: {
+          position: strategy,
+          left: x || 0,
+          top: y || 0,
+          transformOrigin,
+          pointerEvents: (open || isMounted) && interactive ? "auto" : "none",
+          zIndex: 9999,
+          maxWidth: 320,
+          display: "inline-block",
+          overflow: "visible"
+        },
+        initial: { opacity: 0, scale: 0.92 },
+        animate: { opacity: open ? 1 : 0, scale: open ? 1 : 0.92 },
+        transition: { type: "spring", stiffness: 520, damping: 34 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Base5,
+            {
+              role: "tooltip",
+              style: { position: "relative" },
+              bg: "rgba(20,20,20,0.95)",
+              color: "white",
+              px: "10px",
+              py: "8px",
+              borderRadius: 6,
+              boxShadow: "0 6px 18px rgba(0,0,0,0.18)",
+              fontSize: 13,
+              ref: containerRef,
+              children: content
+            }
+          ),
+          arrowEl
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    cloned,
+    (open || isMounted) && createPortal(
+      floatingNode,
+      props.portalContainer || document.getElementById("portal") || document.body
+    )
+  ] });
+}
+var Base6 = base;
+var Svg = motionTags.svg;
+var CheckboxBtn = motionTags.button;
+function Checkbox(props) {
+  const { children, onClick, ...rest } = props;
+  const [checked, setChecked] = React11__default.useState(false);
+  const [indeterminate, setIndeterminate] = React11__default.useState(false);
+  React11__default.useEffect(() => {
+    setChecked(!!rest.checked);
+  }, [rest.checked]);
+  React11__default.useEffect(() => {
+    setIndeterminate(!!rest.indeterminate);
+  }, [rest.indeterminate]);
+  const isIndeterminate = typeof rest.indeterminate === "boolean";
+  return /* @__PURE__ */ jsxs(
+    Base6,
+    {
+      flex: true,
+      alignI: true,
+      gap: 2,
+      cursor: "pointer",
+      userSelect: "none",
+      ...rest,
+      onClick: () => rest.onChecked?.(!rest.checked),
+      children: [
+        /* @__PURE__ */ jsx(
+          CheckboxBtn,
+          {
+            "data-checkbox": true,
+            ...checked && { "data-checked": checked },
+            w: "24px",
+            p: 1,
+            br: 6,
+            cursor: "pointer",
+            boxSizing: "border-box",
+            outline: "none !important",
+            bg: { base: "neutral.200", _dark: "neutral.700" },
+            _checked: { bg: "blue.500", transition: ".14s background ease-out" },
+            _active: { scale: 0.9 },
+            color: "neutral.100",
+            transition: ".14s background ease-out .1s",
+            _focus: { boxShadow: "0 0 0 6px hsl(0 0% 100% / 0.05)" },
+            children: /* @__PURE__ */ jsx(
+              Svg,
+              {
+                fill: "none",
+                width: "100%",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                strokeWidth: 4,
+                children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "wait", children: [
+                  isIndeterminate && indeterminate && /* @__PURE__ */ jsx(
+                    motion.path,
+                    {
+                      initial: { scaleX: 0 },
+                      animate: { scaleX: 1 },
+                      exit: { scaleX: 0 },
+                      transition: {
+                        type: "tween",
+                        ease: "easeOut",
+                        duration: 0.3,
+                        delay: 0.2
+                      },
+                      strokeLinecap: "round",
+                      d: "M6 12 L18 12"
+                    },
+                    "indeterminate"
+                  ),
+                  !indeterminate && checked && /* @__PURE__ */ jsx(
+                    motion.path,
+                    {
+                      initial: { pathLength: 0 },
+                      animate: { pathLength: 1 },
+                      exit: { pathLength: 0 },
+                      transition: { type: "tween", ease: "easeOut", duration: 0.2 },
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M5 13l4 4L19 7"
+                    },
+                    "check"
+                  )
+                ] })
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+var Hr = motionTags.hr;
+var Skeleton = motionTags.div;
+function Block(props) {
+  const anyProps = props;
+  const {
+    _motion,
+    sheenInterval = "1.4s",
+    children,
+    tooltip,
+    ...rest
+  } = anyProps;
+  const fileInputRef = React11.useRef(null);
+  const isLoading = anyProps.isLoading;
+  const multiple = anyProps.multiple;
+  const is = anyProps.is;
+  const extract = extractElType(is, anyProps);
+  const [Comp, initialStyles] = extractElAndStyles(extract, props);
+  const icons = getIcons(extract, props);
+  let component = /* @__PURE__ */ jsx(MotionConfig, { transition: _motion, children: extract.isHr ? /* @__PURE__ */ jsx(Hr, { w: true, py: 2, color: "neutral.300", ...anyProps }) : extract.isProgress ? /* @__PURE__ */ jsx(Progress, { ...anyProps }) : extract.isDrawer ? /* @__PURE__ */ jsx(Drawer, { ...anyProps }) : extract.isAccordion ? /* @__PURE__ */ jsx(accordion_default, { ...anyProps }) : extract.isMenu ? /* @__PURE__ */ jsx(Menu, { ...anyProps }) : extract.isSwitch ? /* @__PURE__ */ jsx(switch_default, { ...anyProps }) : extract.isRadio ? /* @__PURE__ */ jsx(Radio, { ...anyProps }) : extract.isInput ? /* @__PURE__ */ jsx(Input, { ...anyProps }) : extract.isTextarea ? /* @__PURE__ */ jsx(Textarea, { ...anyProps }) : extract.isCheckbox ? /* @__PURE__ */ jsx(Checkbox, { ...anyProps }) : extract.isSkeleton ? /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      ...anyProps.as === "circle" ? { br: "50%", size: 40 } : {
+        height: 20,
+        width: "100%",
+        backgroundSize: "200% 100%",
+        overflow: "hidden"
+      },
+      backgroundColor: { base: "neutral.300", _dark: "neutral.700" },
+      backgroundImage: {
+        base: `linear-gradient(
+          		90deg,
+          		hsla(220, 8.94%, 66.08%, 0) 0%,
+          		{colors.neutral.100/80} 50%,
+          		hsla(220, 8.94%, 66.08%, 0) 100%
+          	)`,
+        _dark: `linear-gradient(
+          		90deg,
+          		hsla(220, 8.94%, 66.08%, 0) 0%,
+          		{colors.neutral.500/80} 50%,
+          		hsla(220, 8.94%, 66.08%, 0) 100%
+          	)`
+      },
+      backgroundRepeat: "no-repeat",
+      backgroundSize: "200% 100%",
+      animation: `sheen ${sheenInterval} infinite linear`,
+      ...anyProps
+    }
+  ) : extract.filepickerAllowed ? /* @__PURE__ */ jsxs("div", { onClick: () => fileInputRef.current?.click(), children: [
+    React11.createElement(
+      Comp,
+      {
+        cursor: "pointer",
+        ...isLoading && { "data-loading": isLoading },
+        onContextMenu: (e) => e.preventDefault(),
+        ...initialStyles
+      },
+      icons.leftIcon,
+      children,
+      icons.rightIcon
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        multiple,
+        accept: anyProps.accept,
+        style: { display: "none" },
+        onChange: async (e) => {
+          const files = Array.from(e.target.files ?? []);
+          const selectedFiles = files.length ? await prepareFiles(files) : [];
+          if (anyProps.onChange) {
+            anyProps.onChange(selectedFiles);
+          }
+        },
+        value: ""
+      }
+    )
+  ] }) : React11.createElement(
+    Comp,
+    {
+      ...isLoading && { "data-loading": isLoading },
+      onContextMenu: (e) => e.preventDefault(),
+      ...initialStyles
+    },
+    icons.leftIcon,
+    children,
+    icons.rightIcon
+  ) });
+  if (tooltip) {
+    const tooltipContent = typeof tooltip === "boolean" ? rest.content : tooltip;
+    const tooltipProps = { ...rest, content: tooltipContent };
+    component = /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, children: component });
+  }
+  if (rest.portal) {
+    const portalContainer = rest.portalContainer;
+    const fallback = document.getElementById("portal") || document.body;
+    const container = portalContainer ?? fallback;
+    return createPortal(
+      component,
+      container
+    );
+  } else {
+    return component;
+  }
+}
+TooltipContainer.isBlockTooltipContainer = true;
+MenuContainer.isBlockMenuContainer = true;
+var TooltipNamespace = { Container: TooltipContainer };
+var MenuNamespace = { Container: MenuContainer };
+var InputNamespace = {
+  Label: Label2,
+  RightSide,
+  LeftIcon
+};
+var TextareaNamespace = {
+  Label
+};
+var RadioNamespace = {
+  Item
+};
+var SwitchNamespace = { Track, Thumb };
+var AccordionNamespace = {
+  Item: Item2
+};
+var DrawerNamespace = {
+  CloseBtn,
+  BtnGroup
+};
+var ProgressNamespace = {
+  TrackFill,
+  TrackBg
+};
+var CompoundBlock = Object.assign(Block, {
+  Accordion: AccordionNamespace,
+  Progress: ProgressNamespace,
+  Textarea: TextareaNamespace,
+  Tooltip: TooltipNamespace,
+  Switch: SwitchNamespace,
+  Drawer: DrawerNamespace,
+  Menu: MenuNamespace,
+  Input: InputNamespace,
+  Radio: RadioNamespace
+});
+var block_default = CompoundBlock;
+
+// src/react/index.ts
+function useDebounce(value, delay = 500) {
+  const [debouncedValue, setDebouncedValue] = React11__default.useState(value);
+  React11__default.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+function useThrottle(value, interval = 500) {
+  const [throttledValue, setThrottledValue] = React11__default.useState(value);
+  const lastUpdate = React11__default.useRef(0);
+  const timeoutRef = React11__default.useRef(null);
+  React11__default.useEffect(() => {
+    const now = Date.now();
+    const timeSinceLastUpdate = now - lastUpdate.current;
+    if (timeSinceLastUpdate >= interval) {
+      setThrottledValue(value);
+      lastUpdate.current = now;
+    } else {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        setThrottledValue(value);
+        lastUpdate.current = Date.now();
+      }, interval - timeSinceLastUpdate);
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [value, interval]);
+  return throttledValue;
+}
+function useMatchMedia2(queries, defaultValues = []) {
+  const initialValues = defaultValues.length ? defaultValues : Array(queries.length).fill(false);
+  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+  const getValue = () => {
+    const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
+    return matchedQueries;
+  };
+  const [value, setValue] = React11__default.useState(getValue);
+  React11__default.useLayoutEffect(() => {
+    const handler = () => setValue(getValue);
+    mediaQueryLists.forEach((mql) => mql.addListener(handler));
+    return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+  }, []);
+  if (typeof window === "undefined") return initialValues;
+  return value;
+}
+
+export { block_default as default, useDebounce, useMatchMedia2 as useMatchMedia, useThrottle };