@ultraviolet/ui 3.12.2 → 3.13.0

package/dist/components/Popover/index.d.ts

@@ -1,14 +1,13 @@
-import type { ReactNode, Ref } from 'react';
-type SentimentType = 'neutral' | 'primary';
+import type { Ref } from 'react';
 /**
  * Popover component is used to display additional information or actions on top of the main content of the page.
  * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
  */
 export declare const Popover: import("react").ForwardRefExoticComponent<{
-    children: ReactNode;
-    content: ReactNode;
+    children: import("react").ReactNode;
+    content: import("react").ReactNode;
     title: string;
-    sentiment?: SentimentType | undefined;
+    sentiment?: ("neutral" | "primary") | undefined;
     visible?: boolean | undefined;
     size?: "large" | "medium" | "small" | undefined;
     onClose?: (() => void) | undefined;
@@ -16,10 +15,6 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     'data-testid'?: string | undefined;
     maxWidth?: string | undefined;
     maxHeight?: string | undefined;
-    /**
-     * By default, the portal target is children container or document.body if children is a function. You can override this
-     * behavior by setting a portalTarget prop.
-     */
     portalTarget?: HTMLElement | undefined;
     placement?: "bottom" | "left" | "right" | "top" | ("auto" | "auto-bottom" | "auto-left" | "auto-right" | "auto-top") | undefined;
 } & Pick<{
@@ -31,11 +26,11 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
         onPointerEnter: () => void;
         onPointerLeave: () => void;
         ref: import("react").RefObject<HTMLDivElement | null>;
-    }) => ReactNode) | ReactNode;
+    }) => import("react").ReactNode) | import("react").ReactNode;
     maxWidth?: string | number | undefined;
     placement?: import("../Popup/helpers").PopupPlacement | undefined;
     align?: import("../Popup/helpers").PopupAlign | undefined;
-    text?: ReactNode;
+    text?: import("react").ReactNode;
     className?: string | undefined;
     containerFullWidth?: boolean | undefined;
     containerFullHeight?: boolean | undefined;
@@ -56,5 +51,4 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     dynamicDomRendering?: boolean | undefined;
     style?: import("react").CSSProperties | undefined;
 } & import("react").RefAttributes<HTMLDivElement>, "align" | "dynamicDomRendering" | "style"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAkB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE3D,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,CAAA;AAuE1C;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;IAflB;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8IA6FJ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8IAiFnB,CAAA"}

package/dist/components/Popover/index.js

@@ -1,53 +1,20 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import { Stack, init_Stack } from "../Stack/index.js";
 import { Popup, init_Popup } from "../Popup/index.js";
-import { Text, init_Text } from "../Text/index.js";
-import { Button, init_Button } from "../Button/index.js";
 import { ModalContext, init_ModalProvider } from "../Modal/ModalProvider.js";
 import { init_styles_css, popoverStyle } from "./styles.css.js";
+import { ContentWrapper, init_ContentWrapper } from "./ContentWrapper.js";
 import { forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@ultraviolet/utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Popover/index.tsx
-var ContentWrapper, Popover;
+var Popover;
 var init_Popover = __esmMin(() => {
-	init_Button();
 	init_ModalProvider();
 	init_Popup();
-	init_Stack();
-	init_Text();
+	init_ContentWrapper();
 	init_styles_css();
-	ContentWrapper = ({ title, onClose, children, sentiment }) => /* @__PURE__ */ jsxs(Stack, {
-		className: popoverStyle.stack,
-		gap: 1,
-		children: [/* @__PURE__ */ jsxs(Stack, {
-			direction: "row",
-			justifyContent: "space-between",
-			children: [/* @__PURE__ */ jsx(Text, {
-				as: "h3",
-				prominence: sentiment === "neutral" ? "strong" : "stronger",
-				sentiment: sentiment === "neutral" ? "neutral" : "white",
-				variant: "bodyStrong",
-				children: title
-			}), /* @__PURE__ */ jsx(Button, {
-				"aria-label": "close",
-				onClick: onClose,
-				sentiment: sentiment === "neutral" ? "neutral" : "primary",
-				size: "small",
-				variant: sentiment === "neutral" ? "ghost" : "filled",
-				children: /* @__PURE__ */ jsx(CloseIcon, {})
-			})]
-		}), typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
-			as: "p",
-			prominence: sentiment === "neutral" ? "strong" : "stronger",
-			sentiment: sentiment === "neutral" ? "neutral" : "white",
-			variant: "bodySmall",
-			children
-		}) : children]
-	});
 	Popover = 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 = useRef(null);
 		const isInsideModal = useContext(ModalContext);

package/dist/components/Popover/types.d.ts

@@ -0,0 +1,26 @@
+import type { Popup } from '../Popup';
+import type { SIZES_WIDTH } from './constant';
+import type { ComponentProps, ReactNode } from 'react';
+type SentimentType = 'neutral' | 'primary';
+export type PopoverProps = {
+    children: ReactNode;
+    content: ReactNode;
+    title: string;
+    sentiment?: SentimentType;
+    visible?: boolean;
+    size?: keyof typeof SIZES_WIDTH;
+    onClose?: () => void;
+    className?: string;
+    'data-testid'?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    /**
+     * By default, the portal target is children container or document.body if children is a function. You can override this
+     * behavior by setting a portalTarget prop.
+     */
+    portalTarget?: HTMLElement;
+    placement?: Exclude<ComponentProps<typeof Popup>['placement'], 'nested-menu'>;
+} & Pick<ComponentProps<typeof Popup>, 'dynamicDomRendering' | 'align' | 'style'>;
+export type ContentWrapperProps = Pick<PopoverProps, 'title' | 'onClose' | 'sentiment' | 'children'>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Popover/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,CAAA;AAE1C,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,SAAS,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAA;CAC9E,GAAG,IAAI,CACN,cAAc,CAAC,OAAO,KAAK,CAAC,EAC5B,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAC1C,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,YAAY,EACZ,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAC/C,CAAA"}

package/dist/components/Popup/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,UAAU,4DAA6D,CAAA;AAE7E,KAAK,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7C,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,MAAM,GACxE,GAAG,CAAC,GAAG,CAAC,EAAE,GACV,KAAK,CAAA;AAET,KAAK,cAAc,GACf,gBAAgB,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,EAAE,OAAO,CAAC,GAC7D,MAAM,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG,UAAU,CAAA;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAM3C,eAAO,MAAM,mBAAmB,IAAI,CAAA;AAGpC,eAAO,MAAM,iBAAiB;;;;;;;;CAQ7B,CAAA;AAuND,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAA;IACzB,WAAW,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,iBAAiB,EAAE,WAAW,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;CAqQ5B,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,UAAU,4DAA6D,CAAA;AAE7E,KAAK,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7C,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,MAAM,GACxE,GAAG,CAAC,GAAG,CAAC,EAAE,GACV,KAAK,CAAA;AAET,KAAK,cAAc,GACf,gBAAgB,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,EAAE,OAAO,CAAC,GAC7D,MAAM,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG,UAAU,CAAA;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAA;AAO3C,eAAO,MAAM,mBAAmB,IAAI,CAAA;AAGpC,eAAO,MAAM,iBAAiB;;;;;;;;CAQ7B,CAAA;AA6QD,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,cAAc,CAAA;IACzB,WAAW,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,iBAAiB,EAAE,WAAW,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AA6ND;;GAEG;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;CAmK5B,CAAA"}

package/dist/components/Popup/helpers.js

@@ -1,7 +1,7 @@
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/Popup/helpers.ts
-var PLACEMENTS, isGenericPlacement, DEFAULT_ARROW_WIDTH, SPACE, TOTAL_USED_SPACE, DEFAULT_POSITIONS, getOrderOfPlacement, computePlacement, findOffsetParent, getPopupOverflowFromParent, computePositions;
+var PLACEMENTS, isGenericPlacement, DEFAULT_ARROW_WIDTH, SPACE, TOTAL_USED_SPACE, DEFAULT_POSITIONS, getOrderOfPlacement, computePlacement, findOffsetParent, getVerticalOverflow, getHorizontalOverflow, getPopupOverflowFromParent, placementBottom, placementLeft, placementRight, placementNested, placementTop, computePositions;
 var init_helpers = __esmMin(() => {
 	PLACEMENTS = [
 		"top",
@@ -89,34 +89,133 @@ var init_helpers = __esmMin(() => {
 		}
 		return document.body;
 	};
+	getVerticalOverflow = (childrenRect, offsetParentRect, popupHalfWidthWithArrow, popupWidth) => {
+		const { left: parentLeft, right: parentRight } = offsetParentRect;
+		const { left: childrenLeft, right: childrenRight, width: childrenWidth } = childrenRect;
+		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);
+		}
+	};
+	getHorizontalOverflow = (childrenRect, offsetParentRect, popupHeight, popupHalfHeightWithArrow) => {
+		const { top: parentTop } = offsetParentRect;
+		const { top: childrenTop, bottom: childrenBottom } = childrenRect;
+		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;
+	};
 	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);
-			}
+			const overflow = getVerticalOverflow(childrenRect, offsetParentRect, popupHalfWidthWithArrow, popupWidth);
+			if (overflow) return overflow;
 		}
 		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;
+			const overflow = getHorizontalOverflow(childrenRect, offsetParentRect, popupHeight, popupHalfHeightWithArrow);
+			if (overflow) return overflow;
 		}
 		return 0;
 	};
+	placementBottom = (isAligned, overloadedChildrenLeft, childrenWidth, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, isPopupPortalTargetBody) => {
+		const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+		const positionY = overloadedChildrenTop + scrollTopValue + childrenHeight + arrowWidth + SPACE;
+		const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
+		const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
+		return {
+			arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
+			arrowTop: `${-arrowWidth - 5}px`,
+			arrowTransform: "",
+			placement: "bottom",
+			popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY - TOTAL_USED_SPACE}px, 0)`,
+			popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+			rotate: 180
+		};
+	};
+	placementLeft = (isAligned, overloadedChildrenLeft, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight) => {
+		const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
+		const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+		return {
+			arrowLeft: popupWidth + arrowWidth + 5,
+			arrowTop: "50%",
+			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
+		};
+	};
+	placementRight = (isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight) => {
+		const positionX = overloadedChildrenRight + arrowWidth + SPACE * 2;
+		const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+		return {
+			arrowLeft: -arrowWidth - 5,
+			arrowTop: "50%",
+			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
+		};
+	};
+	placementNested = (isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight, childrenRect, offsetParent, offsetParentRect, popupStructuredRef, overloadedChildrenLeft, popupWidth, popupPortalTarget) => {
+		if (computePlacement({
+			childrenStructuredRef: childrenRect,
+			isNestedMenu: true,
+			offsetParent,
+			offsetParentRect,
+			popupPortalTarget,
+			popupStructuredRef
+		}) === "right") {
+			const positionX = overloadedChildrenRight + arrowWidth + SPACE * 2;
+			const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
+			return {
+				arrowLeft: -arrowWidth - 5,
+				arrowTop: "50%",
+				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
+			};
+		}
+		const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
+		const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
+		return {
+			arrowLeft: popupWidth + arrowWidth + 5,
+			arrowTop: "50%",
+			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
+		};
+	};
+	placementTop = (isAligned, overloadedChildrenTop, scrollTopValue, arrowWidth, popupOverflow, popupHeight, overloadedChildrenLeft, popupWidth, childrenWidth, isPopupPortalTargetBody) => {
+		const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
+		const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
+		const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
+		const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
+		return {
+			arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
+			arrowTop: `${popupHeight - 1}px`,
+			arrowTransform: "",
+			placement: "top",
+			popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
+			popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
+			rotate: 0
+		};
+	};
 	computePositions = ({ placement, childrenRef, popupRef, popupPortalTarget, hasArrow, align }) => {
 		var _offsetParent$getBoun;
 		var _window$innerWidth;
@@ -149,110 +248,12 @@ var init_helpers = __esmMin(() => {
 		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 : positionX + popupOverflow;
-				const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-				return {
-					arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-					arrowTop: `${-arrowWidth - 5}px`,
-					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: "50%",
-					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: "50%",
-					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 positionX = overloadedChildrenRight + arrowWidth + SPACE * 2;
-					const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 8;
-					return {
-						arrowLeft: -arrowWidth - 5,
-						arrowTop: "50%",
-						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
-					};
-				}
-				const positionX = overloadedChildrenLeft - popupWidth - arrowWidth - SPACE * 2;
-				const positionY = isAligned ? overloadedChildrenTop + scrollTopValue : overloadedChildrenTop + scrollTopValue - popupHeight / 2 + childrenHeight / 2;
-				return {
-					arrowLeft: popupWidth + arrowWidth + 5,
-					arrowTop: "50%",
-					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 "top": {
-				const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-				const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
-				const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
-				const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-				return {
-					arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-					arrowTop: `${popupHeight - 1}px`,
-					arrowTransform: "",
-					placement: "top",
-					popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-					popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
-					rotate: 0
-				};
-			}
-			default: {
-				const positionX = isAligned ? overloadedChildrenLeft : overloadedChildrenLeft + childrenWidth / 2 - popupWidth / 2;
-				const positionY = overloadedChildrenTop + scrollTopValue - popupHeight - arrowWidth - SPACE;
-				const computedPositionX = isAligned ? positionX : positionX + popupOverflow;
-				const finalPositionX = isPopupPortalTargetBody ? Math.max(computedPositionX, 0) : computedPositionX;
-				return {
-					arrowLeft: isAligned ? childrenWidth / 2 - arrowWidth : popupWidth / 2 + popupOverflow * -1,
-					arrowTop: `${popupHeight - 1}px`,
-					arrowTransform: "",
-					placement: "top",
-					popupInitialPosition: `translate3d(${finalPositionX}px, ${positionY + TOTAL_USED_SPACE}px, 0)`,
-					popupPosition: `translate3d(${finalPositionX}px, ${positionY}px, 0)`,
-					rotate: 0
-				};
-			}
+			case "bottom": return placementBottom(isAligned, overloadedChildrenLeft, childrenWidth, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, isPopupPortalTargetBody);
+			case "left": return placementLeft(isAligned, overloadedChildrenLeft, popupWidth, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight);
+			case "right": return placementRight(isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight);
+			case "nested-menu": return placementNested(isAligned, overloadedChildrenTop, scrollTopValue, childrenHeight, arrowWidth, popupOverflow, popupHeight, overloadedChildrenRight, childrenRect, offsetParent, offsetParentRect, popupStructuredRef, overloadedChildrenLeft, popupWidth, popupPortalTarget);
+			case "top": return placementTop(isAligned, overloadedChildrenTop, scrollTopValue, arrowWidth, popupOverflow, popupHeight, overloadedChildrenLeft, popupWidth, childrenWidth, isPopupPortalTargetBody);
+			default: return placementTop(isAligned, overloadedChildrenTop, scrollTopValue, arrowWidth, popupOverflow, popupHeight, overloadedChildrenLeft, popupWidth, childrenWidth, isPopupPortalTargetBody);
 		}
 	};
 });

package/dist/components/Popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/index.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC3D,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,oBAAoB,EAEpB,SAAS,EACT,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,oBAAoB,EAAE,MAAM,CAAA;IAC5B,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAUD,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAEnE,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EACJ,SAAS,GACT,CAAC,CAAC,WAAW,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,MAAM,EAAE,MAAM,IAAI,CAAA;QAClB,OAAO,EAAE,MAAM,IAAI,CAAA;QACnB,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KACtC,KAAK,SAAS,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,eAAe,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAA;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAkCD;;GAEG;AACH,eAAO,MAAM,KAAK,uGAkfjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/index.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC3D,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,oBAAoB,EAEpB,SAAS,EACT,GAAG,EACH,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,oBAAoB,EAAE,MAAM,CAAA;IAC5B,aAAa,EAAE,MAAM,CAAA;CACtB,CAAA;AAUD,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAEnE,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EACJ,SAAS,GACT,CAAC,CAAC,WAAW,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,MAAM,EAAE,MAAM,IAAI,CAAA;QAClB,OAAO,EAAE,MAAM,IAAI,CAAA;QACnB,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,cAAc,EAAE,MAAM,IAAI,CAAA;QAC1B,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;KACtC,KAAK,SAAS,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,eAAe,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,CAAA;IACjE,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAkCD;;GAEG;AACH,eAAO,MAAM,KAAK,uGAsfjB,CAAA"}

package/dist/components/Popup/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.120.0/helpers/objectSpread2.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
 import { init_isClientSide, isClientSide } from "../../helpers/isClientSide.js";
 import { DEFAULT_POSITIONS, computePositions, init_helpers } from "./helpers.js";
 import { init_styles_css, popupStyle } from "./styles.css.js";
@@ -214,7 +214,8 @@ var init_Popup = __esmMin(() => {
 			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 === null || childrenCurrent === void 0 ? void 0 : childrenCurrent.contains(event.target)) && !popupCurrent.contains(event.target)) {
+				const target = event.target;
+				if (popupCurrent && hideOnClickOutside && !event.defaultPrevented && event.target && event.target !== popupCurrent && event.target !== childrenCurrent && !(childrenCurrent === null || childrenCurrent === void 0 ? void 0 : childrenCurrent.contains(target)) && !popupCurrent.contains(target)) {
 					event.preventDefault();
 					event.stopPropagation();
 					closePopup();

package/dist/components/Popup/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/styles.css.ts"],"names":[],"mappings":"AAiIA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKtB,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/styles.css.ts"],"names":[],"mappings":"AAwIA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKtB,CAAA"}

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

@@ -1,13 +1,13 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
-import { init_variables_css_ts_vanilla } from "./variables.css.ts.vanilla.js";
-import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla } from "../TagList/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/Popup/styles.css.ts
 var popupStyle;
 var init_styles_css = __esmMin(() => {
-	init_variables_css_ts_vanilla();
 	init_styles_css_ts_vanilla();
+	init_styles_css_ts_vanilla$1();
 	popupStyle = {
 		container: createRuntimeFn({
 			defaultClassName: "uv_w40vpo2",

package/dist/components/ProgressBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAC5B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,gRA2FvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAC5B,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,gRA+FvB,CAAA"}

package/dist/components/ProgressBar/index.js

@@ -17,69 +17,72 @@ var init_ProgressBar = __esmMin(() => {
 	init_Text();
 	init_styles_css();
 	init_variables_css();
-	ProgressBar = ({ progress = false, value = 0, sentiment = "primary", className, "data-testid": dataTestId, showProgress = false, prefix, suffix = "%", max = 100, label, labelDescription, direction = "column", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, style }) => /* @__PURE__ */ jsxs(Stack, {
-		alignItems: "center",
-		direction,
-		gap: direction === "column" ? 1 : 2,
-		children: [
-			direction === "column" && (label || showProgress) ? /* @__PURE__ */ jsxs(Stack, {
-				direction: "row",
-				justifyContent: !label && showProgress ? "right" : "space-between",
-				width: "100%",
-				children: [/* @__PURE__ */ jsx(Label, {
+	ProgressBar = ({ progress = false, value = 0, sentiment = "primary", className, "data-testid": dataTestId, showProgress = false, prefix, suffix = "%", max = 100, label, labelDescription, direction = "column", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, style }) => {
+		const computedValue = suffix === "%" ? 100 * value / max : value;
+		return /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction,
+			gap: direction === "column" ? 1 : 2,
+			children: [
+				direction === "column" && (label || showProgress) ? /* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					justifyContent: !label && showProgress ? "right" : "space-between",
+					width: "100%",
+					children: [/* @__PURE__ */ jsx(Label, {
+						labelDescription,
+						size: "medium",
+						children: label
+					}), showProgress ? /* @__PURE__ */ jsxs(Text, {
+						as: "label",
+						placement: "right",
+						sentiment: "neutral",
+						variant: "bodySmall",
+						children: [
+							prefix,
+							computedValue,
+							suffix
+						]
+					}) : null]
+				}) : null,
+				direction === "row" && label ? /* @__PURE__ */ jsx(Label, {
 					labelDescription,
 					size: "medium",
 					children: label
-				}), showProgress ? /* @__PURE__ */ jsxs(Text, {
-					as: "label",
-					placement: "right",
-					sentiment: "neutral",
-					variant: "bodySmall",
-					children: [
-						prefix,
-						suffix === "%" ? 100 * value / max : value,
-						suffix
-					]
-				}) : null]
-			}) : null,
-			direction === "row" && label ? /* @__PURE__ */ jsx(Label, {
-				labelDescription,
-				size: "medium",
-				children: label
-			}) : null,
-			/* @__PURE__ */ jsx("div", {
-				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy,
-				"aria-valuemax": max,
-				"aria-valuemin": 0,
-				"aria-valuenow": value,
-				className: cn(className, progressBarStyle.container),
-				"data-testid": dataTestId,
-				role: "progressbar",
-				style,
-				children: progress ? /* @__PURE__ */ jsx("div", { className: progressBarStyle.progressBar }) : /* @__PURE__ */ jsx("div", {
-					className: progressBarStyle.filledBarSentiments[sentiment],
-					style: assignInlineVars({ [percentageValue]: `${100 * Math.max(0, Math.min(max, value)) / max}%` })
-				})
-			}),
-			showProgress && direction === "row" ? /* @__PURE__ */ jsx(Stack, {
-				direction: "row",
-				gap: 1,
-				width: "fit-content",
-				children: /* @__PURE__ */ jsxs(Text, {
-					as: "label",
-					className: progressBarStyle.customText[suffix ? "withSuffix" : "noSuffix"],
-					sentiment: "neutral",
-					variant: "bodySmall",
-					children: [
-						prefix,
-						suffix === "%" ? 100 * value / max : value,
-						suffix
-					]
-				})
-			}) : null
-		]
-	});
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-valuemax": max,
+					"aria-valuemin": 0,
+					"aria-valuenow": value,
+					className: cn(className, progressBarStyle.container),
+					"data-testid": dataTestId,
+					role: "progressbar",
+					style,
+					children: progress ? /* @__PURE__ */ jsx("div", { className: progressBarStyle.progressBar }) : /* @__PURE__ */ jsx("div", {
+						className: progressBarStyle.filledBarSentiments[sentiment],
+						style: assignInlineVars({ [percentageValue]: `${100 * Math.max(0, Math.min(max, value)) / max}%` })
+					})
+				}),
+				showProgress && direction === "row" ? /* @__PURE__ */ jsx(Stack, {
+					direction: "row",
+					gap: 1,
+					width: "fit-content",
+					children: /* @__PURE__ */ jsxs(Text, {
+						as: "label",
+						className: progressBarStyle.customText[suffix ? "withSuffix" : "noSuffix"],
+						sentiment: "neutral",
+						variant: "bodySmall",
+						children: [
+							prefix,
+							computedValue,
+							suffix
+						]
+					})
+				}) : null
+			]
+		});
+	};
 });
 
 //#endregion

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

@@ -1,11 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
-import { init_variables_css_ts_vanilla } from "./variables.css.ts.vanilla.js";
 import { init_styles_css_ts_vanilla } from "./styles.css.ts.vanilla.js";
 
 //#region src/components/ProgressBar/styles.css.ts
 var progressBarStyle;
 var init_styles_css = __esmMin(() => {
-	init_variables_css_ts_vanilla();
 	init_styles_css_ts_vanilla();
 	progressBarStyle = {
 		container: "uv_1pgcd801",