@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.2

package/dist/MenuList-D4imLXAa.cjs

@@ -0,0 +1,223 @@
+const require_src = require("./src-DU81aGy9.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Menu/MenuActivationContext.ts
+/**
+* Set by a `Menu` around its lists: told when any row anywhere in the menu is chosen, with
+* or without a `value`, so the whole menu can close. Internal - not exported from the
+* subpath.
+*/
+const MenuActivationContext = (0, react.createContext)(null);
+//#endregion
+//#region src/Menu/MenuListContext.ts
+/**
+* Present inside a `MenuList`. A `MenuItem` that finds it renders as a menu row
+* (`menuitem`); without it, the row is `Select`'s `option`.
+*/
+const MenuListContext = (0, react.createContext)(null);
+const useMenuListContext = () => (0, react.useContext)(MenuListContext);
+//#endregion
+//#region src/Menu/MenuList/utils/getOwnRows.ts
+const ROW_SELECTOR = "[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]";
+/**
+* The rows that belong to `list` itself, in document order. A nested submenu is a
+* `role="menu"` of its own inside the list, so a row counts only when its nearest
+* `role="menu"` is `list` - no per-list index state is kept anywhere.
+*/
+function getOwnRows(list) {
+	return Array.from(list.querySelectorAll(ROW_SELECTOR)).filter((row) => row.closest("[role=\"menu\"]") === list);
+}
+/** Whether a row can take focus and be chosen. */
+function isRowEnabled(row) {
+	return row.getAttribute("aria-disabled") !== "true";
+}
+//#endregion
+//#region src/Menu/MenuList/utils/getNextRow.ts
+/**
+* The enabled row a key moves to from `current` (which may be absent from `rows`, as when
+* focus is still on the list itself). Disabled rows are skipped; `shouldWrap` carries
+* `next` past the last row to the first and `previous` before the first to the last.
+*/
+function getNextRow(rows, current, step, shouldWrap) {
+	const enabled = rows.filter(isRowEnabled);
+	if (step === "first") return enabled[0];
+	if (step === "last") return enabled.at(-1);
+	const index = enabled.indexOf(current);
+	if (index === -1) return step === "next" ? enabled[0] : enabled.at(-1);
+	const target = index + (step === "next" ? 1 : -1);
+	if (target >= 0 && target < enabled.length) return enabled[target];
+	if (!shouldWrap) return void 0;
+	return target < 0 ? enabled.at(-1) : enabled[0];
+}
+//#endregion
+//#region src/Menu/MenuList/utils/findRowByText.ts
+/** A row's label text, without its icon, shortcut or note. */
+function getRowText(row) {
+	return (row.querySelector("[data-menu-label]") ?? row).textContent.trim().toLowerCase();
+}
+/**
+* The row type-ahead moves to. One key typed again and again (`r`, `r`, `r`) cycles
+* through the rows starting with it; distinct keys typed together (`re`) build a prefix,
+* matched from the current row onward so typing on stays where it is while it matches.
+*/
+function findRowByText(rows, current, typed) {
+	const enabled = rows.filter(isRowEnabled);
+	const query = typed.toLowerCase();
+	const isRepeating = [...query].every((key) => key === query[0]);
+	const start = enabled.indexOf(current);
+	const from = isRepeating ? start + 1 : Math.max(start, 0);
+	const ordered = [...enabled.slice(from), ...enabled.slice(0, from)];
+	const prefix = isRepeating ? query[0] : query;
+	return ordered.find((row) => getRowText(row).startsWith(prefix));
+}
+//#endregion
+//#region src/Menu/MenuList/MenuList.tsx
+const STEP_BY_KEY = {
+	ArrowDown: "next",
+	ArrowUp: "previous",
+	Home: "first",
+	End: "last"
+};
+const TYPEAHEAD_TIMEOUT = 500;
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]);
+const layoutWithoutSize = (styleProps) => (0, require_src.src_exports.layout)({
+	...styleProps,
+	size: void 0
+});
+const MenuListRoot = require_src.styled("ul", {
+	name: "MenuList",
+	label: "MenuList",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, layoutWithoutSize]
+})(({ theme }) => ({
+	listStyle: "none",
+	margin: 0,
+	paddingLeft: 0,
+	paddingRight: 0,
+	paddingTop: theme.space[.5],
+	paddingBottom: theme.space[.5],
+	outline: "none",
+	"&:focus-visible": {
+		outline: `${theme.borderWidths.base} solid ${theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main}`,
+		outlineOffset: `-${theme.borderWidths.base}`
+	}
+}));
+const isPrintableKey = (event) => event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+/**
+* @description A `role="menu"` list that owns the keyboard: the arrow keys, Home and End
+* move focus between its own rows, skipping disabled ones; typing jumps to a row by its
+* label. Rows are found in the DOM by their nearest `role="menu"`, so a nested submenu's
+* rows are never this list's. Renders in place - `Menu` floats one next to a trigger.
+*/
+function MenuList({ children, onSelect, shouldWrap: shouldWrapProp, shouldAutoFocus = false, color, textColor, size, dense, onKeyDown, ...rest }) {
+	const listRef = (0, react.useRef)(null);
+	const typed = (0, react.useRef)({
+		keys: "",
+		time: 0
+	});
+	const onMenuActivate = (0, react.useContext)(MenuActivationContext);
+	const parent = useMenuListContext();
+	const dp = require_theme.useDefaultProps("MenuList");
+	const shouldWrap = shouldWrapProp ?? dp.shouldWrap ?? true;
+	const rowColor = color ?? parent?.color ?? dp.color;
+	const rowTextColor = textColor ?? parent?.textColor ?? dp.textColor;
+	const rowSize = size ?? parent?.size ?? dp.size;
+	const rowDense = dense ?? parent?.dense ?? dp.dense;
+	(0, react.useEffect)(() => {
+		const list = listRef.current;
+		if (!shouldAutoFocus || !list) return;
+		const rows = getOwnRows(list).filter(isRowEnabled);
+		(rows.find((row) => row.getAttribute("aria-checked") === "true") ?? rows[0] ?? list).focus();
+	}, [shouldAutoFocus]);
+	const context = (0, react.useMemo)(() => ({
+		onActivate: (value, event) => {
+			if (value !== void 0) onSelect?.(value);
+			if (parent) parent.onActivate(value, event);
+			else onMenuActivate?.(value, event);
+		},
+		color: rowColor,
+		textColor: rowTextColor,
+		size: rowSize,
+		dense: rowDense
+	}), [
+		onSelect,
+		onMenuActivate,
+		parent,
+		rowColor,
+		rowTextColor,
+		rowSize,
+		rowDense
+	]);
+	const handleKeyDown = (event) => {
+		const list = event.currentTarget;
+		if (event.target.closest("[role=\"menu\"]") !== list) return;
+		const rows = getOwnRows(list);
+		const current = list.ownerDocument.activeElement;
+		const step = STEP_BY_KEY[event.key];
+		let target;
+		if (step) target = getNextRow(rows, current, step, shouldWrap);
+		else if (isPrintableKey(event)) {
+			const now = Date.now();
+			const isFresh = now - typed.current.time > TYPEAHEAD_TIMEOUT;
+			typed.current = {
+				keys: (isFresh ? "" : typed.current.keys) + event.key,
+				time: now
+			};
+			target = findRowByText(rows, current, typed.current.keys);
+		}
+		if (step || target) event.preventDefault();
+		target?.focus();
+		onKeyDown?.(event);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuListRoot, {
+			...rest,
+			ref: listRef,
+			role: "menu",
+			tabIndex: -1,
+			onKeyDown: handleKeyDown,
+			children
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "MenuActivationContext", {
+	enumerable: true,
+	get: function() {
+		return MenuActivationContext;
+	}
+});
+Object.defineProperty(exports, "MenuList", {
+	enumerable: true,
+	get: function() {
+		return MenuList;
+	}
+});
+Object.defineProperty(exports, "MenuListContext", {
+	enumerable: true,
+	get: function() {
+		return MenuListContext;
+	}
+});
+Object.defineProperty(exports, "getNextRow", {
+	enumerable: true,
+	get: function() {
+		return getNextRow;
+	}
+});
+Object.defineProperty(exports, "getOwnRows", {
+	enumerable: true,
+	get: function() {
+		return getOwnRows;
+	}
+});
+Object.defineProperty(exports, "useMenuListContext", {
+	enumerable: true,
+	get: function() {
+		return useMenuListContext;
+	}
+});

package/dist/MenuListContext-Dml16k0X.d.mts

@@ -0,0 +1,21 @@
+import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import "./index-BVPrG1L0.mjs";
+import { SyntheticEvent } from "react";
+//#region src/Menu/MenuListContext.d.ts
+type MenuItemValue = string | number;
+interface MenuListContextValue {
+  /** Fired when a row is chosen, with its `value` when it has one. */
+  onActivate: (value: MenuItemValue | undefined, event: SyntheticEvent) => void;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+  size?: keyof Theme['sizes'];
+  dense?: boolean;
+}
+/**
+ * Present inside a `MenuList`. A `MenuItem` that finds it renders as a menu row
+ * (`menuitem`); without it, the row is `Select`'s `option`.
+ */
+declare const MenuListContext: import("react").Context<MenuListContextValue | null>;
+declare const useMenuListContext: () => MenuListContextValue | null;
+//#endregion
+export { useMenuListContext as i, MenuListContext as n, MenuListContextValue as r, MenuItemValue as t };

package/dist/MenuListContext-vujGcRk9.d.cts

@@ -0,0 +1,21 @@
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import "./index-DDJuUfL5.cjs";
+import { SyntheticEvent } from "react";
+//#region src/Menu/MenuListContext.d.ts
+type MenuItemValue = string | number;
+interface MenuListContextValue {
+  /** Fired when a row is chosen, with its `value` when it has one. */
+  onActivate: (value: MenuItemValue | undefined, event: SyntheticEvent) => void;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+  size?: keyof Theme['sizes'];
+  dense?: boolean;
+}
+/**
+ * Present inside a `MenuList`. A `MenuItem` that finds it renders as a menu row
+ * (`menuitem`); without it, the row is `Select`'s `option`.
+ */
+declare const MenuListContext: import("react").Context<MenuListContextValue | null>;
+declare const useMenuListContext: () => MenuListContextValue | null;
+//#endregion
+export { useMenuListContext as i, MenuListContext as n, MenuListContextValue as r, MenuItemValue as t };

package/dist/Modal.d.cts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Belxmt1X.cjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-DuVNRXP4.cjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Wnv6jCR3.mjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-DqjXDutI.mjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/NativeSelect.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
-const require_Icon = require("./Icon-CI6q2Eyi.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Icon = require("./Icon-Cvuhp9ek.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 require("react");

package/dist/NativeSelect.d.cts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-Kbk9h5cN.cjs";
-import "./index-DBUwu65Z.cjs";
-import { n as IconProps, r as IconName } from "./index-Ctqajtac.cjs";
+import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { n as IconProps, r as IconName } from "./index-qlfNErNd.cjs";
 import { SelectHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/NativeSelect/NativeSelect.d.ts

package/dist/NativeSelect.d.mts

@@ -1,6 +1,5 @@
-import { T as Theme } from "./themes-RX2UX5gD.mjs";
-import "./index-C1WqEDtQ.mjs";
-import { n as IconProps, r as IconName } from "./index-DO9J-Fla.mjs";
+import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { n as IconProps, r as IconName } from "./index-BqpS_Huq.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { SelectHTMLAttributes } from "react";
 //#region src/NativeSelect/NativeSelect.d.ts

package/dist/NativeSelect.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
-import { t as Icon } from "./Icon-CH3asUJu.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-DlheCTJb.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import "react";

package/dist/Pagination/PaginationItem.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
 const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
 const require_utils = require("../utils.cjs");
-const require_Icon = require("../Icon-CI6q2Eyi.cjs");
+const require_Icon = require("../Icon-Cvuhp9ek.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Pagination/PaginationItem.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-DdqdSOct.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BFruxTHv.cjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.d.mts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-BUoVTCqX.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-DIC7HKpP.mjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-DLGYOJMh.mjs";
 import { t as themeDefault } from "../themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "../utils.mjs";
-import { t as Icon } from "../Icon-CH3asUJu.mjs";
+import { t as Icon } from "../Icon-DlheCTJb.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pagination/PaginationItem/PaginationItem.tsx

package/dist/Pagination.d.cts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-DdqdSOct.cjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-Celm-8iN.cjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-BFruxTHv.cjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BiVvxOvj.cjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.d.mts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-BUoVTCqX.mjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-Chg6pSrr.mjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-DIC7HKpP.mjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-BbgFYfX_.mjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Paper.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Paper/Paper.tsx

package/dist/Paper.d.cts

@@ -1,2 +1,3 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-DzQJSYIh.cjs";
+import { Bt as Paper, Ht as PaperProps, Vt as PaperElevation } from "./index-DmJ7yWWi.cjs";
+import "./index-DBteSahY.cjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -1,2 +1,3 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-B_dKjEDR.mjs";
+import { Bt as Paper, Ht as PaperProps, Vt as PaperElevation } from "./index-CVNJEUwJ.mjs";
+import "./index-_G1osn09.mjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-CDVxig_g.mjs";
+import { r as useTheme } from "./theme-Z9_QludW.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Paper/Paper.tsx

package/dist/{Popover-TpwRSORC.cjs → Popover-CiZfgiKE.cjs}

@@ -1,6 +1,7 @@
 const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-BXlAP3xf.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
 const require_Paper = require("./Paper.cjs");
+const require_computePopoverPosition = require("./computePopoverPosition-DiyEOHnU.cjs");
 const require_Modal = require("./Modal-CM3osOqj.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -11,128 +12,6 @@ function resolveAnchorEl(anchorEl) {
 	return (typeof anchorEl === "function" ? anchorEl() : anchorEl) ?? null;
 }
 //#endregion
-//#region src/Popover/utils/getOffset.ts
-/** Vertical offset within a rect for an anchor/transform origin keyword or explicit px. */
-function getOffsetTop(rect, vertical) {
-	if (typeof vertical === "number") return vertical;
-	if (vertical === "center") return rect.height / 2;
-	if (vertical === "bottom") return rect.height;
-	return 0;
-}
-/** Horizontal offset within a rect for an anchor/transform origin keyword or explicit px. */
-function getOffsetLeft(rect, horizontal) {
-	if (typeof horizontal === "number") return horizontal;
-	if (horizontal === "center") return rect.width / 2;
-	if (horizontal === "right") return rect.width;
-	return 0;
-}
-//#endregion
-//#region src/Popover/utils/getTransformOriginValue.ts
-/** Serializes a resolved transform origin (in px) to a CSS `transform-origin` value. */
-function getTransformOriginValue(origin) {
-	return `${origin.horizontal}px ${origin.vertical}px`;
-}
-//#endregion
-//#region src/Popover/utils/computePopoverPosition.ts
-/** Mirrors a keyword origin to the opposite edge; numbers and `center` are unchanged. */
-function flipVertical(origin) {
-	if (origin === "top") return "bottom";
-	if (origin === "bottom") return "top";
-	return origin;
-}
-function flipHorizontal(origin) {
-	if (origin === "left") return "right";
-	if (origin === "right") return "left";
-	return origin;
-}
-function resolveAxis({ anchorStart, anchorSize, anchorOrigin, transformOrigin, paperSize, viewportSize, margin, offset, flip }) {
-	const preferredTransform = offset(paperSize, transformOrigin);
-	const preferredPosition = anchorStart + offset(anchorSize, anchorOrigin) - preferredTransform;
-	let position = preferredPosition;
-	let transformOffset = preferredTransform;
-	if (margin != null) {
-		const fits = (candidate) => candidate >= margin && candidate + paperSize <= viewportSize - margin;
-		if (!fits(preferredPosition)) {
-			const flippedTransform = offset(paperSize, flip(transformOrigin));
-			const flippedPosition = anchorStart + offset(anchorSize, flip(anchorOrigin)) - flippedTransform;
-			if (fits(flippedPosition)) {
-				position = flippedPosition;
-				transformOffset = flippedTransform;
-			}
-		}
-		if (position < margin) {
-			const diff = position - margin;
-			position -= diff;
-			transformOffset += diff;
-		} else if (position + paperSize > viewportSize - margin) {
-			const diff = position + paperSize - (viewportSize - margin);
-			position -= diff;
-			transformOffset += diff;
-		}
-	}
-	return {
-		position,
-		transformOffset
-	};
-}
-/**
-* Places the paper so its `transformOrigin` meets the anchor's `anchorOrigin`, flipping
-* to the opposite side at a viewport edge and clamping as a fallback. Returns `null`
-* coordinates for `anchorReference === 'none'`.
-*/
-function computePopoverPosition(params) {
-	const { anchorReference, anchorRect, anchorPosition, paperRect, anchorOrigin, transformOrigin, viewport, marginThreshold } = params;
-	if (anchorReference === "none") return {
-		top: null,
-		left: null,
-		transformOrigin: getTransformOriginValue({
-			vertical: getOffsetTop(paperRect, transformOrigin.vertical),
-			horizontal: getOffsetLeft(paperRect, transformOrigin.horizontal)
-		})
-	};
-	const rect = anchorReference === "anchorPosition" ? {
-		top: anchorPosition?.top ?? 0,
-		left: anchorPosition?.left ?? 0,
-		width: 0,
-		height: 0
-	} : anchorRect ?? {
-		top: 0,
-		left: 0,
-		width: 0,
-		height: 0
-	};
-	const vertical = resolveAxis({
-		anchorStart: rect.top,
-		anchorSize: rect.height,
-		anchorOrigin: anchorOrigin.vertical,
-		transformOrigin: transformOrigin.vertical,
-		paperSize: paperRect.height,
-		viewportSize: viewport.height,
-		margin: marginThreshold,
-		offset: (size, origin) => getOffsetTop({ height: size }, origin),
-		flip: (origin) => flipVertical(origin)
-	});
-	const horizontal = resolveAxis({
-		anchorStart: rect.left,
-		anchorSize: rect.width,
-		anchorOrigin: anchorOrigin.horizontal,
-		transformOrigin: transformOrigin.horizontal,
-		paperSize: paperRect.width,
-		viewportSize: viewport.width,
-		margin: marginThreshold,
-		offset: (size, origin) => getOffsetLeft({ width: size }, origin),
-		flip: (origin) => flipHorizontal(origin)
-	});
-	return {
-		top: Math.floor(vertical.position),
-		left: Math.floor(horizontal.position),
-		transformOrigin: getTransformOriginValue({
-			vertical: vertical.transformOffset,
-			horizontal: horizontal.transformOffset
-		})
-	};
-}
-//#endregion
 //#region src/Popover/Popover.tsx
 const ANCHOR_ORIGIN_DEFAULT = {
 	vertical: "top",
@@ -176,9 +55,10 @@ function Popover({ open, children, anchorEl = null, anchorReference = "anchorEl"
 		const element = positionerRef.current;
 		if (!element) return;
 		const resolved = resolveAnchorEl(anchorEl);
-		const positioning = computePopoverPosition({
+		const anchorRect = anchorReference === "anchorEl" && resolved ? resolved.getBoundingClientRect() : null;
+		const positioning = require_computePopoverPosition.computePopoverPosition({
 			anchorReference,
-			anchorRect: anchorReference === "anchorEl" && resolved ? resolved.getBoundingClientRect() : null,
+			anchorRect,
 			anchorPosition: anchorTop != null && anchorLeft != null ? {
 				top: anchorTop,
 				left: anchorLeft