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

package/dist/components/Pagination/index.cjs

@@ -1,43 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const index = require("../Stack/index.cjs");
-const PaginationButtons = require("./PaginationButtons.cjs");
-const PerPage = require("./PerPage.cjs");
-const Pagination = ({
-  disabled = false,
-  page,
-  pageCount,
-  onChange,
-  pageTabCount = 5,
-  className,
-  perPage,
-  onChangePerPage,
-  perPageText,
-  numberOfItemsText,
-  numberOfItems,
-  "data-testid": dataTestId,
-  style
-}) => {
-  const [perPageComputed, setPerPage] = react.useState(perPage ?? 10);
-  react.useEffect(() => {
-    if (page < 1) {
-      onChange(1);
-    }
-    if (page > pageCount) {
-      onChange(pageCount);
-    }
-  }, [page, pageCount, onChange]);
-  react.useEffect(() => {
-    if (perPage) {
-      setPerPage(perPage);
-    }
-  }, [perPage]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { direction: "row", justifyContent: "space-between", style, children: [
-    perPage ? /* @__PURE__ */ jsxRuntime.jsx(PerPage.PerPage, { numberOfItems, numberOfItemsText, onChangePerPage, page, perPage: perPageComputed, perPageText, setPerPage }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(PaginationButtons.PaginationButtons, { className, "data-testid": dataTestId, disabled, onChange, page, pageCount, pageTabCount, perPage: !!perPage })
-  ] });
-};
-exports.Pagination = Pagination;

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                            */
-var pageNumbersContainer = "uv_a0295u0";
-var pageButton = { small: "uv_a0295u1", medium: "uv_a0295u2" };
-var ellipsisClass = { small: "uv_a0295u4 uv_a0295u3", medium: "uv_a0295u5 uv_a0295u3" };
-exports.ellipsisClass = ellipsisClass;
-exports.pageButton = pageButton;
-exports.pageNumbersContainer = pageNumbersContainer;

package/dist/components/PasswordCheck/index.cjs

@@ -1,18 +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 index = require("../Stack/index.cjs");
-const index$1 = require("../Text/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const PasswordCheck = ({
-  rules,
-  className,
-  "data-testid": dataTestId,
-  style
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.passwordCheckContainer}`, "data-testid": dataTestId, style, children: rules.map((rule) => /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-  rule.valid ? /* @__PURE__ */ jsxRuntime.jsx(Icon.CheckCircleOutlineIcon, { prominence: "weak", sentiment: "success", size: "large" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.CloseCircleOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "large" }),
-  /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "p", variant: "bodySmall", children: rule.text })
-] }, rule.name)) });
-exports.PasswordCheck = PasswordCheck;

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

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                            */
-var passwordCheckContainer = "uv_4g08in0";
-exports.passwordCheckContainer = passwordCheckContainer;

package/dist/components/PieChart/Legends.cjs

@@ -1,36 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const dynamic = require("@vanilla-extract/dynamic");
-const index = require("../Tooltip/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const Tooltip = require("./Tooltip.cjs");
-const Legends = ({
-  focused,
-  data,
-  onFocusChange,
-  colors
-}) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles_css.listPie, children: data?.map((item, index$1) => {
-  const isSegmentFocused = focused !== void 0 && item.id === focused;
-  const id = `chart-legend-${item.id}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { id, text: /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { data: item }), visible: isSegmentFocused, children: /* @__PURE__ */ jsxRuntime.jsxs("li", { className: styles_css.listItemPie({
-    isFocused: isSegmentFocused
-  }), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.toggleBoxPie, "data-testid": id, onBlur: () => onFocusChange(), onFocus: () => onFocusChange(item.id), onMouseOut: () => onFocusChange(), onMouseOver: () => onFocusChange(item.id) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.bulletPie({
-      isFocused: isSegmentFocused
-    }), color: colors[index$1], id: `chart-legend-${item.id}`, style: dynamic.assignInlineVars({
-      [styles_css.colorBullet]: colors[index$1]
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_css.labelPie, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_css.textPie({
-        isFocused: isSegmentFocused
-      }), children: item.name }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_css.linePie, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_css.progressiveLinePie({
-        isFocused: isSegmentFocused
-      }) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.valuePie[isSegmentFocused ? "isFocused" : "default"], children: item.value })
-  ] }) }, item.id);
-}) });
-module.exports = Legends;

package/dist/components/PieChart/Tooltip.cjs

@@ -1,18 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const index = require("../Text/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const Tooltip = ({
-  data
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tooltip", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: styles_css.listTooltipPie, children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("li", { className: styles_css.itemTooltipPie, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", prominence: "stronger", variant: "body", children: data.name }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", prominence: "stronger", variant: "body", children: data.value })
-  ] }),
-  data.details?.map((detail) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: styles_css.itemTooltipPie, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", prominence: "stronger", variant: "bodySmall", children: detail.name }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", prominence: "stronger", variant: "bodySmall", children: detail.value })
-  ] }, detail.name))
-] }) });
-module.exports = Tooltip;

package/dist/components/PieChart/index.cjs

@@ -1,71 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const pie = require("@nivo/pie");
-const themes = require("@ultraviolet/themes");
-const dynamic = require("@vanilla-extract/dynamic");
-const react = require("react");
-const legend = require("../../helpers/legend.cjs");
-const nivoTheme = require("../../helpers/nivoTheme.cjs");
-const index = require("../Text/index.cjs");
-const Legends = require("./Legends.cjs");
-const styles_css = require("./styles.css.cjs");
-const DEFAULT_CHARTPROPS = {};
-const DEFAULT_MARGIN = {
-  bottom: 10,
-  left: 10,
-  right: 10,
-  top: 10
-};
-const PieChart = ({
-  height = 206,
-  width = 206,
-  data = void 0,
-  emptyLegend,
-  content,
-  withLegend = false,
-  margin = DEFAULT_MARGIN,
-  chartProps = DEFAULT_CHARTPROPS,
-  style
-}) => {
-  const theme = themes.useTheme();
-  const [currentFocusIndex, setCurrentFocusIndex] = react.useState();
-  const emptyTooltip = react.useCallback(() => /* @__PURE__ */ jsxRuntime.jsx("span", {}), []);
-  const isEmpty = !data || data.length === 0;
-  const EmptyLegendDisplayed = react.useCallback(() => emptyLegend ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.emptyLegendPie, children: /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "p", variant: "body", children: emptyLegend }) }) : null, [emptyLegend]);
-  const localColors = legend.getLegendColor(theme);
-  const LegendDisplayer = react.useCallback(() => isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyLegendDisplayed, {}) : /* @__PURE__ */ jsxRuntime.jsx(Legends, { colors: localColors, data, focused: currentFocusIndex, onFocusChange: setCurrentFocusIndex }), [isEmpty, currentFocusIndex, data, EmptyLegendDisplayed, localColors]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_css.containerPie, style: {
-    ...dynamic.assignInlineVars({
-      [styles_css.heightContainerPie]: height ? `${height}px` : ""
-    }),
-    ...style
-  }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-      position: "relative"
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(pie.Pie, { activeOuterRadiusOffset: !isEmpty ? 4 : 0, colors: localColors, cornerRadius: 0, data: !isEmpty ? data : [{
-        id: "empty",
-        percent: 100
-      }], defs: [{
-        background: "inherit",
-        color: theme.colors.neutral.textStrong,
-        id: "lines",
-        lineWidth: 2,
-        rotation: 0,
-        spacing: 5,
-        type: "patternLines"
-      }], enableArcLabels: false, enableArcLinkLabels: false, height, innerRadius: 0.8, margin, onMouseEnter: (datum, event) => {
-        if (!isEmpty) {
-          const pie2 = event.currentTarget;
-          pie2.style.cursor = "pointer";
-          setCurrentFocusIndex(datum.id.toString());
-        }
-      }, onMouseLeave: () => setCurrentFocusIndex(void 0), padAngle: 1, theme: nivoTheme.getNivoTheme(theme), tooltip: emptyTooltip, value: "percent", width, ...chartProps }),
-      content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.contentPie, children: content }) : null
-    ] }),
-    withLegend ? /* @__PURE__ */ jsxRuntime.jsx(LegendDisplayer, {}) : null
-  ] });
-};
-exports.PieChart = PieChart;

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

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                            */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var heightContainerPie = "var(--uv_6tpqrj0)";
-var colorBullet = "var(--uv_6tpqrj1)";
-var containerPie = "uv_6tpqrj3";
-var emptyLegendPie = "uv_6tpqrj4";
-var contentPie = "uv_6tpqrj5";
-var listPie = "uv_6tpqrj6";
-var listItemPie = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_6tpqrj7", variantClassNames: { isFocused: { true: "uv_6tpqrj8", false: "uv_6tpqrj9" } }, defaultVariants: {}, compoundVariants: [] });
-var bulletPie = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_6tpqrja", variantClassNames: { isFocused: { true: "uv_6tpqrjb" } }, defaultVariants: {}, compoundVariants: [] });
-var labelPie = "uv_6tpqrjc";
-var valuePie = { "default": "uv_6tpqrjd", isFocused: "uv_6tpqrje" };
-var textPie = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_6tpqrjf", variantClassNames: { isFocused: { true: "uv_6tpqrjg", false: "uv_6tpqrjh" } }, defaultVariants: {}, compoundVariants: [] });
-var toggleBoxPie = "uv_6tpqrji";
-var linePie = "uv_6tpqrjj";
-var progressiveLinePie = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_6tpqrjk", variantClassNames: { isFocused: { true: "uv_6tpqrjl", false: "uv_6tpqrjm" } }, defaultVariants: {}, compoundVariants: [] });
-var listTooltipPie = "uv_6tpqrjn";
-var itemTooltipPie = "uv_6tpqrjo";
-exports.bulletPie = bulletPie;
-exports.colorBullet = colorBullet;
-exports.containerPie = containerPie;
-exports.contentPie = contentPie;
-exports.emptyLegendPie = emptyLegendPie;
-exports.heightContainerPie = heightContainerPie;
-exports.itemTooltipPie = itemTooltipPie;
-exports.labelPie = labelPie;
-exports.linePie = linePie;
-exports.listItemPie = listItemPie;
-exports.listPie = listPie;
-exports.listTooltipPie = listTooltipPie;
-exports.progressiveLinePie = progressiveLinePie;
-exports.textPie = textPie;
-exports.toggleBoxPie = toggleBoxPie;
-exports.valuePie = valuePie;

package/dist/components/Popover/index.cjs

@@ -1,67 +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,
-  style
-}, 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", style, 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,264 +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;
-      const computedPositionX = !isAligned ? positionX + popupOverflow : positionX;
-      const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-      return {
-        arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-        arrowTop: -arrowWidth - 5,
-        arrowTransform: "",
-        placement: "bottom",
-        popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${finalPositionX}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;
-      const computedPositionX = !isAligned ? positionX + popupOverflow : positionX;
-      const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-      return {
-        arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-        arrowTop: popupHeight - 1,
-        arrowTransform: "",
-        placement: "top",
-        popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-        popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
-        rotate: 0
-      };
-    }
-  }
-};
-exports.DEFAULT_ARROW_WIDTH = DEFAULT_ARROW_WIDTH;
-exports.DEFAULT_POSITIONS = DEFAULT_POSITIONS;
-exports.computePositions = computePositions;