@optiaxiom/react 3.1.1 → 3.1.2

package/dist/cjs/unstable.js

@@ -1,45 +1,46 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Flex = require("./Flex-C1TNEIoz.js");
+const require_Tooltip = require("./Tooltip-Ck6Jzpyy.js");
+const require_Flex = require("./Flex-BqaQ3jbK.js");
 let _optiaxiom_icons = require("@optiaxiom/icons");
-let _radix_ui_react_id = require("@radix-ui/react-id");
 let react = require("react");
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
-require("./assets/src/layers/layers.css.ts.vanilla-DRoTvdmB.css");
+require("./assets/src/layers/layers.css.ts.vanilla-CEJpfE2T.css");
 let clsx = require("clsx");
-clsx = require_Flex.__toESM(clsx);
+clsx = require_Tooltip.__toESM(clsx);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _optiaxiom_globals = require("@optiaxiom/globals");
 let _radix_ui_react_context = require("@radix-ui/react-context");
 let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
 let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _radix_ui_react_id = require("@radix-ui/react-id");
 let _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
-require("./assets/src/details-panel/DetailsPanel.css.ts.vanilla-atfUu_qI.css");
-require("./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-BniltHwk.css");
-require("./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-BrKARlT6.css");
-require("./assets/src/file-upload/FileUpload.css.ts.vanilla-CS-im7kH.css");
-require("./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-CgI7Udle.css");
-require("./assets/src/file-upload/FileUploadListItem.css.ts.vanilla-BpmuyXOL.css");
-require("./assets/src/highlight/Highlight.css.ts.vanilla-IvqL5HfI.css");
+require("./assets/src/details-panel/DetailsPanel.css.ts.vanilla-wxeosvdS.css");
+require("./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-Bn-5cQ25.css");
+require("./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-BYAZ8vg8.css");
+require("./assets/src/file-upload/FileUpload.css.ts.vanilla-aFGHJqkZ.css");
+require("./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-CrTGkfeT.css");
+require("./assets/src/file-upload/FileUploadListItem.css.ts.vanilla-wrqNdVAT.css");
+require("./assets/src/highlight/Highlight.css.ts.vanilla-Dsb8pU7I.css");
 let _radix_ui_react_hover_card = require("@radix-ui/react-hover-card");
-_radix_ui_react_hover_card = require_Flex.__toESM(_radix_ui_react_hover_card);
-require("./assets/src/hover-card/HoverCardTrigger.css.ts.vanilla-DVTPapgj.css");
-require("./assets/src/inline-input/InlineInput.css.ts.vanilla-CmhTyGiq.css");
+_radix_ui_react_hover_card = require_Tooltip.__toESM(_radix_ui_react_hover_card);
+require("./assets/src/hover-card/HoverCardTrigger.css.ts.vanilla-44b84jgu.css");
+require("./assets/src/inline-input/InlineInput.css.ts.vanilla-DD8iOJoL.css");
 let react_resizable_panels = require("react-resizable-panels");
-react_resizable_panels = require_Flex.__toESM(react_resizable_panels);
-require("./assets/src/resizable/ResizableHandle.css.ts.vanilla-B1EutofK.css");
-require("./assets/src/layout/Layout.css.ts.vanilla-BuvGkMv2.css");
-require("./assets/src/layout/LayoutContent.css.ts.vanilla-ikmJOAm6.css");
-require("./assets/src/pill/Pill.css.ts.vanilla-fFjBkfyX.css");
+react_resizable_panels = require_Tooltip.__toESM(react_resizable_panels);
+require("./assets/src/resizable/ResizableHandle.css.ts.vanilla-CtlyiqaV.css");
+require("./assets/src/layout/Layout.css.ts.vanilla-CpRGSflS.css");
+require("./assets/src/layout/LayoutContent.css.ts.vanilla-CpNVfQ0y.css");
+require("./assets/src/pill/Pill.css.ts.vanilla-BTe_rnGY.css");
 let _radix_ui_react_roving_focus = require("@radix-ui/react-roving-focus");
-_radix_ui_react_roving_focus = require_Flex.__toESM(_radix_ui_react_roving_focus);
-require("./assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-C7Xhd-X6.css");
-require("./assets/src/range/Range.css.ts.vanilla-CGYkpLqC.css");
+_radix_ui_react_roving_focus = require_Tooltip.__toESM(_radix_ui_react_roving_focus);
+require("./assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-Bcj0ecHL.css");
+require("./assets/src/range/Range.css.ts.vanilla-Dt2uyesS.css");
 let _dnd_kit_helpers = require("@dnd-kit/helpers");
 let _dnd_kit_react = require("@dnd-kit/react");
-require("./assets/src/sortable/SortableHandle.css.ts.vanilla-Bw9g5cY9.css");
+require("./assets/src/sortable/SortableHandle.css.ts.vanilla-CwDaZi7h.css");
 let _dnd_kit_react_sortable = require("@dnd-kit/react/sortable");
-require("./assets/src/sortable/SortableItem.css.ts.vanilla-THgfJ-ja.css");
+require("./assets/src/sortable/SortableItem.css.ts.vanilla-zQ7YyATd.css");
 //#region ../../node_modules/.pnpm/@mantine+hooks@8.3.18_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/parse-hotkey.mjs
 const keyNameMap = {
 	" ": "space",
@@ -165,15 +166,15 @@ id: context.id };
 function DataTableExpandableCell({ children, getValue, row }) {
 	const labelPrefixId = (0, _radix_ui_react_id.useId)();
 	const { labelId } = require_Flex.useDataTableRowContext("@optiaxiom/react/DataTableExpandableCell");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Group, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Group, {
 		alignItems: "start",
 		gap: "8",
 		children: [
-			Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 				flex: "none",
 				w: "sm"
 			}, index)),
-			row.getCanExpand() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Button, {
+			row.getCanExpand() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Button, {
 				appearance: "subtle",
 				"aria-expanded": row.getIsExpanded(),
 				"aria-label": "Toggle row",
@@ -185,7 +186,7 @@ function DataTableExpandableCell({ children, getValue, row }) {
 				size: "sm",
 				style: { marginBlock: -2 },
 				type: "button"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 				flex: "none",
 				w: "sm"
 			}),
@@ -203,7 +204,7 @@ DataTableExpandableCell.displayName = "@optiaxiom/react/DataTableExpandableCell"
 * @experimental
 */
 function DataTableExpandableHeader({ children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		ml: "32",
 		children
 	});
@@ -211,14 +212,14 @@ function DataTableExpandableHeader({ children }) {
 DataTableExpandableHeader.displayName = "@optiaxiom/react/DataTableExpandableHeader";
 //#endregion
 //#region src/details-panel/DetailsPanel.css.ts
-var root$3 = require_Flex.recipeRuntime({ base: [{
+var root$3 = require_Tooltip.recipeRuntime({ base: [{
 	bg: "bg.default",
 	color: "fg.default",
 	display: "flex",
 	flexDirection: "column",
 	h: "full",
 	overflow: "auto"
-}, "_5ohzvg"] });
+}, "_1irpoxq"] });
 //#endregion
 //#region src/details-panel/DetailsPanelContext.ts
 const [DetailsPanelProvider, useDetailsPanelContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/DetailsPanel");
@@ -240,7 +241,7 @@ const DetailsPanel = (0, react.forwardRef)(({ asChild, children, className, ...p
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailsPanelProvider, {
 		descriptionId,
 		labelId,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 			"aria-describedby": descriptionId,
 			"aria-labelledby": labelId,
 			asChild: true,
@@ -261,7 +262,7 @@ DetailsPanel.displayName = "@optiaxiom/react/DetailsPanel";
 * @group DetailsPanel
 */
 const DetailsPanelBody = (0, react.forwardRef)(({ children, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 		flex: "1",
 		flexDirection: "column",
 		fontSize: "md",
@@ -275,21 +276,21 @@ const DetailsPanelBody = (0, react.forwardRef)(({ children, ...props }, ref) =>
 DetailsPanelBody.displayName = "@optiaxiom/react/DetailsPanelBody";
 //#endregion
 //#region src/details-panel/DetailsPanelFooter.css.ts
-var footer = require_Flex.recipeRuntime({ base: [{
+var footer = require_Tooltip.recipeRuntime({ base: [{
 	bg: "bg.default",
 	gap: "8",
 	p: "16",
 	pt: "8"
-}, "px0v4c"] });
+}, "hh1agk"] });
 //#endregion
 //#region src/details-panel/DetailsPanelFooter.tsx
 /**
 * @group DetailsPanel
 */
 const DetailsPanelFooter = (0, react.forwardRef)(({ children, className, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.ButtonProvider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.ButtonProvider, {
 		size: "lg",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 			ref,
 			...footer({}, className),
 			...props,
@@ -300,13 +301,13 @@ const DetailsPanelFooter = (0, react.forwardRef)(({ children, className, ...prop
 DetailsPanelFooter.displayName = "@optiaxiom/react/DetailsPanelFooter";
 //#endregion
 //#region src/details-panel/DetailsPanelHeader.css.ts
-var header = require_Flex.recipeRuntime({ base: [{
+var header = require_Tooltip.recipeRuntime({ base: [{
 	bg: "bg.default",
 	display: "flex",
 	flexWrap: "wrap",
 	p: "16",
 	pb: "8"
-}, "_1wp9ilk"] });
+}, "v3fi66"] });
 //#endregion
 //#region src/details-panel/DetailsPanelHeader.tsx
 /**
@@ -314,14 +315,14 @@ var header = require_Flex.recipeRuntime({ base: [{
 */
 const DetailsPanelHeader = (0, react.forwardRef)(({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
 	const { descriptionId, labelId } = useDetailsPanelContext("@optiaxiom/react/DetailsPanelHeader");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.ButtonProvider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.ButtonProvider, {
 		size: "sm",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
 			ref,
 			...header({}, className),
 			...props,
 			children: [
-				addonBefore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+				addonBefore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 					gap: "8",
 					children: addonBefore
 				}),
@@ -333,17 +334,17 @@ const DetailsPanelHeader = (0, react.forwardRef)(({ addonAfter, addonBefore, chi
 					level: "2",
 					children
 				}),
-				addonAfter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+				addonAfter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 					gap: "8",
 					children: addonAfter
 				}),
-				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Text, {
 					asChild: true,
 					color: "fg.secondary",
 					fontSize: "sm",
 					id: descriptionId,
 					w: "full",
-					children: require_Flex.fallbackSpan(description)
+					children: require_Tooltip.fallbackSpan(description)
 				})
 			]
 		})
@@ -352,11 +353,11 @@ const DetailsPanelHeader = (0, react.forwardRef)(({ addonAfter, addonBefore, chi
 DetailsPanelHeader.displayName = "@optiaxiom/react/DetailsPanelHeader";
 //#endregion
 //#region src/file-upload/FileUpload.css.ts
-var upload = require_Flex.recipeRuntime({ base: [{
+var upload = require_Tooltip.recipeRuntime({ base: [{
 	color: "fg.default",
 	display: "flex",
 	flexDirection: "column"
-}, "gvcvp7"] });
+}, "_1f93a5e"] });
 //#endregion
 //#region src/file-upload/FileUploadContext.ts
 const [FileUploadProvider, useFileUploadContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/FileUpload");
@@ -379,7 +380,7 @@ const FileUpload = (0, react.forwardRef)(({ accept, children, className, disable
 		inputRef,
 		onFilesDrop,
 		rootRef: innerRef,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 			ref,
 			...upload({}, className),
 			...props,
@@ -390,7 +391,7 @@ const FileUpload = (0, react.forwardRef)(({ accept, children, className, disable
 FileUpload.displayName = "@optiaxiom/react/FileUpload";
 //#endregion
 //#region src/file-upload/FileUploadDropzone.css.ts
-var dropzone = require_Flex.recipeRuntime({
+var dropzone = require_Tooltip.recipeRuntime({
 	base: [{
 		alignItems: "center",
 		bg: "bg.secondary",
@@ -401,23 +402,23 @@ var dropzone = require_Flex.recipeRuntime({
 		rounded: "md",
 		textAlign: "center",
 		transition: "colors"
-	}, "_1c0j5md"],
+	}, "_12v65zn"],
 	variants: {
 		drag: {
 			false: {},
-			true: ["_9bxyow"]
+			true: ["ng7py7"]
 		},
 		hidden: {
-			false: "_15h73fk",
-			true: "_5owfcg"
+			false: "nnsial",
+			true: "j7enof"
 		},
 		overlay: {
 			false: { flex: "1" },
-			true: [{ z: "10" }, "_3gscfc"]
+			true: [{ z: "10" }, "_1co9xj5"]
 		}
 	}
 });
-var label = require_Flex.recipeRuntime({
+var label = require_Tooltip.recipeRuntime({
 	base: [{
 		alignItems: "center",
 		flexDirection: "column",
@@ -425,7 +426,7 @@ var label = require_Flex.recipeRuntime({
 	}],
 	variants: { disabled: {
 		false: {},
-		true: "xr9zmw"
+		true: "wv1vnh"
 	} }
 });
 //#endregion
@@ -444,11 +445,11 @@ const Slot$3 = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/FileUpload
 * @extends Button
 */
 const FileUploadTrigger = (0, react.forwardRef)(({ asChild, children, onClick, ...props }, ref) => {
-	const { boxProps, restProps } = require_Flex.extractBoxProps(props);
-	const Comp = asChild ? Slot$3 : require_Flex.Button;
+	const { boxProps, restProps } = require_Tooltip.extractBoxProps(props);
+	const Comp = asChild ? Slot$3 : require_Tooltip.Button;
 	const { disabled } = useFileUploadContext("@optiaxiom/react/FileUploadTrigger");
 	const open = useFileUploadTrigger();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		asChild: true,
 		...boxProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
@@ -662,7 +663,7 @@ const FileUploadDropzone = (0, react.forwardRef)(({ children, className, descrip
 	const innerRef = (0, react.useRef)(null);
 	useStickyPosition(innerRef, overlay && isDraggingOverBody);
 	const size = useContainerSize(innerRef) ?? 0;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Group, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Group, {
 		fontSize: size > 448 ? "lg" : "md",
 		ref: (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef),
 		...dropzone({
@@ -688,17 +689,17 @@ const FileUploadDropzone = (0, react.forwardRef)(({ children, className, descrip
 					type: "file"
 				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Group, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Group, {
 				...label({ disabled }),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Icon, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Icon, {
 						asChild: true,
 						color: "fg.secondary",
 						h: size > 448 ? "lg" : "sm",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconUpload, {})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, { children: label$1 }),
-					description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Text, { children: label$1 }),
+					description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Text, {
 						color: "fg.tertiary",
 						children: description
 					})
@@ -711,7 +712,7 @@ const FileUploadDropzone = (0, react.forwardRef)(({ children, className, descrip
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
 //#endregion
 //#region src/file-upload/FileUploadListItem.css.ts
-var item$1 = require_Flex.recipeRuntime({ base: [{
+var item$1 = require_Tooltip.recipeRuntime({ base: [{
 	alignItems: "center",
 	flexDirection: "row",
 	fontSize: "md",
@@ -719,11 +720,11 @@ var item$1 = require_Flex.recipeRuntime({ base: [{
 	p: "6",
 	rounded: "md",
 	transition: "colors"
-}, "rfm45"] });
-var name = require_Flex.recipeRuntime({ base: [{
+}, "_10xnynr"] });
+var name = require_Tooltip.recipeRuntime({ base: [{
 	rounded: "md",
 	textAlign: "start"
-}, "l2xxr7"] });
+}, "_1ekeg57"] });
 //#endregion
 //#region src/file-upload/FileUploadListItem.tsx
 function downloadFile(file) {
@@ -764,17 +765,17 @@ const FileUploadListItem = (0, react.forwardRef)(({ className, item, onRemove, .
 		...item$1({}, className),
 		...props,
 		children: [
-			status === "uploading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Spinner, { size: "sm" }) : status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Icon, {
+			status === "uploading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Spinner, { size: "sm" }) : status === "error" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Icon, {
 				asChild: true,
 				color: "fg.error",
 				h: "auto",
 				w: "24",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconCircleExclamation, { filled: true })
-			}) : file.type.startsWith("image/") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			}) : file.type.startsWith("image/") ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 				overflow: "hidden",
 				rounded: "sm",
 				size: "24",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 					asChild: true,
 					h: "full",
 					objectFit: "cover",
@@ -784,7 +785,7 @@ const FileUploadListItem = (0, react.forwardRef)(({ className, item, onRemove, .
 						src: URL.createObjectURL(file)
 					})
 				})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Icon, {
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Icon, {
 				asChild: true,
 				color: "fg.tertiary",
 				h: "auto",
@@ -797,7 +798,7 @@ const FileUploadListItem = (0, react.forwardRef)(({ className, item, onRemove, .
 				overflow: "hidden",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Cover, {
 					asChild: true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Text, {
 						asChild: true,
 						lineClamp: "2",
 						...name(),
@@ -807,23 +808,23 @@ const FileUploadListItem = (0, react.forwardRef)(({ className, item, onRemove, .
 							children: file.name
 						})
 					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Group, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Group, {
 					fontSize: "sm",
 					gap: "4",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Text, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Text, {
 						color: "fg.tertiary",
 						children: [
 							formatFileType(file),
 							" • ",
 							formatFileSize(file.size)
 						]
-					}), status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+					}), status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Text, {
 						color: "fg.error",
 						children: "Upload failed"
 					})]
 				})]
 			}),
-			onRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Button, {
+			onRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Button, {
 				appearance: "subtle",
 				"aria-label": "Remove file",
 				disabled: status === "uploading",
@@ -850,7 +851,7 @@ const FileUploadList = (0, react.forwardRef)(({ items, onRemove, ...props }, ref
 FileUploadList.displayName = "@optiaxiom/react/FileUploadList";
 //#endregion
 //#region src/highlight/Highlight.css.ts
-var mark$1 = require_Flex.recipeRuntime({ base: "d5n98q" });
+var mark$1 = require_Tooltip.recipeRuntime({ base: "_1r5sxwy" });
 //#endregion
 //#region src/highlight/useHighlightedChunks.ts
 const useHighlightedChunks = (content, query) => {
@@ -878,10 +879,10 @@ function escapeRegExp(string) {
 */
 const Highlight = (0, react.forwardRef)(({ children = (chunk) => chunk, content, query, ...props }, ref) => {
 	const chunks = useHighlightedChunks(content || "", query);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		ref,
 		...props,
-		children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: highlighted ? children(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: highlighted ? children(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 			asChild: true,
 			...mark$1(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", { children: chunk })
@@ -932,13 +933,13 @@ HoverCard.displayName = "@optiaxiom/react/HoverCard";
 const HoverCardContent = (0, react.forwardRef)(({ align = "start", asChild, children, sideOffset = 4, ...props }, outerRef) => {
 	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)((0, react.useRef)(null), outerRef);
 	const { open, presence, setPresence } = useHoverCardContext("@optiaxiom/react/HoverCardContent");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.TransitionGroup, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.TransitionGroup, {
 		onPresenceChange: setPresence,
 		open,
 		presence,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Portal, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Portal, {
 			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Transition, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Transition, {
 				duration: "sm",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Paper, {
 					asChild: true,
@@ -966,15 +967,15 @@ const HoverCardContent = (0, react.forwardRef)(({ align = "start", asChild, chil
 HoverCardContent.displayName = "@optiaxiom/react/HoverCardContent";
 //#endregion
 //#region src/hover-card/HoverCardTrigger.css.ts
-var trigger$1 = require_Flex.recipeRuntime({ base: "_1qn68te" });
+var trigger$1 = require_Tooltip.recipeRuntime({ base: "ho1iyc" });
 //#endregion
 //#region src/hover-card/HoverCardTrigger.tsx
 /**
 * @group HoverCard
 */
 const HoverCardTrigger = (0, react.forwardRef)(({ children, className, ...props }, ref) => {
-	const { boxProps, restProps } = require_Flex.extractBoxProps(props);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	const { boxProps, restProps } = require_Tooltip.extractBoxProps(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		asChild: true,
 		...trigger$1({}, className),
 		...boxProps,
@@ -988,14 +989,14 @@ const HoverCardTrigger = (0, react.forwardRef)(({ children, className, ...props
 HoverCardTrigger.displayName = "@optiaxiom/react/HoverCardTrigger";
 //#endregion
 //#region src/inline-input/InlineInput.css.ts
-var editor = require_Flex.recipeRuntime({
-	base: "fyjgfx",
+var editor = require_Tooltip.recipeRuntime({
+	base: "nzvsh4",
 	variants: { empty: {
 		false: {},
-		true: "_5cmilj"
+		true: "jqki4g"
 	} }
 });
-var input = require_Flex.recipeRuntime({ base: "qcabxq" });
+var input = require_Tooltip.recipeRuntime({ base: "_17jxop4" });
 //#endregion
 //#region src/inline-input/InlineInput.tsx
 /**
@@ -1024,10 +1025,10 @@ const InlineInput = (0, react.forwardRef)(({ className, defaultValue = "", disab
 			document.execCommand("insertHTML", false, clippedValue);
 		} else editorRef.current.innerText = clippedValue ?? "null";
 	}, [multiline, value]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		...input({}, className),
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 			"aria-multiline": multiline,
 			"aria-readonly": disabled,
 			contentEditable: !disabled && "plaintext-only",
@@ -1072,28 +1073,28 @@ const Resizable = ({ ...props }) => {
 Resizable.displayName = "@optiaxiom/react/Resizable";
 //#endregion
 //#region src/resizable/ResizableHandle.css.ts
-var handle$1 = require_Flex.recipeRuntime({ base: [{
+var handle$1 = require_Tooltip.recipeRuntime({ base: [{
 	border: "1",
 	h: "56",
 	rounded: "sm",
 	w: "12"
-}, "_2tggqu"] });
-var root$2 = require_Flex.recipeRuntime({ base: [{
+}, "_1wq514l"] });
+var root$2 = require_Tooltip.recipeRuntime({ base: [{
 	flexDirection: "column",
 	gap: "16",
 	justifyContent: "center",
 	rounded: "sm",
 	z: "10"
-}, "_3d22cn"] });
+}, "hlgl0j"] });
 //#endregion
 //#region src/resizable/ResizableHandle.tsx
 const ResizableHandle = (props) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 		asChild: true,
 		...root$2(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.PanelResizeHandle, {
 			...props,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, { ...handle$1() })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, { ...handle$1() })
 		})
 	});
 };
@@ -1106,16 +1107,16 @@ const ResizablePanel = ({ ...props }) => {
 ResizablePanel.displayName = "@optiaxiom/react/ResizablePanel";
 //#endregion
 //#region src/layout/Layout.css.ts
-var layout = require_Flex.recipeRuntime({
+var layout = require_Tooltip.recipeRuntime({
 	base: [{
 		bg: "bg.default",
 		display: "flex",
 		flexDirection: "column",
 		fontSize: "md"
-	}, "_1ll1nt5"],
+	}, "_36u3v0"],
 	variants: { size: {
-		full: "_1s7nmes",
-		screen: "_1xsyqxx"
+		full: "_10zigfq",
+		screen: "de5cae"
 	} }
 });
 //#endregion
@@ -1128,17 +1129,17 @@ var layout = require_Flex.recipeRuntime({
 * @experimental
 */
 const Layout = (0, react.forwardRef)(({ children, className, detailsPanel, header, resizable, sidebar, size = "screen", ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
 		ref,
 		...layout({ size }, className),
 		...props,
-		children: [header, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+		children: [header, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
 			display: "flex",
 			flex: "1",
 			overflow: "auto",
 			children: [sidebar, resizable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Resizable, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizablePanel, {
 				minSize: 33,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 					asChild: true,
 					h: "full",
 					children
@@ -1147,14 +1148,14 @@ const Layout = (0, react.forwardRef)(({ children, className, detailsPanel, heade
 				defaultSize: 33,
 				minSize: 33,
 				children: detailsPanel
-			})] })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+			})] })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
 				display: "flex",
 				flex: "1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 					asChild: true,
 					w: detailsPanel ? "2/3" : "full",
 					children
-				}), detailsPanel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				}), detailsPanel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 					w: "1/3",
 					children: detailsPanel
 				})]
@@ -1165,7 +1166,7 @@ const Layout = (0, react.forwardRef)(({ children, className, detailsPanel, heade
 Layout.displayName = "@optiaxiom/react/Layout";
 //#endregion
 //#region src/layout/LayoutContent.css.ts
-var content = require_Flex.recipeRuntime({ base: [{
+var content = require_Tooltip.recipeRuntime({ base: [{
 	bg: "bg.page",
 	flexDirection: "column",
 	gap: "16",
@@ -1175,14 +1176,14 @@ var content = require_Flex.recipeRuntime({ base: [{
 	px: "32",
 	py: "24",
 	rounded: "lg"
-}, "peb9je"] });
+}, "_1pq2s14"] });
 //#endregion
 //#region src/layout/LayoutContent.tsx
 /**
 * @group Layout
 */
 const LayoutContent = (0, react.forwardRef)(({ children, className, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 		ref,
 		tabIndex: 0,
 		...content({}, className),
@@ -1193,7 +1194,7 @@ const LayoutContent = (0, react.forwardRef)(({ children, className, ...props },
 LayoutContent.displayName = "@optiaxiom/react/LayoutContent";
 //#endregion
 //#region src/pill/Pill.css.ts
-var pill = require_Flex.recipeRuntime({
+var pill = require_Tooltip.recipeRuntime({
 	base: [{
 		alignItems: "center",
 		color: "fg.default",
@@ -1206,11 +1207,11 @@ var pill = require_Flex.recipeRuntime({
 		textTransform: "uppercase",
 		transition: "colors",
 		whiteSpace: "nowrap"
-	}, "_1wzcqj6"],
+	}, "_191lpjw"],
 	variants: {
 		interactive: {
 			false: {},
-			true: "_116ytn5"
+			true: "_1uxvnee"
 		},
 		size: {
 			xs: { h: "xs" },
@@ -1230,8 +1231,8 @@ const Slot$2 = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/Pill");
 */
 const Pill = (0, react.forwardRef)(({ asChild, children, className, disabled, onClick, onDismiss, readOnly, size = "sm", ...props }, ref) => {
 	const Comp = asChild ? Slot$2 : readOnly ? "span" : "button";
-	const { boxProps, restProps } = require_Flex.extractBoxProps(props);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	const { boxProps, restProps } = require_Tooltip.extractBoxProps(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		asChild: true,
 		"data-disabled": disabled ? "" : void 0,
 		...pill({
@@ -1249,10 +1250,10 @@ const Pill = (0, react.forwardRef)(({ asChild, children, className, disabled, on
 			},
 			ref,
 			...restProps,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Text, {
 				truncate: true,
 				children
-			}), onDismiss && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Icon, {
+			}), onDismiss && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Icon, {
 				asChild: true,
 				h: "12",
 				ml: "auto",
@@ -1268,7 +1269,7 @@ Pill.displayName = "@optiaxiom/react/Pill";
 * @group Pill
 */
 const PillGroup = (0, react.forwardRef)(({ children, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 		flexWrap: "wrap",
 		gap: "8",
 		ref,
@@ -1331,7 +1332,7 @@ const PillMenu = (0, react.forwardRef)(({ children, defaultOpen = false, empty,
 				valueProp
 			]),
 			placeholder,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 				alignItems: value.length ? void 0 : "start",
 				display: "flex",
 				flexDirection: "column",
@@ -1387,11 +1388,11 @@ const [RovingFocusProvider, useRovingFocusContext] = (0, _radix_ui_react_context
 //#region src/roving-focus/RovingFocus.tsx
 const Slot$1 = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/RovingFocus");
 const RovingFocus = (0, react.forwardRef)(({ asChild, children, disabled, loop, orientation, ...props }, ref) => {
-	const FocusComp = disabled ? require_Flex.Box : _radix_ui_react_roving_focus.Root;
+	const FocusComp = disabled ? require_Tooltip.Box : _radix_ui_react_roving_focus.Root;
 	const Comp = asChild ? Slot$1 : "div";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RovingFocusProvider, {
 		disabled,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 			asChild: true,
 			ref,
 			...props,
@@ -1412,9 +1413,9 @@ RovingFocus.displayName = "@optiaxiom/react/RovingFocus";
 const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/RovingFocusItem");
 const RovingFocusItem = (0, react.forwardRef)(({ asChild, children, ...props }, ref) => {
 	const { disabled } = useRovingFocusContext("@optiaxiom/react/RovingFocusItem");
-	const FocusComp = disabled ? require_Flex.Box : _radix_ui_react_roving_focus.Item;
+	const FocusComp = disabled ? require_Tooltip.Box : _radix_ui_react_roving_focus.Item;
 	const Comp = asChild ? Slot : "div";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		asChild: true,
 		ref,
 		...props,
@@ -1433,7 +1434,7 @@ const PillMenuPill = (0, react.forwardRef)(({ item, onKeyDown, readOnly, ...prop
 	const { inputValue } = require_Flex.useCommandContext("@optiaxiom/react/PillMenuPill");
 	const index = options.indexOf(item);
 	const hasInteractedInsideRef = (0, react.useRef)(false);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Tooltip, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
 		content: require_Flex.resolveItemProperty(item.disabledReason),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
 			onClick: () => {
@@ -1473,23 +1474,23 @@ const PillMenuPill = (0, react.forwardRef)(({ item, onKeyDown, readOnly, ...prop
 PillMenuPill.displayName = "@optiaxiom/react/PillMenuPill";
 //#endregion
 //#region src/pill-menu/PillMenuTrigger.css.ts
-var root$1 = require_Flex.recipeRuntime({
+var root$1 = require_Tooltip.recipeRuntime({
 	base: [{
 		border: "1",
 		rounded: "md",
 		transition: "colors"
-	}, "_10xcx50"],
+	}, "_1frxixc"],
 	variants: { size: {
-		md: "_1xnl01f",
-		lg: "i5xg2m"
+		md: "_1xt6pob",
+		lg: "_39250g"
 	} }
 });
-var trigger = require_Flex.recipeRuntime({ base: [{
+var trigger = require_Tooltip.recipeRuntime({ base: [{
 	display: "grid",
 	placeItems: "center",
 	rounded: "md"
-}, "e7ovod"] });
-var wrapper = require_Flex.recipeRuntime({ base: "t473qa" });
+}, "_10r1meb"] });
+var wrapper = require_Tooltip.recipeRuntime({ base: "_9xy888" });
 //#endregion
 //#region src/pill-menu/PillMenuTrigger.tsx
 const remapSize = {
@@ -1506,7 +1507,7 @@ const PillMenuTrigger = (0, react.forwardRef)(({ children, className, readOnly,
 	const { inputValue } = require_Flex.useCommandContext("@optiaxiom/react/PillMenuTrigger");
 	const innerRef = (0, react.useRef)(null);
 	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
 		...wrapper(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillGroup, {
 			asChild: true,
@@ -1552,7 +1553,7 @@ const PillMenuTrigger = (0, react.forwardRef)(({ children, className, readOnly,
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Cover, {
 							asChild: true,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 								asChild: true,
 								size: remapSize[size],
 								...trigger(),
@@ -1568,23 +1569,23 @@ const PillMenuTrigger = (0, react.forwardRef)(({ children, className, readOnly,
 PillMenuTrigger.displayName = "@optiaxiom/react/PillMenuTrigger";
 //#endregion
 //#region src/range/Range.css.ts
-var control = require_Flex.recipeRuntime({ base: [{ bg: "transparent" }, "fnd6gt"] });
-var fillValue = "var(--p4ji9x)";
-var mark = require_Flex.recipeRuntime({
-	base: [{ transition: "colors" }, "bdr6xu"],
+var control = require_Tooltip.recipeRuntime({ base: [{ bg: "transparent" }, "_1o4m2u9"] });
+var fillValue = "var(--_48nhku)";
+var mark = require_Tooltip.recipeRuntime({
+	base: [{ transition: "colors" }, "_1rcdot7"],
 	variants: { active: {
 		false: { color: "fg.secondary" },
 		true: {}
 	} }
 });
-var markValue = "var(--_1qkgr6s)";
-var range = require_Flex.recipeRuntime({ base: [{
+var markValue = "var(--_3pzg50)";
+var range = require_Tooltip.recipeRuntime({ base: [{
 	h: "full",
 	rounded: "inherit"
-}, "ntae6x"] });
-var root = require_Flex.recipeRuntime({
+}, "_16jtwa5"] });
+var root = require_Tooltip.recipeRuntime({
 	base: [
-		"_1gwuvsn",
+		"_11d450a",
 		{
 			alignItems: "center",
 			color: "fg.default",
@@ -1592,7 +1593,7 @@ var root = require_Flex.recipeRuntime({
 			fontSize: "md",
 			w: "full"
 		},
-		"_3yuzz4"
+		"_91rd5x"
 	],
 	variants: {
 		marks: {
@@ -1605,17 +1606,17 @@ var root = require_Flex.recipeRuntime({
 		}
 	}
 });
-var thumb = require_Flex.recipeRuntime({ base: [{
+var thumb = require_Tooltip.recipeRuntime({ base: [{
 	border: "1",
 	rounded: "full",
 	shadow: "sm",
 	size: "xs"
-}, "_1t1orgb"] });
-var track = require_Flex.recipeRuntime({ base: [{
+}, "_1kcz7ip"] });
+var track = require_Tooltip.recipeRuntime({ base: [{
 	display: "flex",
 	flex: "1",
 	rounded: "full"
-}, "jppirg"] });
+}, "_1jew1y3"] });
 //#endregion
 //#region src/range/useTooltipState.tsx
 const useTooltipState = () => {
@@ -1643,7 +1644,7 @@ const useTooltipState = () => {
 * @experimental
 */
 const Range = (0, react.forwardRef)(({ className, defaultValue = 0, disabled, getLabel = (value) => value, marks, max = 100, min = 0, onChange, onValueChange, showTooltip = false, size = "md", step = 1, value: valueProp, ...props }, ref) => {
-	const { boxProps, restProps } = require_Flex.extractBoxProps(props);
+	const { boxProps, restProps } = require_Tooltip.extractBoxProps(props);
 	const { descriptionId, error, errorId, inputId } = require_Flex.useFieldContext("@optiaxiom/react/Range");
 	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
 		caller: "@optiaxiom/react/Range",
@@ -1654,26 +1655,26 @@ const Range = (0, react.forwardRef)(({ className, defaultValue = 0, disabled, ge
 	const fillValue$1 = `${(value - min) / (max - min)}`;
 	const [tooltipOpen, setTooltipOpen] = useTooltipState();
 	const isPointerInsideRef = (0, react.useRef)(false);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
 		"data-disabled": disabled ? "" : void 0,
 		...root({
 			marks: !!marks,
 			size
 		}, className),
 		...boxProps,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tooltip.Box, {
 			style: (0, _vanilla_extract_dynamic.assignInlineVars)({ [fillValue]: fillValue$1 }),
 			...track(),
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, { ...range() }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Tooltip, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, { ...range() }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
 					content: getLabel(value),
 					disabled: disabled || !showTooltip,
 					disableHoverableContent: true,
 					open: tooltipOpen,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, { ...thumb() })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, { ...thumb() })
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 					"aria-describedby": errorId || descriptionId ? (0, clsx.default)(errorId, descriptionId) : void 0,
 					"aria-disabled": disabled,
 					"aria-invalid": error ? true : void 0,
@@ -1717,7 +1718,7 @@ const Range = (0, react.forwardRef)(({ className, defaultValue = 0, disabled, ge
 		}), marks?.map((mark) => typeof mark === "number" ? {
 			label: getLabel(mark),
 			value: mark
-		} : mark).map((mark$2) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		} : mark).map((mark$2) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 			onClick: () => {
 				if (!disabled) setValue(mark$2.value);
 			},
@@ -1768,7 +1769,7 @@ const Sortable = (0, react.forwardRef)(({ children, items: itemsProp, onChange,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableProvider, {
 			cacheRef: (0, react.useRef)(/* @__PURE__ */ new Map()),
 			isSorting: itemsState !== null,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 				flexDirection: "column",
 				gap: "16",
 				...props,
@@ -1801,7 +1802,7 @@ const SortableGroup = (0, react.forwardRef)(({ children, group: id, ...props },
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableGroupProvider, {
 		id,
 		setHasDropTarget,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Group, {
 			flexDirection: "column",
 			gap: "16",
 			ref: (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef),
@@ -1813,7 +1814,7 @@ const SortableGroup = (0, react.forwardRef)(({ children, group: id, ...props },
 SortableGroup.displayName = "@optiaxiom/react/SortableGroup";
 //#endregion
 //#region src/sortable/SortableHandle.css.ts
-var handle = require_Flex.recipeRuntime({ base: "_1csnq5b" });
+var handle = require_Tooltip.recipeRuntime({ base: "_10cdep6" });
 //#endregion
 //#region src/sortable/SortableItemContext.ts
 const [SortableItemProvider, useSortableItemContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/SortableItem");
@@ -1825,7 +1826,7 @@ const [SortableItemProvider, useSortableItemContext] = (0, _radix_ui_react_conte
 const SortableHandle = (0, react.forwardRef)(({ children, className, ...props }, outerRef) => {
 	const { handleRef, isDragging } = useSortableItemContext("@optiaxiom/react/SortableHandle");
 	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(handleRef, outerRef);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		"aria-label": "draggable",
 		"data-state": isDragging ? "active" : void 0,
 		ref,
@@ -1837,11 +1838,11 @@ const SortableHandle = (0, react.forwardRef)(({ children, className, ...props },
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
 //#endregion
 //#region src/sortable/SortableItem.css.ts
-var item = require_Flex.recipeRuntime({
-	base: "_180nylo",
+var item = require_Tooltip.recipeRuntime({
+	base: "lajh4m",
 	variants: { handle: {
 		false: {},
-		true: "_1gjxigc"
+		true: "_1puwwis"
 	} }
 });
 //#endregion
@@ -1876,7 +1877,7 @@ const SortableItem = (0, react.forwardRef)(({ children, className, index, item:
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableItemProvider, {
 		handleRef,
 		isDragging,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 			"data-sortable-dragging": isDragging ? "" : void 0,
 			ref,
 			...item({ handle: !handleRef.current }, className),
@@ -1928,9 +1929,9 @@ const SpotlightTrigger = (0, react.forwardRef)(({ children, ...props }, ref) =>
 		asChild: true,
 		ref,
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Button, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Button, {
 			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconSearch, {}),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 				color: "fg.tertiary",
 				children
 			})
@@ -1954,8 +1955,8 @@ const options = {
 	timeZone: { timeZoneName: "short" },
 	weekday: { weekday: "short" }
 };
-function formatDate(date, { showDate = true, showTime = false }) {
-	return date.toLocaleString(["default", "en-US"], {
+function formatDate(locale, date, { showDate = true, showTime = false }) {
+	return date.toLocaleString([locale, "en-US"], {
 		...showDate ? options.date : {},
 		...showTime ? options.time : {}
 	});
@@ -1969,17 +1970,19 @@ function formatDate(date, { showDate = true, showTime = false }) {
 * @experimental
 */
 const Time = (0, react.forwardRef)(({ date, showDate = true, showTime, ...props }, ref) => {
-	const { boxProps, restProps } = require_Flex.extractBoxProps(props);
-	if (typeof date === "string") date = new Date(date);
-	const value = formatDate(date, {
+	const { boxProps, restProps } = require_Tooltip.extractBoxProps(props);
+	const { locale } = require_Flex.useLocaleContext("@optiaxiom/react/Time");
+	const parsed = date instanceof Date ? date : new Date(date ?? NaN);
+	if (Number.isNaN(parsed.getTime())) return null;
+	const value = formatDate(locale, parsed, {
 		showDate,
 		showTime
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Box, {
 		asChild: true,
 		...boxProps,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
-			dateTime: date.toISOString(),
+			dateTime: parsed.toISOString(),
 			ref,
 			...restProps,
 			children: value
@@ -2034,4 +2037,4 @@ exports.createDialogKit = require_Flex.createDialogKit;
 exports.dialogkit = require_Flex.dialogkit;
 exports.useDialogKit = useDialogKit;
 exports.useFileUploadTrigger = useFileUploadTrigger;
-exports.useSurface = require_Flex.useSurface;
+exports.useSurface = require_Tooltip.useSurface;