qstd 0.2.7 → 0.2.8

package/dist/react/index.js

@@ -1,6 +1,6 @@
 import "./index.css";
-import * as React11 from 'react';
-import React11__default, { forwardRef, useMemo, createElement } from 'react';
+import * as React12 from 'react';
+import React12__default, { forwardRef, useMemo, createElement } 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';
@@ -8,11 +8,11 @@ import { BeatLoader } from 'react-spinners';
 import { Oval, ThreeDots, TailSpin, RotatingLines } from 'react-loader-spinner';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { nanoid } from 'nanoid';
+import { fas } from '@fortawesome/free-solid-svg-icons';
 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
@@ -607,14 +607,14 @@ function Menu(props) {
     trigger,
     ...rest
   } = props;
-  const hoverTimeoutRef = React11__default.useRef(null);
-  const [isOpen, setOpen] = React11__default.useState(isOpenControlled ?? false);
+  const hoverTimeoutRef = React12__default.useRef(null);
+  const [isOpen, setOpen] = React12__default.useState(isOpenControlled ?? false);
   const onOpenChange = (open) => {
     const newOpenState = typeof open === "function" ? open(isOpen) : open;
     props.onOpenOrClose?.(newOpenState);
     setOpen(newOpenState);
   };
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (typeof isOpenControlled !== "boolean") return;
     setOpen(isOpenControlled);
   }, [isOpenControlled]);
@@ -630,7 +630,10 @@ function Menu(props) {
     open: isOpen,
     onOpenChange,
     middleware: [
-      offset({ crossAxis: props.offset?.x, mainAxis: props.offset?.y }),
+      offset({
+        ...props.offset?.x !== void 0 && { crossAxis: props.offset.x },
+        ...props.offset?.y !== void 0 && { mainAxis: props.offset.y }
+      }),
       flip({ fallbackPlacements: ["top-end"] }),
       shift({ padding: 5 }),
       hide({ strategy: "referenceHidden" })
@@ -686,11 +689,11 @@ function Menu(props) {
     },
     isOpen
   );
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (!hideData?.referenceHidden) return;
     closeMenuImmediate();
   }, [hideData, closeMenuImmediate]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     return () => {
       if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
     };
@@ -716,10 +719,10 @@ function Menu(props) {
     onMouseLeave: handleMenuMouseLeave
   } : {};
   const transformOrigin = floatingContext.placement.startsWith("top") ? "bottom left" : "top left";
-  const childArray = React11__default.Children.toArray(children);
+  const childArray = React12__default.Children.toArray(children);
   let customContainerEl = null;
   for (const c of childArray) {
-    if (React11__default.isValidElement(c)) {
+    if (React12__default.isValidElement(c)) {
       const anyType = c.type;
       if (c.props?.["data-menu-container"] || anyType?.isBlockMenuContainer) {
         customContainerEl = c;
@@ -748,7 +751,7 @@ function Menu(props) {
       ...restStyle || {}
     };
     const mergedClassName = [defaultsClassName, childProps.className].filter(Boolean).join(" ");
-    const contentNode = React11__default.cloneElement(
+    const contentNode = React12__default.cloneElement(
       customContainerEl,
       {
         // Defaults are now in mergedClassName via css()
@@ -834,7 +837,7 @@ function Menu(props) {
   );
 }
 function useOutsideClick(ref, handler, enabled = true) {
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
@@ -941,9 +944,9 @@ var prepareFiles = async (acceptedFiles) => {
   );
 };
 var findChildrenByDisplayName = (children, displayName2) => {
-  return React11__default.Children.toArray(children).find(
+  return React12__default.Children.toArray(children).find(
     (child) => {
-      if (React11__default.isValidElement(child)) {
+      if (React12__default.isValidElement(child)) {
         const childType = child.type;
         return childType.displayName === displayName2;
       } else {
@@ -1076,7 +1079,7 @@ function getIcon(position, Icon2, props) {
         const Cmp = loadingIconsMap[chosen];
         const sizePx = typeof loadingIconSize === "number" ? `${loadingIconSize}px` : "12px";
         return Cmp({ width: sizePx, height: sizePx });
-      } else if (React11__default.isValidElement(chosen)) {
+      } else if (React12__default.isValidElement(chosen)) {
         return chosen;
       } else if (typeof chosen === "function") {
         return chosen();
@@ -1172,9 +1175,9 @@ var TrackNameKey = "Track";
 var ThumbNameKey = "Thumb";
 var Button = motionTags.button;
 var Base = motionTags.div;
-var SwitchContext = React11__default.createContext(null);
+var SwitchContext = React12__default.createContext(null);
 var useSwitchContext = () => {
-  const context2 = React11__default.useContext(SwitchContext);
+  const context2 = React12__default.useContext(SwitchContext);
   if (!context2) {
     throw new Error("Switch compound components must be used within Switch");
   }
@@ -1190,16 +1193,16 @@ function Switch(props) {
     _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 [x, setX] = React12__default.useState(0);
+  const [pressed, setPressed] = React12__default.useState(false);
+  const [growThumb, setGrowThumb] = React12__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(() => {
+  React12__default.useEffect(() => {
     if (pressed && !disabled) {
       stopwatch.start();
     } else {
@@ -1207,12 +1210,12 @@ function Switch(props) {
       stopwatch.clear();
     }
   }, [pressed, disabled]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (stopwatch.time > 200) {
       setGrowThumb(true);
     }
   }, [stopwatch.time]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     setX(checked ? checkedPosition : 0);
   }, [checked, checkedPosition]);
   const toggle = () => {
@@ -1277,10 +1280,10 @@ function Switch(props) {
     children,
     ThumbNameKey
   );
-  const trackElement = track ? React11__default.cloneElement(track, {
+  const trackElement = track ? React12__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 }) });
+    children: thumb ? React12__default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsx(Thumb, { _motion })
+  }) : /* @__PURE__ */ jsx(Track, { _motion, children: thumb ? React12__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,
     {
@@ -1405,10 +1408,10 @@ function Thumb(props) {
 Track.displayName = TrackNameKey;
 Thumb.displayName = ThumbNameKey;
 function useStopwatch(props = {}) {
-  const [active, setActive] = React11__default.useState(false);
-  const [time, setTime] = React11__default.useState(0);
+  const [active, setActive] = React12__default.useState(false);
+  const [time, setTime] = React12__default.useState(0);
   const timeInterval = props?.interval ?? 10;
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     let interval = null;
     if (active) {
       interval = setInterval(() => {
@@ -1428,7 +1431,7 @@ function useStopwatch(props = {}) {
   return { time, start, stop, clear };
 }
 var switch_default = Switch;
-var RadioContext = React11__default.createContext(null);
+var RadioContext = React12__default.createContext(null);
 var Base2 = base;
 var MotionDiv2 = motionTags.div;
 function Radio(props) {
@@ -1443,14 +1446,14 @@ function Radio(props) {
     onKeyDown: onKeyDownProp,
     ...rest
   } = props;
-  const groupId = React11__default.useId();
+  const groupId = React12__default.useId();
   const isControlled = controlledValue !== void 0;
-  const [uncontrolled, setUncontrolled] = React11__default.useState(
+  const [uncontrolled, setUncontrolled] = React12__default.useState(
     defaultValue
   );
   const selectedValue = isControlled ? controlledValue : uncontrolled;
-  const itemsRef = React11__default.useRef([]);
-  const [activeId, setActiveId] = React11__default.useState("");
+  const itemsRef = React12__default.useRef([]);
+  const [activeId, setActiveId] = React12__default.useState("");
   const setSelectedValue = (val) => {
     if (!isControlled) setUncontrolled(val);
     onChange?.(val);
@@ -1503,7 +1506,7 @@ function Radio(props) {
       setActiveId(found.id);
     }
   };
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (!selectedValue) return;
     const selected = itemsRef.current.find((x) => x.value === selectedValue);
     if (selected && !selected.disabled) setActiveId(selected.id);
@@ -1544,7 +1547,7 @@ function Radio(props) {
       },
       children: [
         (options ?? []).map(
-          (opt) => renderOption ? /* @__PURE__ */ jsx(React11__default.Fragment, { children: renderOption(opt) }, opt.value) : /* @__PURE__ */ jsx(
+          (opt) => renderOption ? /* @__PURE__ */ jsx(React12__default.Fragment, { children: renderOption(opt) }, opt.value) : /* @__PURE__ */ jsx(
             Item,
             {
               value: opt.value,
@@ -1574,7 +1577,7 @@ function Item(props) {
     onBlur: onBlurProp,
     ...rest
   } = props;
-  const ctx = React11__default.useContext(RadioContext);
+  const ctx = React12__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 }),
@@ -1593,22 +1596,22 @@ function Item(props) {
   } = ctx;
   const disabled = !!(groupDisabled || itemDisabled);
   const id = `radio-item-${groupId}-${value}`;
-  const ref = React11__default.useRef(null);
-  React11__default.useEffect(() => {
+  const ref = React12__default.useRef(null);
+  React12__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 [isFocused, setIsFocused] = React12__default.useState(false);
   const shouldUseGrid = gridProp || !!colsProp;
   const renderLabel = () => {
-    const onlyChild = React11__default.Children.count(children) === 1 ? React11__default.Children.toArray(children)[0] : null;
+    const onlyChild = React12__default.Children.count(children) === 1 ? React12__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(
+    if (React12__default.isValidElement(onlyChild)) {
+      return React12__default.cloneElement(
         onlyChild,
         {
           ...onlyChild.props || {},
@@ -1728,7 +1731,7 @@ function Item(props) {
 var LabelNameKey = "Label";
 var Base3 = base;
 var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? React11__default.useLayoutEffect : React11__default.useEffect;
+var useIsomorphicLayoutEffect = isBrowser ? React12__default.useLayoutEffect : React12__default.useEffect;
 function pick(props, obj) {
   return props.reduce(
     (acc, prop) => {
@@ -1860,16 +1863,16 @@ function Textarea(props) {
     ...rest
   } = props;
   const isControlled = rest.value !== void 0;
-  const libRef = React11__default.useRef(null);
+  const libRef = React12__default.useRef(null);
   const ref = assignRefs(libRef, userRef);
-  const heightRef = React11__default.useRef(0);
-  const [_value, _setValue] = React11__default.useState("");
+  const heightRef = React12__default.useRef(0);
+  const [_value, _setValue] = React12__default.useState("");
   const value = props.value ?? _value;
   const label = findChildrenByDisplayName(
     children,
     LabelNameKey
   );
-  const labelWithProps = label ? React11__default.cloneElement(label, {
+  const labelWithProps = label ? React12__default.cloneElement(label, {
     required: props.required,
     value: props.value,
     error
@@ -1900,20 +1903,20 @@ function Textarea(props) {
   useIsomorphicLayoutEffect(() => {
     resizeTextarea();
   }, [rest.value, rest.placeholder, minRows, maxRows]);
-  React11__default.useEffect(() => {
+  React12__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(() => {
+  React12__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(() => {
+  React12__default.useEffect(() => {
     const node = libRef.current;
     const form = node?.form;
     if (!node || !form || isControlled) return;
@@ -1930,7 +1933,7 @@ function Textarea(props) {
   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(
+      /* @__PURE__ */ jsx(MotionConfig, { ..._motion && { transition: _motion }, children: /* @__PURE__ */ jsx(
         Txtarea,
         {
           ref,
@@ -2065,13 +2068,13 @@ function Input(props) {
     children,
     RightSideNameKey
   );
-  const labelWithProps = label ? React11__default.cloneElement(label, {
+  const labelWithProps = label ? React12__default.cloneElement(label, {
     hasLeftIcon: !!leftIcon,
     required: props.required,
     value: props.value,
     error
   }) : null;
-  const rightSideWithProps = rightSide ? React11__default.cloneElement(rightSide, {
+  const rightSideWithProps = rightSide ? React12__default.cloneElement(rightSide, {
     onChange: props.onChange,
     value: props.value
   }) : null;
@@ -2196,27 +2199,27 @@ function Label2(props) {
 Label2.displayName = LabelNameKey2;
 function useResizeObserver(opts = {}) {
   const onResize = opts.onResize;
-  const onResizeRef = React11__default.useRef(void 0);
+  const onResizeRef = React12__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({
+  const resizeObserverRef = React12__default.useRef(null);
+  const [size, setSize] = React12__default.useState({
     width: void 0,
     height: void 0
   });
-  const didUnmount = React11__default.useRef(false);
-  React11__default.useEffect(() => {
+  const didUnmount = React12__default.useRef(false);
+  React12__default.useEffect(() => {
     didUnmount.current = false;
     return () => {
       didUnmount.current = true;
     };
   }, []);
-  const previous = React11__default.useRef({
+  const previous = React12__default.useRef({
     width: void 0,
     height: void 0
   });
   const refCallback = useResolvedElement(
-    React11__default.useCallback(
+    React12__default.useCallback(
       (element) => {
         if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
           resizeObserverRef.current = {
@@ -2255,7 +2258,7 @@ function useResizeObserver(opts = {}) {
     ),
     opts.ref
   );
-  return React11__default.useMemo(
+  return React12__default.useMemo(
     () => ({
       ref: refCallback,
       width: size.width,
@@ -2267,14 +2270,14 @@ function useResizeObserver(opts = {}) {
   );
 }
 function useResolvedElement(subscriber, refOrElement) {
-  const lastReportRef = React11__default.useRef(null);
-  const refOrElementRef = React11__default.useRef(null);
+  const lastReportRef = React12__default.useRef(null);
+  const refOrElementRef = React12__default.useRef(null);
   refOrElementRef.current = refOrElement;
-  const cbElementRef = React11__default.useRef(null);
-  React11__default.useEffect(() => {
+  const cbElementRef = React12__default.useRef(null);
+  React12__default.useEffect(() => {
     evaluateSubscription();
   });
-  const evaluateSubscription = React11__default.useCallback(() => {
+  const evaluateSubscription = React12__default.useCallback(() => {
     const cbElement = cbElementRef.current;
     const refOrElement2 = refOrElementRef.current;
     const element = cbElement ? cbElement : refOrElement2 ? refOrElement2 instanceof Element ? refOrElement2 : refOrElement2.current : null;
@@ -2292,7 +2295,7 @@ function useResolvedElement(subscriber, refOrElement) {
       cleanup: element ? subscriber(element) : void 0
     };
   }, [subscriber]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     return () => {
       if (lastReportRef.current && lastReportRef.current.cleanup) {
         lastReportRef.current.cleanup();
@@ -2300,7 +2303,7 @@ function useResolvedElement(subscriber, refOrElement) {
       }
     };
   }, []);
-  return React11__default.useCallback(
+  return React12__default.useCallback(
     (element) => {
       cbElementRef.current = element;
       evaluateSubscription();
@@ -2326,7 +2329,7 @@ var use_resize_observer_default = useResizeObserver;
 var MotionDiv3 = motionTags.div;
 var MotionBtn = motionTags.button;
 var displayName = "AccordionItem";
-var AccordionContext = React11__default.createContext({});
+var AccordionContext = React12__default.createContext({});
 function AccordionProvider(props) {
   const [state, setState] = useImmer({
     allowMultiple: false,
@@ -2336,7 +2339,7 @@ function AccordionProvider(props) {
   return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { setState, state }, children: props.children });
 }
 function useAccordion() {
-  const context2 = React11__default.useContext(AccordionContext);
+  const context2 = React12__default.useContext(AccordionContext);
   if (context2 === void 0) {
     throw new Error("useAccordion must be used within a AccordionProvider");
   }
@@ -2345,22 +2348,22 @@ function useAccordion() {
 function AccordionComponent(props) {
   const accordion = useAccordion();
   const accordionState = accordion.state;
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     accordion.setState((draft) => {
       draft.allowMultiple = !!props.allowMultiple;
       draft.allowToggle = !!props.allowToggle;
     });
   }, [props.allowMultiple, props.allowToggle]);
-  React11__default.Children.forEach(props.children, (x) => {
+  React12__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 });
+  const children = React12__default.Children.map(props.children, (child, i) => {
+    if (!React12__default.isValidElement(child)) return child;
+    return React12__default.cloneElement(child, { idx: i });
   });
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (accordionState.open.length === children.length) return;
     const defaultOpenIdx = props.defaultOpenIdx;
     const items = new Array(children.length).fill(null).map((x, i) => {
@@ -2467,10 +2470,10 @@ 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 ref = React12__default.useRef(null);
+  const dragHandleRef = React12__default.useRef(null);
   const [isDesktop] = useMatchMedia(breakpoint);
-  const closeFnRef = React11__default.useRef(null);
+  const closeFnRef = React12__default.useRef(null);
   const dragControls = useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, ...rest } = props;
@@ -2481,10 +2484,12 @@ function DrawerComponent(props) {
     setOpen(true);
   };
   const closeDrawer = () => setOpen(false);
-  closeFnRef.current = () => {
-    closeDrawer();
-    onClose?.();
-  };
+  React12__default.useEffect(() => {
+    closeFnRef.current = () => {
+      closeDrawer();
+      onClose?.();
+    };
+  });
   const onDragStart = (e, info) => {
     console.log({ e });
     if (isDesktop) return;
@@ -2492,16 +2497,18 @@ function DrawerComponent(props) {
     if (!noDragEl || !noDragEl.contains(e.target)) {
       dragControls.start(e);
     } else {
-      dragControls.componentControls.forEach((entry) => {
-        entry.stop(e, info);
-      });
+      dragControls.componentControls.forEach(
+        (entry) => {
+          entry.stop(e, info);
+        }
+      );
     }
   };
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (props.open) openDrawer();
-    else closeFnRef.current();
+    else closeFnRef.current?.();
   }, [props.open]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     const container = ref.current;
     if (!open || !container) return;
     container.setAttribute("tabindex", "0");
@@ -2512,7 +2519,7 @@ function DrawerComponent(props) {
     const closeOnEsc = (e) => {
       if (e.key !== "Escape" || props.closeOnEsc === false) return;
       console.log("[close] esc key");
-      closeFnRef.current();
+      closeFnRef.current?.();
     };
     container.addEventListener("focusout", trapFocus);
     container.addEventListener("keydown", closeOnEsc);
@@ -2522,12 +2529,12 @@ function DrawerComponent(props) {
       container.removeEventListener("keydown", closeOnEsc);
       document.body.style.overflow = "auto";
     };
-  }, [open]);
-  React11__default.useEffect(() => {
+  }, [open, props.closeOnEsc]);
+  React12__default.useEffect(() => {
     const unsubscribeY = y.on("change", (latestY) => {
       if (latestY > 150) {
         console.log("[close] latestY > 150");
-        closeFnRef.current();
+        closeFnRef.current?.();
       }
     });
     return () => {
@@ -2538,7 +2545,7 @@ function DrawerComponent(props) {
     const outsideClickClose = props.outsideClickClose ?? true;
     if (!outsideClickClose) return;
     console.log("[close] clicked backdrop");
-    closeFnRef.current();
+    closeFnRef.current?.();
   };
   return createPortal(
     /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: open && /* @__PURE__ */ jsx(
@@ -2606,9 +2613,7 @@ function DrawerComponent(props) {
               drag: "y",
               style: { y },
               dragControls,
-              // @ts-ignore
-              onPointerDown: (...args) => onDragStart(args[0], args[1]),
-              // onPointerDown: (x, y) => onDragStart(x, y),
+              onPointerDown: (e) => onDragStart(e),
               //   drag={hasBackdrop ? "y" : false}
               dragElastic: 0,
               // prevent drawer from being dragged higher than what its opened to
@@ -2664,19 +2669,19 @@ function DrawerComponent(props) {
     document.getElementById("portal")
   );
 }
-var DrawerContext = React11__default.createContext({
+var DrawerContext = React12__default.createContext({
   open: false,
-  setOpen: (_value) => {
+  setOpen: () => {
     return;
   }
 });
 function DrawerProvider(props) {
-  const [open, setOpen] = React11__default.useState(false);
+  const [open, setOpen] = React12__default.useState(false);
   const value = { open, setOpen };
   return /* @__PURE__ */ jsx(DrawerContext.Provider, { value, children: props.children });
 }
 function useDrawer() {
-  const context2 = React11__default.useContext(DrawerContext);
+  const context2 = React12__default.useContext(DrawerContext);
   if (context2 === void 0) {
     throw new Error("useDrawer must be used within a DrawerProvider");
   }
@@ -2689,7 +2694,7 @@ 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() });
+    return /* @__PURE__ */ jsx(MotionDiv4, { flex: true, alignI: true, gap: 4, ...rest, children: React12__default.Children.toArray(children).toReversed() });
   } else {
     return /* @__PURE__ */ jsx(MotionDiv4, { grid: true, rowG: 14, ...props });
   }
@@ -2738,7 +2743,7 @@ function CloseBtn(props) {
             h: 16,
             w: 16,
             fontSize: 16,
-            color: { base: "neutral.400", _dark: "neutral.300" }
+            color: "currentColor"
           }
         )
       }
@@ -2750,7 +2755,7 @@ function CloseBtn(props) {
   }
 }
 function Backdrop(props) {
-  const [allowOutsideClick, setAllowOutsideClick] = React11__default.useState(true);
+  const [allowOutsideClick, setAllowOutsideClick] = React12__default.useState(true);
   const [isDesktop] = useMatchMedia(breakpoint);
   return /* @__PURE__ */ jsx(
     MotionDiv4,
@@ -2773,7 +2778,7 @@ function Backdrop(props) {
       left: 0,
       height: "100%",
       width: "100%",
-      placeI: isDesktop,
+      ...isDesktop ? { placeI: true } : {},
       onClick: () => allowOutsideClick ? props.onClick() : void 0,
       children: props.children
     }
@@ -2786,8 +2791,8 @@ function useMatchMedia(queries, defaultValues = []) {
     const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
     return matchedQueries;
   };
-  const [value, setValue] = React11__default.useState(getValue);
-  React11__default.useLayoutEffect(() => {
+  const [value, setValue] = React12__default.useState(getValue);
+  React12__default.useLayoutEffect(() => {
     const handler = () => setValue(getValue);
     mediaQueryLists.forEach((mql) => mql.addListener(handler));
     return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
@@ -2800,9 +2805,9 @@ 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 [progress, setProgress] = React12__default.useState(0);
   const max = maxProp ?? 100;
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     setProgress(Math.min((value ?? 0) / max, 1) * 100);
   }, [value, max]);
   const width = `${progress}%`;
@@ -2842,7 +2847,7 @@ function Progress(props) {
     TrackFillNameKey
   );
   const barHeight = rest.h ?? 8;
-  const bgEl = trackBgChild ? React11__default.cloneElement(trackBgChild, {
+  const bgEl = trackBgChild ? React12__default.cloneElement(trackBgChild, {
     gridArea: "1 / 1",
     h: barHeight,
     w: trackBgChild.props.w ?? true
@@ -2857,7 +2862,7 @@ function Progress(props) {
       bg: { base: "neutral.200", _dark: "neutral.700" }
     }
   );
-  const fillEl = trackFillChild ? React11__default.cloneElement(trackFillChild, {
+  const fillEl = trackFillChild ? React12__default.cloneElement(trackFillChild, {
     gridArea: "1 / 1",
     h: barHeight,
     roundedLeft: 9999,
@@ -2928,7 +2933,7 @@ function TrackFill(props) {
 }
 TrackFill.displayName = TrackFillNameKey;
 var Base5 = base;
-var TooltipContainer = React11__default.forwardRef(function TooltipContainer2(props, ref) {
+var TooltipContainer = React12__default.forwardRef(function TooltipContainer2(props, ref) {
   const { children, className, style, ...rest } = props;
   return /* @__PURE__ */ jsx(
     Base5,
@@ -2955,9 +2960,9 @@ function Tooltip(props) {
     delay = 80,
     className
   } = props;
-  const referenceRef = React11__default.useRef(null);
-  const arrowRef = React11__default.useRef(null);
-  const [open, setOpen] = React11__default.useState(false);
+  const referenceRef = React12__default.useRef(null);
+  const arrowRef = React12__default.useRef(null);
+  const [open, setOpen] = React12__default.useState(false);
   const { x, y, refs, strategy, middlewareData, context: context2 } = useFloating({
     open,
     onOpenChange: setOpen,
@@ -2986,7 +2991,7 @@ function Tooltip(props) {
     role
   ]);
   const referenceProps = getReferenceProps({});
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (!follow || !referenceRef.current) return;
     const el = referenceRef.current;
     const onMove = (e) => {
@@ -3009,14 +3014,14 @@ function Tooltip(props) {
   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 childrenArray = React12__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";
+    const only = React12__default.Children.only(children);
+    const isDomElement = React12__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 })
@@ -3034,7 +3039,7 @@ function Tooltip(props) {
       originalRef.current = node;
   };
   const refAttrs = referenceProps;
-  const cloned = React11__default.cloneElement(
+  const cloned = React12__default.cloneElement(
     child,
     {
       ...refAttrs,
@@ -3043,11 +3048,11 @@ function Tooltip(props) {
     }
   );
   if (disabled) return /* @__PURE__ */ jsx(Fragment, { children: cloned });
-  const [isMounted, setIsMounted] = React11__default.useState(false);
-  const closeTimerRef = React11__default.useRef(
+  const [isMounted, setIsMounted] = React12__default.useState(false);
+  const closeTimerRef = React12__default.useRef(
     null
   );
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     if (closeTimerRef.current) {
       clearTimeout(closeTimerRef.current);
       closeTimerRef.current = null;
@@ -3070,24 +3075,24 @@ function Tooltip(props) {
   let arrowEl = null;
   let floatingNode = null;
   const findRoleTooltipElement = (node) => {
-    if (!React11__default.isValidElement(node)) return null;
+    if (!React12__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);
+    const arr = React12__default.Children.toArray(kids);
     for (const c of arr) {
-      if (React11__default.isValidElement(c) && c.props?.role === "tooltip") {
+      if (React12__default.isValidElement(c) && c.props?.role === "tooltip") {
         return c;
       }
     }
     return null;
   };
-  const isCustomTooltip = React11__default.isValidElement(content) && !!(content.type && content.type.isBlockTooltipContainer);
+  const isCustomTooltip = React12__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(() => {
+  const containerRef = React12__default.useRef(null);
+  const [containerBg, setContainerBg] = React12__default.useState();
+  React12__default.useEffect(() => {
     if (!(open || isMounted)) return;
     const el = containerRef.current;
     if (!el) return;
@@ -3195,7 +3200,7 @@ function Tooltip(props) {
               else if (originalChildRef && typeof originalChildRef === "object")
                 originalChildRef.current = node;
             };
-            return React11__default.cloneElement(
+            return React12__default.cloneElement(
               el,
               {
                 // Spread childProps first
@@ -3292,12 +3297,12 @@ 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(() => {
+  const [checked, setChecked] = React12__default.useState(false);
+  const [indeterminate, setIndeterminate] = React12__default.useState(false);
+  React12__default.useEffect(() => {
     setChecked(!!rest.checked);
   }, [rest.checked]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     setIndeterminate(!!rest.indeterminate);
   }, [rest.indeterminate]);
   const isIndeterminate = typeof rest.indeterminate === "boolean";
@@ -3389,7 +3394,7 @@ function Block(props) {
     tooltip,
     ...rest
   } = anyProps;
-  const fileInputRef = React11.useRef(null);
+  const fileInputRef = React12.useRef(null);
   const isLoading = anyProps.isLoading;
   const multiple = anyProps.multiple;
   const is = anyProps.is;
@@ -3426,7 +3431,7 @@ function Block(props) {
       ...anyProps
     }
   ) : extract.filepickerAllowed ? /* @__PURE__ */ jsxs("div", { onClick: () => fileInputRef.current?.click(), children: [
-    React11.createElement(
+    React12.createElement(
       Comp,
       {
         cursor: "pointer",
@@ -3456,7 +3461,7 @@ function Block(props) {
         value: ""
       }
     )
-  ] }) : React11.createElement(
+  ] }) : React12.createElement(
     Comp,
     {
       ...isLoading && { "data-loading": isLoading },
@@ -3564,16 +3569,16 @@ var saveStore = (store) => {
 
 // src/react/use-theme/index.ts
 function useTheme() {
-  const [store, setStore] = React11__default.useState(getInitialStore);
-  const storeRef = React11__default.useRef(store);
-  const isInternalUpdateRef = React11__default.useRef(false);
-  React11__default.useEffect(() => {
+  const [store, setStore] = React12__default.useState(getInitialStore);
+  const storeRef = React12__default.useRef(store);
+  const isInternalUpdateRef = React12__default.useRef(false);
+  React12__default.useEffect(() => {
     storeRef.current = store;
   }, [store]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     document.documentElement.setAttribute("data-theme", store.value);
   }, [store.value]);
-  React11__default.useEffect(() => {
+  React12__default.useEffect(() => {
     const handleStorageChange = (e) => {
       if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
         setStore(getInitialStore());
@@ -3603,7 +3608,6 @@ function useTheme() {
     saveStore(newStore);
   };
   const toggle = (theme) => {
-    console.log("toggle theme");
     const newStore = {
       value: theme ?? (storeRef.current.value === "light" ? "dark" : "light"),
       isManual: true
@@ -3617,8 +3621,8 @@ function useTheme() {
 
 // src/react/index.ts
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = React11__default.useState(value);
-  React11__default.useEffect(() => {
+  const [debouncedValue, setDebouncedValue] = React12__default.useState(value);
+  React12__default.useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -3629,10 +3633,10 @@ function useDebounce(value, delay = 500) {
   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 [throttledValue, setThrottledValue] = React12__default.useState(value);
+  const lastUpdate = React12__default.useRef(0);
+  const timeoutRef = React12__default.useRef(null);
+  React12__default.useEffect(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdate.current;
     if (timeSinceLastUpdate >= interval) {
@@ -3662,8 +3666,8 @@ function useMatchMedia2(queries, defaultValues = []) {
     const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
     return matchedQueries;
   };
-  const [value, setValue] = React11__default.useState(getValue);
-  React11__default.useLayoutEffect(() => {
+  const [value, setValue] = React12__default.useState(getValue);
+  React12__default.useLayoutEffect(() => {
     const handler = () => setValue(getValue);
     mediaQueryLists.forEach((mql) => mql.addListener(handler));
     return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));