@povio/ui 3.3.0 → 3.3.1

package/dist/components/navigation/Accordion/AccordionItem.js

@@ -2,10 +2,15 @@ import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { accordionChevronDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition } from "./accordion.cva.js";
+import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
 //#region src/components/navigation/Accordion/AccordionItem.tsx
-var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
+var AccordionItem = (t0) => {
+	const $ = c(25);
+	const { id, disabled, heading, subheading, children, icon: Icon, variant: t1, actionPosition: t2, isSingle } = t0;
+	const variant = t1 === void 0 ? "filled" : t1;
+	const actionPosition = t2 === void 0 ? "right" : t2;
 	const itemCva = UIOverrides.useCva("accordion.itemCva", accordionItemDefinition);
 	const triggerCva = UIOverrides.useCva("accordion.triggerCva", accordionTriggerDefinition);
 	const headingCva = UIOverrides.useCva("accordion.headingCva", accordionHeadingDefinition);
@@ -15,49 +20,89 @@ var AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon,
 	const iconCva = UIOverrides.useCva("accordion.iconCva", accordionIconDefinition);
 	const panelCva = UIOverrides.useCva("accordion.panelCva", accordionPanelDefinition);
 	const panelContentCva = UIOverrides.useCva("accordion.panelContentCva", accordionPanelContentDefinition);
-	return /* @__PURE__ */ jsx(Disclosure, {
-		id,
-		className: itemCva({
+	let t3;
+	if ($[0] !== isSingle || $[1] !== itemCva || $[2] !== variant) {
+		t3 = itemCva({
 			variant,
 			singleItem: isSingle
-		}),
-		isDisabled: disabled,
-		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(Button, {
-			slot: "trigger",
-			className: triggerCva({
-				variant,
-				actionPosition,
-				disabled
-			}),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: headingCva({}),
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
-					children: [
-						Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
-						/* @__PURE__ */ jsx(Typography, {
-							size: "label-2",
-							variant: "default",
-							className: headingTitleCva({}),
-							children: heading
-						}),
-						subheading && /* @__PURE__ */ jsx(Typography, {
-							size: "label-3",
-							variant: "default",
-							className: headingSubtitleCva({}),
-							children: subheading
-						})
-					]
+		});
+		$[0] = isSingle;
+		$[1] = itemCva;
+		$[2] = variant;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== Icon || $[5] !== actionPosition || $[6] !== chevronCva || $[7] !== children || $[8] !== disabled || $[9] !== heading || $[10] !== headingCva || $[11] !== headingSubtitleCva || $[12] !== headingTitleCva || $[13] !== iconCva || $[14] !== panelContentCva || $[15] !== panelCva || $[16] !== subheading || $[17] !== triggerCva || $[18] !== variant) {
+		t4 = (t5) => {
+			const { isExpanded } = t5;
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(Button, {
+				slot: "trigger",
+				className: triggerCva({
+					variant,
+					actionPosition,
+					disabled
+				}),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: headingCva({}),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
+						children: [
+							Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
+							/* @__PURE__ */ jsx(Typography, {
+								size: "label-2",
+								variant: "default",
+								className: headingTitleCva({}),
+								children: heading
+							}),
+							subheading && /* @__PURE__ */ jsx(Typography, {
+								size: "label-3",
+								variant: "default",
+								className: headingSubtitleCva({}),
+								children: subheading
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
+			}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
+				className: panelCva({ isExpanded }),
+				children: /* @__PURE__ */ jsx("div", {
+					className: panelContentCva({}),
+					children
 				})
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
-		}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
-			className: panelCva({ isExpanded }),
-			children: /* @__PURE__ */ jsx("div", {
-				className: panelContentCva({}),
-				children
-			})
-		})] })
-	});
+			})] });
+		};
+		$[4] = Icon;
+		$[5] = actionPosition;
+		$[6] = chevronCva;
+		$[7] = children;
+		$[8] = disabled;
+		$[9] = heading;
+		$[10] = headingCva;
+		$[11] = headingSubtitleCva;
+		$[12] = headingTitleCva;
+		$[13] = iconCva;
+		$[14] = panelContentCva;
+		$[15] = panelCva;
+		$[16] = subheading;
+		$[17] = triggerCva;
+		$[18] = variant;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== disabled || $[21] !== id || $[22] !== t3 || $[23] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Disclosure, {
+			id,
+			className: t3,
+			isDisabled: disabled,
+			children: t4
+		});
+		$[20] = disabled;
+		$[21] = id;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+	} else t5 = $[24];
+	return t5;
 };
 //#endregion
 export { AccordionItem };

package/dist/components/navigation/Stepper/Stepper.js

@@ -2,33 +2,78 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { stepperDefinition } from "./stepper.cva.js";
 import { StepperItem } from "./StepperItem.js";
 import { StepperSeparator } from "./StepperSeparator.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
 //#region src/components/navigation/Stepper/Stepper.tsx
-var Stepper = ({ steps, currentStep, orientation = "horizontal", contentOrientation = "horizontal", iconsOnly, titlesOnly, onStepClick, className }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: UIOverrides.useCva("stepper.cva", stepperDefinition)({
+var Stepper = (t0) => {
+	const $ = c(23);
+	const { steps, currentStep, orientation: t1, contentOrientation: t2, iconsOnly, titlesOnly, onStepClick, className } = t0;
+	const orientation = t1 === void 0 ? "horizontal" : t1;
+	const contentOrientation = t2 === void 0 ? "horizontal" : t2;
+	const stepperCva = UIOverrides.useCva("stepper.cva", stepperDefinition);
+	let t3;
+	if ($[0] !== className || $[1] !== orientation || $[2] !== stepperCva) {
+		t3 = stepperCva({
 			orientation,
 			className
-		}),
-		role: "group",
-		"aria-label": "Progress",
-		children: steps.map((step, index) => {
-			const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
-			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
-				step,
-				stepNumber: index + 1,
-				status,
-				contentOrientation,
-				iconsOnly,
-				titlesOnly,
-				onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
-			}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
-				orientation,
-				contentOrientation
-			})] }, step.id);
-		})
-	});
+		});
+		$[0] = className;
+		$[1] = orientation;
+		$[2] = stepperCva;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== contentOrientation || $[5] !== currentStep || $[6] !== iconsOnly || $[7] !== onStepClick || $[8] !== orientation || $[9] !== steps || $[10] !== titlesOnly) {
+		let t5;
+		if ($[12] !== contentOrientation || $[13] !== currentStep || $[14] !== iconsOnly || $[15] !== onStepClick || $[16] !== orientation || $[17] !== steps.length || $[18] !== titlesOnly) {
+			t5 = (step, index) => {
+				const status = index < currentStep ? "completed" : index === currentStep ? "active" : "todo";
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StepperItem, {
+					step,
+					stepNumber: index + 1,
+					status,
+					contentOrientation,
+					iconsOnly,
+					titlesOnly,
+					onPress: onStepClick && status === "completed" ? () => onStepClick(index) : void 0
+				}), index < steps.length - 1 && /* @__PURE__ */ jsx(StepperSeparator, {
+					orientation,
+					contentOrientation
+				})] }, step.id);
+			};
+			$[12] = contentOrientation;
+			$[13] = currentStep;
+			$[14] = iconsOnly;
+			$[15] = onStepClick;
+			$[16] = orientation;
+			$[17] = steps.length;
+			$[18] = titlesOnly;
+			$[19] = t5;
+		} else t5 = $[19];
+		t4 = steps.map(t5);
+		$[4] = contentOrientation;
+		$[5] = currentStep;
+		$[6] = iconsOnly;
+		$[7] = onStepClick;
+		$[8] = orientation;
+		$[9] = steps;
+		$[10] = titlesOnly;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[20] !== t3 || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			role: "group",
+			"aria-label": "Progress",
+			children: t4
+		});
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
 };
 //#endregion
 export { Stepper };

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -2,6 +2,7 @@ import { Typography } from "../../text/Typography/Typography.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { Button } from "../../buttons/Button/Button.js";
 import { Modal } from "../Modal/Modal.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/overlays/ActionModal/ActionModal.tsx
@@ -10,45 +11,178 @@ var textAlignClassMap = {
 	center: "text-center",
 	right: "text-right"
 };
-var ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }) => {
+var ActionModal = (t0) => {
+	const $ = c(52);
+	let description;
+	let descriptionClassName;
+	let descriptionTypography;
+	let heading;
+	let modalClassName;
+	let modalProps;
+	let primaryAction;
+	let secondaryAction;
+	let t1;
+	let t2;
+	let titleClassName;
+	let titleTypography;
+	if ($[0] !== t0) {
+		({heading, description, primaryAction, secondaryAction, buttonSize: t1, textAlign: t2, modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps} = t0);
+		$[0] = t0;
+		$[1] = description;
+		$[2] = descriptionClassName;
+		$[3] = descriptionTypography;
+		$[4] = heading;
+		$[5] = modalClassName;
+		$[6] = modalProps;
+		$[7] = primaryAction;
+		$[8] = secondaryAction;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = titleClassName;
+		$[12] = titleTypography;
+	} else {
+		description = $[1];
+		descriptionClassName = $[2];
+		descriptionTypography = $[3];
+		heading = $[4];
+		modalClassName = $[5];
+		modalProps = $[6];
+		primaryAction = $[7];
+		secondaryAction = $[8];
+		t1 = $[9];
+		t2 = $[10];
+		titleClassName = $[11];
+		titleTypography = $[12];
+	}
+	const buttonSize = t1 === void 0 ? "m" : t1;
+	const textAlign = t2 === void 0 ? "left" : t2;
 	const ui = UIConfig.useConfig();
 	const textAlignClass = textAlignClassMap[textAlign];
-	return /* @__PURE__ */ jsxs(Modal, {
-		modalClassName: clsx("w-modal", modalClassName),
-		...modalProps,
-		children: [/* @__PURE__ */ jsxs("div", {
+	let t3;
+	if ($[13] !== modalClassName) {
+		t3 = clsx("w-modal", modalClassName);
+		$[13] = modalClassName;
+		$[14] = t3;
+	} else t3 = $[14];
+	const t4 = titleTypography ?? ui.actionModal.titleTypography;
+	let t5;
+	if ($[15] !== textAlignClass || $[16] !== titleClassName) {
+		t5 = clsx("text-text-default-1", textAlignClass, titleClassName);
+		$[15] = textAlignClass;
+		$[16] = titleClassName;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== heading || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Typography, {
+			...t4,
+			as: "h2",
+			className: t5,
+			children: heading
+		});
+		$[18] = heading;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	const t7 = descriptionTypography ?? ui.actionModal.descriptionTypography;
+	let t8;
+	if ($[22] !== descriptionClassName || $[23] !== textAlignClass) {
+		t8 = clsx("text-text-default-1", textAlignClass, descriptionClassName);
+		$[22] = descriptionClassName;
+		$[23] = textAlignClass;
+		$[24] = t8;
+	} else t8 = $[24];
+	let t9;
+	if ($[25] !== description || $[26] !== t7 || $[27] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Typography, {
+			...t7,
+			className: t8,
+			children: description
+		});
+		$[25] = description;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	let t10;
+	if ($[29] !== t6 || $[30] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-modal-gap-text",
-			children: [/* @__PURE__ */ jsx(Typography, {
-				...titleTypography ?? ui.actionModal.titleTypography,
-				as: "h2",
-				className: clsx("text-text-default-1", textAlignClass, titleClassName),
-				children: heading
-			}), /* @__PURE__ */ jsx(Typography, {
-				...descriptionTypography ?? ui.actionModal.descriptionTypography,
-				className: clsx("text-text-default-1", textAlignClass, descriptionClassName),
-				children: description
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
+			children: [t6, t9]
+		});
+		$[29] = t6;
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== buttonSize || $[33] !== secondaryAction) {
+		t11 = secondaryAction && /* @__PURE__ */ jsx(Button, {
+			variant: secondaryAction?.variant ?? "contained",
+			size: buttonSize,
+			color: secondaryAction?.color ?? "secondary",
+			width: "fill",
+			onPress: secondaryAction?.onPress,
+			className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
+			children: secondaryAction?.label
+		});
+		$[32] = buttonSize;
+		$[33] = secondaryAction;
+		$[34] = t11;
+	} else t11 = $[34];
+	const t12 = primaryAction?.variant ?? "contained";
+	const t13 = primaryAction?.color ?? "primary";
+	const t14 = primaryAction.onPress;
+	const t15 = primaryAction?.className;
+	let t16;
+	if ($[35] !== t15) {
+		t16 = clsx("min-w-40 flex-1 shrink-0", t15);
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== buttonSize || $[38] !== primaryAction.label || $[39] !== primaryAction.onPress || $[40] !== t12 || $[41] !== t13 || $[42] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Button, {
+			variant: t12,
+			size: buttonSize,
+			color: t13,
+			width: "fill",
+			onPress: t14,
+			className: t16,
+			children: primaryAction.label
+		});
+		$[37] = buttonSize;
+		$[38] = primaryAction.label;
+		$[39] = primaryAction.onPress;
+		$[40] = t12;
+		$[41] = t13;
+		$[42] = t16;
+		$[43] = t17;
+	} else t17 = $[43];
+	let t18;
+	if ($[44] !== t11 || $[45] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
 			className: "flex w-full flex-wrap gap-modal-gap-buttons pt-1",
-			children: [secondaryAction && /* @__PURE__ */ jsx(Button, {
-				variant: secondaryAction?.variant ?? "contained",
-				size: buttonSize,
-				color: secondaryAction?.color ?? "secondary",
-				width: "fill",
-				onPress: secondaryAction?.onPress,
-				className: clsx("min-w-40 flex-1 shrink-0", secondaryAction?.className),
-				children: secondaryAction?.label
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: primaryAction?.variant ?? "contained",
-				size: buttonSize,
-				color: primaryAction?.color ?? "primary",
-				width: "fill",
-				onPress: primaryAction.onPress,
-				className: clsx("min-w-40 flex-1 shrink-0", primaryAction?.className),
-				children: primaryAction.label
-			})]
-		})]
-	});
+			children: [t11, t17]
+		});
+		$[44] = t11;
+		$[45] = t17;
+		$[46] = t18;
+	} else t18 = $[46];
+	let t19;
+	if ($[47] !== modalProps || $[48] !== t10 || $[49] !== t18 || $[50] !== t3) {
+		t19 = /* @__PURE__ */ jsxs(Modal, {
+			modalClassName: t3,
+			...modalProps,
+			children: [t10, t18]
+		});
+		$[47] = modalProps;
+		$[48] = t10;
+		$[49] = t18;
+		$[50] = t3;
+		$[51] = t19;
+	} else t19 = $[51];
+	return t19;
 };
 //#endregion
 export { ActionModal };

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -100,7 +100,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: clsx("fixed top-0 left-0 z-bottom-sheet w-screen h-dvh", containerClassName),
-		style: { "--bottom-sheet-keyboard-inset": `${keyboardInset}px` },
+		style: { "--bottom-sheet-keyboard-inset": `var(--bottom-sheet-host-inset, ${keyboardInset}px)` },
 		onOpenChange,
 		isDismissable,
 		ref: overlayRef,

package/dist/components/overlays/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren, RefObject } from 'react';
+import { DialogProps as AriaDialogProps } from 'react-aria-components';
 import { ModalVariantProps } from './modal.cva';
-export interface ModalProps extends ModalVariantProps {
+export interface ModalProps extends ModalVariantProps, Pick<AriaDialogProps, "aria-label" | "aria-labelledby"> {
     isOpen: boolean;
     portalContainerRef?: RefObject<HTMLElement>;
     onClose: () => void;
@@ -12,4 +13,4 @@ export interface ModalProps extends ModalVariantProps {
     isKeyboardDismissable?: boolean;
     shouldCloseOnInteractOutside?: () => boolean;
 }
-export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, isKeyboardDismissable, shouldCloseOnInteractOutside, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable, isKeyboardDismissable, shouldCloseOnInteractOutside, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.js

@@ -8,7 +8,7 @@ import { clsx } from "clsx";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/overlays/Modal/Modal.tsx
-var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside }) => {
+var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true, isKeyboardDismissable, shouldCloseOnInteractOutside, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
 	const { t } = useTranslation("ui");
 	const modalMainCva = UIOverrides.useCva("modal.mainCva", modalMainDefinition);
 	const modalContentCva = UIOverrides.useCva("modal.contentCva", modalContentDefinition);
@@ -35,6 +35,8 @@ var Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClas
 		children: /* @__PURE__ */ jsx(Modal, {
 			className: modalMainCva({ aside }),
 			children: /* @__PURE__ */ jsxs(Dialog, {
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
 				className: modalContentCva({
 					aside,
 					className: modalClassName

package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js

@@ -2,44 +2,125 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { BottomSheet } from "../BottomSheet/BottomSheet.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { popoverDefinition } from "../../shared/popover.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Dialog, DialogTrigger, Popover } from "react-aria-components";
 //#region src/components/overlays/ResponsivePopover/ResponsivePopover.tsx
-var ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, popoverProps }) => {
+var ResponsivePopover = (t0) => {
+	const $ = c(33);
+	const { trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel, bottomSheetProps, popoverProps } = t0;
 	const popoverCva = UIOverrides.useCva("popover.cva", popoverDefinition);
 	const isDesktop = useBreakpoint("md");
-	const { offset = 0, placement = "bottom start", ...restPopoverProps } = popoverProps ?? {};
-	if (!isDesktop) return /* @__PURE__ */ jsx(BottomSheet, {
-		height: "auto",
-		isDismissable: true,
-		label: sheetLabel,
-		...bottomSheetProps,
-		isOpen,
-		onOpenChange,
-		trigger,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "p-4",
-			children
-		})
-	});
-	return /* @__PURE__ */ jsxs(DialogTrigger, {
-		isOpen,
-		onOpenChange,
-		children: [trigger, /* @__PURE__ */ jsx(Popover, {
+	let t1;
+	if ($[0] !== popoverProps) {
+		t1 = popoverProps ?? {};
+		$[0] = popoverProps;
+		$[1] = t1;
+	} else t1 = $[1];
+	let restPopoverProps;
+	let t2;
+	let t3;
+	if ($[2] !== t1) {
+		({offset: t2, placement: t3, ...restPopoverProps} = t1);
+		$[2] = t1;
+		$[3] = restPopoverProps;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		restPopoverProps = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const offset = t2 === void 0 ? 0 : t2;
+	const placement = t3 === void 0 ? "bottom start" : t3;
+	if (!isDesktop) {
+		let t4;
+		if ($[6] !== children) {
+			t4 = /* @__PURE__ */ jsx("div", {
+				className: "p-4",
+				children
+			});
+			$[6] = children;
+			$[7] = t4;
+		} else t4 = $[7];
+		let t5;
+		if ($[8] !== bottomSheetProps || $[9] !== isOpen || $[10] !== onOpenChange || $[11] !== sheetLabel || $[12] !== t4 || $[13] !== trigger) {
+			t5 = /* @__PURE__ */ jsx(BottomSheet, {
+				height: "auto",
+				isDismissable: true,
+				label: sheetLabel,
+				...bottomSheetProps,
+				isOpen,
+				onOpenChange,
+				trigger,
+				children: t4
+			});
+			$[8] = bottomSheetProps;
+			$[9] = isOpen;
+			$[10] = onOpenChange;
+			$[11] = sheetLabel;
+			$[12] = t4;
+			$[13] = trigger;
+			$[14] = t5;
+		} else t5 = $[14];
+		return t5;
+	}
+	let t4;
+	if ($[15] !== popoverClassName) {
+		t4 = clsx("my-4 outline-none", popoverClassName);
+		$[15] = popoverClassName;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== popoverCva) {
+		t5 = clsx(popoverCva({}), "overflow-hidden p-2");
+		$[17] = popoverCva;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== children || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Dialog, {
+			className: "outline-none",
+			children: /* @__PURE__ */ jsx("div", {
+				className: t5,
+				children
+			})
+		});
+		$[19] = children;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	let t7;
+	if ($[22] !== offset || $[23] !== placement || $[24] !== restPopoverProps || $[25] !== t4 || $[26] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Popover, {
 			...restPopoverProps,
-			className: clsx("my-4 outline-none", popoverClassName),
+			className: t4,
 			offset,
 			placement,
-			children: /* @__PURE__ */ jsx(Dialog, {
-				className: "outline-none",
-				children: /* @__PURE__ */ jsx("div", {
-					className: clsx(popoverCva({}), "overflow-hidden p-2"),
-					children
-				})
-			})
-		})]
-	});
+			children: t6
+		});
+		$[22] = offset;
+		$[23] = placement;
+		$[24] = restPopoverProps;
+		$[25] = t4;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t7 || $[31] !== trigger) {
+		t8 = /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen,
+			onOpenChange,
+			children: [trigger, t7]
+		});
+		$[28] = isOpen;
+		$[29] = onOpenChange;
+		$[30] = t7;
+		$[31] = trigger;
+		$[32] = t8;
+	} else t8 = $[32];
+	return t8;
 };
 //#endregion
 export { ResponsivePopover };