@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/Popover/index.cjs

@@ -1,66 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Icon = require("@ultraviolet/icons");
-const react = require("react");
-const index$3 = require("../Button/index.cjs");
-const ModalProvider = require("../Modal/ModalProvider.cjs");
-const index = require("../Popup/index.cjs");
-const index$1 = require("../Stack/index.cjs");
-const index$2 = require("../Text/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const ContentWrapper = ({
-  title,
-  onClose,
-  children,
-  sentiment
-}) => /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { className: styles_css.stackPopover, gap: 1, children: [
-  /* @__PURE__ */ jsxRuntime.jsxs(index$1.Stack, { direction: "row", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "h3", prominence: sentiment === "neutral" ? "strong" : "stronger", sentiment: sentiment === "neutral" ? "neutral" : "white", variant: "bodyStrong", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(index$3.Button, { "aria-label": "close", onClick: onClose, sentiment: sentiment === "neutral" ? "neutral" : "primary", size: "small", variant: sentiment === "neutral" ? "ghost" : "filled", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.CloseIcon, {}) })
-  ] }),
-  typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "p", prominence: sentiment === "neutral" ? "strong" : "stronger", sentiment: sentiment === "neutral" ? "neutral" : "white", variant: "bodySmall", children }) : children
-] });
-const Popover = react.forwardRef(({
-  visible = false,
-  children,
-  placement,
-  content,
-  title,
-  sentiment = "neutral",
-  size = "medium",
-  onClose,
-  className,
-  maxWidth,
-  maxHeight,
-  "data-testid": dataTestId,
-  portalTarget,
-  dynamicDomRendering,
-  align
-}, ref) => {
-  const innerRef = react.useRef(null);
-  const isInsideModal = react.useContext(ModalProvider.ModalContext);
-  const [localVisible, setLocalVisible] = react.useState(visible);
-  react.useEffect(() => {
-    setLocalVisible(visible);
-  }, [visible]);
-  const localOnClose = react.useCallback(() => {
-    setLocalVisible(false);
-    onClose?.();
-  }, [onClose]);
-  const smartPortalTarget = react.useMemo(() => {
-    if (!portalTarget && isInsideModal) {
-      return void 0;
-    }
-    if (!portalTarget && !isInsideModal) {
-      return document.body;
-    }
-    return portalTarget;
-  }, [isInsideModal, portalTarget]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Popup, { align, className: `${className ? `${className} ` : ""}${styles_css.popover({
-    sentiment,
-    size
-  })}`, "data-testid": dataTestId, debounceDelay: 0, dynamicDomRendering, hideOnClickOutside: true, innerRef, maxHeight, maxWidth, onClose: localOnClose, placement, portalTarget: smartPortalTarget, ref, role: "dialog", tabIndex: -1, text: /* @__PURE__ */ jsxRuntime.jsx(ContentWrapper, { onClose: localOnClose, sentiment, title, children: content }), visible: localVisible, children });
-});
-exports.Popover = Popover;

package/dist/components/Popover/styles.css.cjs

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                            */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var popover = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_1awdzfa0", variantClassNames: { sentiment: { neutral: "uv_1awdzfa1", primary: "uv_1awdzfa2" }, size: { large: "uv_1awdzfa3", medium: "uv_1awdzfa4", small: "uv_1awdzfa5" } }, defaultVariants: {}, compoundVariants: [] });
-var stackPopover = "uv_1awdzfa6";
-exports.popover = popover;
-exports.stackPopover = stackPopover;

package/dist/components/Popup/helpers.cjs

@@ -1,260 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const DEFAULT_ARROW_WIDTH = 8;
-const SPACE = 4;
-const TOTAL_USED_SPACE = 0;
-const DEFAULT_POSITIONS = {
-  arrowLeft: 0,
-  arrowTop: 0,
-  arrowTransform: "translate(-50%, -50)",
-  placement: "top",
-  popupInitialPosition: "translate3d(0px, 0px, 0)",
-  popupPosition: "translate3d(0px, 0px, 0)",
-  rotate: 135
-};
-const computePlacement = ({
-  childrenStructuredRef,
-  popupStructuredRef,
-  offsetParentRect,
-  offsetParent,
-  popupPortalTarget,
-  isNestedMenu
-}) => {
-  const {
-    top: childrenTop,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth
-  } = childrenStructuredRef;
-  const {
-    top: parentTop,
-    left: parentLeft
-  } = offsetParentRect;
-  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
-  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
-  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
-  if (isNestedMenu) {
-    if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
-      return "left";
-    }
-    return "right";
-  }
-  if (overloadedChildrenTop - popupHeight - TOTAL_USED_SPACE < 0) {
-    return "bottom";
-  }
-  if (overloadedChildrenLeft - popupWidth - TOTAL_USED_SPACE < 0) {
-    return "right";
-  }
-  if (overloadedChildrenRight + popupWidth + TOTAL_USED_SPACE > window.innerWidth) {
-    return "left";
-  }
-  return "top";
-};
-const findOffsetParent = (element) => {
-  const offsetParent = element?.current?.offsetParent;
-  if (offsetParent && !["TH", "TD", "TABLE"].includes(offsetParent.tagName)) {
-    return offsetParent;
-  }
-  let currentElement = element?.current;
-  while (currentElement && currentElement.tagName !== "BODY") {
-    const {
-      position
-    } = window.getComputedStyle(currentElement);
-    if (position !== "static") {
-      return currentElement;
-    }
-    currentElement = currentElement.parentElement;
-  }
-  return document.body;
-};
-const getPopupOverflowFromParent = (position, offsetParentRect, childrenRect, popupStructuredRef, arrowWidth) => {
-  const {
-    top: parentTop,
-    left: parentLeft,
-    right: parentRight
-  } = offsetParentRect;
-  const {
-    top: childrenTop,
-    bottom: childrenBottom,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth
-  } = childrenRect;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
-  const popupHalfWidthWithArrow = popupWidth / 2 - arrowWidth - 1;
-  const popupHalfHeightWithArrow = popupHeight / 2 - arrowWidth - 1;
-  if (position === "top" || position === "bottom") {
-    const popupOverflowRight = childrenRight - childrenWidth / 2 + popupWidth / 2;
-    const popupOverflowLeft = childrenLeft + childrenWidth / 2 - parentLeft - popupWidth / 2;
-    if (popupOverflowRight > parentRight) {
-      if (Math.abs(popupOverflowRight - parentRight) > popupHalfWidthWithArrow) {
-        return -popupHalfWidthWithArrow;
-      }
-      return parentRight - popupOverflowRight;
-    }
-    if (popupOverflowLeft < 0) {
-      if (Math.abs(popupOverflowLeft) > popupHalfWidthWithArrow) {
-        return popupHalfWidthWithArrow;
-      }
-      return Math.abs(popupOverflowLeft);
-    }
-  }
-  if (position === "left" || position === "right") {
-    const popupOverflowTop = childrenTop - parentTop - popupHeight / 2;
-    if (popupOverflowTop < 0) {
-      if (Math.abs(childrenTop - parentTop - popupHalfHeightWithArrow) > popupHalfHeightWithArrow) {
-        return popupHalfHeightWithArrow;
-      }
-      return Math.abs(popupOverflowTop);
-    }
-    if (childrenBottom + popupHeight > window.innerHeight) {
-      return -popupHalfHeightWithArrow;
-    }
-  }
-  return 0;
-};
-const computePositions = ({
-  placement,
-  childrenRef,
-  popupRef,
-  popupPortalTarget,
-  hasArrow,
-  align
-}) => {
-  const arrowWidth = hasArrow ? DEFAULT_ARROW_WIDTH : 0;
-  const childrenRect = childrenRef.current.getBoundingClientRect();
-  const offsetParent = findOffsetParent(childrenRef);
-  const offsetParentRect = offsetParent?.getBoundingClientRect() ?? {
-    left: 0,
-    right: window?.innerWidth ?? 0,
-    top: 0
-  };
-  const popupStructuredRef = popupRef.current.getBoundingClientRect();
-  const placementBasedOnWindowSize = placement === "auto" ? computePlacement({
-    childrenStructuredRef: childrenRect,
-    offsetParent,
-    offsetParentRect,
-    popupPortalTarget,
-    popupStructuredRef
-  }) : placement;
-  const {
-    top: childrenTop,
-    left: childrenLeft,
-    right: childrenRight,
-    width: childrenWidth,
-    height: childrenHeight
-  } = childrenRect;
-  const {
-    top: parentTop,
-    left: parentLeft
-  } = offsetParentRect;
-  const {
-    width: popupWidth,
-    height: popupHeight
-  } = popupStructuredRef;
-  const isPopupPortalTargetBody = popupPortalTarget === document.body || offsetParent === document.body;
-  const scrollTopValue = isPopupPortalTargetBody ? document.documentElement.scrollTop : offsetParent.scrollTop;
-  const overloadedChildrenLeft = isPopupPortalTargetBody ? childrenLeft : childrenLeft - parentLeft;
-  const overloadedChildrenTop = isPopupPortalTargetBody ? childrenTop : childrenTop - parentTop;
-  const overloadedChildrenRight = isPopupPortalTargetBody ? childrenRight : childrenLeft - parentLeft + childrenWidth;
-  const popupOverflow = getPopupOverflowFromParent(placementBasedOnWindowSize, offsetParentRect, childrenRect, popupStructuredRef, arrowWidth);
-  const isAligned = align === "start";
-  switch (placementBasedOnWindowSize) {
-    case "bottom": {
-      const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-      const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + arrowWidth + SPACE;
-      return {
-        arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-        arrowTop: -arrowWidth - 5,
-        arrowTransform: "",
-        placement: "bottom",
-        popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
-        rotate: 180
-      };
-    }
-    case "left": {
-      const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
-      const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-      return {
-        arrowLeft: popupWidth + arrowWidth + 5,
-        arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
-        arrowTransform: "translate(-50%, -50%)",
-        placement: "left",
-        popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
-        rotate: -90
-      };
-    }
-    case "right": {
-      const positionX = overloadedChildrenRight + arrowWidth + SPACE * 2;
-      const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-      return {
-        arrowLeft: -arrowWidth - 5,
-        arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
-        arrowTransform: "translate(50%, -50%)",
-        placement: "right",
-        popupInitialPosition: `translate3d(${positionX - TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
-        rotate: 90
-      };
-    }
-    case "nested-menu": {
-      if (computePlacement({
-        childrenStructuredRef: childrenRect,
-        isNestedMenu: true,
-        offsetParent,
-        offsetParentRect,
-        popupPortalTarget,
-        popupStructuredRef
-      }) === "right") {
-        const positionX2 = overloadedChildrenRight + arrowWidth + SPACE * 2;
-        const positionY2 = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
-        return {
-          arrowLeft: -arrowWidth - 5,
-          arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
-          arrowTransform: "translate(50%, -50%)",
-          placement: "right",
-          popupInitialPosition: `translate3d(${positionX2 - TOTAL_USED_SPACE}px, ${positionY2 + popupOverflow}px, 0)`,
-          popupPosition: `translate3d(${positionX2}px, ${positionY2 + popupOverflow}px, 0)`,
-          rotate: 90
-        };
-      }
-      const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
-      const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-      return {
-        arrowLeft: popupWidth + arrowWidth + 5,
-        arrowTop: isAligned ? childrenHeight / 2 - arrowWidth : popupHeight / 2 + popupOverflow * -1,
-        arrowTransform: "translate(-50%, -50%)",
-        placement: "left",
-        popupInitialPosition: `translate3d(${positionX + TOTAL_USED_SPACE}px, ${positionY + popupOverflow}px, 0)`,
-        popupPosition: `translate3d(${positionX}px, ${positionY + popupOverflow}px, 0)`,
-        rotate: -90
-      };
-    }
-    default: {
-      const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-      const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
-      return {
-        arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-        arrowTop: popupHeight - 1,
-        arrowTransform: "",
-        placement: "top",
-        popupInitialPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${!isAligned ? positionX + popupOverflow : positionX}px, ${positionY}px, 0)`,
-        rotate: 0
-      };
-    }
-  }
-};
-exports.DEFAULT_ARROW_WIDTH = DEFAULT_ARROW_WIDTH;
-exports.DEFAULT_POSITIONS = DEFAULT_POSITIONS;
-exports.computePositions = computePositions;

package/dist/components/Popup/index.cjs

@@ -1,279 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const dynamic = require("@vanilla-extract/dynamic");
-const react = require("react");
-const reactDom = require("react-dom");
-const isClientSide = require("../../helpers/isClientSide.cjs");
-const helpers = require("./helpers.cjs");
-const styles_css = require("./styles.css.cjs");
-const variables_css = require("./variables.css.cjs");
-const DEFAULT_ANIMATION_DURATION = 230;
-const DEFAULT_DEBOUNCE_DURATION = 200;
-const noop = () => {
-};
-const stopClickPropagation = (event) => {
-  event.nativeEvent.stopImmediatePropagation();
-};
-const Popup = react.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
-}, ref) => {
-  const childrenRef = react.useRef(null);
-  react.useImperativeHandle(innerRef, () => childrenRef.current);
-  const innerPopupRef = react.useRef(null);
-  react.useImperativeHandle(ref, () => innerPopupRef.current);
-  const timer = react.useRef(void 0);
-  const popupPortalTarget = react.useMemo(() => {
-    if (portalTarget) {
-      return portalTarget;
-    }
-    if (role === "dialog") {
-      if (childrenRef.current) {
-        return childrenRef.current;
-      }
-      if (isClientSide.isClientSide) {
-        return document.body;
-      }
-      return null;
-    }
-    if (typeof window !== "undefined") {
-      return document.body;
-    }
-    return null;
-  }, [portalTarget, role, childrenRef.current]);
-  const animationDuration = disableAnimation || maxHeight ? 0 : DEFAULT_ANIMATION_DURATION;
-  const debounceTimer = react.useRef(void 0);
-  const [visibleInDom, setVisibleInDom] = react.useState(false);
-  const [reverseAnimation, setReverseAnimation] = react.useState(false);
-  const [positions, setPositions] = react.useState({
-    ...helpers.DEFAULT_POSITIONS
-  });
-  const uniqueId = react.useId();
-  const generatedId = id ?? uniqueId;
-  const isControlled = visible !== void 0;
-  const isAnimated = react.useMemo(() => animationDuration > 0 && !maxHeight, [animationDuration, maxHeight]);
-  const generatePopupPositions = react.useCallback(() => {
-    if (childrenRef.current && innerPopupRef.current) {
-      setPositions(helpers.computePositions({
-        align,
-        childrenRef,
-        hasArrow,
-        placement,
-        popupPortalTarget,
-        popupRef: innerPopupRef
-      }));
-    }
-  }, [hasArrow, placement, popupPortalTarget, align]);
-  const onWindowChangeDetected = react.useCallback(() => {
-    if (innerPopupRef.current) {
-      innerPopupRef.current.style.animation = "none";
-    }
-    generatePopupPositions();
-  }, [generatePopupPositions, innerPopupRef]);
-  const unmountPopupFromDom = react.useCallback(() => {
-    setVisibleInDom(false);
-    setReverseAnimation(false);
-    window.removeEventListener("scroll", onWindowChangeDetected, true);
-  }, [onWindowChangeDetected]);
-  const closePopup = react.useCallback(() => {
-    const closeFunction = () => {
-      if (!disableAnimation) {
-        setReverseAnimation(true);
-        timer.current = setTimeout(() => {
-          onClose?.();
-          unmountPopupFromDom();
-        }, animationDuration);
-      } else {
-        onClose?.();
-        unmountPopupFromDom();
-      }
-    };
-    if (!disableAnimation) {
-      debounceTimer.current = setTimeout(() => {
-        closeFunction();
-      }, debounceDelay && !disableAnimation ? debounceDelay : 0);
-    } else {
-      closeFunction();
-    }
-  }, [animationDuration, disableAnimation, debounceDelay, onClose, unmountPopupFromDom]);
-  const onPointerEvent = react.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 {
-        react.startTransition(() => {
-          setVisibleInDom(true);
-        });
-      }
-    }
-  }, [closePopup, debounceDelay, visible]);
-  react.useEffect(() => {
-    if (visibleInDom) {
-      generatePopupPositions();
-      if (popupPortalTarget === document.body) {
-        window.addEventListener("scroll", onWindowChangeDetected, true);
-      }
-      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;
-      }
-    };
-  }, [generatePopupPositions, onWindowChangeDetected, visibleInDom, maxWidth, popupPortalTarget]);
-  react.useEffect(() => {
-    if (visibleInDom && innerPopupRef.current) {
-      innerPopupRef.current.style.opacity = "1";
-    }
-  }, [positions]);
-  react.useEffect(() => {
-    if (isControlled) {
-      onPointerEvent(visible)();
-    }
-  }, [isControlled, onPointerEvent, visible]);
-  react.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);
-    }
-    return () => {
-      document.body.removeEventListener("keyup", handleEscPress);
-      document.body.removeEventListener("click", handleClickOutside);
-    };
-  }, [closePopup, visibleInDom, innerPopupRef, childrenRef, hideOnClickOutside]);
-  const handleFocusTrap = react.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.preventDefault();
-      }
-    } else if (document.activeElement === lastFocusableEl || document.activeElement === innerPopupRef.current) {
-      firstFocusableEl.focus();
-      event.preventDefault();
-    }
-  }, []);
-  const renderChildren = react.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__ */ jsxRuntime.jsx("div", { "aria-controls": generatedId, "aria-describedby": generatedId, "aria-haspopup": ariaHasPopup, className: styles_css.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 = react.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 /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    renderChildren(),
-    shouldRender ? reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.popup({
-      hasArrow,
-      visibleInDom: !dynamicDomRendering ? visibleInDom : void 0
-    })} ${isAnimated ? styles_css.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: dynamic.assignInlineVars({
-      [variables_css.arrowTop]: `${positions.arrowTop}px`,
-      [variables_css.arrowLeft]: `${positions.arrowLeft}px`,
-      [variables_css.arrowTransform]: `${positions.arrowTransform} rotate(${positions.rotate}deg)`,
-      [variables_css.popupPosition]: positions.popupPosition,
-      [variables_css.animationDurationPopup]: `${animationDuration}ms`,
-      [variables_css.popupInitialPosition]: positions.popupInitialPosition,
-      [variables_css.maxWidthPopup]: `${typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth}`,
-      [variables_css.maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-    }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.containerPopup({
-      hasMaxHeight: !!maxHeight
-    }), style: dynamic.assignInlineVars({
-      [variables_css.maxHeightPopup]: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-    }), children: text }) }), popupPortalTarget) : null
-  ] });
-});
-exports.Popup = Popup;

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

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                               */
-;/* empty css                            */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var containerPopup = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_w40vpo2", variantClassNames: { hasMaxHeight: { true: "uv_w40vpo3" } }, defaultVariants: {}, compoundVariants: [] });
-var popup = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_w40vpo4", variantClassNames: { hasArrow: { true: "uv_w40vpo5" }, visibleInDom: { false: "uv_w40vpo6" } }, defaultVariants: { hasArrow: true, visibleInDom: true }, compoundVariants: [] });
-var animationPopup = { reverse: "uv_w40vpo7", notReverse: "uv_w40vpo8" };
-var childrenContainerPopup = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_w40vpo9", variantClassNames: { fullHeight: { true: "uv_w40vpoa" }, fullWidth: { true: "uv_w40vpob" } }, defaultVariants: {}, compoundVariants: [] });
-exports.animationPopup = animationPopup;
-exports.childrenContainerPopup = childrenContainerPopup;
-exports.containerPopup = containerPopup;
-exports.popup = popup;

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

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var arrowTop = "var(--uv_ozfz3c0)";
-var arrowLeft = "var(--uv_ozfz3c1)";
-var arrowTransform = "var(--uv_ozfz3c2)";
-var maxHeightPopup = "var(--uv_ozfz3c3)";
-var popupInitialPosition = "var(--uv_ozfz3c6)";
-var popupPosition = "var(--uv_ozfz3c4)";
-var animationDurationPopup = "var(--uv_ozfz3c5)";
-var maxWidthPopup = "var(--uv_ozfz3c7)";
-exports.animationDurationPopup = animationDurationPopup;
-exports.arrowLeft = arrowLeft;
-exports.arrowTop = arrowTop;
-exports.arrowTransform = arrowTransform;
-exports.maxHeightPopup = maxHeightPopup;
-exports.maxWidthPopup = maxWidthPopup;
-exports.popupInitialPosition = popupInitialPosition;
-exports.popupPosition = popupPosition;