ropav 0.0.6 → 0.0.8

package/dist/modal.css

@@ -0,0 +1,134 @@
+.rp-modal[data-v-657f313d] {
+  --_rp-modal-width: 32rem;
+  --_rp-modal-max-height: calc(100vh - var(--rp-spacing-12));
+  --_rp-modal-radius: var(--rp-radius-sm);
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  padding: var(--rp-spacing-6);
+  overflow: auto;
+  font-family: var(--rp-font-family);
+}
+.rp-modal--size-sm[data-v-657f313d] {
+  --_rp-modal-width: 22rem;
+}
+.rp-modal--size-lg[data-v-657f313d] {
+  --_rp-modal-width: 45rem;
+}
+.rp-modal--size-xl[data-v-657f313d] {
+  --_rp-modal-width: 58rem;
+}
+.rp-modal--size-full[data-v-657f313d] {
+  --_rp-modal-width: 100vw;
+  --_rp-modal-max-height: 100vh;
+  --_rp-modal-radius: var(--rp-radius-none);
+  padding: 0;
+}
+.rp-modal__overlay[data-v-657f313d] {
+  border-radius: 0;
+}
+.rp-modal__panel[data-v-657f313d] {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: min(var(--_rp-modal-width), 100%);
+  max-height: var(--_rp-modal-max-height);
+  color: var(--rp-color-text);
+  overflow: hidden;
+  background-color: var(--rp-color-surface-raised);
+  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-radius: var(--_rp-modal-radius);
+  box-shadow: var(--rp-shadow-lg);
+  outline: none;
+}
+.rp-modal--size-full .rp-modal__panel[data-v-657f313d] {
+  min-height: 100vh;
+  border: 0;
+}
+.rp-modal__header[data-v-657f313d] {
+  box-sizing: border-box;
+  padding: var(--rp-spacing-5) calc(var(--rp-spacing-6) + var(--rp-size-control-sm)) var(--rp-spacing-4) var(--rp-spacing-5);
+  border-bottom: var(--rp-border-width-thin) solid var(--rp-color-border);
+}
+.rp-modal__heading[data-v-657f313d] {
+  display: grid;
+  gap: var(--rp-spacing-1);
+}
+.rp-modal__title[data-v-657f313d] {
+  margin: 0;
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-xl);
+  font-weight: var(--rp-font-weight-semibold);
+  line-height: var(--rp-line-height-tight);
+}
+.rp-modal__description[data-v-657f313d] {
+  margin: 0;
+  color: var(--rp-color-text-secondary);
+  font-size: var(--rp-font-size-sm);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-modal__close[data-v-657f313d] {
+  position: absolute;
+  top: var(--rp-spacing-3);
+  right: var(--rp-spacing-3);
+  z-index: 1;
+}
+.rp-modal__body[data-v-657f313d] {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--rp-spacing-5);
+  overflow: auto;
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-base);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-657f313d] {
+  padding-right: calc(var(--rp-spacing-6) + var(--rp-size-control-sm));
+}
+.rp-modal__footer[data-v-657f313d] {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--rp-spacing-2);
+  justify-content: flex-end;
+  padding: var(--rp-spacing-4) var(--rp-spacing-5);
+  border-top: var(--rp-border-width-thin) solid var(--rp-color-border);
+}
+.rp-modal-enter-active[data-v-657f313d],
+.rp-modal-leave-active[data-v-657f313d] {
+  transition: opacity var(--rp-transition-fast);
+}
+.rp-modal-enter-active .rp-modal__panel[data-v-657f313d],
+.rp-modal-leave-active .rp-modal__panel[data-v-657f313d] {
+  transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
+}
+.rp-modal-enter-from[data-v-657f313d],
+.rp-modal-leave-to[data-v-657f313d] {
+  opacity: 0;
+}
+.rp-modal-enter-from .rp-modal__panel[data-v-657f313d],
+.rp-modal-leave-to .rp-modal__panel[data-v-657f313d] {
+  opacity: 0;
+  transform: translateY(var(--rp-spacing-2)) scale(0.98);
+}
+@media (max-width: 480px) {
+.rp-modal[data-v-657f313d] {
+    padding: var(--rp-spacing-3);
+}
+.rp-modal__header[data-v-657f313d] {
+    padding-left: var(--rp-spacing-4);
+}
+.rp-modal__body[data-v-657f313d] {
+    padding: var(--rp-spacing-4);
+}
+.rp-modal__footer[data-v-657f313d] {
+    padding: var(--rp-spacing-4);
+}
+}

package/dist/modal.js

@@ -0,0 +1,427 @@
+import './modal.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as icon_button_default } from "./icon-button.js";
+import { t as x_default } from "./x.js";
+import { t as overlay_default } from "./overlay.js";
+import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, nextTick, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, useId, useSlots, watch } from "vue";
+//#region src/components/modal/useModal.ts
+var bodyScrollLockCount = 0;
+var previousBodyOverflow = "";
+var activeModalStack = [];
+var DEFAULT_ROLE = "dialog";
+var DEFAULT_SIZE = "md";
+var FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"textarea:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+var MODAL_PRESET_SIZES = /* @__PURE__ */ new Set([
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+]);
+function isHTMLElement(value) {
+	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement;
+}
+function isModalPresetSize(size) {
+	return MODAL_PRESET_SIZES.has(size);
+}
+function isFocusable(element) {
+	if (element.getAttribute("aria-hidden") === "true") return false;
+	if (element.hasAttribute("disabled")) return false;
+	return element.tabIndex >= 0;
+}
+function getFocusableElements(panel) {
+	if (!panel) return [];
+	return [...panel.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
+}
+function focusElement(element) {
+	if (!element) return;
+	try {
+		element.focus({ preventScroll: true });
+	} catch {
+		element.focus();
+	}
+}
+function lockBodyScroll() {
+	if (typeof document === "undefined") return void 0;
+	if (bodyScrollLockCount === 0) {
+		previousBodyOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+	}
+	bodyScrollLockCount += 1;
+	return () => {
+		bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+		if (bodyScrollLockCount === 0) document.body.style.overflow = previousBodyOverflow;
+	};
+}
+function readInitialFocus(initialFocus) {
+	return isRef(initialFocus) ? initialFocus.value : initialFocus;
+}
+function queryPanelElement(panel, selector) {
+	try {
+		const element = panel.querySelector(selector);
+		return isHTMLElement(element) ? element : null;
+	} catch {
+		return null;
+	}
+}
+function useModal(props, emitOpenChange) {
+	const slots = useSlots();
+	const generatedId = useId();
+	const panelRef = ref(null);
+	const uncontrolledOpen = ref(false);
+	const modalToken = Symbol("modal");
+	let isMounted = false;
+	let isActiveModal = false;
+	let previousActiveElement = null;
+	let removeDocumentListeners;
+	let unlockScroll;
+	const modalId = computed(() => props.id ?? `${generatedId}-modal`);
+	const titleId = computed(() => `${modalId.value}-title`);
+	const descriptionId = computed(() => `${modalId.value}-description`);
+	const role = computed(() => props.role ?? DEFAULT_ROLE);
+	const size = computed(() => props.size || DEFAULT_SIZE);
+	const isPresetSize = computed(() => isModalPresetSize(size.value));
+	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+	const shouldRender = computed(() => Boolean(props.keepMounted || isOpen.value));
+	const hasCustomHeader = computed(() => Boolean(slots.header));
+	const hasHeader = computed(() => Boolean(hasCustomHeader.value || props.title || props.description));
+	const hasFooter = computed(() => Boolean(slots.footer));
+	const showCloseButton = computed(() => props.showCloseButton);
+	const headerId = computed(() => hasCustomHeader.value && !props.ariaLabel ? titleId.value : void 0);
+	const ariaLabelledby = computed(() => {
+		if (props.ariaLabel) return void 0;
+		return hasCustomHeader.value || props.title ? titleId.value : void 0;
+	});
+	const ariaDescribedby = computed(() => props.description && !hasCustomHeader.value ? descriptionId.value : void 0);
+	const ariaLabel = computed(() => ariaLabelledby.value ? void 0 : props.ariaLabel || void 0);
+	const rootClass = computed(() => bem("rp-modal", {
+		[`size-${size.value}`]: isPresetSize.value,
+		"size-custom": !isPresetSize.value,
+		open: isOpen.value
+	}));
+	const rootStyle = computed(() => {
+		if (isPresetSize.value) return void 0;
+		return { "--_rp-modal-width": size.value };
+	});
+	const stateClass = computed(() => ({
+		"rp-modal--closable": showCloseButton.value,
+		"rp-modal--headerless": !hasHeader.value
+	}));
+	const slotProps = computed(() => ({
+		isOpen: isOpen.value,
+		open: openModal,
+		close: closeModal,
+		toggle: toggleModal
+	}));
+	function setOpen(nextOpen) {
+		if (nextOpen === isOpen.value) return;
+		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
+		emitOpenChange?.(nextOpen);
+	}
+	function openModal() {
+		setOpen(true);
+	}
+	function closeModal() {
+		setOpen(false);
+	}
+	function toggleModal() {
+		setOpen(!isOpen.value);
+	}
+	function resolveInitialFocus() {
+		const initialFocus = readInitialFocus(props.initialFocus);
+		const panel = panelRef.value;
+		if (!initialFocus || !panel) return null;
+		if (typeof initialFocus === "string") return queryPanelElement(panel, initialFocus);
+		return panel.contains(initialFocus) ? initialFocus : null;
+	}
+	function focusInitialElement() {
+		const firstFocusable = getFocusableElements(panelRef.value)[0];
+		focusElement(resolveInitialFocus() ?? firstFocusable ?? panelRef.value);
+	}
+	function addToStack() {
+		if (!activeModalStack.includes(modalToken)) activeModalStack.push(modalToken);
+	}
+	function removeFromStack() {
+		const index = activeModalStack.indexOf(modalToken);
+		if (index !== -1) activeModalStack.splice(index, 1);
+	}
+	function isTopModal() {
+		return activeModalStack[activeModalStack.length - 1] === modalToken;
+	}
+	function trapFocus(event) {
+		const panel = panelRef.value;
+		if (!panel) return;
+		const focusableElements = getFocusableElements(panel);
+		if (focusableElements.length === 0) {
+			event.preventDefault();
+			focusElement(panel);
+			return;
+		}
+		const firstElement = focusableElements[0];
+		const lastElement = focusableElements[focusableElements.length - 1];
+		const activeElement = document.activeElement;
+		if (!(activeElement instanceof Node && panel.contains(activeElement))) {
+			event.preventDefault();
+			focusElement(firstElement);
+			return;
+		}
+		if (event.shiftKey && activeElement === firstElement) {
+			event.preventDefault();
+			focusElement(lastElement);
+			return;
+		}
+		if (!event.shiftKey && activeElement === lastElement) {
+			event.preventDefault();
+			focusElement(firstElement);
+		}
+	}
+	function onDocumentKeydown(event) {
+		if (!isOpen.value || !isTopModal()) return;
+		if (event.key === "Escape") {
+			if (props.closeOnEscape === false) return;
+			event.preventDefault();
+			closeModal();
+			return;
+		}
+		if (event.key === "Tab") trapFocus(event);
+	}
+	function bindDocumentListeners() {
+		if (typeof document === "undefined" || removeDocumentListeners) return;
+		document.addEventListener("keydown", onDocumentKeydown);
+		removeDocumentListeners = () => {
+			document.removeEventListener("keydown", onDocumentKeydown);
+			removeDocumentListeners = void 0;
+		};
+	}
+	function restoreFocus() {
+		if (props.returnFocus === false) {
+			previousActiveElement = null;
+			return;
+		}
+		if (previousActiveElement?.isConnected) focusElement(previousActiveElement);
+		previousActiveElement = null;
+	}
+	function activateModal() {
+		if (isActiveModal) return;
+		isActiveModal = true;
+		addToStack();
+		if (typeof document !== "undefined") {
+			const activeElement = document.activeElement;
+			previousActiveElement = isHTMLElement(activeElement) ? activeElement : null;
+		}
+		bindDocumentListeners();
+		if (props.preventScroll !== false) unlockScroll = lockBodyScroll();
+		nextTick(() => {
+			if (isActiveModal) focusInitialElement();
+		});
+	}
+	function deactivateModal() {
+		if (!isActiveModal) return;
+		isActiveModal = false;
+		removeFromStack();
+		removeDocumentListeners?.();
+		unlockScroll?.();
+		unlockScroll = void 0;
+		restoreFocus();
+	}
+	function onOverlayClick(event) {
+		if (props.closeOnOverlayClick === false || event.target !== event.currentTarget) return;
+		closeModal();
+	}
+	onMounted(() => {
+		isMounted = true;
+		if (isOpen.value) activateModal();
+	});
+	onBeforeUnmount(() => {
+		deactivateModal();
+	});
+	watch(isOpen, (nextOpen) => {
+		if (!isMounted) return;
+		if (nextOpen) activateModal();
+		else deactivateModal();
+	});
+	return {
+		panelRef,
+		modalId,
+		titleId,
+		descriptionId,
+		role,
+		isOpen,
+		shouldRender,
+		hasHeader,
+		hasFooter,
+		showCloseButton,
+		headerId,
+		ariaLabelledby,
+		ariaDescribedby,
+		ariaLabel,
+		rootClass,
+		rootStyle,
+		stateClass,
+		slotProps,
+		openModal,
+		closeModal,
+		toggleModal,
+		onOverlayClick
+	};
+}
+//#endregion
+//#region src/components/modal/modal.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<h2 data-v-657f313d class=rp-modal__title> ");
+var t1 = template("<p data-v-657f313d class=rp-modal__description> ");
+var t2 = template("<div data-v-657f313d class=rp-modal__heading>");
+var t3 = template("<div data-v-657f313d class=rp-modal__header>");
+var t4 = template("<div data-v-657f313d class=rp-modal__body>");
+var t5 = template("<div data-v-657f313d class=rp-modal__footer>");
+var t6 = template("<div data-v-657f313d><section data-v-657f313d class=rp-modal__panel aria-modal=true tabindex=-1>");
+//#endregion
+//#region src/components/modal/modal.vue
+var modal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpModal",
+	__name: "modal",
+	props: {
+		id: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		title: { default: "" },
+		description: { default: "" },
+		ariaLabel: { default: "" },
+		closeLabel: { default: "Close modal" },
+		role: { default: "dialog" },
+		size: { default: "md" },
+		initialFocus: { default: null },
+		closeOnOverlayClick: {
+			type: Boolean,
+			default: true
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: true
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: true
+		},
+		overlayProps: { default: () => ({}) },
+		preventScroll: {
+			type: Boolean,
+			default: true
+		},
+		returnFocus: {
+			type: Boolean,
+			default: true
+		},
+		keepMounted: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		const { panelRef, modalId, titleId, descriptionId, role, isOpen, shouldRender, hasHeader, hasFooter, showCloseButton, headerId, ariaLabelledby, ariaDescribedby, ariaLabel, rootClass, rootStyle, stateClass, slotProps, closeModal, onOverlayClick } = useModal(props, (open) => {
+			emit("update:open", open);
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		return createComponent(VaporTransition, {
+			name: "rp-modal",
+			persisted: ""
+		}, extend(() => {
+			return createIf(() => unref(shouldRender), () => {
+				const n28 = t6();
+				const n27 = child(n28, 1);
+				renderEffect(() => {
+					setClass(n28, [unref(rootClass), unref(stateClass)]);
+					setStyle(n28, unref(rootStyle));
+				});
+				setInsertionState(n28, 0, 0);
+				createComponent(overlay_default, { $: [() => __props.overlayProps, {
+					class: "rp-modal__overlay",
+					"z-index": 0,
+					interactive: "",
+					onClick: () => unref(onOverlayClick)
+				}] });
+				renderEffect(() => {
+					setProp(n27, "id", unref(modalId));
+					setProp(n27, "role", unref(role));
+					setAttr(n27, "aria-label", unref(ariaLabel));
+					setAttr(n27, "aria-labelledby", unref(ariaLabelledby));
+					setAttr(n27, "aria-describedby", unref(ariaDescribedby));
+				});
+				setInsertionState(n27, null, 0);
+				createIf(() => unref(hasHeader), () => {
+					const n14 = t3();
+					renderEffect(() => setProp(n14, "id", unref(headerId)));
+					setInsertionState(n14, null, 0);
+					createSlot("header", { $: [() => unref(slotProps)] }, () => {
+						const n13 = t2();
+						setInsertionState(n13, null, 0);
+						createIf(() => __props.title, () => {
+							const n9 = t0();
+							const x9 = txt(n9);
+							renderEffect(() => {
+								setProp(n9, "id", unref(titleId));
+								setText(x9, toDisplayString(__props.title));
+							});
+							return n9;
+						});
+						setInsertionState(n13, null, 1);
+						createIf(() => __props.description, () => {
+							const n12 = t1();
+							const x12 = txt(n12);
+							renderEffect(() => {
+								setProp(n12, "id", unref(descriptionId));
+								setText(x12, toDisplayString(__props.description));
+							});
+							return n12;
+						});
+						return n13;
+					}, 1);
+					return n14;
+				});
+				setInsertionState(n27, null, 1);
+				createIf(() => unref(showCloseButton), () => {
+					return createComponent(icon_button_default, {
+						class: "rp-modal__close",
+						ariaLabel: () => __props.closeLabel,
+						variant: "ghost",
+						size: "sm",
+						onClick: () => unref(closeModal)
+					}, () => {
+						return createComponent(unref(x_default));
+					});
+				});
+				setInsertionState(n27, null, 2);
+				createIf(() => $slots.default, () => {
+					const n22 = t4();
+					setInsertionState(n22, null, 0);
+					createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
+					return n22;
+				});
+				setInsertionState(n27, null, 3);
+				createIf(() => unref(hasFooter), () => {
+					const n26 = t5();
+					setInsertionState(n26, null, 0);
+					createSlot("footer", { $: [() => unref(slotProps)] }, null, 1);
+					return n26;
+				});
+				_setTemplateRef(n27, panelRef, null, "panelRef");
+				applyVShow(n28, () => unref(isOpen));
+				return n28;
+			}, null, 129);
+		}, { _: 8 }), true);
+	}
+}), [["__scopeId", "data-v-657f313d"]]);
+//#endregion
+export { modal_default as t };

package/dist/overlay.css

@@ -0,0 +1,28 @@
+.rp-overlay[data-v-4a733439] {
+  --_rp-overlay-color: var(--rp-color-overlay);
+  --_rp-overlay-opacity: 1;
+  --_rp-overlay-blur: 0px;
+  --_rp-overlay-z-index: 1;
+  position: absolute;
+  inset: 0;
+  z-index: var(--_rp-overlay-z-index);
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_rp-overlay-color);
+  border-radius: inherit;
+  opacity: var(--_rp-overlay-opacity);
+  pointer-events: none;
+}
+.rp-overlay--gradient[data-v-4a733439] {
+  background-color: transparent;
+  opacity: 1;
+}
+.rp-overlay--blurred[data-v-4a733439] {
+  backdrop-filter: blur(var(--_rp-overlay-blur));
+  -webkit-backdrop-filter: blur(var(--_rp-overlay-blur));
+}
+.rp-overlay--interactive[data-v-4a733439] {
+  pointer-events: auto;
+}

package/dist/overlay.js

@@ -0,0 +1,82 @@
+import './overlay.css';
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createIf, defineVaporComponent, renderEffect, setClass, setStyle, template, unref } from "vue";
+//#region src/components/overlay/useOverlay.ts
+function getBlurValue(blur) {
+	if (blur == null || blur === "") return void 0;
+	if (typeof blur === "number") {
+		if (!Number.isFinite(blur) || blur < 0) return void 0;
+		return `${blur}px`;
+	}
+	return blur;
+}
+function useOverlay(props) {
+	const isRendered = computed(() => !props.disabled);
+	const hasGradient = computed(() => Boolean(props.gradient));
+	const normalizedOpacity = computed(() => {
+		const opacity = props.opacity;
+		if (opacity === void 0 || !Number.isFinite(opacity)) return 1;
+		return Math.min(1, Math.max(0, opacity));
+	});
+	const blurValue = computed(() => getBlurValue(props.blur));
+	const hasBlur = computed(() => Boolean(blurValue.value));
+	return {
+		isRendered,
+		rootClass: computed(() => bem("rp-overlay", {
+			gradient: hasGradient.value,
+			blurred: hasBlur.value,
+			interactive: props.interactive
+		})),
+		rootStyle: computed(() => {
+			const style = { "--_rp-overlay-z-index": props.zIndex };
+			if (blurValue.value) style["--_rp-overlay-blur"] = blurValue.value;
+			if (hasGradient.value) return {
+				...style,
+				backgroundImage: props.gradient
+			};
+			return {
+				...style,
+				"--_rp-overlay-color": props.color,
+				"--_rp-overlay-opacity": normalizedOpacity.value
+			};
+		})
+	};
+}
+//#endregion
+//#region src/components/overlay/overlay.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-4a733439 aria-hidden=true>", 1);
+//#endregion
+//#region src/components/overlay/overlay.vue
+var overlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpOverlay",
+	__name: "overlay",
+	props: {
+		color: { default: "var(--rp-color-overlay)" },
+		opacity: { default: 1 },
+		gradient: { default: "" },
+		blur: {},
+		zIndex: { default: 1 },
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const { isRendered, rootClass, rootStyle } = useOverlay(__props);
+		return createIf(() => unref(isRendered), () => {
+			const n2 = t0();
+			renderEffect(() => {
+				setClass(n2, unref(rootClass));
+				setStyle(n2, unref(rootStyle));
+			});
+			return n2;
+		});
+	}
+}), [["__scopeId", "data-v-4a733439"]]);
+//#endregion
+export { overlay_default as t };