@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/Popup/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { forwardRef, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, startTransition, useEffect } from "react";
+import { forwardRef, useRef, useImperativeHandle, useState, useId, useMemo, useCallback, startTransition, useLayoutEffect, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { isClientSide } from "../../helpers/isClientSide.js";
 import { DEFAULT_POSITIONS, computePositions } from "./helpers.js";
@@ -14,278 +14,396 @@ const noop = () => {
 const stopClickPropagation = (event) => {
   event.nativeEvent.stopImmediatePropagation();
 };
-const Popup = forwardRef(({
-  children,
-  text = "",
-  placement = "auto",
-  align = "center",
-  id,
-  className,
-  containerFullWidth,
-  containerFullHeight,
-  maxWidth = "14.5rem",
-  maxHeight,
-  visible,
-  innerRef,
-  role = "popup",
-  "data-testid": dataTestId,
-  hasArrow = true,
-  onClose,
-  tabIndex = 0,
-  onKeyDown,
-  "aria-haspopup": ariaHasPopup,
-  hideOnClickOutside = false,
-  debounceDelay = DEFAULT_DEBOUNCE_DURATION,
-  disableAnimation = false,
-  portalTarget,
-  dynamicDomRendering = true,
-  style
-}, ref) => {
-  const childrenRef = useRef(null);
-  useImperativeHandle(innerRef, () => childrenRef.current);
-  const innerPopupRef = useRef(null);
-  useImperativeHandle(ref, () => innerPopupRef.current);
-  const timer = useRef(void 0);
-  const popupPortalTarget = useMemo(() => {
-    if (portalTarget) {
-      return portalTarget;
-    }
-    if (role === "dialog") {
-      if (childrenRef.current) {
-        return childrenRef.current;
-      }
-      if (isClientSide) {
-        return document.body;
-      }
-      return null;
+const getPopupPortalTarget = ({
+  node,
+  role,
+  portalTarget
+}) => {
+  if (portalTarget) {
+    return portalTarget;
+  }
+  if (role === "dialog") {
+    if (node) {
+      return node;
     }
-    if (typeof window !== "undefined") {
+    if (isClientSide) {
       return document.body;
     }
     return null;
-  }, [portalTarget, role, childrenRef.current]);
-  const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
-  const debounceTimer = useRef(void 0);
-  const [visibleInDom, setVisibleInDom] = useState(false);
-  const [reverseAnimation, setReverseAnimation] = useState(false);
-  const [positions, setPositions] = useState({
-    ...DEFAULT_POSITIONS
-  });
-  const uniqueId = useId();
-  const generatedId = id ?? uniqueId;
-  const isControlled = visible !== void 0;
-  const isAnimated = useMemo(() => animationDuration > 0 && !maxHeight, [animationDuration, maxHeight]);
-  const generatePopupPositions = useCallback(() => {
-    if (childrenRef.current && innerPopupRef.current) {
-      setPositions(computePositions({
-        align,
-        childrenRef,
-        hasArrow,
-        placement,
-        popupPortalTarget,
-        popupRef: innerPopupRef
-      }));
-    }
-  }, [hasArrow, placement, popupPortalTarget, align]);
-  const onWindowChangeDetected = useCallback(() => {
-    if (innerPopupRef.current) {
-      innerPopupRef.current.style.animation = "none";
-    }
-    generatePopupPositions();
-  }, [generatePopupPositions, innerPopupRef]);
-  const unmountPopupFromDom = useCallback(() => {
-    setVisibleInDom(false);
-    setReverseAnimation(false);
-    window.removeEventListener("scroll", onWindowChangeDetected, true);
-  }, [onWindowChangeDetected]);
-  const closePopup = useCallback(() => {
-    const closeFunction = () => {
-      if (!disableAnimation) {
-        setReverseAnimation(true);
-        timer.current = setTimeout(() => {
+  }
+  if (typeof window !== "undefined") {
+    return document.body;
+  }
+  return null;
+};
+const Popup = forwardRef(
+  ({
+    children,
+    text = "",
+    placement = "auto",
+    align = "center",
+    id,
+    className,
+    containerFullWidth,
+    containerFullHeight,
+    maxWidth = "14.5rem",
+    maxHeight,
+    visible,
+    innerRef,
+    role = "popup",
+    "data-testid": dataTestId,
+    hasArrow = true,
+    onClose,
+    tabIndex = 0,
+    onKeyDown,
+    "aria-haspopup": ariaHasPopup,
+    hideOnClickOutside = false,
+    debounceDelay = DEFAULT_DEBOUNCE_DURATION,
+    disableAnimation = false,
+    portalTarget,
+    dynamicDomRendering = true,
+    style
+  }, ref) => {
+    const childrenRef = useRef(null);
+    useImperativeHandle(innerRef, () => childrenRef.current);
+    const innerPopupRef = useRef(null);
+    useImperativeHandle(ref, () => innerPopupRef.current);
+    const timer = useRef(void 0);
+    const popupPortalTarget = getPopupPortalTarget({
+      node: childrenRef.current,
+      portalTarget,
+      role
+    });
+    const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
+    const debounceTimer = useRef(void 0);
+    const [visibleInDom, setVisibleInDom] = useState(false);
+    const [reverseAnimation, setReverseAnimation] = useState(false);
+    const [positions, setPositions] = useState({
+      ...DEFAULT_POSITIONS
+    });
+    const uniqueId = useId();
+    const generatedId = id ?? uniqueId;
+    const isControlled = visible !== void 0;
+    const isAnimated = useMemo(
+      () => animationDuration > 0 && !maxHeight,
+      [animationDuration, maxHeight]
+    );
+    const generatePopupPositions = useCallback(() => {
+      if (childrenRef.current && innerPopupRef.current && popupPortalTarget) {
+        setPositions(
+          computePositions({
+            align,
+            childrenRef,
+            hasArrow,
+            placement,
+            popupPortalTarget,
+            popupRef: innerPopupRef
+          })
+        );
+      }
+    }, [hasArrow, placement, align, popupPortalTarget]);
+    const onWindowChangeDetected = useCallback(() => {
+      if (innerPopupRef.current) {
+        innerPopupRef.current.style.animation = "none";
+      }
+      generatePopupPositions();
+    }, [generatePopupPositions, innerPopupRef]);
+    const unmountPopupFromDom = useCallback(() => {
+      setVisibleInDom(false);
+      setReverseAnimation(false);
+      window.removeEventListener("scroll", onWindowChangeDetected, true);
+    }, [onWindowChangeDetected]);
+    const closePopup = useCallback(() => {
+      const closeFunction = () => {
+        if (!disableAnimation) {
+          setReverseAnimation(true);
+          timer.current = setTimeout(() => {
+            onClose?.();
+            unmountPopupFromDom();
+          }, animationDuration);
+        } else {
           onClose?.();
           unmountPopupFromDom();
-        }, animationDuration);
+        }
+      };
+      if (!disableAnimation) {
+        debounceTimer.current = setTimeout(
+          () => {
+            closeFunction();
+          },
+          debounceDelay && !disableAnimation ? debounceDelay : 0
+        );
       } else {
-        onClose?.();
-        unmountPopupFromDom();
-      }
-    };
-    if (!disableAnimation) {
-      debounceTimer.current = setTimeout(() => {
         closeFunction();
-      }, debounceDelay && !disableAnimation ? debounceDelay : 0);
-    } else {
-      closeFunction();
-    }
-  }, [animationDuration, disableAnimation, debounceDelay, onClose, unmountPopupFromDom]);
-  const onPointerEvent = useCallback((isVisible) => () => {
-    if (!visible && debounceDelay > 0 && debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
-      debounceTimer.current = void 0;
-    }
-    if (!isVisible && innerPopupRef.current && !debounceTimer.current) {
-      closePopup();
-    } else if (isVisible) {
-      if (timer.current) {
-        setReverseAnimation(false);
-        clearTimeout(timer.current);
-        timer.current = void 0;
       }
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-        debounceTimer.current = void 0;
+    }, [
+      animationDuration,
+      disableAnimation,
+      debounceDelay,
+      onClose,
+      unmountPopupFromDom
+    ]);
+    const onPointerEvent = useCallback(
+      (isVisible) => () => {
+        if (!visible && debounceDelay > 0 && debounceTimer.current) {
+          clearTimeout(debounceTimer.current);
+          debounceTimer.current = void 0;
+        }
+        if (!isVisible && innerPopupRef.current && !debounceTimer.current) {
+          closePopup();
+        } else if (isVisible) {
+          if (timer.current) {
+            setReverseAnimation(false);
+            clearTimeout(timer.current);
+            timer.current = void 0;
+          }
+          if (debounceTimer.current) {
+            clearTimeout(debounceTimer.current);
+            debounceTimer.current = void 0;
+          }
+          if (debounceDelay > 0) {
+            debounceTimer.current = setTimeout(() => {
+              setVisibleInDom(true);
+            }, debounceDelay);
+          } else {
+            startTransition(() => {
+              setVisibleInDom(true);
+            });
+          }
+        }
+      },
+      [closePopup, debounceDelay, visible]
+    );
+    useLayoutEffect(() => {
+      const currentRef = childrenRef.current;
+      const mutationObserver = new MutationObserver(() => {
+        generatePopupPositions();
+      });
+      const resizeObserver = new ResizeObserver(() => {
+        generatePopupPositions();
+      });
+      if (currentRef) {
+        resizeObserver.observe(currentRef);
+        mutationObserver.observe(currentRef, { characterData: true });
       }
-      if (debounceDelay > 0) {
-        debounceTimer.current = setTimeout(() => {
-          setVisibleInDom(true);
-        }, debounceDelay);
-      } else {
-        startTransition(() => {
-          setVisibleInDom(true);
-        });
+      return () => {
+        if (currentRef) {
+          resizeObserver.unobserve(currentRef);
+          mutationObserver.disconnect();
+        }
+      };
+    }, [visibleInDom, generatePopupPositions]);
+    useLayoutEffect(() => {
+      if (visibleInDom) {
+        generatePopupPositions();
+        if (popupPortalTarget === document.body) {
+          window.addEventListener("scroll", onWindowChangeDetected, true);
+        }
+        window.addEventListener("resize", onWindowChangeDetected, true);
       }
-    }
-  }, [closePopup, debounceDelay, visible]);
-  useEffect(() => {
-    if (visibleInDom) {
-      generatePopupPositions();
-      if (popupPortalTarget === document.body) {
-        window.addEventListener("scroll", onWindowChangeDetected, true);
+      return () => {
+        window.removeEventListener("scroll", onWindowChangeDetected, true);
+        window.removeEventListener("resize", onWindowChangeDetected, true);
+        if (timer.current) {
+          clearTimeout(timer.current);
+          timer.current = void 0;
+        }
+      };
+    }, [
+      generatePopupPositions,
+      onWindowChangeDetected,
+      visibleInDom,
+      maxWidth,
+      popupPortalTarget
+    ]);
+    useLayoutEffect(() => {
+      if (visibleInDom && innerPopupRef.current) {
+        innerPopupRef.current.style.opacity = "1";
       }
-      window.addEventListener("resize", onWindowChangeDetected, true);
-    }
-    return () => {
-      window.removeEventListener("scroll", onWindowChangeDetected, true);
-      window.removeEventListener("resize", onWindowChangeDetected, true);
-      if (timer.current) {
-        clearTimeout(timer.current);
-        timer.current = void 0;
+    }, [visibleInDom, positions]);
+    useEffect(() => {
+      if (isControlled) {
+        onPointerEvent(visible)();
       }
-    };
-  }, [generatePopupPositions, onWindowChangeDetected, visibleInDom, maxWidth, popupPortalTarget]);
-  useEffect(() => {
-    if (visibleInDom && innerPopupRef.current) {
-      innerPopupRef.current.style.opacity = "1";
-    }
-  }, [positions]);
-  useEffect(() => {
-    if (isControlled) {
-      onPointerEvent(visible)();
-    }
-  }, [isControlled, onPointerEvent, visible]);
-  useEffect(() => {
-    const handleEscPress = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        event.stopPropagation();
-        closePopup();
+    }, [isControlled, onPointerEvent, visible]);
+    useEffect(() => {
+      const handleEscPress = (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          closePopup();
+        }
+      };
+      const handleClickOutside = (event) => {
+        const popupCurrent = innerPopupRef.current;
+        const childrenCurrent = childrenRef.current;
+        if (popupCurrent && hideOnClickOutside && !event.defaultPrevented && event.target && event.target !== popupCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !popupCurrent.contains(event.target)) {
+          event.preventDefault();
+          event.stopPropagation();
+          closePopup();
+        }
+      };
+      if (visibleInDom) {
+        document.body.addEventListener("keyup", handleEscPress);
+        document.body.addEventListener("click", handleClickOutside);
       }
-    };
-    const handleClickOutside = (event) => {
-      const popupCurrent = innerPopupRef.current;
-      const childrenCurrent = childrenRef.current;
-      if (popupCurrent && hideOnClickOutside && !event.defaultPrevented && event.target && event.target !== popupCurrent && event.target !== childrenCurrent && !childrenCurrent?.contains(event.target) && !popupCurrent.contains(event.target)) {
-        event.preventDefault();
-        event.stopPropagation();
-        closePopup();
+      return () => {
+        document.body.removeEventListener("keyup", handleEscPress);
+        document.body.removeEventListener("click", handleClickOutside);
+      };
+    }, [
+      closePopup,
+      visibleInDom,
+      innerPopupRef,
+      childrenRef,
+      hideOnClickOutside
+    ]);
+    const handleFocusTrap = useCallback((event) => {
+      const isTabPressed = event.key === "Tab";
+      if (!isTabPressed) {
+        return;
       }
-    };
-    if (visibleInDom) {
-      document.body.addEventListener("keyup", handleEscPress);
-      document.body.addEventListener("click", handleClickOutside);
-    }
-    return () => {
-      document.body.removeEventListener("keyup", handleEscPress);
-      document.body.removeEventListener("click", handleClickOutside);
-    };
-  }, [closePopup, visibleInDom, innerPopupRef, childrenRef, hideOnClickOutside]);
-  const handleFocusTrap = useCallback((event) => {
-    const isTabPressed = event.key === "Tab";
-    if (!isTabPressed) {
-      return;
-    }
-    event.stopPropagation();
-    const focusableEls = innerPopupRef.current?.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])") ?? [];
-    if (focusableEls.length === 0) {
-      event.preventDefault();
-    }
-    const firstFocusableEl = focusableEls[0];
-    const lastFocusableEl = focusableEls[focusableEls.length - 1];
-    if (event.shiftKey) {
-      if (document.activeElement === firstFocusableEl || document.activeElement === innerPopupRef.current) {
-        lastFocusableEl.focus();
+      event.stopPropagation();
+      const focusableEls = innerPopupRef.current?.querySelectorAll(
+        "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])"
+      );
+      if (focusableEls?.length === 0) {
         event.preventDefault();
       }
-    } else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
-      firstFocusableEl.focus();
-      event.preventDefault();
-    }
-  }, []);
-  useEffect(() => () => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    if (debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
-    }
-  }, []);
-  const renderChildren = useCallback(() => {
-    if (typeof children === "function") {
-      return children({
-        onBlur: !isControlled ? onPointerEvent(false) : noop,
-        onFocus: !isControlled ? onPointerEvent(true) : noop,
-        onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
-        onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
-        ref: childrenRef
-      });
-    }
-    return /* @__PURE__ */ jsx("div", { "aria-controls": generatedId, "aria-describedby": generatedId, "aria-haspopup": ariaHasPopup, className: childrenContainerPopup({
-      fullHeight: containerFullHeight,
-      fullWidth: containerFullWidth
-    }), onBlur: !isControlled ? onPointerEvent(false) : noop, onFocus: !isControlled ? onPointerEvent(true) : noop, onKeyDown: (event) => {
-      onKeyDown?.(event);
-    }, onPointerEnter: !isControlled ? onPointerEvent(true) : noop, onPointerLeave: !isControlled ? onPointerEvent(false) : noop, ref: childrenRef, tabIndex, children });
-  }, [ariaHasPopup, children, containerFullHeight, containerFullWidth, generatedId, isControlled, onKeyDown, onPointerEvent, tabIndex]);
-  const shouldRender = useMemo(() => {
-    if (!dynamicDomRendering) {
-      return true;
-    }
-    if (dynamicDomRendering && visibleInDom) {
-      return true;
-    }
-    return false;
-  }, [dynamicDomRendering, visibleInDom]);
-  if (!text) {
-    if (typeof children === "function") {
-      return null;
+      if (focusableEls) {
+        const elems = [...focusableEls];
+        const firstFocusableEl = elems[0];
+        const lastFocusableEl = elems.at(-1);
+        if (event.shiftKey) {
+          if (document.activeElement === firstFocusableEl || document.activeElement === innerPopupRef.current) {
+            if (lastFocusableEl instanceof HTMLElement) {
+              lastFocusableEl.focus();
+            }
+            event.preventDefault();
+          }
+        } else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
+          if (firstFocusableEl instanceof HTMLElement) {
+            firstFocusableEl.focus();
+          }
+          event.preventDefault();
+        }
+      }
+    }, []);
+    useEffect(
+      () => () => {
+        if (timer.current) {
+          clearTimeout(timer.current);
+        }
+        if (debounceTimer.current) {
+          clearTimeout(debounceTimer.current);
+        }
+      },
+      []
+    );
+    const renderChildren = useCallback(() => {
+      if (typeof children === "function") {
+        return children({
+          onBlur: !isControlled ? onPointerEvent(false) : noop,
+          onFocus: !isControlled ? onPointerEvent(true) : noop,
+          onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+          onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+          ref: childrenRef
+        });
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-controls": generatedId,
+          "aria-describedby": generatedId,
+          "aria-haspopup": ariaHasPopup,
+          className: childrenContainerPopup({
+            fullHeight: containerFullHeight,
+            fullWidth: containerFullWidth
+          }),
+          onBlur: !isControlled ? onPointerEvent(false) : noop,
+          onFocus: !isControlled ? onPointerEvent(true) : noop,
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+          },
+          onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+          onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+          ref: childrenRef,
+          tabIndex,
+          children
+        }
+      );
+    }, [
+      ariaHasPopup,
+      children,
+      containerFullHeight,
+      containerFullWidth,
+      generatedId,
+      isControlled,
+      onKeyDown,
+      onPointerEvent,
+      tabIndex
+    ]);
+    const shouldRender = useMemo(() => {
+      if (!dynamicDomRendering) {
+        return true;
+      }
+      if (dynamicDomRendering && visibleInDom) {
+        return true;
+      }
+      return false;
+    }, [dynamicDomRendering, visibleInDom]);
+    if (!text) {
+      if (typeof children === "function") {
+        return null;
+      }
+      return children;
     }
-    return children;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      renderChildren(),
+      shouldRender ? createPortal(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${className ? `${className} ` : ""}${popup({ hasArrow, visibleInDom: !dynamicDomRendering ? visibleInDom : void 0 })} ${isAnimated ? animationPopup[reverseAnimation ? "reverse" : "notReverse"] : null}`,
+            "data-testid": dataTestId,
+            "data-visible-in-dom": !dynamicDomRendering ? visibleInDom : void 0,
+            id: generatedId,
+            onClick: stopClickPropagation,
+            onKeyDown: role === "dialog" ? handleFocusTrap : void 0,
+            onPointerEnter: !isControlled ? onPointerEvent(true) : noop,
+            onPointerLeave: !isControlled ? onPointerEvent(false) : noop,
+            ref: innerPopupRef,
+            role,
+            style: {
+              ...assignInlineVars({
+                [arrowTop]: `${positions.arrowTop}px`,
+                [arrowLeft]: `${positions.arrowLeft}px`,
+                [arrowTransform]: `${positions.arrowTransform} rotate(${positions.rotate}deg)`,
+                [popupPosition]: positions.popupPosition,
+                [animationDurationPopup]: `${animationDuration}ms`,
+                [popupInitialPosition]: positions.popupInitialPosition,
+                [maxWidthPopup]: `${typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth}`,
+                [maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+              }),
+              ...style
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: containerPopup({ hasMaxHeight: !!maxHeight }),
+                style: assignInlineVars({
+                  [maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+                }),
+                children: text
+              }
+            )
+          }
+        ),
+        popupPortalTarget
+      ) : null
+    ] });
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderChildren(),
-    shouldRender ? createPortal(/* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${popup({
-      hasArrow,
-      visibleInDom: !dynamicDomRendering ? visibleInDom : void 0
-    })} ${isAnimated ? animationPopup[reverseAnimation ? "reverse" : "notReverse"] : null}`, "data-testid": dataTestId, "data-visible-in-dom": !dynamicDomRendering ? visibleInDom : void 0, id: generatedId, onClick: stopClickPropagation, onKeyDown: role === "dialog" ? handleFocusTrap : void 0, onPointerEnter: !isControlled ? onPointerEvent(true) : noop, onPointerLeave: !isControlled ? onPointerEvent(false) : noop, ref: innerPopupRef, role, style: {
-      ...assignInlineVars({
-        [arrowTop]: `${positions.arrowTop}px`,
-        [arrowLeft]: `${positions.arrowLeft}px`,
-        [arrowTransform]: `${positions.arrowTransform} rotate(${positions.rotate}deg)`,
-        [popupPosition]: positions.popupPosition,
-        [animationDurationPopup]: `${animationDuration}ms`,
-        [popupInitialPosition]: positions.popupInitialPosition,
-        [maxWidthPopup]: `${typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth}`,
-        [maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-      }),
-      ...style
-    }, children: /* @__PURE__ */ jsx("div", { className: containerPopup({
-      hasMaxHeight: !!maxHeight
-    }), style: assignInlineVars({
-      [maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-    }), children: text }) }), popupPortalTarget) : null
-  ] });
-});
+);
 export {
   Popup
 };

package/dist/components/Popup/styles.css.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var containerPopup = createRuntimeFn({ defaultClassName: "uv_w40vpo2", variantClassNames: { hasMaxHeight: { true: "uv_w40vpo3" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/components/Popup/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var arrowTop = "var(--uv_ozfz3c0)";
 var arrowLeft = "var(--uv_ozfz3c1)";
 var arrowTransform = "var(--uv_ozfz3c2)";