qstd 0.2.7 → 0.2.8

package/dist/react/index.cjs

@@ -3,7 +3,7 @@ require("./index.css");
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React11 = require('react');
+var React12 = require('react');
 var reactDom = require('react-dom');
 var framerMotion = require('framer-motion');
 var react = require('@floating-ui/react');
@@ -11,11 +11,11 @@ var reactSpinners = require('react-spinners');
 var reactLoaderSpinner = require('react-loader-spinner');
 var jsxRuntime = require('react/jsx-runtime');
 var nanoid = require('nanoid');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
 var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
 var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var useImmer = require('use-immer');
 
 function _interopNamespace(e) {
@@ -36,7 +36,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
+var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
 
 // src/react/index.ts
 
@@ -444,10 +444,10 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
   const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn);
   const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp);
   const __base__ = Dynamic.__base__ || Dynamic;
-  const StyledComponent = /* @__PURE__ */ React11.forwardRef(function StyledComponent2(props, ref) {
+  const StyledComponent = /* @__PURE__ */ React12.forwardRef(function StyledComponent2(props, ref) {
     const { as: Element2 = __base__, unstyled, children, ...restProps } = props;
-    const combinedProps = React11.useMemo(() => Object.assign({}, defaultProps, restProps), [restProps]);
-    const [htmlProps2, forwardedProps, variantProps, styleProps, elementProps] = React11.useMemo(() => {
+    const combinedProps = React12.useMemo(() => Object.assign({}, defaultProps, restProps), [restProps]);
+    const [htmlProps2, forwardedProps, variantProps, styleProps, elementProps] = React12.useMemo(() => {
       return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty);
     }, [combinedProps]);
     function recipeClass() {
@@ -467,7 +467,7 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
       }
       return configOrCva.__recipe__ ? recipeClass() : cvaClass();
     };
-    return React11.createElement(Element2, {
+    return React12.createElement(Element2, {
       ref,
       ...forwardedProps,
       ...elementProps,
@@ -630,14 +630,14 @@ function Menu(props) {
     trigger,
     ...rest
   } = props;
-  const hoverTimeoutRef = React11__namespace.default.useRef(null);
-  const [isOpen, setOpen] = React11__namespace.default.useState(isOpenControlled ?? false);
+  const hoverTimeoutRef = React12__namespace.default.useRef(null);
+  const [isOpen, setOpen] = React12__namespace.default.useState(isOpenControlled ?? false);
   const onOpenChange = (open) => {
     const newOpenState = typeof open === "function" ? open(isOpen) : open;
     props.onOpenOrClose?.(newOpenState);
     setOpen(newOpenState);
   };
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (typeof isOpenControlled !== "boolean") return;
     setOpen(isOpenControlled);
   }, [isOpenControlled]);
@@ -653,7 +653,10 @@ function Menu(props) {
     open: isOpen,
     onOpenChange,
     middleware: [
-      react.offset({ crossAxis: props.offset?.x, mainAxis: props.offset?.y }),
+      react.offset({
+        ...props.offset?.x !== void 0 && { crossAxis: props.offset.x },
+        ...props.offset?.y !== void 0 && { mainAxis: props.offset.y }
+      }),
       react.flip({ fallbackPlacements: ["top-end"] }),
       react.shift({ padding: 5 }),
       react.hide({ strategy: "referenceHidden" })
@@ -709,11 +712,11 @@ function Menu(props) {
     },
     isOpen
   );
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (!hideData?.referenceHidden) return;
     closeMenuImmediate();
   }, [hideData, closeMenuImmediate]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     return () => {
       if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
     };
@@ -739,10 +742,10 @@ function Menu(props) {
     onMouseLeave: handleMenuMouseLeave
   } : {};
   const transformOrigin = floatingContext.placement.startsWith("top") ? "bottom left" : "top left";
-  const childArray = React11__namespace.default.Children.toArray(children);
+  const childArray = React12__namespace.default.Children.toArray(children);
   let customContainerEl = null;
   for (const c of childArray) {
-    if (React11__namespace.default.isValidElement(c)) {
+    if (React12__namespace.default.isValidElement(c)) {
       const anyType = c.type;
       if (c.props?.["data-menu-container"] || anyType?.isBlockMenuContainer) {
         customContainerEl = c;
@@ -771,7 +774,7 @@ function Menu(props) {
       ...restStyle || {}
     };
     const mergedClassName = [defaultsClassName, childProps.className].filter(Boolean).join(" ");
-    const contentNode = React11__namespace.default.cloneElement(
+    const contentNode = React12__namespace.default.cloneElement(
       customContainerEl,
       {
         // Defaults are now in mergedClassName via css()
@@ -857,7 +860,7 @@ function Menu(props) {
   );
 }
 function useOutsideClick(ref, handler, enabled = true) {
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (!enabled) return;
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
@@ -964,9 +967,9 @@ var prepareFiles = async (acceptedFiles) => {
   );
 };
 var findChildrenByDisplayName = (children, displayName2) => {
-  return React11__namespace.default.Children.toArray(children).find(
+  return React12__namespace.default.Children.toArray(children).find(
     (child) => {
-      if (React11__namespace.default.isValidElement(child)) {
+      if (React12__namespace.default.isValidElement(child)) {
         const childType = child.type;
         return childType.displayName === displayName2;
       } else {
@@ -1099,7 +1102,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__namespace.default.isValidElement(chosen)) {
+      } else if (React12__namespace.default.isValidElement(chosen)) {
         return chosen;
       } else if (typeof chosen === "function") {
         return chosen();
@@ -1195,9 +1198,9 @@ var TrackNameKey = "Track";
 var ThumbNameKey = "Thumb";
 var Button = motionTags.button;
 var Base = motionTags.div;
-var SwitchContext = React11__namespace.default.createContext(null);
+var SwitchContext = React12__namespace.default.createContext(null);
 var useSwitchContext = () => {
-  const context2 = React11__namespace.default.useContext(SwitchContext);
+  const context2 = React12__namespace.default.useContext(SwitchContext);
   if (!context2) {
     throw new Error("Switch compound components must be used within Switch");
   }
@@ -1213,16 +1216,16 @@ function Switch(props) {
     _motion,
     ...rest
   } = props;
-  const [x, setX] = React11__namespace.default.useState(0);
-  const [pressed, setPressed] = React11__namespace.default.useState(false);
-  const [growThumb, setGrowThumb] = React11__namespace.default.useState(false);
+  const [x, setX] = React12__namespace.default.useState(0);
+  const [pressed, setPressed] = React12__namespace.default.useState(false);
+  const [growThumb, setGrowThumb] = React12__namespace.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__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (pressed && !disabled) {
       stopwatch.start();
     } else {
@@ -1230,12 +1233,12 @@ function Switch(props) {
       stopwatch.clear();
     }
   }, [pressed, disabled]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (stopwatch.time > 200) {
       setGrowThumb(true);
     }
   }, [stopwatch.time]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     setX(checked ? checkedPosition : 0);
   }, [checked, checkedPosition]);
   const toggle = () => {
@@ -1300,10 +1303,10 @@ function Switch(props) {
     children,
     ThumbNameKey
   );
-  const trackElement = track ? React11__namespace.default.cloneElement(track, {
+  const trackElement = track ? React12__namespace.default.cloneElement(track, {
     _motion,
-    children: thumb ? React11__namespace.default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsxRuntime.jsx(Thumb, { _motion })
-  }) : /* @__PURE__ */ jsxRuntime.jsx(Track, { _motion, children: thumb ? React11__namespace.default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsxRuntime.jsx(Thumb, { _motion }) });
+    children: thumb ? React12__namespace.default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsxRuntime.jsx(Thumb, { _motion })
+  }) : /* @__PURE__ */ jsxRuntime.jsx(Track, { _motion, children: thumb ? React12__namespace.default.cloneElement(thumb, { _motion }) : /* @__PURE__ */ jsxRuntime.jsx(Thumb, { _motion }) });
   return /* @__PURE__ */ jsxRuntime.jsx(SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
@@ -1428,10 +1431,10 @@ function Thumb(props) {
 Track.displayName = TrackNameKey;
 Thumb.displayName = ThumbNameKey;
 function useStopwatch(props = {}) {
-  const [active, setActive] = React11__namespace.default.useState(false);
-  const [time, setTime] = React11__namespace.default.useState(0);
+  const [active, setActive] = React12__namespace.default.useState(false);
+  const [time, setTime] = React12__namespace.default.useState(0);
   const timeInterval = props?.interval ?? 10;
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     let interval = null;
     if (active) {
       interval = setInterval(() => {
@@ -1451,7 +1454,7 @@ function useStopwatch(props = {}) {
   return { time, start, stop, clear };
 }
 var switch_default = Switch;
-var RadioContext = React11__namespace.default.createContext(null);
+var RadioContext = React12__namespace.default.createContext(null);
 var Base2 = base;
 var MotionDiv2 = motionTags.div;
 function Radio(props) {
@@ -1466,14 +1469,14 @@ function Radio(props) {
     onKeyDown: onKeyDownProp,
     ...rest
   } = props;
-  const groupId = React11__namespace.default.useId();
+  const groupId = React12__namespace.default.useId();
   const isControlled = controlledValue !== void 0;
-  const [uncontrolled, setUncontrolled] = React11__namespace.default.useState(
+  const [uncontrolled, setUncontrolled] = React12__namespace.default.useState(
     defaultValue
   );
   const selectedValue = isControlled ? controlledValue : uncontrolled;
-  const itemsRef = React11__namespace.default.useRef([]);
-  const [activeId, setActiveId] = React11__namespace.default.useState("");
+  const itemsRef = React12__namespace.default.useRef([]);
+  const [activeId, setActiveId] = React12__namespace.default.useState("");
   const setSelectedValue = (val) => {
     if (!isControlled) setUncontrolled(val);
     onChange?.(val);
@@ -1526,7 +1529,7 @@ function Radio(props) {
       setActiveId(found.id);
     }
   };
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (!selectedValue) return;
     const selected = itemsRef.current.find((x) => x.value === selectedValue);
     if (selected && !selected.disabled) setActiveId(selected.id);
@@ -1567,7 +1570,7 @@ function Radio(props) {
       },
       children: [
         (options ?? []).map(
-          (opt) => renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React11__namespace.default.Fragment, { children: renderOption(opt) }, opt.value) : /* @__PURE__ */ jsxRuntime.jsx(
+          (opt) => renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React12__namespace.default.Fragment, { children: renderOption(opt) }, opt.value) : /* @__PURE__ */ jsxRuntime.jsx(
             Item,
             {
               value: opt.value,
@@ -1597,7 +1600,7 @@ function Item(props) {
     onBlur: onBlurProp,
     ...rest
   } = props;
-  const ctx = React11__namespace.default.useContext(RadioContext);
+  const ctx = React12__namespace.default.useContext(RadioContext);
   if (!ctx) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Base2, { flex: true, alignI: true, cursor: "pointer", ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Base2, { "data-radio-circle": true, w: 24, h: 24, br: 9999, mr: 8 }),
@@ -1616,22 +1619,22 @@ function Item(props) {
   } = ctx;
   const disabled = !!(groupDisabled || itemDisabled);
   const id = `radio-item-${groupId}-${value}`;
-  const ref = React11__namespace.default.useRef(null);
-  React11__namespace.default.useEffect(() => {
+  const ref = React12__namespace.default.useRef(null);
+  React12__namespace.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__namespace.default.useState(false);
+  const [isFocused, setIsFocused] = React12__namespace.default.useState(false);
   const shouldUseGrid = gridProp || !!colsProp;
   const renderLabel = () => {
-    const onlyChild = React11__namespace.default.Children.count(children) === 1 ? React11__namespace.default.Children.toArray(children)[0] : null;
+    const onlyChild = React12__namespace.default.Children.count(children) === 1 ? React12__namespace.default.Children.toArray(children)[0] : null;
     if (typeof onlyChild === "string") {
       return /* @__PURE__ */ jsxRuntime.jsx(Base2, { "data-radio-label": true, children: onlyChild });
     }
-    if (React11__namespace.default.isValidElement(onlyChild)) {
-      return React11__namespace.default.cloneElement(
+    if (React12__namespace.default.isValidElement(onlyChild)) {
+      return React12__namespace.default.cloneElement(
         onlyChild,
         {
           ...onlyChild.props || {},
@@ -1751,7 +1754,7 @@ function Item(props) {
 var LabelNameKey = "Label";
 var Base3 = base;
 var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? React11__namespace.default.useLayoutEffect : React11__namespace.default.useEffect;
+var useIsomorphicLayoutEffect = isBrowser ? React12__namespace.default.useLayoutEffect : React12__namespace.default.useEffect;
 function pick(props, obj) {
   return props.reduce(
     (acc, prop) => {
@@ -1883,16 +1886,16 @@ function Textarea(props) {
     ...rest
   } = props;
   const isControlled = rest.value !== void 0;
-  const libRef = React11__namespace.default.useRef(null);
+  const libRef = React12__namespace.default.useRef(null);
   const ref = assignRefs(libRef, userRef);
-  const heightRef = React11__namespace.default.useRef(0);
-  const [_value, _setValue] = React11__namespace.default.useState("");
+  const heightRef = React12__namespace.default.useRef(0);
+  const [_value, _setValue] = React12__namespace.default.useState("");
   const value = props.value ?? _value;
   const label = findChildrenByDisplayName(
     children,
     LabelNameKey
   );
-  const labelWithProps = label ? React11__namespace.default.cloneElement(label, {
+  const labelWithProps = label ? React12__namespace.default.cloneElement(label, {
     required: props.required,
     value: props.value,
     error
@@ -1923,20 +1926,20 @@ function Textarea(props) {
   useIsomorphicLayoutEffect(() => {
     resizeTextarea();
   }, [rest.value, rest.placeholder, minRows, maxRows]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (!isBrowser) return;
     const onResize = () => resizeTextarea();
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [minRows, maxRows, rest.placeholder, rest.value]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.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__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     const node = libRef.current;
     const form = node?.form;
     if (!node || !form || isControlled) return;
@@ -1953,7 +1956,7 @@ function Textarea(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Base3, { grid: true, rows: "/ 4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Base3, { grid: true, relative: true, children: [
       labelWithProps,
-      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.MotionConfig, { transition: _motion, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.MotionConfig, { ..._motion && { transition: _motion }, children: /* @__PURE__ */ jsxRuntime.jsx(
         Txtarea,
         {
           ref,
@@ -2088,13 +2091,13 @@ function Input(props) {
     children,
     RightSideNameKey
   );
-  const labelWithProps = label ? React11__namespace.default.cloneElement(label, {
+  const labelWithProps = label ? React12__namespace.default.cloneElement(label, {
     hasLeftIcon: !!leftIcon,
     required: props.required,
     value: props.value,
     error
   }) : null;
-  const rightSideWithProps = rightSide ? React11__namespace.default.cloneElement(rightSide, {
+  const rightSideWithProps = rightSide ? React12__namespace.default.cloneElement(rightSide, {
     onChange: props.onChange,
     value: props.value
   }) : null;
@@ -2219,27 +2222,27 @@ function Label2(props) {
 Label2.displayName = LabelNameKey2;
 function useResizeObserver(opts = {}) {
   const onResize = opts.onResize;
-  const onResizeRef = React11__namespace.default.useRef(void 0);
+  const onResizeRef = React12__namespace.default.useRef(void 0);
   onResizeRef.current = onResize;
   const round = opts.round || Math.round;
-  const resizeObserverRef = React11__namespace.default.useRef(null);
-  const [size, setSize] = React11__namespace.default.useState({
+  const resizeObserverRef = React12__namespace.default.useRef(null);
+  const [size, setSize] = React12__namespace.default.useState({
     width: void 0,
     height: void 0
   });
-  const didUnmount = React11__namespace.default.useRef(false);
-  React11__namespace.default.useEffect(() => {
+  const didUnmount = React12__namespace.default.useRef(false);
+  React12__namespace.default.useEffect(() => {
     didUnmount.current = false;
     return () => {
       didUnmount.current = true;
     };
   }, []);
-  const previous = React11__namespace.default.useRef({
+  const previous = React12__namespace.default.useRef({
     width: void 0,
     height: void 0
   });
   const refCallback = useResolvedElement(
-    React11__namespace.default.useCallback(
+    React12__namespace.default.useCallback(
       (element) => {
         if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
           resizeObserverRef.current = {
@@ -2278,7 +2281,7 @@ function useResizeObserver(opts = {}) {
     ),
     opts.ref
   );
-  return React11__namespace.default.useMemo(
+  return React12__namespace.default.useMemo(
     () => ({
       ref: refCallback,
       width: size.width,
@@ -2290,14 +2293,14 @@ function useResizeObserver(opts = {}) {
   );
 }
 function useResolvedElement(subscriber, refOrElement) {
-  const lastReportRef = React11__namespace.default.useRef(null);
-  const refOrElementRef = React11__namespace.default.useRef(null);
+  const lastReportRef = React12__namespace.default.useRef(null);
+  const refOrElementRef = React12__namespace.default.useRef(null);
   refOrElementRef.current = refOrElement;
-  const cbElementRef = React11__namespace.default.useRef(null);
-  React11__namespace.default.useEffect(() => {
+  const cbElementRef = React12__namespace.default.useRef(null);
+  React12__namespace.default.useEffect(() => {
     evaluateSubscription();
   });
-  const evaluateSubscription = React11__namespace.default.useCallback(() => {
+  const evaluateSubscription = React12__namespace.default.useCallback(() => {
     const cbElement = cbElementRef.current;
     const refOrElement2 = refOrElementRef.current;
     const element = cbElement ? cbElement : refOrElement2 ? refOrElement2 instanceof Element ? refOrElement2 : refOrElement2.current : null;
@@ -2315,7 +2318,7 @@ function useResolvedElement(subscriber, refOrElement) {
       cleanup: element ? subscriber(element) : void 0
     };
   }, [subscriber]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     return () => {
       if (lastReportRef.current && lastReportRef.current.cleanup) {
         lastReportRef.current.cleanup();
@@ -2323,7 +2326,7 @@ function useResolvedElement(subscriber, refOrElement) {
       }
     };
   }, []);
-  return React11__namespace.default.useCallback(
+  return React12__namespace.default.useCallback(
     (element) => {
       cbElementRef.current = element;
       evaluateSubscription();
@@ -2349,7 +2352,7 @@ var use_resize_observer_default = useResizeObserver;
 var MotionDiv3 = motionTags.div;
 var MotionBtn = motionTags.button;
 var displayName = "AccordionItem";
-var AccordionContext = React11__namespace.default.createContext({});
+var AccordionContext = React12__namespace.default.createContext({});
 function AccordionProvider(props) {
   const [state, setState] = useImmer.useImmer({
     allowMultiple: false,
@@ -2359,7 +2362,7 @@ function AccordionProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { setState, state }, children: props.children });
 }
 function useAccordion() {
-  const context2 = React11__namespace.default.useContext(AccordionContext);
+  const context2 = React12__namespace.default.useContext(AccordionContext);
   if (context2 === void 0) {
     throw new Error("useAccordion must be used within a AccordionProvider");
   }
@@ -2368,22 +2371,22 @@ function useAccordion() {
 function AccordionComponent(props) {
   const accordion = useAccordion();
   const accordionState = accordion.state;
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     accordion.setState((draft) => {
       draft.allowMultiple = !!props.allowMultiple;
       draft.allowToggle = !!props.allowToggle;
     });
   }, [props.allowMultiple, props.allowToggle]);
-  React11__namespace.default.Children.forEach(props.children, (x) => {
+  React12__namespace.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__namespace.default.Children.map(props.children, (child, i) => {
-    if (!React11__namespace.default.isValidElement(child)) return child;
-    return React11__namespace.default.cloneElement(child, { idx: i });
+  const children = React12__namespace.default.Children.map(props.children, (child, i) => {
+    if (!React12__namespace.default.isValidElement(child)) return child;
+    return React12__namespace.default.cloneElement(child, { idx: i });
   });
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (accordionState.open.length === children.length) return;
     const defaultOpenIdx = props.defaultOpenIdx;
     const items = new Array(children.length).fill(null).map((x, i) => {
@@ -2490,10 +2493,10 @@ var MotionDiv4 = motionTags.div;
 var MotionBtn2 = motionTags.button;
 var breakpoint = ["(min-width: 600px)"];
 function DrawerComponent(props) {
-  const ref = React11__namespace.default.useRef(null);
-  const dragHandleRef = React11__namespace.default.useRef(null);
+  const ref = React12__namespace.default.useRef(null);
+  const dragHandleRef = React12__namespace.default.useRef(null);
   const [isDesktop] = useMatchMedia(breakpoint);
-  const closeFnRef = React11__namespace.default.useRef(null);
+  const closeFnRef = React12__namespace.default.useRef(null);
   const dragControls = framerMotion.useDragControls();
   const { open, setOpen } = useDrawer();
   const { onClose, ...rest } = props;
@@ -2504,10 +2507,12 @@ function DrawerComponent(props) {
     setOpen(true);
   };
   const closeDrawer = () => setOpen(false);
-  closeFnRef.current = () => {
-    closeDrawer();
-    onClose?.();
-  };
+  React12__namespace.default.useEffect(() => {
+    closeFnRef.current = () => {
+      closeDrawer();
+      onClose?.();
+    };
+  });
   const onDragStart = (e, info) => {
     console.log({ e });
     if (isDesktop) return;
@@ -2515,16 +2520,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__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (props.open) openDrawer();
-    else closeFnRef.current();
+    else closeFnRef.current?.();
   }, [props.open]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     const container = ref.current;
     if (!open || !container) return;
     container.setAttribute("tabindex", "0");
@@ -2535,7 +2542,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);
@@ -2545,12 +2552,12 @@ function DrawerComponent(props) {
       container.removeEventListener("keydown", closeOnEsc);
       document.body.style.overflow = "auto";
     };
-  }, [open]);
-  React11__namespace.default.useEffect(() => {
+  }, [open, props.closeOnEsc]);
+  React12__namespace.default.useEffect(() => {
     const unsubscribeY = y.on("change", (latestY) => {
       if (latestY > 150) {
         console.log("[close] latestY > 150");
-        closeFnRef.current();
+        closeFnRef.current?.();
       }
     });
     return () => {
@@ -2561,7 +2568,7 @@ function DrawerComponent(props) {
     const outsideClickClose = props.outsideClickClose ?? true;
     if (!outsideClickClose) return;
     console.log("[close] clicked backdrop");
-    closeFnRef.current();
+    closeFnRef.current?.();
   };
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "wait", children: open && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2629,9 +2636,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
@@ -2687,19 +2692,19 @@ function DrawerComponent(props) {
     document.getElementById("portal")
   );
 }
-var DrawerContext = React11__namespace.default.createContext({
+var DrawerContext = React12__namespace.default.createContext({
   open: false,
-  setOpen: (_value) => {
+  setOpen: () => {
     return;
   }
 });
 function DrawerProvider(props) {
-  const [open, setOpen] = React11__namespace.default.useState(false);
+  const [open, setOpen] = React12__namespace.default.useState(false);
   const value = { open, setOpen };
   return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value, children: props.children });
 }
 function useDrawer() {
-  const context2 = React11__namespace.default.useContext(DrawerContext);
+  const context2 = React12__namespace.default.useContext(DrawerContext);
   if (context2 === void 0) {
     throw new Error("useDrawer must be used within a DrawerProvider");
   }
@@ -2712,7 +2717,7 @@ function BtnGroup(props) {
   const [isDesktop] = useMatchMedia(breakpoint);
   const { children, ...rest } = props;
   if (isDesktop) {
-    return /* @__PURE__ */ jsxRuntime.jsx(MotionDiv4, { flex: true, alignI: true, gap: 4, ...rest, children: React11__namespace.default.Children.toArray(children).toReversed() });
+    return /* @__PURE__ */ jsxRuntime.jsx(MotionDiv4, { flex: true, alignI: true, gap: 4, ...rest, children: React12__namespace.default.Children.toArray(children).toReversed() });
   } else {
     return /* @__PURE__ */ jsxRuntime.jsx(MotionDiv4, { grid: true, rowG: 14, ...props });
   }
@@ -2761,7 +2766,7 @@ function CloseBtn(props) {
             h: 16,
             w: 16,
             fontSize: 16,
-            color: { base: "neutral.400", _dark: "neutral.300" }
+            color: "currentColor"
           }
         )
       }
@@ -2773,7 +2778,7 @@ function CloseBtn(props) {
   }
 }
 function Backdrop(props) {
-  const [allowOutsideClick, setAllowOutsideClick] = React11__namespace.default.useState(true);
+  const [allowOutsideClick, setAllowOutsideClick] = React12__namespace.default.useState(true);
   const [isDesktop] = useMatchMedia(breakpoint);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MotionDiv4,
@@ -2796,7 +2801,7 @@ function Backdrop(props) {
       left: 0,
       height: "100%",
       width: "100%",
-      placeI: isDesktop,
+      ...isDesktop ? { placeI: true } : {},
       onClick: () => allowOutsideClick ? props.onClick() : void 0,
       children: props.children
     }
@@ -2809,8 +2814,8 @@ function useMatchMedia(queries, defaultValues = []) {
     const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
     return matchedQueries;
   };
-  const [value, setValue] = React11__namespace.default.useState(getValue);
-  React11__namespace.default.useLayoutEffect(() => {
+  const [value, setValue] = React12__namespace.default.useState(getValue);
+  React12__namespace.default.useLayoutEffect(() => {
     const handler = () => setValue(getValue);
     mediaQueryLists.forEach((mql) => mql.addListener(handler));
     return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
@@ -2823,9 +2828,9 @@ var TrackBgNameKey = "TrackBg";
 var TrackFillNameKey = "TrackFill";
 function Progress(props) {
   const { children, steps, value, max: maxProp, ...rest } = props;
-  const [progress, setProgress] = React11__namespace.default.useState(0);
+  const [progress, setProgress] = React12__namespace.default.useState(0);
   const max = maxProp ?? 100;
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     setProgress(Math.min((value ?? 0) / max, 1) * 100);
   }, [value, max]);
   const width = `${progress}%`;
@@ -2865,7 +2870,7 @@ function Progress(props) {
     TrackFillNameKey
   );
   const barHeight = rest.h ?? 8;
-  const bgEl = trackBgChild ? React11__namespace.default.cloneElement(trackBgChild, {
+  const bgEl = trackBgChild ? React12__namespace.default.cloneElement(trackBgChild, {
     gridArea: "1 / 1",
     h: barHeight,
     w: trackBgChild.props.w ?? true
@@ -2880,7 +2885,7 @@ function Progress(props) {
       bg: { base: "neutral.200", _dark: "neutral.700" }
     }
   );
-  const fillEl = trackFillChild ? React11__namespace.default.cloneElement(trackFillChild, {
+  const fillEl = trackFillChild ? React12__namespace.default.cloneElement(trackFillChild, {
     gridArea: "1 / 1",
     h: barHeight,
     roundedLeft: 9999,
@@ -2951,7 +2956,7 @@ function TrackFill(props) {
 }
 TrackFill.displayName = TrackFillNameKey;
 var Base5 = base;
-var TooltipContainer = React11__namespace.default.forwardRef(function TooltipContainer2(props, ref) {
+var TooltipContainer = React12__namespace.default.forwardRef(function TooltipContainer2(props, ref) {
   const { children, className, style, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Base5,
@@ -2978,9 +2983,9 @@ function Tooltip(props) {
     delay = 80,
     className
   } = props;
-  const referenceRef = React11__namespace.default.useRef(null);
-  const arrowRef = React11__namespace.default.useRef(null);
-  const [open, setOpen] = React11__namespace.default.useState(false);
+  const referenceRef = React12__namespace.default.useRef(null);
+  const arrowRef = React12__namespace.default.useRef(null);
+  const [open, setOpen] = React12__namespace.default.useState(false);
   const { x, y, refs, strategy, middlewareData, context: context2 } = react.useFloating({
     open,
     onOpenChange: setOpen,
@@ -3009,7 +3014,7 @@ function Tooltip(props) {
     role
   ]);
   const referenceProps = getReferenceProps({});
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (!follow || !referenceRef.current) return;
     const el = referenceRef.current;
     const onMove = (e) => {
@@ -3032,14 +3037,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__namespace.default.Children.toArray(children);
+  const childrenArray = React12__namespace.default.Children.toArray(children);
   const hasMultipleChildren = childrenArray.length > 1;
   let child;
   if (hasMultipleChildren) {
     child = /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-block" }, children });
   } else {
-    const only = React11__namespace.default.Children.only(children);
-    const isDomElement = React11__namespace.default.isValidElement(only) && typeof only.type === "string";
+    const only = React12__namespace.default.Children.only(children);
+    const isDomElement = React12__namespace.default.isValidElement(only) && typeof only.type === "string";
     child = isDomElement ? only : (
       // Ensure the wrapper reliably captures mouseenter/pointerenter and can contain block elements
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-block" }, children: only })
@@ -3057,7 +3062,7 @@ function Tooltip(props) {
       originalRef.current = node;
   };
   const refAttrs = referenceProps;
-  const cloned = React11__namespace.default.cloneElement(
+  const cloned = React12__namespace.default.cloneElement(
     child,
     {
       ...refAttrs,
@@ -3066,11 +3071,11 @@ function Tooltip(props) {
     }
   );
   if (disabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: cloned });
-  const [isMounted, setIsMounted] = React11__namespace.default.useState(false);
-  const closeTimerRef = React11__namespace.default.useRef(
+  const [isMounted, setIsMounted] = React12__namespace.default.useState(false);
+  const closeTimerRef = React12__namespace.default.useRef(
     null
   );
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     if (closeTimerRef.current) {
       clearTimeout(closeTimerRef.current);
       closeTimerRef.current = null;
@@ -3093,24 +3098,24 @@ function Tooltip(props) {
   let arrowEl = null;
   let floatingNode = null;
   const findRoleTooltipElement = (node) => {
-    if (!React11__namespace.default.isValidElement(node)) return null;
+    if (!React12__namespace.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__namespace.default.Children.toArray(kids);
+    const arr = React12__namespace.default.Children.toArray(kids);
     for (const c of arr) {
-      if (React11__namespace.default.isValidElement(c) && c.props?.role === "tooltip") {
+      if (React12__namespace.default.isValidElement(c) && c.props?.role === "tooltip") {
         return c;
       }
     }
     return null;
   };
-  const isCustomTooltip = React11__namespace.default.isValidElement(content) && !!(content.type && content.type.isBlockTooltipContainer);
+  const isCustomTooltip = React12__namespace.default.isValidElement(content) && !!(content.type && content.type.isBlockTooltipContainer);
   const customEl = isCustomTooltip ? content : findRoleTooltipElement(content);
-  const containerRef = React11__namespace.default.useRef(null);
-  const [containerBg, setContainerBg] = React11__namespace.default.useState();
-  React11__namespace.default.useEffect(() => {
+  const containerRef = React12__namespace.default.useRef(null);
+  const [containerBg, setContainerBg] = React12__namespace.default.useState();
+  React12__namespace.default.useEffect(() => {
     if (!(open || isMounted)) return;
     const el = containerRef.current;
     if (!el) return;
@@ -3218,7 +3223,7 @@ function Tooltip(props) {
               else if (originalChildRef && typeof originalChildRef === "object")
                 originalChildRef.current = node;
             };
-            return React11__namespace.default.cloneElement(
+            return React12__namespace.default.cloneElement(
               el,
               {
                 // Spread childProps first
@@ -3315,12 +3320,12 @@ var Svg = motionTags.svg;
 var CheckboxBtn = motionTags.button;
 function Checkbox(props) {
   const { children, onClick, ...rest } = props;
-  const [checked, setChecked] = React11__namespace.default.useState(false);
-  const [indeterminate, setIndeterminate] = React11__namespace.default.useState(false);
-  React11__namespace.default.useEffect(() => {
+  const [checked, setChecked] = React12__namespace.default.useState(false);
+  const [indeterminate, setIndeterminate] = React12__namespace.default.useState(false);
+  React12__namespace.default.useEffect(() => {
     setChecked(!!rest.checked);
   }, [rest.checked]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     setIndeterminate(!!rest.indeterminate);
   }, [rest.indeterminate]);
   const isIndeterminate = typeof rest.indeterminate === "boolean";
@@ -3412,7 +3417,7 @@ function Block(props) {
     tooltip,
     ...rest
   } = anyProps;
-  const fileInputRef = React11__namespace.useRef(null);
+  const fileInputRef = React12__namespace.useRef(null);
   const isLoading = anyProps.isLoading;
   const multiple = anyProps.multiple;
   const is = anyProps.is;
@@ -3449,7 +3454,7 @@ function Block(props) {
       ...anyProps
     }
   ) : extract.filepickerAllowed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick: () => fileInputRef.current?.click(), children: [
-    React11__namespace.createElement(
+    React12__namespace.createElement(
       Comp,
       {
         cursor: "pointer",
@@ -3479,7 +3484,7 @@ function Block(props) {
         value: ""
       }
     )
-  ] }) : React11__namespace.createElement(
+  ] }) : React12__namespace.createElement(
     Comp,
     {
       ...isLoading && { "data-loading": isLoading },
@@ -3587,16 +3592,16 @@ var saveStore = (store) => {
 
 // src/react/use-theme/index.ts
 function useTheme() {
-  const [store, setStore] = React11__namespace.default.useState(getInitialStore);
-  const storeRef = React11__namespace.default.useRef(store);
-  const isInternalUpdateRef = React11__namespace.default.useRef(false);
-  React11__namespace.default.useEffect(() => {
+  const [store, setStore] = React12__namespace.default.useState(getInitialStore);
+  const storeRef = React12__namespace.default.useRef(store);
+  const isInternalUpdateRef = React12__namespace.default.useRef(false);
+  React12__namespace.default.useEffect(() => {
     storeRef.current = store;
   }, [store]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     document.documentElement.setAttribute("data-theme", store.value);
   }, [store.value]);
-  React11__namespace.default.useEffect(() => {
+  React12__namespace.default.useEffect(() => {
     const handleStorageChange = (e) => {
       if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
         setStore(getInitialStore());
@@ -3626,7 +3631,6 @@ function useTheme() {
     saveStore(newStore);
   };
   const toggle = (theme) => {
-    console.log("toggle theme");
     const newStore = {
       value: theme ?? (storeRef.current.value === "light" ? "dark" : "light"),
       isManual: true
@@ -3640,8 +3644,8 @@ function useTheme() {
 
 // src/react/index.ts
 function useDebounce(value, delay = 500) {
-  const [debouncedValue, setDebouncedValue] = React11__namespace.default.useState(value);
-  React11__namespace.default.useEffect(() => {
+  const [debouncedValue, setDebouncedValue] = React12__namespace.default.useState(value);
+  React12__namespace.default.useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
@@ -3652,10 +3656,10 @@ function useDebounce(value, delay = 500) {
   return debouncedValue;
 }
 function useThrottle(value, interval = 500) {
-  const [throttledValue, setThrottledValue] = React11__namespace.default.useState(value);
-  const lastUpdate = React11__namespace.default.useRef(0);
-  const timeoutRef = React11__namespace.default.useRef(null);
-  React11__namespace.default.useEffect(() => {
+  const [throttledValue, setThrottledValue] = React12__namespace.default.useState(value);
+  const lastUpdate = React12__namespace.default.useRef(0);
+  const timeoutRef = React12__namespace.default.useRef(null);
+  React12__namespace.default.useEffect(() => {
     const now = Date.now();
     const timeSinceLastUpdate = now - lastUpdate.current;
     if (timeSinceLastUpdate >= interval) {
@@ -3685,8 +3689,8 @@ function useMatchMedia2(queries, defaultValues = []) {
     const matchedQueries = mediaQueryLists.map((mql) => mql.matches);
     return matchedQueries;
   };
-  const [value, setValue] = React11__namespace.default.useState(getValue);
-  React11__namespace.default.useLayoutEffect(() => {
+  const [value, setValue] = React12__namespace.default.useState(getValue);
+  React12__namespace.default.useLayoutEffect(() => {
     const handler = () => setValue(getValue);
     mediaQueryLists.forEach((mql) => mql.addListener(handler));
     return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));