@vitus-labs/elements 2.0.0-alpha.9 → 2.0.0-beta.0

package/lib/vitus-labs-elements.native.js

@@ -1,9 +1,8 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
-import { config, context, isEmpty, omit, pick, render, throttle } from "@vitus-labs/core";
-import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { config, isEmpty, omit, pick, render } from "@vitus-labs/core";
+import { Children, forwardRef, memo, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { isFragment } from "react-is";
-import { createPortal } from "react-dom";
 
 //#region src/constants.ts
 const PKG_NAME = "@vitus-labs/elements";
@@ -21,7 +20,7 @@ const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 * equalCols flex distribution. The "content" slot gets `flex: 1` to
 * fill remaining space between before and after.
 */
-const { styled: styled$2, css: css$2, component: component$2 } = config;
+const { styled: styled$2, css: css$2, component: component$1 } = config;
 const equalColsCSS = `
   flex: 1;
 `;
@@ -67,7 +66,7 @@ const styles$2 = ({ css, theme: t, rootSize }) => css`
 
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
-const StyledComponent = styled$2(component$2)`
+const StyledComponent = styled$2(component$1)`
   ${""};
 
   display: flex;
@@ -86,11 +85,22 @@ const StyledComponent = styled$2(component$2)`
 
 //#endregion
 //#region src/helpers/Content/component.tsx
-const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
+/**
+* Memoized content area used inside Element to render one of the three
+* layout slots (before, content, after). Passes alignment, direction,
+* gap, and equalCols styling props to the underlying styled component.
+* Adds a `data-vl-element` attribute in development for debugging.
+*
+* Children are passed as raw content and rendered inside the memo boundary
+* via core `render()` — this lets React.memo skip re-renders when the
+* content reference is stable (common for component-type or string content).
+*/
+const Component$6 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, children, ...props }) => {
+	const debugProps = IS_DEVELOPMENT ? { "data-vl-element": contentType } : {};
 	return /* @__PURE__ */ jsx(StyledComponent, {
 		as: tag,
 		$contentType: contentType,
-		$element: {
+		$element: useMemo(() => ({
 			contentType,
 			parentDirection,
 			direction,
@@ -99,16 +109,26 @@ const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, ali
 			equalCols,
 			gap,
 			extraStyles: extendCss
-		},
-		...IS_DEVELOPMENT ? { "data-vl-element": contentType } : {},
-		...props
+		}), [
+			contentType,
+			parentDirection,
+			direction,
+			alignX,
+			alignY,
+			equalCols,
+			gap,
+			extendCss
+		]),
+		...debugProps,
+		...props,
+		children: render(children)
 	});
 };
-var component_default = memo(Component$9);
+var component_default$1 = memo(Component$6);
 
 //#endregion
 //#region src/helpers/Content/index.ts
-var Content_default = component_default;
+var Content_default = component_default$1;
 
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
@@ -119,7 +139,7 @@ var Content_default = component_default;
 * split flex behavior across two DOM nodes for button/fieldset/legend
 * elements where a single flex container is insufficient.
 */
-const { styled: styled$1, css: css$1, component: component$1 } = config;
+const { styled: styled$1, css: css$1, component } = config;
 const childFixCSS = `
   display: flex;
   flex: 1;
@@ -128,6 +148,7 @@ const childFixCSS = `
 `;
 const blockCSS = `
   align-self: stretch;
+  width: 100%;
 `;
 const styles$1 = ({ theme: t, css }) => css`
   ${false};
@@ -139,15 +160,15 @@ const styles$1 = ({ theme: t, css }) => css`
 })};
 
   ${t.block && blockCSS};
-
   ${false};
+
   ${false};
   ${false};
 
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
 const platformCSS = `display: flex;`;
-var styled_default$1 = styled$1(component$1)`
+var styled_default$1 = styled$1(component)`
   position: relative;
   ${platformCSS};
 
@@ -171,27 +192,55 @@ var styled_default$1 = styled$1(component$1)`
 * support `display: flex` consistently across browsers.
 */
 const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : {};
-const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(styled_default$1, {
+const Component$5 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
+	const COMMON_PROPS = {
 		...props,
 		...DEV_PROPS,
 		ref,
-		as: tag,
-		$element: {
-			block,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			extraStyles: extendCss
-		},
+		as: tag
+	};
+	const normalElement = useMemo(() => ({
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	}), [
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extendCss
+	]);
+	useMemo(() => ({
+		parentFix: true,
+		block,
+		extraStyles: extendCss
+	}), [block, extendCss]);
+	useMemo(() => ({
+		childFix: true,
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	}), [
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	]);
+	return /* @__PURE__ */ jsx(styled_default$1, {
+		...COMMON_PROPS,
+		$element: normalElement,
 		children
 	});
 });
 
 //#endregion
 //#region src/helpers/Wrapper/index.ts
-var Wrapper_default = Component$8;
+var Wrapper_default = Component$5;
 
 //#endregion
 //#region src/Element/component.tsx
@@ -207,7 +256,7 @@ const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
 const defaultAlignY = "center";
-const Component$7 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
+const Component$4 = forwardRef(({ innerRef, tag, label, content, children, beforeContent, afterContent, equalBeforeAfter, block, equalCols, gap, direction, alignX = defaultAlignX, alignY = defaultAlignY, css, contentCss, beforeContentCss, afterContentCss, contentDirection = defaultContentDirection, contentAlignX = defaultAlignX, contentAlignY = defaultAlignY, beforeContentDirection = defaultDirection, beforeContentAlignX = defaultAlignX, beforeContentAlignY = defaultAlignY, afterContentDirection = defaultDirection, afterContentAlignX = defaultAlignX, afterContentAlignY = defaultAlignY, ...props }, ref) => {
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
 	const isInline = false;
@@ -236,8 +285,21 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY,
 		direction
 	]);
+	const equalizeRef = useRef(null);
+	const externalRef = ref ?? innerRef;
+	const mergedRef = useCallback((node) => {
+		equalizeRef.current = node;
+		if (typeof externalRef === "function") externalRef(node);
+		else if (externalRef != null) externalRef.current = node;
+	}, [externalRef]);
+	useLayoutEffect(() => {}, [
+		equalBeforeAfter,
+		beforeContent,
+		afterContent,
+		direction
+	]);
 	const WRAPPER_PROPS = {
-		ref: ref ?? innerRef,
+		ref: mergedRef,
 		extendCss: css,
 		tag,
 		block,
@@ -246,7 +308,6 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY: wrapperAlignY,
 		as: void 0
 	};
-	const contentRenderOutput = render(CHILDREN);
 	return /* @__PURE__ */ jsxs(Wrapper_default, {
 		...props,
 		...WRAPPER_PROPS,
@@ -262,9 +323,9 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: beforeContentAlignY,
 				equalCols,
 				gap,
-				children: render(beforeContent)
+				children: beforeContent
 			}),
-			isSimpleElement ? contentRenderOutput : /* @__PURE__ */ jsx(Content_default, {
+			isSimpleElement ? render(CHILDREN) : /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
 				contentType: "content",
 				parentDirection: wrapperDirection,
@@ -273,7 +334,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignX: contentAlignX,
 				alignY: contentAlignY,
 				equalCols,
-				children: contentRenderOutput
+				children: CHILDREN
 			}),
 			afterContent && /* @__PURE__ */ jsx(Content_default, {
 				tag: SUB_TAG,
@@ -285,66 +346,19 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 				alignY: afterContentAlignY,
 				equalCols,
 				gap,
-				children: render(afterContent)
+				children: afterContent
 			})
 		]
 	});
 });
-const name$5 = `${PKG_NAME}/Element`;
-Component$7.displayName = name$5;
-Component$7.pkgName = PKG_NAME;
-Component$7.VITUS_LABS__COMPONENT = name$5;
-
-//#endregion
-//#region src/Element/withEqualSizeBeforeAfter.tsx
-/**
-* HOC that equalizes the dimensions of beforeContent and afterContent areas.
-* After render, it measures both DOM nodes via useLayoutEffect and sets the
-* larger dimension on both so they match. Uses width for inline direction
-* and height for rows direction. This is useful for centering the main
-* content when before/after slots have different intrinsic sizes.
-*/
-const types = {
-	height: "offsetHeight",
-	width: "offsetWidth"
-};
-const equalize = (beforeEl, afterEl, type) => {
-	const prop = types[type];
-	const beforeSize = beforeEl[prop];
-	const afterSize = afterEl[prop];
-	if (Number.isInteger(beforeSize) && Number.isInteger(afterSize)) {
-		const maxSize = `${Math.max(beforeSize, afterSize)}px`;
-		beforeEl.style[type] = maxSize;
-		afterEl.style[type] = maxSize;
-	}
-};
-const withEqualBeforeAfter = (WrappedComponent) => {
-	const displayName = WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
-	const Enhanced = ({ equalBeforeAfter, direction, afterContent, beforeContent, ref, ...rest }) => {
-		const internalRef = useRef(null);
-		useImperativeHandle(ref, () => internalRef.current);
-		useLayoutEffect(() => {
-			if (!equalBeforeAfter || !beforeContent || !afterContent) return;
-			if (!internalRef.current) return;
-			const el = internalRef.current;
-			const beforeEl = el.firstElementChild;
-			const afterEl = el.lastElementChild;
-			if (beforeEl && afterEl && beforeEl !== afterEl) equalize(beforeEl, afterEl, direction === "rows" ? "height" : "width");
-		});
-		return /* @__PURE__ */ jsx(WrappedComponent, {
-			...rest,
-			afterContent,
-			beforeContent,
-			ref: internalRef
-		});
-	};
-	Enhanced.displayName = `withEqualSizeBeforeAfter(${displayName})`;
-	return Enhanced;
-};
+const name$3 = `${PKG_NAME}/Element`;
+Component$4.displayName = name$3;
+Component$4.pkgName = PKG_NAME;
+Component$4.VITUS_LABS__COMPONENT = name$3;
 
 //#endregion
 //#region src/Element/index.ts
-var Element_default = Component$7;
+var Element_default = Component$4;
 
 //#endregion
 //#region src/helpers/Iterator/component.tsx
@@ -398,7 +412,7 @@ const attachItemProps = ({ i, length }) => {
 		position
 	};
 };
-const Component$6 = (props) => {
+const Component$3 = (props) => {
 	const { itemKey, valueName, children, component, data, wrapComponent: Wrapper, wrapProps, itemProps } = props;
 	const injectItemProps = useMemo(() => typeof itemProps === "function" ? itemProps : () => itemProps, [itemProps]);
 	const injectWrapItemProps = useMemo(() => typeof wrapProps === "function" ? wrapProps : () => wrapProps, [wrapProps]);
@@ -499,12 +513,14 @@ const Component$6 = (props) => {
 	};
 	return renderItems();
 };
-Component$6.isIterator = true;
-Component$6.RESERVED_PROPS = RESERVED_PROPS;
+var component_default = Object.assign(memo(Component$3), {
+	isIterator: true,
+	RESERVED_PROPS
+});
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = Component$6;
+var Iterator_default = component_default;
 
 //#endregion
 //#region src/List/component.tsx
@@ -515,7 +531,7 @@ var Iterator_default = Component$6;
 * is wrapped in an Element that receives all non-iterator props (e.g.,
 * layout, alignment, css), allowing the list to be styled as a single block.
 */
-const Component$5 = forwardRef(({ rootElement = false, ...props }, ref) => {
+const Component$2 = forwardRef(({ rootElement = false, ...props }, ref) => {
 	const renderedList = /* @__PURE__ */ jsx(Iterator_default, { ...pick(props, Iterator_default.RESERVED_PROPS) });
 	if (!rootElement) return renderedList;
 	return /* @__PURE__ */ jsx(Element_default, {
@@ -524,682 +540,14 @@ const Component$5 = forwardRef(({ rootElement = false, ...props }, ref) => {
 		children: renderedList
 	});
 });
-const name$4 = `${PKG_NAME}/List`;
-Component$5.displayName = name$4;
-Component$5.pkgName = PKG_NAME;
-Component$5.VITUS_LABS__COMPONENT = name$4;
-
-//#endregion
-//#region src/List/withActiveState.tsx
-/**
-* HOC that adds single or multi selection state management to a list component.
-* Tracks which items are active via a scalar key (single mode) or a Map of
-* key-to-boolean entries (multi mode). Injects `itemProps` callback that
-* provides each item with `active`, `handleItemActive`, `toggleItemActive`,
-* and other selection helpers. Supports `activeItemRequired` to prevent
-* deselecting the last active item.
-*/
-const RESERVED_KEYS = [
-	"type",
-	"activeItems",
-	"itemProps",
-	"activeItemRequired"
-];
-const component = (WrappedComponent) => {
-	const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";
-	const Enhanced = (props) => {
-		const { type = "single", activeItemRequired, activeItems, itemProps = {}, ...rest } = props;
-		const initActiveItems = () => {
-			if (type === "single") {
-				if (!Array.isArray(activeItems)) return activeItems;
-			} else if (type === "multi") {
-				const activeItemsHelper = Array.isArray(activeItems) ? activeItems : [activeItems];
-				return new Map(activeItemsHelper.map((id) => [id, true]));
-			}
-		};
-		const [innerActiveItems, setActiveItems] = useState(initActiveItems());
-		const countActiveItems = (data) => {
-			let result = 0;
-			data.forEach((value) => {
-				if (value) result += 1;
-			});
-			return result;
-		};
-		const updateItemState = (key) => {
-			if (type === "single") setActiveItems((prevState) => {
-				if (activeItemRequired) return key;
-				if (prevState === key) return void 0;
-				return key;
-			});
-			else if (type === "multi") setActiveItems((prevState) => {
-				const activeItems = new Map(prevState);
-				if (activeItemRequired && activeItems.get(key) && countActiveItems(activeItems) === 1) return activeItems;
-				activeItems.set(key, !activeItems.get(key));
-				return activeItems;
-			});
-			else setActiveItems(void 0);
-		};
-		const handleItemActive = (key) => {
-			updateItemState(key);
-		};
-		const updateAllItemsState = (status) => {
-			if (!status) setActiveItems(/* @__PURE__ */ new Map());
-		};
-		const setItemActive = (key) => {
-			updateItemState(key);
-		};
-		const unsetItemActive = (key) => {
-			updateItemState(key);
-		};
-		const toggleItemActive = (key) => {
-			updateItemState(key);
-		};
-		const unsetAllItemsActive = () => {
-			updateAllItemsState(false);
-		};
-		const isItemActive = (key) => {
-			if (!innerActiveItems) return false;
-			if (type === "single") return innerActiveItems === key;
-			if (type === "multi" && innerActiveItems instanceof Map) return !!innerActiveItems.get(key);
-			return false;
-		};
-		const attachMultipleProps = { unsetAllItemsActive };
-		const attachItemProps = (props) => {
-			const { key } = props;
-			return {
-				...typeof itemProps === "object" ? itemProps : itemProps(props),
-				active: isItemActive(key),
-				handleItemActive: () => handleItemActive(key),
-				setItemActive,
-				unsetItemActive,
-				toggleItemActive,
-				...type === "multi" ? attachMultipleProps : {}
-			};
-		};
-		useEffect(() => {
-			if (type === "single" && Array.isArray(activeItems)) {
-				if (process.env.NODE_ENV !== "production") console.warn("[@vitus-labs/elements] List/withActiveState: `activeItems` was passed as an array but `type` is \"single\". In single selection mode, `activeItems` should be a single key (string | number). The array value will be ignored.");
-			}
-		}, [type, activeItems]);
-		return /* @__PURE__ */ jsx(WrappedComponent, {
-			...rest,
-			itemProps: attachItemProps
-		});
-	};
-	Enhanced.RESERVED_KEYS = RESERVED_KEYS;
-	Enhanced.displayName = `@vitus-labs/elements/List/withActiveState(${displayName})`;
-	return Enhanced;
-};
+const name$2 = `${PKG_NAME}/List`;
+Component$2.displayName = name$2;
+Component$2.pkgName = PKG_NAME;
+Component$2.VITUS_LABS__COMPONENT = name$2;
 
 //#endregion
 //#region src/List/index.ts
-var List_default = Component$5;
-
-//#endregion
-//#region src/Portal/component.ts
-/**
-* Portal component that creates a new DOM element on mount, appends it to
-* the target location (defaults to document.body), and uses React's
-* createPortal to render children into it. The DOM element is cleaned up
-* on unmount. Accepts a custom DOMLocation for rendering into specific
-* containers (e.g., a modal root).
-*/
-const Component$4 = ({ DOMLocation, tag = "div", children }) => {
-	const [element, setElement] = useState();
-	useEffect(() => {
-		if (!tag) return void 0;
-		const position = DOMLocation ?? document.body;
-		const element = document.createElement(tag);
-		setElement(element);
-		position.appendChild(element);
-		return () => {
-			position.removeChild(element);
-		};
-	}, [tag, DOMLocation]);
-	if (!tag || !element) return null;
-	return createPortal(children, element);
-};
-const name$3 = `${PKG_NAME}/Portal`;
-Component$4.displayName = name$3;
-Component$4.pkgName = PKG_NAME;
-Component$4.VITUS_LABS__COMPONENT = name$3;
-
-//#endregion
-//#region src/Portal/index.ts
-var Portal_default = Component$4;
-
-//#endregion
-//#region src/Overlay/context.tsx
-/**
-* Context for nested overlay coordination. When a child overlay opens, it
-* sets the parent's blocked state to true, preventing the parent from
-* closing in response to click/hover events that belong to the child.
-*/
-const context$1 = createContext({});
-const { Provider: Provider$1 } = context$1;
-const useOverlayContext = () => useContext(context$1);
-const Component = ({ children, blocked, setBlocked, setUnblocked }) => {
-	return /* @__PURE__ */ jsx(Provider$1, {
-		value: useMemo(() => ({
-			blocked,
-			setBlocked,
-			setUnblocked
-		}), [
-			blocked,
-			setBlocked,
-			setUnblocked
-		]),
-		children
-	});
-};
-
-//#endregion
-//#region src/Overlay/useOverlay.tsx
-/**
-* Core hook powering the Overlay component. Manages open/close state, DOM
-* event listeners (click, hover, scroll, resize, ESC key), and dynamic
-* positioning of overlay content relative to its trigger. Supports dropdown,
-* tooltip, popover, and modal types with automatic edge-of-viewport flipping.
-* Event handlers are throttled for performance, and nested overlay blocking
-* is coordinated through the overlay context.
-*/
-const sel = (cond, a, b) => cond ? a : b;
-const devWarn = (msg) => {
-	if (!IS_DEVELOPMENT) return;
-	console.warn(msg);
-};
-const calcDropdownVertical = (c, t, align, alignX, offsetX, offsetY) => {
-	const pos = {};
-	const topPos = t.top - offsetY - c.height;
-	const bottomPos = t.bottom + offsetY;
-	const leftPos = t.left + offsetX;
-	const rightPos = t.right - offsetX - c.width;
-	const fitsTop = topPos >= 0;
-	const fitsBottom = bottomPos + c.height <= window.innerHeight;
-	const fitsLeft = leftPos + c.width <= window.innerWidth;
-	const fitsRight = rightPos >= 0;
-	const useTop = sel(align === "top", fitsTop, !fitsBottom);
-	pos.top = sel(useTop, topPos, bottomPos);
-	const resolvedAlignY = sel(useTop, "top", "bottom");
-	let resolvedAlignX = alignX;
-	if (alignX === "left") {
-		pos.left = sel(fitsLeft, leftPos, rightPos);
-		resolvedAlignX = sel(fitsLeft, "left", "right");
-	} else if (alignX === "right") {
-		pos.left = sel(fitsRight, rightPos, leftPos);
-		resolvedAlignX = sel(fitsRight, "right", "left");
-	} else {
-		const center = t.left + (t.right - t.left) / 2 - c.width / 2;
-		const fitsCL = center >= 0;
-		const fitsCR = center + c.width <= window.innerWidth;
-		if (fitsCL && fitsCR) {
-			resolvedAlignX = "center";
-			pos.left = center;
-		} else if (fitsCL) {
-			resolvedAlignX = "left";
-			pos.left = leftPos;
-		} else if (fitsCR) {
-			resolvedAlignX = "right";
-			pos.left = rightPos;
-		}
-	}
-	return {
-		pos,
-		resolvedAlignX,
-		resolvedAlignY
-	};
-};
-const calcDropdownHorizontal = (c, t, align, alignY, offsetX, offsetY) => {
-	const pos = {};
-	const leftPos = t.left - offsetX - c.width;
-	const rightPos = t.right + offsetX;
-	const topPos = t.top + offsetY;
-	const bottomPos = t.bottom - offsetY - c.height;
-	const fitsLeft = leftPos >= 0;
-	const fitsRight = rightPos + c.width <= window.innerWidth;
-	const fitsTop = topPos + c.height <= window.innerHeight;
-	const fitsBottom = bottomPos >= 0;
-	const useLeft = sel(align === "left", fitsLeft, !fitsRight);
-	pos.left = sel(useLeft, leftPos, rightPos);
-	const resolvedAlignX = sel(useLeft, "left", "right");
-	let resolvedAlignY = alignY;
-	if (alignY === "top") {
-		pos.top = sel(fitsTop, topPos, bottomPos);
-		resolvedAlignY = sel(fitsTop, "top", "bottom");
-	} else if (alignY === "bottom") {
-		pos.top = sel(fitsBottom, bottomPos, topPos);
-		resolvedAlignY = sel(fitsBottom, "bottom", "top");
-	} else {
-		const center = t.top + (t.bottom - t.top) / 2 - c.height / 2;
-		const fitsCT = center >= 0;
-		const fitsCB = center + c.height <= window.innerHeight;
-		if (fitsCT && fitsCB) {
-			resolvedAlignY = "center";
-			pos.top = center;
-		} else if (fitsCT) {
-			resolvedAlignY = "top";
-			pos.top = topPos;
-		} else if (fitsCB) {
-			resolvedAlignY = "bottom";
-			pos.top = bottomPos;
-		}
-	}
-	return {
-		pos,
-		resolvedAlignX,
-		resolvedAlignY
-	};
-};
-const calcModalPos = (c, alignX, alignY, offsetX, offsetY) => {
-	const pos = {};
-	switch (alignX) {
-		case "right":
-			pos.right = offsetX;
-			break;
-		case "left":
-			pos.left = offsetX;
-			break;
-		case "center":
-			pos.left = window.innerWidth / 2 - c.width / 2;
-			break;
-		default: pos.right = offsetX;
-	}
-	switch (alignY) {
-		case "top":
-			pos.top = offsetY;
-			break;
-		case "center":
-			pos.top = window.innerHeight / 2 - c.height / 2;
-			break;
-		case "bottom":
-			pos.bottom = offsetY;
-			break;
-		default: pos.top = offsetY;
-	}
-	return pos;
-};
-const adjustForAncestor = (pos, ancestor) => {
-	if (ancestor.top === 0 && ancestor.left === 0) return pos;
-	const result = { ...pos };
-	if (typeof result.top === "number") result.top -= ancestor.top;
-	if (typeof result.bottom === "number") result.bottom += ancestor.top;
-	if (typeof result.left === "number") result.left -= ancestor.left;
-	if (typeof result.right === "number") result.right += ancestor.left;
-	return result;
-};
-const computePosition = (type, align, alignX, alignY, offsetX, offsetY, triggerEl, contentEl, ancestorOffset) => {
-	const isDropdown = [
-		"dropdown",
-		"tooltip",
-		"popover"
-	].includes(type);
-	if (isDropdown && (!triggerEl || !contentEl)) {
-		devWarn(`[@vitus-labs/elements] Overlay (${type}): ${triggerEl ? "contentRef" : "triggerRef"} is not attached. Position cannot be calculated without both refs.`);
-		return { pos: {} };
-	}
-	if (isDropdown && triggerEl && contentEl) {
-		const c = contentEl.getBoundingClientRect();
-		const t = triggerEl.getBoundingClientRect();
-		const result = align === "top" || align === "bottom" ? calcDropdownVertical(c, t, align, alignX, offsetX, offsetY) : calcDropdownHorizontal(c, t, align, alignY, offsetX, offsetY);
-		return {
-			pos: adjustForAncestor(result.pos, ancestorOffset),
-			resolvedAlignX: result.resolvedAlignX,
-			resolvedAlignY: result.resolvedAlignY
-		};
-	}
-	if (type === "modal") {
-		if (!contentEl) {
-			devWarn("[@vitus-labs/elements] Overlay (modal): contentRef is not attached. Modal position cannot be calculated without a content element.");
-			return { pos: {} };
-		}
-		return { pos: adjustForAncestor(calcModalPos(contentEl.getBoundingClientRect(), alignX, alignY, offsetX, offsetY), ancestorOffset) };
-	}
-	return { pos: {} };
-};
-const processVisibilityEvent = (e, active, openOn, closeOn, isTrigger, isContent, showContent, hideContent) => {
-	if (!active && openOn === "click" && e.type === "click" && isTrigger(e)) {
-		showContent();
-		return;
-	}
-	if (!active) return;
-	if (closeOn === "hover" && e.type === "scroll") {
-		hideContent();
-		return;
-	}
-	if (e.type !== "click") return;
-	if (closeOn === "click") hideContent();
-	else if (closeOn === "clickOnTrigger" && isTrigger(e)) hideContent();
-	else if (closeOn === "clickOutsideContent" && !isContent(e)) hideContent();
-};
-const useOverlay = ({ isOpen = false, openOn = "click", closeOn = "click", type = "dropdown", position = "fixed", align = "bottom", alignX = "left", alignY = "bottom", offsetX = 0, offsetY = 0, throttleDelay = 200, parentContainer, closeOnEsc = true, disabled, onOpen, onClose } = {}) => {
-	const { rootSize } = useContext(context);
-	const ctx = useOverlayContext();
-	const [isContentLoaded, setContentLoaded] = useState(false);
-	const [innerAlignX, setInnerAlignX] = useState(alignX);
-	const [innerAlignY, setInnerAlignY] = useState(alignY);
-	const [blocked, handleBlocked] = useState(false);
-	const [active, handleActive] = useState(isOpen);
-	const triggerRef = useRef(null);
-	const contentRef = useRef(null);
-	const setBlocked = useCallback(() => handleBlocked(true), []);
-	const setUnblocked = useCallback(() => handleBlocked(false), []);
-	const showContent = useCallback(() => {
-		handleActive(true);
-	}, []);
-	const hideContent = useCallback(() => {
-		handleActive(false);
-	}, []);
-	const getAncestorOffset = useCallback(() => {
-		if (position !== "absolute" || !contentRef.current) return {
-			top: 0,
-			left: 0
-		};
-		const offsetParent = contentRef.current.offsetParent;
-		if (!offsetParent || offsetParent === document.body) return {
-			top: 0,
-			left: 0
-		};
-		const rect = offsetParent.getBoundingClientRect();
-		return {
-			top: rect.top,
-			left: rect.left
-		};
-	}, [position]);
-	const calculateContentPosition = useCallback(() => {
-		if (!active || !isContentLoaded) return {};
-		const result = computePosition(type, align, alignX, alignY, offsetX, offsetY, triggerRef.current, contentRef.current, getAncestorOffset());
-		if (result.resolvedAlignX) setInnerAlignX(result.resolvedAlignX);
-		if (result.resolvedAlignY) setInnerAlignY(result.resolvedAlignY);
-		return result.pos;
-	}, [
-		isContentLoaded,
-		active,
-		align,
-		alignX,
-		alignY,
-		offsetX,
-		offsetY,
-		type,
-		getAncestorOffset
-	]);
-	const assignContentPosition = useCallback((values = {}) => {
-		if (!contentRef.current) return;
-		const el = contentRef.current;
-		const setValue = (param) => value(param, rootSize);
-		el.style.position = position;
-		el.style.top = values.top != null ? setValue(values.top) : "";
-		el.style.bottom = values.bottom != null ? setValue(values.bottom) : "";
-		el.style.left = values.left != null ? setValue(values.left) : "";
-		el.style.right = values.right != null ? setValue(values.right) : "";
-	}, [position, rootSize]);
-	const setContentPosition = useCallback(() => {
-		assignContentPosition(calculateContentPosition());
-	}, [assignContentPosition, calculateContentPosition]);
-	const isNodeOrChild = useCallback((ref) => (e) => {
-		if (e?.target && ref.current) return ref.current.contains(e.target) || e.target === ref.current;
-		return false;
-	}, []);
-	const handleVisibilityByEventType = useCallback((e) => {
-		if (blocked || disabled) return;
-		processVisibilityEvent(e, active, openOn, closeOn, isNodeOrChild(triggerRef), isNodeOrChild(contentRef), showContent, hideContent);
-	}, [
-		active,
-		blocked,
-		disabled,
-		openOn,
-		closeOn,
-		hideContent,
-		showContent,
-		isNodeOrChild
-	]);
-	const latestSetContentPosition = useRef(setContentPosition);
-	latestSetContentPosition.current = setContentPosition;
-	const latestHandleVisibility = useRef(handleVisibilityByEventType);
-	latestHandleVisibility.current = handleVisibilityByEventType;
-	const handleContentPosition = useMemo(() => throttle(() => latestSetContentPosition.current(), throttleDelay), [throttleDelay]);
-	const handleClick = handleVisibilityByEventType;
-	const handleVisibility = useMemo(() => throttle((e) => latestHandleVisibility.current(e), throttleDelay), [throttleDelay]);
-	useEffect(() => {
-		setInnerAlignX(alignX);
-		setInnerAlignY(alignY);
-		if (disabled) hideContent();
-	}, [
-		disabled,
-		alignX,
-		alignY,
-		hideContent
-	]);
-	useEffect(() => {
-		if (!active || !isContentLoaded) return void 0;
-		setContentPosition();
-		const rafId = requestAnimationFrame(() => setContentPosition());
-		return () => cancelAnimationFrame(rafId);
-	}, [
-		active,
-		isContentLoaded,
-		setContentPosition
-	]);
-	const prevActiveRef = useRef(false);
-	useEffect(() => {
-		const wasActive = prevActiveRef.current;
-		prevActiveRef.current = active;
-		if (active && !wasActive) {
-			onOpen?.();
-			ctx.setBlocked?.();
-		} else if (!active && wasActive) {
-			setContentLoaded(false);
-			onClose?.();
-			ctx.setUnblocked?.();
-		} else if (!active) setContentLoaded(false);
-		return () => {
-			if (active) {
-				onClose?.();
-				ctx.setUnblocked?.();
-			}
-		};
-	}, [
-		active,
-		ctx,
-		onClose,
-		onOpen
-	]);
-	useEffect(() => {
-		if (!closeOnEsc || !active || blocked) return void 0;
-		const handleEscKey = (e) => {
-			if (e.key === "Escape") hideContent();
-		};
-		window.addEventListener("keydown", handleEscKey);
-		return () => {
-			window.removeEventListener("keydown", handleEscKey);
-		};
-	}, [
-		active,
-		blocked,
-		closeOnEsc,
-		hideContent
-	]);
-	useEffect(() => {
-		if (!active) return void 0;
-		const shouldSetOverflow = type === "modal";
-		const onScroll = (e) => {
-			handleContentPosition();
-			handleVisibility(e);
-		};
-		if (shouldSetOverflow) document.body.style.overflow = "hidden";
-		window.addEventListener("resize", handleContentPosition);
-		window.addEventListener("scroll", onScroll, { passive: true });
-		return () => {
-			if (shouldSetOverflow) document.body.style.overflow = "";
-			window.removeEventListener("resize", handleContentPosition);
-			window.removeEventListener("scroll", onScroll);
-		};
-	}, [
-		active,
-		type,
-		handleVisibility,
-		handleContentPosition
-	]);
-	useEffect(() => {
-		if (!active || !parentContainer) return void 0;
-		if (closeOn !== "hover") parentContainer.style.overflow = "hidden";
-		const onScroll = (e) => {
-			handleContentPosition();
-			handleVisibility(e);
-		};
-		parentContainer.addEventListener("scroll", onScroll, { passive: true });
-		return () => {
-			parentContainer.style.overflow = "";
-			parentContainer.removeEventListener("scroll", onScroll);
-		};
-	}, [
-		active,
-		parentContainer,
-		closeOn,
-		handleContentPosition,
-		handleVisibility
-	]);
-	useEffect(() => {
-		if (blocked || disabled) return void 0;
-		if (openOn === "click" || [
-			"click",
-			"clickOnTrigger",
-			"clickOutsideContent"
-		].includes(closeOn)) window.addEventListener("click", handleClick);
-		return () => {
-			window.removeEventListener("click", handleClick);
-		};
-	}, [
-		openOn,
-		closeOn,
-		blocked,
-		disabled,
-		handleClick
-	]);
-	const hoverTimeoutRef = useRef(null);
-	useEffect(() => {
-		if (blocked || disabled || !(openOn === "hover" || closeOn === "hover")) return void 0;
-		const trigger = triggerRef.current;
-		const content = contentRef.current;
-		const clearHoverTimeout = () => {
-			if (hoverTimeoutRef.current != null) {
-				clearTimeout(hoverTimeoutRef.current);
-				hoverTimeoutRef.current = null;
-			}
-		};
-		const scheduleHide = () => {
-			clearHoverTimeout();
-			hoverTimeoutRef.current = setTimeout(hideContent, 100);
-		};
-		const onTriggerEnter = () => {
-			clearHoverTimeout();
-			if (openOn === "hover" && !active) showContent();
-		};
-		const onTriggerLeave = () => {
-			if (closeOn === "hover" && active) scheduleHide();
-		};
-		const onContentEnter = () => {
-			clearHoverTimeout();
-		};
-		const onContentLeave = () => {
-			if (closeOn === "hover" && active) scheduleHide();
-		};
-		if (trigger) {
-			trigger.addEventListener("mouseenter", onTriggerEnter);
-			trigger.addEventListener("mouseleave", onTriggerLeave);
-		}
-		if (content) {
-			content.addEventListener("mouseenter", onContentEnter);
-			content.addEventListener("mouseleave", onContentLeave);
-		}
-		return () => {
-			clearHoverTimeout();
-			if (trigger) {
-				trigger.removeEventListener("mouseenter", onTriggerEnter);
-				trigger.removeEventListener("mouseleave", onTriggerLeave);
-			}
-			if (content) {
-				content.removeEventListener("mouseenter", onContentEnter);
-				content.removeEventListener("mouseleave", onContentLeave);
-			}
-		};
-	}, [
-		active,
-		isContentLoaded,
-		blocked,
-		disabled,
-		openOn,
-		closeOn,
-		showContent,
-		hideContent
-	]);
-	return {
-		triggerRef,
-		contentRef: useCallback((node) => {
-			if (node) {
-				contentRef.current = node;
-				setContentLoaded(true);
-			}
-		}, []),
-		active,
-		align,
-		alignX: innerAlignX,
-		alignY: innerAlignY,
-		showContent,
-		hideContent,
-		blocked,
-		setBlocked,
-		setUnblocked,
-		Provider: Component
-	};
-};
-
-//#endregion
-//#region src/Overlay/component.tsx
-/**
-* Overlay component that renders a trigger element and conditionally shows
-* content via a Portal. The trigger receives a ref and optional show/hide
-* callbacks; the content is positioned and managed by the useOverlay hook.
-* A context Provider wraps the content to support nested overlays (e.g.,
-* a dropdown inside another dropdown) via blocked-state propagation.
-*/
-const IS_BROWSER = typeof window !== "undefined";
-const Component$3 = ({ children, trigger, DOMLocation, triggerRefName = "ref", contentRefName = "ref", ...props }) => {
-	const { active, triggerRef, contentRef, showContent, hideContent, align, alignX, alignY, Provider, ...ctx } = useOverlay(props);
-	const { openOn, closeOn } = props;
-	const passHandlers = useMemo(() => openOn === "manual" || closeOn === "manual" || closeOn === "clickOutsideContent", [openOn, closeOn]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [render(trigger, {
-		[triggerRefName]: triggerRef,
-		active,
-		...passHandlers ? {
-			showContent,
-			hideContent
-		} : {}
-	}), IS_BROWSER && active && /* @__PURE__ */ jsx(Portal_default, {
-		DOMLocation,
-		children: /* @__PURE__ */ jsx(Provider, {
-			...ctx,
-			children: render(children, {
-				[contentRefName]: contentRef,
-				active,
-				align,
-				alignX,
-				alignY,
-				...passHandlers ? {
-					showContent,
-					hideContent
-				} : {}
-			})
-		})
-	})] });
-};
-const name$2 = `${PKG_NAME}/Overlay`;
-Component$3.displayName = name$2;
-Component$3.pkgName = PKG_NAME;
-Component$3.VITUS_LABS__COMPONENT = name$2;
-
-//#endregion
-//#region src/Overlay/index.ts
-var Overlay_default = Component$3;
+var List_default = Component$2;
 
 //#endregion
 //#region src/Text/styled.ts
@@ -1214,9 +562,7 @@ const styles = ({ css, theme: t }) => css`
   ${t.extraStyles && extendCss(t.extraStyles)};
 `;
 var styled_default = styled(textComponent)`
-  color: inherit;
-  font-weight: inherit;
-  line-height: 1;
+  ${false};
 
   ${makeItResponsive({
 	key: "$text",
@@ -1228,7 +574,7 @@ var styled_default = styled(textComponent)`
 
 //#endregion
 //#region src/Text/component.tsx
-const Component$2 = forwardRef(({ paragraph, label, children, tag, css, ...props }, ref) => {
+const Component$1 = forwardRef(({ paragraph, label, children, tag, css, ...props }, ref) => {
 	const renderContent = (as = void 0) => /* @__PURE__ */ jsx(styled_default, {
 		ref,
 		as,
@@ -1240,14 +586,14 @@ const Component$2 = forwardRef(({ paragraph, label, children, tag, css, ...props
 	return renderContent(finalTag);
 });
 const name$1 = `${PKG_NAME}/Text`;
-Component$2.displayName = name$1;
-Component$2.pkgName = PKG_NAME;
-Component$2.VITUS_LABS__COMPONENT = name$1;
-Component$2.isText = true;
+Component$1.displayName = name$1;
+Component$1.pkgName = PKG_NAME;
+Component$1.VITUS_LABS__COMPONENT = name$1;
+Component$1.isText = true;
 
 //#endregion
 //#region src/Text/index.ts
-var Text_default = Component$2;
+var Text_default = Component$1;
 
 //#endregion
 //#region src/Util/component.tsx
@@ -1256,7 +602,7 @@ var Text_default = Component$2;
 * children without adding any DOM nodes of its own. Uses the core `render`
 * helper to clone children with the merged props.
 */
-const Component$1 = ({ children, className, style }) => {
+const Component = ({ children, className, style }) => {
 	const mergedClasses = useMemo(() => Array.isArray(className) ? className.join(" ") : className, [className]);
 	const finalProps = {};
 	if (style) finalProps.style = style;
@@ -1264,14 +610,14 @@ const Component$1 = ({ children, className, style }) => {
 	return render(children, finalProps);
 };
 const name = `${PKG_NAME}/Util`;
-Component$1.displayName = name;
-Component$1.pkgName = PKG_NAME;
-Component$1.VITUS_LABS__COMPONENT = name;
+Component.displayName = name;
+Component.pkgName = PKG_NAME;
+Component.VITUS_LABS__COMPONENT = name;
 
 //#endregion
 //#region src/Util/index.ts
-var Util_default = Component$1;
+var Util_default = Component;
 
 //#endregion
-export { Element_default as Element, List_default as List, Overlay_default as Overlay, Component as OverlayProvider, Portal_default as Portal, Provider, Text_default as Text, Util_default as Util, useOverlay, component as withActiveState, withEqualBeforeAfter as withEqualSizeBeforeAfter };
+export { Element_default as Element, List_default as List, Provider, Text_default as Text, Util_default as Util };
 //# sourceMappingURL=vitus-labs-elements.native.js.map