@nation-a/ui 0.11.2 → 0.11.4

package/dist/index.js

@@ -5901,7 +5901,7 @@ const dialogRecipe = sva({
       top: "0",
       left: "0",
       width: "100vw",
-      zIndex: "overlay",
+      zIndex: "popover",
       pointerEvents: "auto",
       _open: {
         animation: "backdrop-in"
@@ -14060,19 +14060,19 @@ function createScopedAnimate(scope) {
   return scopedAnimate;
 }
 const animate = createScopedAnimate();
-var MAX_HEIGHT = "calc(100% - env(safe-area-inset-top) - 34px)";
-var IS_SSR = typeof window === "undefined";
-var DEFAULT_TWEEN_CONFIG = {
+const MAX_HEIGHT = "calc(100% - env(safe-area-inset-top))";
+const IS_SSR = typeof window === "undefined";
+const DEFAULT_TWEEN_CONFIG = {
   ease: "easeOut",
   duration: 0.2
 };
-var REDUCED_MOTION_TWEEN_CONFIG = {
+const REDUCED_MOTION_TWEEN_CONFIG = {
   ease: "linear",
   duration: 0.01
 };
-var DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
-var DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
-var useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
+const DEFAULT_DRAG_CLOSE_THRESHOLD = 0.6;
+const DEFAULT_DRAG_VELOCITY_THRESHOLD = 500;
+const useIsomorphicLayoutEffect = IS_SSR ? useEffect : useLayoutEffect;
 function useModalEffect({
   y,
   rootId,
@@ -14152,19 +14152,19 @@ function useEventCallbacks(isOpen, callbacks) {
   const handleAnimationComplete = useCallback(() => {
     var _a, _b, _c, _d;
     if (!didOpen.current) {
-      (_b = (_a = callbacks.current).onOpenEnd) == null ? void 0 : _b.call(_a);
+      (_b = (_a = callbacks.current) == null ? void 0 : _a.onOpenEnd) == null ? void 0 : _b.call(_a);
       didOpen.current = true;
     } else {
-      (_d = (_c = callbacks.current).onCloseEnd) == null ? void 0 : _d.call(_c);
+      (_d = (_c = callbacks.current) == null ? void 0 : _c.onCloseEnd) == null ? void 0 : _d.call(_c);
       didOpen.current = false;
     }
   }, [isOpen, prevOpen]);
   useEffect(() => {
     var _a, _b, _c, _d;
     if (!prevOpen && isOpen) {
-      (_b = (_a = callbacks.current).onOpenStart) == null ? void 0 : _b.call(_a);
+      (_b = (_a = callbacks.current) == null ? void 0 : _a.onOpenStart) == null ? void 0 : _b.call(_a);
     } else if (!isOpen && prevOpen) {
-      (_d = (_c = callbacks.current).onCloseStart) == null ? void 0 : _d.call(_c);
+      (_d = (_c = callbacks.current) == null ? void 0 : _c.onCloseStart) == null ? void 0 : _d.call(_c);
     }
   }, [isOpen, prevOpen]);
   return { handleAnimationComplete };
@@ -14206,24 +14206,20 @@ function useEffectEvent(handler) {
     return fn == null ? void 0 : fn(...args);
   }, []);
 }
-var constraints = { bottom: 0, top: 0, left: 0, right: 0 };
+const constraints = { bottom: 0, top: 0, left: 0, right: 0 };
 function useDragConstraints() {
   const constraintsRef = useRef(null);
   const onMeasureDragConstraints = useCallback(() => constraints, []);
   return { constraintsRef, onMeasureDragConstraints };
 }
-var SheetContext = createContext$1(
-  void 0
-);
-var useSheetContext = () => {
+const SheetContext = createContext$1(void 0);
+const useSheetContext = () => {
   const context2 = useContext(SheetContext);
   if (!context2) throw new Error("Sheet context error");
   return context2;
 };
-var SheetScrollerContext = createContext$1(void 0);
-function SheetScrollerContextProvider({
-  children
-}) {
+const SheetScrollerContext = createContext$1(void 0);
+function SheetScrollerContextProvider({ children }) {
   const sheetContext = useSheetContext();
   const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);
   function setDragEnabled() {
@@ -14232,15 +14228,9 @@ function SheetScrollerContextProvider({
   function setDragDisabled() {
     if (!disableDrag) setDisableDrag(true);
   }
-  return /* @__PURE__ */ React__default.createElement(
-    SheetScrollerContext.Provider,
-    {
-      value: { disableDrag, setDragEnabled, setDragDisabled }
-    },
-    children
-  );
+  return /* @__PURE__ */ jsx(SheetScrollerContext.Provider, { value: { disableDrag, setDragEnabled, setDragDisabled }, children });
 }
-var useSheetScrollerContext = () => {
+const useSheetScrollerContext = () => {
   const context2 = useContext(SheetScrollerContext);
   if (!context2) throw new Error("Sheet scroller context error");
   return context2;
@@ -14305,20 +14295,20 @@ function cached(fn) {
     return res;
   };
 }
-var isMac = cached(function() {
+const isMac = cached(function() {
   return testPlatform(/^Mac/i);
 });
-var isIPhone = cached(function() {
+const isIPhone = cached(function() {
   return testPlatform(/^iPhone/i);
 });
-var isIPad = cached(function() {
+const isIPad = cached(function() {
   return testPlatform(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
   isMac() && navigator.maxTouchPoints > 1;
 });
-var isIOS = cached(function() {
+const isIOS = cached(function() {
   return isIPhone() || isIPad();
 });
-var KEYBOARD_BUFFER = 24;
+const KEYBOARD_BUFFER = 24;
 function chain(...callbacks) {
   return (...args) => {
     for (const callback of callbacks) {
@@ -14328,7 +14318,7 @@ function chain(...callbacks) {
     }
   };
 }
-var visualViewport = typeof document !== "undefined" && window.visualViewport;
+const visualViewport = typeof document !== "undefined" && window.visualViewport;
 function isScrollable(node, checkForOverflow) {
   if (!node) {
     return false;
@@ -14352,7 +14342,7 @@ function getScrollParent(node, checkForOverflow) {
   }
   return scrollableNode || document.scrollingElement || document.documentElement;
 }
-var nonTextInputTypes = /* @__PURE__ */ new Set([
+const nonTextInputTypes = /* @__PURE__ */ new Set([
   "checkbox",
   "radio",
   "range",
@@ -14363,8 +14353,8 @@ var nonTextInputTypes = /* @__PURE__ */ new Set([
   "submit",
   "reset"
 ]);
-var preventScrollCount = 0;
-var restore;
+let preventScrollCount = 0;
+let restore;
 function usePreventScroll(options = {}) {
   const { isDisabled } = options;
   useIsomorphicLayoutEffect(() => {
@@ -14532,7 +14522,7 @@ function scrollIntoView(target) {
 function willOpenKeyboard(target) {
   return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
 }
-var styles = {
+const styles = {
   wrapper: {
     position: "fixed",
     top: 0,
@@ -14543,7 +14533,7 @@ var styles = {
     pointerEvents: "none"
   },
   backdrop: {
-    zIndex: 1,
+    zIndex: "overlay",
     position: "fixed",
     top: 0,
     left: 0,
@@ -14556,7 +14546,7 @@ var styles = {
     WebkitTapHighlightColor: "transparent"
   },
   container: {
-    zIndex: 2,
+    zIndex: "modal",
     position: "absolute",
     left: 0,
     bottom: 0,
@@ -14598,7 +14588,7 @@ var styles = {
     overflowY: "auto"
   }
 };
-var Sheet = forwardRef(
+const Sheet$1 = forwardRef(
   ({
     onOpenStart,
     onOpenEnd,
@@ -14632,14 +14622,8 @@ var Sheet = forwardRef(
       ...reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig
     };
     const y = useMotionValue(windowHeight);
-    const zIndex2 = useTransform(
-      y,
-      (value) => value + 2 >= windowHeight ? -1 : (style == null ? void 0 : style.zIndex) ?? 9999
-    );
-    const visibility = useTransform(
-      y,
-      (value) => value + 2 >= windowHeight ? "hidden" : "visible"
-    );
+    const zIndex2 = useTransform(y, (value) => value + 2 >= windowHeight ? -1 : (style == null ? void 0 : style.zIndex) ?? 1300);
+    const visibility = useTransform(y, (value) => value + 2 >= windowHeight ? "hidden" : "visible");
     const callbacks = useRef({
       onOpenStart,
       onOpenEnd,
@@ -14662,9 +14646,7 @@ var Sheet = forwardRef(
       });
       console.assert(
         inDescendingOrder(snapPoints) || windowHeight === 0,
-        `Snap points need to be in descending order got: [${snapPoints.join(
-          ", "
-        )}]`
+        `Snap points need to be in descending order got: [${snapPoints.join(", ")}]`
       );
     }
     const onDrag = useEffectEvent((_, { delta }) => {
@@ -14689,9 +14671,7 @@ var Sheet = forwardRef(
         const currentY = y.get();
         let snapTo = 0;
         if (snapPoints) {
-          const snapToValues = snapPoints.map(
-            (p) => sheetHeight - Math.min(p, sheetHeight)
-          );
+          const snapToValues = snapPoints.map((p) => sheetHeight - Math.min(p, sheetHeight));
           if (detent === "content-height" && !snapToValues.includes(0)) {
             snapToValues.unshift(0);
           }
@@ -14703,9 +14683,7 @@ var Sheet = forwardRef(
         animate(y, snapTo, animationOptions);
         if (snapPoints && onSnap) {
           const snapValue = Math.abs(Math.round(snapPoints[0] - snapTo));
-          const snapIndex = snapPoints.indexOf(
-            getClosest(snapPoints, snapValue)
-          );
+          const snapIndex = snapPoints.indexOf(getClosest(snapPoints, snapValue));
           onSnap(snapIndex);
         }
         const roundedSheetHeight = Math.round(sheetHeight);
@@ -14769,24 +14747,13 @@ var Sheet = forwardRef(
       reduceMotion,
       disableDrag
     };
-    const sheet = /* @__PURE__ */ React__default.createElement(SheetContext.Provider, { value: context2 }, /* @__PURE__ */ React__default.createElement(
-      motion.div,
-      {
-        ...rest,
-        ref,
-        style: { ...styles.wrapper, zIndex: zIndex2, visibility, ...style }
-      },
-      /* @__PURE__ */ React__default.createElement(AnimatePresence, null, isOpen ? /* @__PURE__ */ React__default.createElement(SheetScrollerContextProvider, null, Children.map(
-        children,
-        (child, i) => cloneElement(child, { key: `sheet-child-${i}` })
-      )) : null)
-    ));
+    const sheet = /* @__PURE__ */ jsx(SheetContext.Provider, { value: context2, children: /* @__PURE__ */ jsx(motion.div, { ...rest, ref, style: { ...styles.wrapper, zIndex: zIndex2, visibility, ...style }, children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsx(SheetScrollerContextProvider, { children: Children.map(children, (child, i) => cloneElement(child, { key: `sheet-child-${i}` })) }) : null }) }) });
     if (IS_SSR) return sheet;
     return createPortal(sheet, mountPoint ?? document.body);
   }
 );
-Sheet.displayName = "Sheet";
-var SheetContainer = forwardRef(
+Sheet$1.displayName = "Sheet";
+const SheetContainer = forwardRef(
   ({ children, style = {}, className = "", ...rest }, ref) => {
     const {
       y,
@@ -14804,7 +14771,7 @@ var SheetContainer = forwardRef(
     const initialY = snapPoints ? snapPoints[0] - snapPoints[initialSnap] : 0;
     const maxSnapHeight = snapPoints ? snapPoints[0] : null;
     const height = maxSnapHeight !== null ? `min(${maxSnapHeight}px, ${MAX_HEIGHT})` : MAX_HEIGHT;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       motion.div,
       {
         ...rest,
@@ -14820,20 +14787,20 @@ var SheetContainer = forwardRef(
         initial: reduceMotion ? false : { y: windowHeight },
         animate: { y: initialY, transition: animationOptions },
         exit: { y: windowHeight, transition: animationOptions },
-        onAnimationComplete: handleAnimationComplete
-      },
-      children
+        onAnimationComplete: handleAnimationComplete,
+        children
+      }
     );
   }
 );
 SheetContainer.displayName = "SheetContainer";
-var SheetContent = forwardRef(
+const SheetContent = forwardRef(
   ({ children, style, disableDrag, className = "", ...rest }, ref) => {
     const sheetContext = useSheetContext();
     const sheetScrollerContext = useSheetScrollerContext();
     const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
     const dragProps = disableDrag || sheetScrollerContext.disableDrag ? void 0 : sheetContext.dragProps;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       motion.div,
       {
         ...rest,
@@ -14842,74 +14809,67 @@ var SheetContent = forwardRef(
         style: { ...styles.content, ...style },
         ...dragProps,
         dragConstraints: constraintsRef,
-        onMeasureDragConstraints
-      },
-      children
+        onMeasureDragConstraints,
+        children
+      }
     );
   }
 );
 SheetContent.displayName = "SheetContent";
-var SheetHeader = forwardRef(
-  ({ children, style, disableDrag, ...rest }, ref) => {
-    const { indicatorRotation, dragProps } = useSheetContext();
-    const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
-    const _dragProps = disableDrag ? void 0 : dragProps;
-    const indicator1Transform = useTransform(
-      indicatorRotation,
-      (r) => `translateX(2px) rotate(${r}deg)`
-    );
-    const indicator2Transform = useTransform(
-      indicatorRotation,
-      (r) => `translateX(-2px) rotate(${-1 * r}deg)`
-    );
-    return /* @__PURE__ */ React__default.createElement(
-      motion.div,
-      {
-        ...rest,
-        ref: mergeRefs([ref, constraintsRef]),
-        style: { ...styles.headerWrapper, ...style },
-        ..._dragProps,
-        dragConstraints: constraintsRef,
-        onMeasureDragConstraints
-      },
-      children || /* @__PURE__ */ React__default.createElement("div", { className: "react-modal-sheet-header", style: styles.header }, /* @__PURE__ */ React__default.createElement(
-        motion.span,
-        {
-          className: "react-modal-sheet-drag-indicator",
-          style: { ...styles.indicator, transform: indicator1Transform }
-        }
-      ), /* @__PURE__ */ React__default.createElement(
-        motion.span,
-        {
-          className: "react-modal-sheet-drag-indicator",
-          style: { ...styles.indicator, transform: indicator2Transform }
-        }
-      ))
-    );
-  }
-);
+const SheetHeader = forwardRef(({ children, style, disableDrag, ...rest }, ref) => {
+  const { indicatorRotation, dragProps } = useSheetContext();
+  const { constraintsRef, onMeasureDragConstraints } = useDragConstraints();
+  const _dragProps = disableDrag ? void 0 : dragProps;
+  const indicator1Transform = useTransform(indicatorRotation, (r) => `translateX(2px) rotate(${r}deg)`);
+  const indicator2Transform = useTransform(indicatorRotation, (r) => `translateX(-2px) rotate(${-1 * r}deg)`);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ...rest,
+      ref: mergeRefs([ref, constraintsRef]),
+      style: { ...styles.headerWrapper, ...style },
+      ..._dragProps,
+      dragConstraints: constraintsRef,
+      onMeasureDragConstraints,
+      children: children || /* @__PURE__ */ jsxs("div", { className: "react-modal-sheet-header", style: styles.header, children: [
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "react-modal-sheet-drag-indicator",
+            style: { ...styles.indicator, transform: indicator1Transform }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "react-modal-sheet-drag-indicator",
+            style: { ...styles.indicator, transform: indicator2Transform }
+          }
+        )
+      ] })
+    }
+  );
+});
 SheetHeader.displayName = "SheetHeader";
-var isClickable = (props) => !!props.onClick || !!props.onTap;
-var SheetBackdrop = forwardRef(
-  ({ style = {}, className = "", ...rest }, ref) => {
-    const Comp = isClickable(rest) ? motion.button : motion.div;
-    const pointerEvents = isClickable(rest) ? "auto" : "none";
-    return /* @__PURE__ */ React__default.createElement(
-      Comp,
-      {
-        ...rest,
-        ref,
-        className: `react-modal-sheet-backdrop ${className}`,
-        style: { ...styles.backdrop, ...style, pointerEvents },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 }
-      }
-    );
-  }
-);
+const isClickable = (props) => !!props.onClick || !!props.onTap;
+const SheetBackdrop = forwardRef(({ style = {}, className = "", ...rest }, ref) => {
+  const Comp = isClickable(rest) ? motion.button : motion.div;
+  const pointerEvents = isClickable(rest) ? "auto" : "none";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...rest,
+      ref,
+      className: `react-modal-sheet-backdrop ${className}`,
+      style: { ...styles.backdrop, ...style, pointerEvents },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 }
+    }
+  );
+});
 SheetBackdrop.displayName = "SheetBackdrop";
-var SheetScroller = forwardRef(
+const SheetScroller = forwardRef(
   ({ draggableAt = "top", children, style, className = "", ...rest }, ref) => {
     const sheetScrollerContext = useSheetScrollerContext();
     function determineDragState(element) {
@@ -14938,21 +14898,21 @@ var SheetScroller = forwardRef(
       }
     }
     const scrollProps = isTouchDevice() ? { onScroll, onTouchStart } : void 0;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ...rest,
         ref,
         className: `react-modal-sheet-scroller ${className}`,
         style: { ...styles.scroller, ...style },
-        ...scrollProps
-      },
-      children
+        ...scrollProps,
+        children
+      }
     );
   }
 );
 SheetScroller.displayName = "SheetScroller";
-var Sheet2 = Object.assign(Sheet, {
+const Sheet = Object.assign(Sheet$1, {
   Container: SheetContainer,
   Header: SheetHeader,
   Content: SheetContent,
@@ -14971,7 +14931,8 @@ const bottomSheetRecipe = sva({
     container: {
       backgroundColor: "surface.layer_1",
       boxShadow: "md",
-      background: "surface.layer_1"
+      background: "surface.layer_1",
+      zIndex: "modal"
     },
     header: {
       display: "flex",
@@ -14989,11 +14950,13 @@ const bottomSheetRecipe = sva({
       backgroundColor: "surface.layer_1",
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      boxShadow: "overlay"
+      boxShadow: "overlay",
+      zIndex: "modal"
     },
     backdrop: {
       backgroundColor: "shadow.overlay",
-      opacity: 0.5
+      opacity: 0.5,
+      zIndex: "overlay"
     }
   },
   variants: {
@@ -15015,7 +14978,7 @@ const BottomSheet = forwardRef(
     const snapPoints = snapPercent ? [snapPercent.max * window.innerHeight, snapPercent.min * window.innerHeight] : void 0;
     const styles2 = bottomSheetRecipe({ fullHeight });
     return /* @__PURE__ */ jsx(BottomSheetContext.Provider, { value: { rounded, onClose }, children: /* @__PURE__ */ jsx(
-      Sheet2,
+      Sheet,
       {
         ref,
         snapPoints,
@@ -15042,11 +15005,11 @@ const Content$2 = forwardRef(
     const { rounded } = useContext(BottomSheetContext);
     const contentClass = cx(styles2.content, className, cssProp ? css$1(cssProp) : void 0);
     return /* @__PURE__ */ jsx(
-      Sheet2.Container,
+      Sheet.Container,
       {
         style: { backgroundColor: "transparent", borderTopLeftRadius: rounded, borderTopRightRadius: rounded },
         children: /* @__PURE__ */ jsx(
-          Sheet2.Content,
+          Sheet.Content,
           {
             ref,
             className: contentClass,
@@ -15069,7 +15032,7 @@ const Backdrop = forwardRef(
     const { onClose } = useContext(BottomSheetContext);
     const backdropClass = cx(styles2.backdrop, className);
     return /* @__PURE__ */ jsx(
-      Sheet2.Backdrop,
+      Sheet.Backdrop,
       {
         ref,
         className: backdropClass,
@@ -15105,7 +15068,7 @@ BottomSheet.Header = Header;
 BottomSheet.Content = Content$2;
 BottomSheet.Backdrop = Backdrop;
 BottomSheet.Handle = Handle;
-BottomSheet.Scroller = Sheet2.Scroller;
+BottomSheet.Scroller = Sheet.Scroller;
 const navigationRecipe = sva({
   className: "navigation",
   slots: anatomy$1.keys(),