@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/cjs/unstable.js

@@ -1,1826 +1,1996 @@
 "use client";
-'use strict';
-
-var Flex = require('./Flex-COLGb-RN.js');
-var jsxRuntime = require('react/jsx-runtime');
-var icons = require('@optiaxiom/icons');
-var reactId = require('@radix-ui/react-id');
-var clsx = require('clsx');
-var reactSlot = require('@radix-ui/react-slot');
-var React = require('react');
-require('./assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css');
-require('./assets/src/details-panel/DetailsPanel.css.ts.vanilla-CLitw7yQ.css');
-var reactContext = require('@radix-ui/react-context');
-require('./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-rh3vVn7w.css');
-require('./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-mKlnVKr6.css');
-var reactComposeRefs = require('@radix-ui/react-compose-refs');
-require('./assets/src/file-upload/FileUpload.css.ts.vanilla-DMNzvYxj.css');
-require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-jt0DGGFf.css');
-var globals = require('@optiaxiom/globals');
-require('./assets/src/file-upload/FileUploadListItem.css.ts.vanilla-BQhty29-.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-BMA2FuRQ.css');
-var RadixHoverCard = require('@radix-ui/react-hover-card');
-var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
-require('./assets/src/hover-card/HoverCardTrigger.css.ts.vanilla-CI2m8jjw.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-O5lNhANB.css');
-var ResizablePrimitive = require('react-resizable-panels');
-require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-BJNFjORH.css');
-require('./assets/src/layout/Layout.css.ts.vanilla-BlK70rZO.css');
-require('./assets/src/layout/LayoutContent.css.ts.vanilla-BONgt529.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-gB_u-LNW.css');
-var RadixRovingFocus = require('@radix-ui/react-roving-focus');
-require('./assets/src/pill-menu/PillMenuTrigger.css.ts.vanilla-DCYIMi-_.css');
-var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/range/Range.css.ts.vanilla-Cq_609on.css');
-var helpers = require('@dnd-kit/helpers');
-var react = require('@dnd-kit/react');
-require('./assets/src/sortable/SortableHandle.css.ts.vanilla-DXqOi_PV.css');
-var sortable = require('@dnd-kit/react/sortable');
-require('./assets/src/sortable/SortableItem.css.ts.vanilla-C2NzM_Tj.css');
-require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-CMX3tIQu.css');
-require('downshift');
-require('./assets/src/input/Input.css.ts.vanilla-DsbAmrSc.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-ClAIaNOc.css');
-require('./assets/src/button/ButtonGroup.css.ts.vanilla-DrdllxCC.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-CtPmDKvF.css');
-require('./assets/src/command/CommandItem.css.ts.vanilla-Cc4Eyhfb.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-Dsy9nOPu.css');
-require('react-remove-scroll');
-require('@radix-ui/react-dialog');
-require('use-sync-external-store/shim');
-require('./assets/src/button/ButtonGroup.css.ts.vanilla-DrdllxCC.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DY6Og76j.css');
-require('./assets/src/dialog/DialogContent.css.ts.vanilla-hO-VTykQ.css');
-require('./assets/src/dialog/DialogFooter.css.ts.vanilla-DZzoxKxU.css');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-CnAcRzlb.css');
-require('./assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-DTGRyDx3.css');
-require('./assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-B5sbtZY3.css');
-require('./assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-DyTl-aBY.css');
-require('./assets/src/button/ButtonGroup.css.ts.vanilla-DrdllxCC.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-DmQgAcSV.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-DKk22D1T.css');
-require('./assets/src/table/Table.css.ts.vanilla-Bzf-yEqL.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-BhbdIN8M.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-DFJpdLbP.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-Dmbe_FQz.css');
-require('./assets/src/table/TableHeader.css.ts.vanilla-vsVrb8X6.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-BgMHoDie.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DwKEMHv_.css');
-require('react-day-picker');
-require('@radix-ui/react-popper');
-require('@radix-ui/react-avatar');
-require('./assets/src/button/ButtonGroup.css.ts.vanilla-DrdllxCC.css');
-require('./assets/src/avatar/Avatar.css.ts.vanilla-DywJgUIK.css');
-require('@radix-ui/react-visually-hidden');
-require('./assets/src/listbox/Listbox.css.ts.vanilla-xQnkE7tJ.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-DMIbClZS.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-Cww5cCY4.css');
-require('./assets/src/icon/Icon.css.ts.vanilla-DImwSAqg.css');
-require('./assets/src/button/ButtonIcon.css.ts.vanilla-CG7OVgNd.css');
-require('./assets/src/text/Text.css.ts.vanilla-rJ9Dt76f.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-fF5E6OKd.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-B8KgYl4X.css');
-require('./assets/src/alert/Alert.css.ts.vanilla-Dbq5-hbJ.css');
-require('@radix-ui/react-popover');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-CYnAGvOD.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-DR1qWK86.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-Q9FvnVTf.css');
-require('@tanstack/react-virtual');
-require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla--wDFfAzr.css');
-require('./assets/src/button/ButtonGroup.css.ts.vanilla-DrdllxCC.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-C7ifMcvG.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BoUhDD4p.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-D9doZcfo.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BPBIZXYQ.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-DoVyvw6Y.css');
-require('@radix-ui/react-portal');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-Dpe22v9W.css');
-require('@radix-ui/react-dismissable-layer');
-require('@radix-ui/react-focus-guards');
-require('@radix-ui/react-focus-scope');
-require('@radix-ui/react-tooltip');
-require('./assets/src/calendar/Calendar.css.ts.vanilla-CllW8Gi7.css');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-OwCTQo3a.css');
-require('./assets/src/calendar/CalendarGrid.css.ts.vanilla-DvwpC2HL.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-Nl3ixwL3.css');
-require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-DMdEweUM.css');
-require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-C1omtSlw.css');
-require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-cVmxVXyG.css');
-require('./assets/src/box/Box.css.ts.vanilla-sMkFdvO_.css');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var RadixHoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixHoverCard);
-var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ResizablePrimitive);
-var RadixRovingFocus__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixRovingFocus);
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Flex = require("./Flex-CGwU2Xi3.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-mKFUr5lc.css");
+let clsx = require("clsx");
+clsx = require_Flex.__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 _vanilla_extract_dynamic = require("@vanilla-extract/dynamic");
+require("./assets/src/details-panel/DetailsPanel.css.ts.vanilla-zc4JbaAv.css");
+require("./assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-B8kGjTD0.css");
+require("./assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-CdsGK27j.css");
+require("./assets/src/file-upload/FileUpload.css.ts.vanilla-D2OxZUi8.css");
+require("./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-gnx5hYjN.css");
+require("./assets/src/file-upload/FileUploadListItem.css.ts.vanilla-BLKHNiVE.css");
+require("./assets/src/highlight/Highlight.css.ts.vanilla-C0vNV_Os.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-BEQBbm14.css");
+require("./assets/src/inline-input/InlineInput.css.ts.vanilla-CJwU0uqV.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-qhaDyaDz.css");
+require("./assets/src/layout/Layout.css.ts.vanilla-CnIHwm0l.css");
+require("./assets/src/layout/LayoutContent.css.ts.vanilla-BKBAvxRZ.css");
+require("./assets/src/pill/Pill.css.ts.vanilla-CU5A2d4u.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-D_HLpNoX.css");
+require("./assets/src/range/Range.css.ts.vanilla-B37iskNN.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-g6xpaPOf.css");
+let _dnd_kit_react_sortable = require("@dnd-kit/react/sortable");
+require("./assets/src/sortable/SortableItem.css.ts.vanilla-BeEicDUm.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",
-  ArrowLeft: "arrowleft",
-  ArrowRight: "arrowright",
-  ArrowUp: "arrowup",
-  ArrowDown: "arrowdown",
-  Escape: "escape",
-  Esc: "escape",
-  esc: "escape",
-  Enter: "enter",
-  Tab: "tab",
-  Backspace: "backspace",
-  Delete: "delete",
-  Insert: "insert",
-  Home: "home",
-  End: "end",
-  PageUp: "pageup",
-  PageDown: "pagedown",
-  "+": "plus",
-  "-": "minus",
-  "*": "asterisk",
-  "/": "slash"
+	" ": "space",
+	ArrowLeft: "arrowleft",
+	ArrowRight: "arrowright",
+	ArrowUp: "arrowup",
+	ArrowDown: "arrowdown",
+	Escape: "escape",
+	Esc: "escape",
+	esc: "escape",
+	Enter: "enter",
+	Tab: "tab",
+	Backspace: "backspace",
+	Delete: "delete",
+	Insert: "insert",
+	Home: "home",
+	End: "end",
+	PageUp: "pageup",
+	PageDown: "pagedown",
+	"+": "plus",
+	"-": "minus",
+	"*": "asterisk",
+	"/": "slash"
 };
 function normalizeKey(key) {
-  const lowerKey = key.replace("Key", "").toLowerCase();
-  return keyNameMap[key] || lowerKey;
+	const lowerKey = key.replace("Key", "").toLowerCase();
+	return keyNameMap[key] || lowerKey;
 }
 function parseHotkey(hotkey) {
-  const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
-  const modifiers = {
-    alt: keys.includes("alt"),
-    ctrl: keys.includes("ctrl"),
-    meta: keys.includes("meta"),
-    mod: keys.includes("mod"),
-    shift: keys.includes("shift"),
-    plus: keys.includes("[plus]")
-  };
-  const reservedKeys = ["alt", "ctrl", "meta", "shift", "mod"];
-  const freeKey = keys.find((key) => !reservedKeys.includes(key));
-  return {
-    ...modifiers,
-    key: freeKey === "[plus]" ? "+" : freeKey
-  };
+	const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
+	const modifiers = {
+		alt: keys.includes("alt"),
+		ctrl: keys.includes("ctrl"),
+		meta: keys.includes("meta"),
+		mod: keys.includes("mod"),
+		shift: keys.includes("shift"),
+		plus: keys.includes("[plus]")
+	};
+	const reservedKeys = [
+		"alt",
+		"ctrl",
+		"meta",
+		"shift",
+		"mod"
+	];
+	const freeKey = keys.find((key) => !reservedKeys.includes(key));
+	return {
+		...modifiers,
+		key: freeKey === "[plus]" ? "+" : freeKey
+	};
 }
 function isExactHotkey(hotkey, event, usePhysicalKeys) {
-  const { alt, ctrl, meta, mod, shift, key } = hotkey;
-  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey, code: pressedCode } = event;
-  if (alt !== altKey) {
-    return false;
-  }
-  if (mod) {
-    if (!ctrlKey && !metaKey) {
-      return false;
-    }
-  } else {
-    if (ctrl !== ctrlKey) {
-      return false;
-    }
-    if (meta !== metaKey) {
-      return false;
-    }
-  }
-  if (shift !== shiftKey) {
-    return false;
-  }
-  if (key && (usePhysicalKeys ? normalizeKey(pressedCode) === normalizeKey(key) : normalizeKey(pressedKey ?? pressedCode) === normalizeKey(key))) {
-    return true;
-  }
-  return false;
+	const { alt, ctrl, meta, mod, shift, key } = hotkey;
+	const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey, code: pressedCode } = event;
+	if (alt !== altKey) return false;
+	if (mod) {
+		if (!ctrlKey && !metaKey) return false;
+	} else {
+		if (ctrl !== ctrlKey) return false;
+		if (meta !== metaKey) return false;
+	}
+	if (shift !== shiftKey) return false;
+	if (key && (usePhysicalKeys ? normalizeKey(pressedCode) === normalizeKey(key) : normalizeKey(pressedKey ?? pressedCode) === normalizeKey(key))) return true;
+	return false;
 }
 function getHotkeyMatcher(hotkey, usePhysicalKeys) {
-  return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys);
+	return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys);
 }
-
+//#endregion
+//#region ../../node_modules/.pnpm/@mantine+hooks@8.3.18_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/use-hotkeys.mjs
 function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
-  if (event.target instanceof HTMLElement) {
-    if (triggerOnContentEditable) {
-      return !tagsToIgnore.includes(event.target.tagName);
-    }
-    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
-  }
-  return true;
+	if (event.target instanceof HTMLElement) {
+		if (triggerOnContentEditable) return !tagsToIgnore.includes(event.target.tagName);
+		return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
+	}
+	return true;
 }
-function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
-  React.useEffect(() => {
-    const keydownListener = (event) => {
-      hotkeys.forEach(
-        ([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {
-          if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
-            if (options.preventDefault) {
-              event.preventDefault();
-            }
-            handler(event);
-          }
-        }
-      );
-    };
-    document.documentElement.addEventListener("keydown", keydownListener);
-    return () => document.documentElement.removeEventListener("keydown", keydownListener);
-  }, [hotkeys]);
+function useHotkeys(hotkeys, tagsToIgnore = [
+	"INPUT",
+	"TEXTAREA",
+	"SELECT"
+], triggerOnContentEditable = false) {
+	(0, react.useEffect)(() => {
+		const keydownListener = (event) => {
+			hotkeys.forEach(([hotkey, handler, options = {
+				preventDefault: true,
+				usePhysicalKeys: false
+			}]) => {
+				if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
+					if (options.preventDefault) event.preventDefault();
+					handler(event);
+				}
+			});
+		};
+		document.documentElement.addEventListener("keydown", keydownListener);
+		return () => document.documentElement.removeEventListener("keydown", keydownListener);
+	}, [hotkeys]);
 }
-
+//#endregion
+//#region src/dialog-kit/useDialogKit.ts
+/**
+* Hook to access the dialog kit context.
+*
+* @experimental
+*/
 function useDialogKit() {
-  const context = React.useContext(Flex.DialogKitContext);
-  if (!context) {
-    throw new Error(
-      `\`useDialogItemContext\` must be used within managed dialogs.`
-    );
-  }
-  return {
-    /**
-     * The ID of the managed dialog item in the current context.
-     */
-    id: context.id
-  };
+	const context = (0, react.useContext)(require_Flex.DialogKitContext);
+	if (!context) throw new Error(`\`useDialogItemContext\` must be used within managed dialogs.`);
+	return { 
+	/**
+	* The ID of the managed dialog item in the current context.
+	*/
+id: context.id };
 }
-
-function DataTableExpandableCell({
-  children,
-  getValue,
-  row
-}) {
-  const labelPrefixId = reactId.useId();
-  const { labelId } = Flex.useDataTableRowContext(
-    "@optiaxiom/react/DataTableExpandableCell"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Flex.Group, { alignItems: "start", gap: "8", children: [
-    Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { flex: "none", w: "sm" }, index)),
-    row.getCanExpand() ? /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Button,
-      {
-        appearance: "subtle",
-        "aria-expanded": row.getIsExpanded(),
-        "aria-label": "Toggle row",
-        "aria-labelledby": clsx(labelPrefixId, labelId),
-        flex: "none",
-        icon: row.getIsExpanded() ? /* @__PURE__ */ jsxRuntime.jsx(icons.IconAngleDown, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.IconChevronRight, {}),
-        id: labelPrefixId,
-        onClick: row.getToggleExpandedHandler(),
-        size: "sm",
-        style: { marginBlock: -2 },
-        type: "button"
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { flex: "none", w: "sm" }),
-    children ?? getValue()
-  ] });
+//#endregion
+//#region src/data-table/DataTableExpandableCell.tsx
+/**
+* Table cell component with expandable row functionality.
+*
+* @group DataTable
+* @experimental
+*/
+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, {
+		alignItems: "start",
+		gap: "8",
+		children: [
+			Array.from({ length: row.depth }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				flex: "none",
+				w: "sm"
+			}, index)),
+			row.getCanExpand() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Button, {
+				appearance: "subtle",
+				"aria-expanded": row.getIsExpanded(),
+				"aria-label": "Toggle row",
+				"aria-labelledby": (0, clsx.default)(labelPrefixId, labelId),
+				flex: "none",
+				icon: row.getIsExpanded() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconAngleDown, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconChevronRight, {}),
+				id: labelPrefixId,
+				onClick: row.getToggleExpandedHandler(),
+				size: "sm",
+				style: { marginBlock: -2 },
+				type: "button"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				flex: "none",
+				w: "sm"
+			}),
+			children ?? getValue()
+		]
+	});
 }
 DataTableExpandableCell.displayName = "@optiaxiom/react/DataTableExpandableCell";
-
-function DataTableExpandableHeader({
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { ml: "32", children });
+//#endregion
+//#region src/data-table/DataTableExpandableHeader.tsx
+/**
+* Table header component for expandable columns.
+*
+* @group DataTable
+* @experimental
+*/
+function DataTableExpandableHeader({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		ml: "32",
+		children
+	});
 }
 DataTableExpandableHeader.displayName = "@optiaxiom/react/DataTableExpandableHeader";
-
-var root$3 = Flex.recipeRuntime({base:[{bg:'bg.default',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'w87xti']});
-
-const [DetailsPanelProvider, useDetailsPanelContext] = reactContext.createContext("@optiaxiom/react/DetailsPanel");
-
-const Slot$4 = reactSlot.createSlot("@optiaxiom/react/DetailsPanel");
-const DetailsPanel = React.forwardRef(
-  ({ asChild, children, className, ...props }, ref) => {
-    const Comp = asChild ? Slot$4 : "aside";
-    const labelId = reactId.useId();
-    const descriptionId = reactId.useId();
-    return /* @__PURE__ */ jsxRuntime.jsx(DetailsPanelProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Box,
-      {
-        "aria-describedby": descriptionId,
-        "aria-labelledby": labelId,
-        asChild: true,
-        tabIndex: 0,
-        ...root$3({}, className),
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, children })
-      }
-    ) });
-  }
-);
+//#endregion
+//#region src/details-panel/DetailsPanel.css.ts
+var root$3 = require_Flex.recipeRuntime({ base: [{
+	bg: "bg.default",
+	color: "fg.default",
+	display: "flex",
+	flexDirection: "column",
+	h: "full",
+	overflow: "auto"
+}, "aeedz3"] });
+//#endregion
+//#region src/details-panel/DetailsPanelContext.ts
+const [DetailsPanelProvider, useDetailsPanelContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/DetailsPanel");
+//#endregion
+//#region src/details-panel/DetailsPanel.tsx
+const Slot$4 = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/DetailsPanel");
+/**
+* Panel for showing additional content on the right side of the page.
+*
+* @group DetailsPanel
+* @since 1.6.0
+* @experimental
+* @category container
+*/
+const DetailsPanel = (0, react.forwardRef)(({ asChild, children, className, ...props }, ref) => {
+	const Comp = asChild ? Slot$4 : "aside";
+	const labelId = (0, _radix_ui_react_id.useId)();
+	const descriptionId = (0, _radix_ui_react_id.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailsPanelProvider, {
+		descriptionId,
+		labelId,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			"aria-describedby": descriptionId,
+			"aria-labelledby": labelId,
+			asChild: true,
+			tabIndex: 0,
+			...root$3({}, className),
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+				ref,
+				children
+			})
+		})
+	});
+});
 DetailsPanel.displayName = "@optiaxiom/react/DetailsPanel";
-
-const DetailsPanelBody = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Flex.Group,
-    {
-      flex: "1",
-      flexDirection: "column",
-      fontSize: "md",
-      gap: "16",
-      px: "16",
-      ref,
-      ...props,
-      children
-    }
-  );
+//#endregion
+//#region src/details-panel/DetailsPanelBody.tsx
+/**
+* @group DetailsPanel
+*/
+const DetailsPanelBody = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+		flex: "1",
+		flexDirection: "column",
+		fontSize: "md",
+		gap: "16",
+		px: "16",
+		ref,
+		...props,
+		children
+	});
 });
 DetailsPanelBody.displayName = "@optiaxiom/react/DetailsPanelBody";
-
-var footer = Flex.recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'16',pt:'8'},'ibfpy9']});
-
-const DetailsPanelFooter = React.forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Group, { ref, ...footer({}, className), ...props, children }) });
+//#endregion
+//#region src/details-panel/DetailsPanelFooter.css.ts
+var footer = require_Flex.recipeRuntime({ base: [{
+	bg: "bg.default",
+	gap: "8",
+	p: "16",
+	pt: "8"
+}, "_1btnzxg"] });
+//#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, {
+		size: "lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+			ref,
+			...footer({}, className),
+			...props,
+			children
+		})
+	});
 });
 DetailsPanelFooter.displayName = "@optiaxiom/react/DetailsPanelFooter";
-
-var header = Flex.recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_1leq30q']});
-
-const DetailsPanelHeader = React.forwardRef(
-  ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
-    const { descriptionId, labelId } = useDetailsPanelContext(
-      "@optiaxiom/react/DetailsPanelHeader"
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.ButtonProvider, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex.Box, { ref, ...header({}, className), ...props, children: [
-      addonBefore && /* @__PURE__ */ jsxRuntime.jsx(Flex.Group, { gap: "8", children: addonBefore }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Flex.Heading,
-        {
-          flex: "1",
-          fontSize: "lg",
-          fontWeight: "600",
-          id: labelId,
-          level: "2",
-          children
-        }
-      ),
-      addonAfter && /* @__PURE__ */ jsxRuntime.jsx(Flex.Group, { gap: "8", children: addonAfter }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(
-        Flex.Text,
-        {
-          asChild: true,
-          color: "fg.secondary",
-          fontSize: "sm",
-          id: descriptionId,
-          w: "full",
-          children: Flex.fallbackSpan(description)
-        }
-      )
-    ] }) });
-  }
-);
+//#endregion
+//#region src/details-panel/DetailsPanelHeader.css.ts
+var header = require_Flex.recipeRuntime({ base: [{
+	bg: "bg.default",
+	display: "flex",
+	flexWrap: "wrap",
+	p: "16",
+	pb: "8"
+}, "y8ozry"] });
+//#endregion
+//#region src/details-panel/DetailsPanelHeader.tsx
+/**
+* @group DetailsPanel
+*/
+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, {
+		size: "sm",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+			ref,
+			...header({}, className),
+			...props,
+			children: [
+				addonBefore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+					gap: "8",
+					children: addonBefore
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Heading, {
+					flex: "1",
+					fontSize: "lg",
+					fontWeight: "600",
+					id: labelId,
+					level: "2",
+					children
+				}),
+				addonAfter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+					gap: "8",
+					children: addonAfter
+				}),
+				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+					asChild: true,
+					color: "fg.secondary",
+					fontSize: "sm",
+					id: descriptionId,
+					w: "full",
+					children: require_Flex.fallbackSpan(description)
+				})
+			]
+		})
+	});
+});
 DetailsPanelHeader.displayName = "@optiaxiom/react/DetailsPanelHeader";
-
-var upload = Flex.recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_16detdp']});
-
-const [FileUploadProvider, useFileUploadContext] = reactContext.createContext("@optiaxiom/react/FileUpload");
-
-const FileUpload = React.forwardRef(
-  ({ accept, children, className, disabled, onFilesDrop, ...props }, outerRef) => {
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const inputRef = React.useRef(null);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      FileUploadProvider,
-      {
-        accept: (accept ?? []).join(","),
-        disabled,
-        inputRef,
-        onFilesDrop,
-        rootRef: innerRef,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { ref, ...upload({}, className), ...props, children })
-      }
-    );
-  }
-);
+//#endregion
+//#region src/file-upload/FileUpload.css.ts
+var upload = require_Flex.recipeRuntime({ base: [{
+	color: "fg.default",
+	display: "flex",
+	flexDirection: "column"
+}, "_1a1g2c3"] });
+//#endregion
+//#region src/file-upload/FileUploadContext.ts
+const [FileUploadProvider, useFileUploadContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/FileUpload");
+//#endregion
+//#region src/file-upload/FileUpload.tsx
+/**
+* Capture file input from users with drag and drop.
+*
+* @category form
+* @since 1.6.0
+* @experimental
+*/
+const FileUpload = (0, react.forwardRef)(({ accept, children, className, disabled, onFilesDrop, ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	const inputRef = (0, react.useRef)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileUploadProvider, {
+		accept: (accept ?? []).join(","),
+		disabled,
+		inputRef,
+		onFilesDrop,
+		rootRef: innerRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			ref,
+			...upload({}, className),
+			...props,
+			children
+		})
+	});
+});
 FileUpload.displayName = "@optiaxiom/react/FileUpload";
-
-var dropzone = Flex.recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',flexDirection:'column',gap:'16',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'_3hr79l'],variants:{drag:{false:{},true:['_2b2wab']},hidden:{false:'_1p8pvmg',true:'mg97m5'},overlay:{false:{flex:'1'},true:[{z:'10'},'_132ozey']}}});
-var label = Flex.recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'8'}],variants:{disabled:{false:{},true:'trcvn'}}});
-
+//#endregion
+//#region src/file-upload/FileUploadDropzone.css.ts
+var dropzone = require_Flex.recipeRuntime({
+	base: [{
+		alignItems: "center",
+		bg: "bg.secondary",
+		flexDirection: "column",
+		gap: "16",
+		justifyContent: "center",
+		p: "32",
+		rounded: "md",
+		textAlign: "center",
+		transition: "colors"
+	}, "_1k35yei"],
+	variants: {
+		drag: {
+			false: {},
+			true: ["cepqr"]
+		},
+		hidden: {
+			false: "_1po9kxx",
+			true: "_1hs6ke0"
+		},
+		overlay: {
+			false: { flex: "1" },
+			true: [{ z: "10" }, "_1ws0uvo"]
+		}
+	}
+});
+var label = require_Flex.recipeRuntime({
+	base: [{
+		alignItems: "center",
+		flexDirection: "column",
+		gap: "8"
+	}],
+	variants: { disabled: {
+		false: {},
+		true: "_3fmsuk"
+	} }
+});
+//#endregion
+//#region src/file-upload/useFileUploadTrigger.ts
 const useFileUploadTrigger = () => {
-  const { inputRef } = useFileUploadContext(
-    "@optiaxiom/react/useFileUploadOpen"
-  );
-  return React.useCallback(() => {
-    inputRef.current?.click();
-  }, [inputRef]);
+	const { inputRef } = useFileUploadContext("@optiaxiom/react/useFileUploadOpen");
+	return (0, react.useCallback)(() => {
+		inputRef.current?.click();
+	}, [inputRef]);
 };
-
-const Slot$3 = reactSlot.createSlot("@optiaxiom/react/FileUploadTrigger");
-const FileUploadTrigger = React.forwardRef(({ asChild, children, onClick, ...props }, ref) => {
-  const { boxProps, restProps } = Flex.extractBoxProps(props);
-  const Comp = asChild ? Slot$3 : Flex.Button;
-  const { disabled } = useFileUploadContext(
-    "@optiaxiom/react/FileUploadTrigger"
-  );
-  const open = useFileUploadTrigger();
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      disabled,
-      onClick: (event) => {
-        onClick?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        open();
-      },
-      ref,
-      ...asChild ? {} : { type: "button" },
-      ...restProps,
-      children: children || "Select files"
-    }
-  ) });
+//#endregion
+//#region src/file-upload/FileUploadTrigger.tsx
+const Slot$3 = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/FileUploadTrigger");
+/**
+* @group 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 { disabled } = useFileUploadContext("@optiaxiom/react/FileUploadTrigger");
+	const open = useFileUploadTrigger();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		asChild: true,
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, {
+			disabled,
+			onClick: (event) => {
+				onClick?.(event);
+				if (event.defaultPrevented) return;
+				open();
+			},
+			ref,
+			...asChild ? {} : { type: "button" },
+			...restProps,
+			children: children || "Select files"
+		})
+	});
 });
 FileUploadTrigger.displayName = "@optiaxiom/react/FileUploadTrigger";
-
+//#endregion
+//#region src/file-upload/useContainerSize.ts
 const useContainerSize = (ref) => {
-  const [size, setSize] = React.useState();
-  React.useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      if (!ref.current) {
-        return;
-      }
-      for (const entry of entries) {
-        setSize(entry.borderBoxSize[0].blockSize);
-      }
-    });
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [ref]);
-  return size;
+	const [size, setSize] = (0, react.useState)();
+	(0, react.useEffect)(() => {
+		if (!ref.current) return;
+		const observer = new ResizeObserver((entries) => {
+			if (!ref.current) return;
+			for (const entry of entries) setSize(entry.borderBoxSize[0].blockSize);
+		});
+		observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, [ref]);
+	return size;
 };
-
+//#endregion
+//#region src/file-upload/useDraggingOverBody.ts
 const useDraggingOverBody = () => {
-  const { disabled, rootRef } = useFileUploadContext(
-    "@optiaxiom/react/FileUploadDropzone"
-  );
-  const [isDragging, setIsDragging] = React.useState(false);
-  const dragRef = React.useRef({
-    source: null,
-    timer: 0
-  });
-  React.useEffect(() => {
-    if (disabled) {
-      return;
-    }
-    const over = (event) => {
-      if (!dragRef.current.source) {
-        dragRef.current.source = event.dataTransfer?.items ? Array.from(event.dataTransfer.items).some(
-          (item) => item.kind === "file"
-        ) ? "file" : Array.from(event.dataTransfer.items).some(
-          (item) => item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data"
-        ) ? event.target instanceof Node ? event.target : null : null : "file";
-      }
-      setIsDragging(
-        dragRef.current.source !== null && (dragRef.current.source === "file" || !rootRef.current?.contains(dragRef.current.source))
-      );
-      window.clearTimeout(dragRef.current.timer);
-      dragRef.current.timer = window.setTimeout(() => {
-        dragRef.current.source = null;
-        setIsDragging(false);
-      }, 100);
-    };
-    document.body.addEventListener("dragover", over);
-    return () => {
-      document.body.removeEventListener("dragover", over);
-    };
-  }, [disabled, rootRef]);
-  return isDragging;
+	const { disabled, rootRef } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
+	const [isDragging, setIsDragging] = (0, react.useState)(false);
+	const dragRef = (0, react.useRef)({
+		source: null,
+		timer: 0
+	});
+	(0, react.useEffect)(() => {
+		if (disabled) return;
+		const over = (event) => {
+			if (!dragRef.current.source) dragRef.current.source = event.dataTransfer?.items ? Array.from(event.dataTransfer.items).some((item) => item.kind === "file") ? "file" : Array.from(event.dataTransfer.items).some((item) => item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") ? event.target instanceof Node ? event.target : null : null : "file";
+			setIsDragging(dragRef.current.source !== null && (dragRef.current.source === "file" || !rootRef.current?.contains(dragRef.current.source)));
+			window.clearTimeout(dragRef.current.timer);
+			dragRef.current.timer = window.setTimeout(() => {
+				dragRef.current.source = null;
+				setIsDragging(false);
+			}, 100);
+		};
+		document.body.addEventListener("dragover", over);
+		return () => {
+			document.body.removeEventListener("dragover", over);
+		};
+	}, [disabled, rootRef]);
+	return isDragging;
 };
-
+//#endregion
+//#region src/file-upload/useFileUploadDragging.ts
 const useFileUploadDragging = ({ onDragEnter, onDragLeave, onDrop, ...props } = {}, onDraggingChange) => {
-  const { disabled } = useFileUploadContext(
-    "@optiaxiom/react/FileUploadDropzone"
-  );
-  const targetsRef = React.useRef([]);
-  return {
-    ...props,
-    onDragEnter: (event) => {
-      onDragEnter?.(event);
-      if (disabled) {
-        return;
-      }
-      targetsRef.current = [...targetsRef.current, event.target];
-      onDraggingChange(true);
-    },
-    onDragLeave: (event) => {
-      onDragLeave?.(event);
-      if (disabled) {
-        return;
-      }
-      targetsRef.current = targetsRef.current.filter(
-        (element) => element !== event.target
-      );
-      if (targetsRef.current.length === 0) {
-        onDraggingChange(false);
-      }
-    },
-    onDrop: (event) => {
-      onDrop?.(event);
-      if (disabled) {
-        return;
-      }
-      targetsRef.current = [];
-      onDraggingChange(false);
-    }
-  };
+	const { disabled } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
+	const targetsRef = (0, react.useRef)([]);
+	return {
+		...props,
+		onDragEnter: (event) => {
+			onDragEnter?.(event);
+			if (disabled) return;
+			targetsRef.current = [...targetsRef.current, event.target];
+			onDraggingChange(true);
+		},
+		onDragLeave: (event) => {
+			onDragLeave?.(event);
+			if (disabled) return;
+			targetsRef.current = targetsRef.current.filter((element) => element !== event.target);
+			if (targetsRef.current.length === 0) onDraggingChange(false);
+		},
+		onDrop: (event) => {
+			onDrop?.(event);
+			if (disabled) return;
+			targetsRef.current = [];
+			onDraggingChange(false);
+		}
+	};
 };
-
-const useFileUploadDrop = ({
-  onDragOver,
-  onDrop,
-  ...props
-} = {}) => {
-  const { accept, disabled, onFilesDrop } = useFileUploadContext(
-    "@optiaxiom/react/useFileUploadDrop"
-  );
-  const auth = Flex.useAuthContext();
-  return {
-    ...props,
-    onDragOver: (event) => {
-      onDragOver?.(event);
-      if (disabled) {
-        return;
-      }
-      event.preventDefault();
-    },
-    onDrop: async (event) => {
-      onDrop?.(event);
-      if (disabled) {
-        return;
-      }
-      event.preventDefault();
-      onFilesDrop?.(
-        event.dataTransfer.items ? (await Promise.all(
-          Array.from(event.dataTransfer.items).map(async (item) => {
-            if (item.kind === "file") {
-              const file = item.getAsFile();
-              const valid = file && isValidFile(file, accept);
-              if (!valid) {
-                globals.toaster.create(invalidFileTypeMessage(file), {
-                  intent: "danger"
-                });
-              }
-              return valid ? file : null;
-            } else if (item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") {
-              if (!auth) {
-                throw new Error(
-                  "Could not find authentication credentials. Did you forget to wrap your component with `<AuthProvider>` from `@optiaxiom/react`?"
-                );
-              }
-              try {
-                const data = JSON.parse(
-                  event.dataTransfer.getData(item.type)
-                );
-                const resource = {
-                  name: data.name || "",
-                  type: data.mime_type || "",
-                  url: data.link
-                };
-                return isValidFile(resource, accept) ? getRemoteFile(resource, auth, true) : null;
-              } catch {
-              }
-            }
-            return null;
-          })
-        )).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter((file) => {
-          const valid = isValidFile(file, accept);
-          if (!valid) {
-            globals.toaster.create(invalidFileTypeMessage(file), {
-              intent: "danger"
-            });
-          }
-          return valid;
-        })
-      );
-    }
-  };
+//#endregion
+//#region src/file-upload/useFileUploadDrop.ts
+const useFileUploadDrop = ({ onDragOver, onDrop, ...props } = {}) => {
+	const { accept, disabled, onFilesDrop } = useFileUploadContext("@optiaxiom/react/useFileUploadDrop");
+	const auth = require_Flex.useAuthContext();
+	return {
+		...props,
+		onDragOver: (event) => {
+			onDragOver?.(event);
+			if (disabled) return;
+			event.preventDefault();
+		},
+		onDrop: async (event) => {
+			onDrop?.(event);
+			if (disabled) return;
+			event.preventDefault();
+			onFilesDrop?.(event.dataTransfer.items ? (await Promise.all(Array.from(event.dataTransfer.items).map(async (item) => {
+				if (item.kind === "file") {
+					const file = item.getAsFile();
+					const valid = file && isValidFile(file, accept);
+					if (!valid) _optiaxiom_globals.toaster.create(invalidFileTypeMessage(file), { intent: "danger" });
+					return valid ? file : null;
+				} else if (item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") {
+					if (!auth) throw new Error("Could not find authentication credentials. Did you forget to wrap your component with `<AuthProvider>` from `@optiaxiom/react`?");
+					try {
+						const data = JSON.parse(event.dataTransfer.getData(item.type));
+						const resource = {
+							name: data.name || "",
+							type: data.mime_type || "",
+							url: data.link
+						};
+						return isValidFile(resource, accept) ? getRemoteFile(resource, auth, true) : null;
+					} catch {}
+				}
+				return null;
+			}))).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter((file) => {
+				const valid = isValidFile(file, accept);
+				if (!valid) _optiaxiom_globals.toaster.create(invalidFileTypeMessage(file), { intent: "danger" });
+				return valid;
+			}));
+		}
+	};
 };
 async function getRemoteFile(resource, auth, retry = false) {
-  const url = new URL(resource.url);
-  if (!url.searchParams.has("instance_id")) {
-    url.searchParams.set("instance_id", auth.instance || "");
-  }
-  const response = await fetch(url.toString(), {
-    headers: {
-      Authorization: `Bearer ${auth.token}`,
-      "X-Instance-Id": auth.instance,
-      "X-Product-Sku": "Axiom"
-    }
-  });
-  if (response.status === 401 && retry) {
-    return getRemoteFile(resource, {
-      ...auth,
-      token: await auth.refresh()
-    });
-  } else if (!response.ok) {
-    throw new Error("Could not download file from Opal.", {
-      cause: new Error(
-        `Got status ${response.status} attempting to download ${resource.url}`
-      )
-    });
-  } else {
-    return new File([await response.arrayBuffer()], resource.name, {
-      type: response.headers.get("Content-Type") || "application/octet-stream"
-    });
-  }
+	const url = new URL(resource.url);
+	if (!url.searchParams.has("instance_id")) url.searchParams.set("instance_id", auth.instance || "");
+	const response = await fetch(url.toString(), { headers: {
+		Authorization: `Bearer ${auth.token}`,
+		"X-Instance-Id": auth.instance,
+		"X-Product-Sku": "Axiom"
+	} });
+	if (response.status === 401 && retry) return getRemoteFile(resource, {
+		...auth,
+		token: await auth.refresh()
+	});
+	else if (!response.ok) throw new Error("Could not download file from Opal.", { cause: /* @__PURE__ */ new Error(`Got status ${response.status} attempting to download ${resource.url}`) });
+	else return new File([await response.arrayBuffer()], resource.name, { type: response.headers.get("Content-Type") || "application/octet-stream" });
 }
 function invalidFileTypeMessage(file) {
-  const ext = file?.name.includes(".") ? `.${file.name.split(".").pop()}` : void 0;
-  const label = ext || file?.type || "Unknown";
-  return `${label} is not an accepted file type`;
+	return `${(file?.name.includes(".") ? `.${file.name.split(".").pop()}` : void 0) || file?.type || "Unknown"} is not an accepted file type`;
 }
+/**
+* Copied and modified from https://github.com/dropzone/dropzone
+*/
 function isValidFile(file, accept) {
-  if (!file) {
-    return false;
-  }
-  if (!accept) {
-    return true;
-  }
-  const acceptedFiles = accept.split(",");
-  if (acceptedFiles.length === 0) {
-    return true;
-  }
-  const fileName = "name" in file ? file.name : "";
-  const mimeType = (file.type || "").toLowerCase();
-  const baseMimeType = mimeType.replace(/\/.*$/, "");
-  return acceptedFiles.some((type) => {
-    const validType = type.trim().toLowerCase();
-    if (validType.charAt(0) === ".") {
-      return fileName.toLowerCase().endsWith(validType);
-    } else if (validType.endsWith("/*")) {
-      return baseMimeType === validType.replace(/\/.*$/, "");
-    }
-    return mimeType === validType;
-  });
+	if (!file) return false;
+	if (!accept) return true;
+	const acceptedFiles = accept.split(",");
+	if (acceptedFiles.length === 0) return true;
+	const fileName = "name" in file ? file.name : "";
+	const mimeType = (file.type || "").toLowerCase();
+	const baseMimeType = mimeType.replace(/\/.*$/, "");
+	return acceptedFiles.some((type) => {
+		const validType = type.trim().toLowerCase();
+		if (validType.charAt(0) === ".") return fileName.toLowerCase().endsWith(validType);
+		else if (validType.endsWith("/*")) return baseMimeType === validType.replace(/\/.*$/, "");
+		return mimeType === validType;
+	});
 }
-
+//#endregion
+//#region src/file-upload/useStickyPosition.ts
 const useStickyPosition = (ref, visible) => {
-  const { rootRef } = useFileUploadContext(
-    "@optiaxiom/react/useStickyPosition"
-  );
-  React.useEffect(() => {
-    if (!visible || !rootRef.current) {
-      return;
-    }
-    const observer = new IntersectionObserver((entries) => {
-      if (!rootRef.current || !ref.current) {
-        return;
-      }
-      const entry = entries[0];
-      if (!entry.isIntersecting) {
-        return;
-      }
-      const { height, top } = entries[0].intersectionRect;
-      const rootRect = rootRef.current.getBoundingClientRect();
-      ref.current.style.maxHeight = `${Math.max(108, height)}px`;
-      ref.current.style.top = `${top - rootRect.top}px`;
-    });
-    observer.observe(rootRef.current);
-    let timer = 0;
-    const listener = () => {
-      window.clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        if (rootRef.current) {
-          observer.unobserve(rootRef.current);
-          observer.observe(rootRef.current);
-        }
-      }, 300);
-    };
-    window.addEventListener("scroll", listener, true);
-    return () => {
-      window.removeEventListener("scroll", listener, true);
-      observer.disconnect();
-    };
-  }, [visible, rootRef, ref]);
+	const { rootRef } = useFileUploadContext("@optiaxiom/react/useStickyPosition");
+	(0, react.useEffect)(() => {
+		if (!visible || !rootRef.current) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (!rootRef.current || !ref.current) return;
+			if (!entries[0].isIntersecting) return;
+			const { height, top } = entries[0].intersectionRect;
+			const rootRect = rootRef.current.getBoundingClientRect();
+			ref.current.style.maxHeight = `${Math.max(108, height)}px`;
+			ref.current.style.top = `${top - rootRect.top}px`;
+		});
+		observer.observe(rootRef.current);
+		let timer = 0;
+		const listener = () => {
+			window.clearTimeout(timer);
+			timer = window.setTimeout(() => {
+				if (rootRef.current) {
+					observer.unobserve(rootRef.current);
+					observer.observe(rootRef.current);
+				}
+			}, 300);
+		};
+		window.addEventListener("scroll", listener, true);
+		return () => {
+			window.removeEventListener("scroll", listener, true);
+			observer.disconnect();
+		};
+	}, [
+		visible,
+		rootRef,
+		ref
+	]);
 };
-
-const FileUploadDropzone = React.forwardRef(
-  ({
-    children,
-    className,
-    description,
-    label: label$1 = "Drag and drop files here",
-    overlay = false,
-    ...props
-  }, outerRef) => {
-    const { accept, disabled, inputRef, onFilesDrop } = useFileUploadContext(
-      "@optiaxiom/react/FileUploadDropzone"
-    );
-    const [isDragging, setIsDragging] = React.useState(false);
-    const isDraggingOverBody = useDraggingOverBody();
-    const innerRef = React.useRef(null);
-    useStickyPosition(innerRef, overlay && isDraggingOverBody);
-    const size = useContainerSize(innerRef) ?? 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Flex.Group,
-      {
-        fontSize: size > 448 ? "lg" : "md",
-        ref: reactComposeRefs.useComposedRefs(innerRef, outerRef),
-        ...dropzone(
-          {
-            drag: isDragging,
-            hidden: overlay && !isDraggingOverBody,
-            overlay
-          },
-          className
-        ),
-        ...useFileUploadDrop(useFileUploadDragging(props, setIsDragging)),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Flex.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              accept,
-              "aria-description": description,
-              "aria-label": label$1,
-              disabled,
-              multiple: true,
-              onChange: (event) => {
-                onFilesDrop?.([...event.target.files || []]);
-                event.target.value = "";
-              },
-              ref: inputRef,
-              type: "file"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Flex.Group, { ...label({ disabled }), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Flex.Icon, { asChild: true, color: "fg.secondary", h: size > 448 ? "lg" : "sm", children: /* @__PURE__ */ jsxRuntime.jsx(icons.IconUpload, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Flex.Text, { children: label$1 }),
-            description && /* @__PURE__ */ jsxRuntime.jsx(Flex.Text, { color: "fg.tertiary", children: description })
-          ] }),
-          !overlay && (children ?? /* @__PURE__ */ jsxRuntime.jsx(FileUploadTrigger, {}))
-        ]
-      }
-    );
-  }
-);
+//#endregion
+//#region src/file-upload/FileUploadDropzone.tsx
+/**
+* @group FileUpload
+*/
+const FileUploadDropzone = (0, react.forwardRef)(({ children, className, description, label: label$1 = "Drag and drop files here", overlay = false, ...props }, outerRef) => {
+	const { accept, disabled, inputRef, onFilesDrop } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
+	const [isDragging, setIsDragging] = (0, react.useState)(false);
+	const isDraggingOverBody = useDraggingOverBody();
+	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, {
+		fontSize: size > 448 ? "lg" : "md",
+		ref: (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef),
+		...dropzone({
+			drag: isDragging,
+			hidden: overlay && !isDraggingOverBody,
+			overlay
+		}, className),
+		...useFileUploadDrop(useFileUploadDragging(props, setIsDragging)),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.VisuallyHidden, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					accept,
+					"aria-description": description,
+					"aria-label": label$1,
+					disabled,
+					multiple: true,
+					onChange: (event) => {
+						onFilesDrop?.([...event.target.files || []]);
+						event.target.value = "";
+					},
+					ref: inputRef,
+					type: "file"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Group, {
+				...label({ disabled }),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.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, {
+						color: "fg.tertiary",
+						children: description
+					})
+				]
+			}),
+			!overlay && (children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileUploadTrigger, {}))
+		]
+	});
+});
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
-
-var item$1 = Flex.recipeRuntime({base:[{alignItems:'center',flexDirection:'row',fontSize:'md',gap:'6',p:'6',rounded:'md',transition:'colors'},'_10apkd5']});
-var name = Flex.recipeRuntime({base:[{rounded:'md',textAlign:'start'},'_1jujj1q']});
-
+//#endregion
+//#region src/file-upload/FileUploadListItem.css.ts
+var item$1 = require_Flex.recipeRuntime({ base: [{
+	alignItems: "center",
+	flexDirection: "row",
+	fontSize: "md",
+	gap: "6",
+	p: "6",
+	rounded: "md",
+	transition: "colors"
+}, "_1a23uhn"] });
+var name = require_Flex.recipeRuntime({ base: [{
+	rounded: "md",
+	textAlign: "start"
+}, "wavqwc"] });
+//#endregion
+//#region src/file-upload/FileUploadListItem.tsx
 function downloadFile(file) {
-  const url = URL.createObjectURL(file);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = file.name;
-  a.click();
-  URL.revokeObjectURL(url);
+	const url = URL.createObjectURL(file);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = file.name;
+	a.click();
+	URL.revokeObjectURL(url);
 }
 function formatFileSize(bytes) {
-  if (bytes < 1024)
-    return `${bytes} B`;
-  if (bytes < 1024 * 1024)
-    return `${(bytes / 1024).toFixed(0)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 const mimeTypeLabels = [
-  [/^application\/pdf$/, "PDF"],
-  [/^image\//, "Image"],
-  [/^video\//, "Video"],
-  [/^audio\//, "Audio"],
-  [/csv/, "CSV"],
-  [/spreadsheet|excel/, "Excel"],
-  [/presentation|powerpoint/, "PowerPoint"],
-  [/document|msword|wordprocessing/, "Word"],
-  [/zip|compressed|archive/, "Archive"],
-  [/^text\//, "Text"]
+	[/^application\/pdf$/, "PDF"],
+	[/^image\//, "Image"],
+	[/^video\//, "Video"],
+	[/^audio\//, "Audio"],
+	[/csv/, "CSV"],
+	[/spreadsheet|excel/, "Excel"],
+	[/presentation|powerpoint/, "PowerPoint"],
+	[/document|msword|wordprocessing/, "Word"],
+	[/zip|compressed|archive/, "Archive"],
+	[/^text\//, "Text"]
 ];
 function formatFileType(file) {
-  if (file.type) {
-    for (const [pattern, label] of mimeTypeLabels) {
-      if (pattern.test(file.type)) {
-        return label;
-      }
-    }
-  }
-  return "File";
+	if (file.type) {
+		for (const [pattern, label] of mimeTypeLabels) if (pattern.test(file.type)) return label;
+	}
+	return "File";
 }
-const FileUploadListItem = React.forwardRef(({ className, item, onRemove, ...props }, ref) => {
-  const { file, status } = item;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { ref, ...item$1({}, className), ...props, children: [
-    status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsx(Flex.Spinner, { size: "sm" }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(Flex.Icon, { asChild: true, color: "fg.error", h: "auto", w: "24", children: /* @__PURE__ */ jsxRuntime.jsx(icons.IconCircleExclamation, { filled: true }) }) : file.type.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { overflow: "hidden", rounded: "sm", size: "24", children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, h: "full", objectFit: "cover", w: "full", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: file.name, src: URL.createObjectURL(file) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(Flex.Icon, { asChild: true, color: "fg.tertiary", h: "auto", w: "24", children: /* @__PURE__ */ jsxRuntime.jsx(icons.IconFile, { filled: true }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Flex.Flex, { flex: "1", gap: "2", overflow: "hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Flex.Cover, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Text, { asChild: true, lineClamp: "2", ...name(), children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => downloadFile(file), type: "button", children: file.name }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Flex.Group, { fontSize: "sm", gap: "4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Flex.Text, { color: "fg.tertiary", children: [
-          formatFileType(file),
-          " \u2022 ",
-          formatFileSize(file.size)
-        ] }),
-        status === "error" && /* @__PURE__ */ jsxRuntime.jsx(Flex.Text, { color: "fg.error", children: "Upload failed" })
-      ] })
-    ] }),
-    onRemove && /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Button,
-      {
-        appearance: "subtle",
-        "aria-label": "Remove file",
-        disabled: status === "uploading",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.IconTrashCan, {}),
-        onClick: onRemove
-      }
-    )
-  ] });
+const FileUploadListItem = (0, react.forwardRef)(({ className, item, onRemove, ...props }, ref) => {
+	const { file, status } = item;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+		ref,
+		...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, {
+				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, {
+				overflow: "hidden",
+				rounded: "sm",
+				size: "24",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+					asChild: true,
+					h: "full",
+					objectFit: "cover",
+					w: "full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						alt: file.name,
+						src: URL.createObjectURL(file)
+					})
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Icon, {
+				asChild: true,
+				color: "fg.tertiary",
+				h: "auto",
+				w: "24",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconFile, { filled: true })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+				flex: "1",
+				gap: "2",
+				overflow: "hidden",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Cover, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+						asChild: true,
+						lineClamp: "2",
+						...name(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							onClick: () => downloadFile(file),
+							type: "button",
+							children: file.name
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Group, {
+					fontSize: "sm",
+					gap: "4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Text, {
+						color: "fg.tertiary",
+						children: [
+							formatFileType(file),
+							" • ",
+							formatFileSize(file.size)
+						]
+					}), status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+						color: "fg.error",
+						children: "Upload failed"
+					})]
+				})]
+			}),
+			onRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Button, {
+				appearance: "subtle",
+				"aria-label": "Remove file",
+				disabled: status === "uploading",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconTrashCan, {}),
+				onClick: onRemove
+			})
+		]
+	});
 });
 FileUploadListItem.displayName = "@optiaxiom/react/FileUploadListItem";
-
-const FileUploadList = React.forwardRef(
-  ({ items, onRemove, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.Flex, { gap: "12", ref, ...props, children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      FileUploadListItem,
-      {
-        item,
-        onRemove: onRemove ? () => onRemove(item) : void 0
-      },
-      idx
-    )) });
-  }
-);
+//#endregion
+//#region src/file-upload/FileUploadList.tsx
+const FileUploadList = (0, react.forwardRef)(({ items, onRemove, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+		gap: "12",
+		ref,
+		...props,
+		children: items.map((item, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileUploadListItem, {
+			item,
+			onRemove: onRemove ? () => onRemove(item) : void 0
+		}, idx))
+	});
+});
 FileUploadList.displayName = "@optiaxiom/react/FileUploadList";
-
-var mark$1 = Flex.recipeRuntime({base:'x27wzu'});
-
+//#endregion
+//#region src/highlight/Highlight.css.ts
+var mark$1 = require_Flex.recipeRuntime({ base: "_1jrjnq" });
+//#endregion
+//#region src/highlight/useHighlightedChunks.ts
 const useHighlightedChunks = (content, query) => {
-  const terms = React.useMemo(
-    () => (Array.isArray(query) ? query : query ? [query] : []).map((q) => typeof q === "string" ? q.trim() : q).filter(Boolean),
-    [query]
-  );
-  if (terms.length === 0) {
-    return [{ chunk: content, highlighted: false }];
-  }
-  const pattern = new RegExp(
-    "(" + terms.map(
-      (term) => term instanceof RegExp ? term.source : `(?![^<>]*>)(^|\\b)(?=[^/.])${escapeRegExp(term)}`
-    ).join("|") + ")",
-    "gi"
-  );
-  return content.split(pattern).map((chunk) => ({ chunk, highlighted: pattern.test(chunk) }));
+	const terms = (0, react.useMemo)(() => (Array.isArray(query) ? query : query ? [query] : []).map((q) => typeof q === "string" ? q.trim() : q).filter(Boolean), [query]);
+	if (terms.length === 0) return [{
+		chunk: content,
+		highlighted: false
+	}];
+	const pattern = new RegExp("(" + terms.map((term) => term instanceof RegExp ? term.source : `(?![^<>]*>)(^|\\b)(?=[^/.])${escapeRegExp(term)}`).join("|") + ")", "gi");
+	return content.split(pattern).map((chunk) => ({
+		chunk,
+		highlighted: pattern.test(chunk)
+	}));
 };
 function escapeRegExp(string) {
-  return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
+	return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
 }
-
-const Highlight = React.forwardRef(
-  ({ children = (chunk) => chunk, content, query, ...props }, ref) => {
-    const chunks = useHighlightedChunks(content || "", query);
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { ref, ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: highlighted ? children(
-      /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, ...mark$1(), children: /* @__PURE__ */ jsxRuntime.jsx("mark", { children: chunk }) })
-    ) : chunk }, index)) });
-  }
-);
+//#endregion
+//#region src/highlight/Highlight.tsx
+/**
+* Highlight query terms within text content.
+*
+* @category data-display
+* @experimental
+*/
+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, {
+		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, {
+			asChild: true,
+			...mark$1(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("mark", { children: chunk })
+		})) : chunk }, index))
+	});
+});
 Highlight.displayName = "@optiaxiom/react/Highlight";
-
-const [HoverCardContextProvider, useHoverCardContext] = reactContext.createContext("@optiaxiom/react/HoverCardContext");
-
-function HoverCard({
-  children,
-  defaultOpen = false,
-  onOpenChange,
-  open: openProp,
-  openDelay = 500,
-  ...props
-}) {
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    caller: "@optiaxiom/react/HoverCard",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const [presence, setPresence] = React.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    RadixHoverCard__namespace.Root,
-    {
-      onOpenChange: setOpen,
-      open: open || presence,
-      openDelay,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        HoverCardContextProvider,
-        {
-          open,
-          presence,
-          setPresence,
-          children
-        }
-      )
-    }
-  );
+//#endregion
+//#region src/hover-card/HoverCardContext.ts
+const [HoverCardContextProvider, useHoverCardContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/HoverCardContext");
+//#endregion
+//#region src/hover-card/HoverCard.tsx
+/**
+* Display helpful text or previews inside a dialog when hovering over a link or button.
+*
+* @category overlay
+* @group HoverCard
+* @since 1.7.6
+* @experimental
+*/
+function HoverCard({ children, defaultOpen = false, onOpenChange, open: openProp, openDelay = 500, ...props }) {
+	const [open, setOpen] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/HoverCard",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const [presence, setPresence] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_hover_card.Root, {
+		onOpenChange: setOpen,
+		open: open || presence,
+		openDelay,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverCardContextProvider, {
+			open,
+			presence,
+			setPresence,
+			children
+		})
+	});
 }
 HoverCard.displayName = "@optiaxiom/react/HoverCard";
-
-const HoverCardContent = React.forwardRef(
-  ({ align = "start", asChild, children, sideOffset = 4, ...props }, outerRef) => {
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const { open, presence, setPresence } = useHoverCardContext(
-      "@optiaxiom/react/HoverCardContent"
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.TransitionGroup,
-      {
-        onPresenceChange: setPresence,
-        open,
-        presence,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Transition, { duration: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Flex.Paper,
-          {
-            asChild: true,
-            display: "flex",
-            flexDirection: "column",
-            fontSize: "md",
-            gap: "2",
-            maxW: "xs",
-            p: "16",
-            role: "dialog",
-            ...props,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              RadixHoverCard__namespace.Content,
-              {
-                align,
-                asChild,
-                forceMount: true,
-                ref,
-                sideOffset,
-                children
-              }
-            )
-          }
-        ) }) })
-      }
-    );
-  }
-);
+//#endregion
+//#region src/hover-card/HoverCardContent.tsx
+/**
+* @group 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, {
+		onPresenceChange: setPresence,
+		open,
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Transition, {
+				duration: "sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Paper, {
+					asChild: true,
+					display: "flex",
+					flexDirection: "column",
+					fontSize: "md",
+					gap: "2",
+					maxW: "xs",
+					p: "16",
+					role: "dialog",
+					...props,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_hover_card.Content, {
+						align,
+						asChild,
+						forceMount: true,
+						ref,
+						sideOffset,
+						children
+					})
+				})
+			})
+		})
+	});
+});
 HoverCardContent.displayName = "@optiaxiom/react/HoverCardContent";
-
-var trigger$1 = Flex.recipeRuntime({base:'_21vs9b'});
-
-const HoverCardTrigger = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { boxProps, restProps } = Flex.extractBoxProps(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, ...trigger$1({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Trigger, { ref, ...restProps, children }) });
+//#endregion
+//#region src/hover-card/HoverCardTrigger.css.ts
+var trigger$1 = require_Flex.recipeRuntime({ base: "_1hdfpb8" });
+//#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, {
+		asChild: true,
+		...trigger$1({}, className),
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_hover_card.Trigger, {
+			ref,
+			...restProps,
+			children
+		})
+	});
 });
 HoverCardTrigger.displayName = "@optiaxiom/react/HoverCardTrigger";
-
-var editor = Flex.recipeRuntime({base:'_62gw6n',variants:{empty:{false:{},true:'_1u78ygn'}}});
-var input = Flex.recipeRuntime({base:'_115329z'});
-
-const InlineInput = React.forwardRef(
-  ({
-    className,
-    defaultValue = "",
-    disabled,
-    label,
-    multiline,
-    onValueChange,
-    placeholder,
-    value: valueProp,
-    ...props
-  }, outerRef) => {
-    const [value, setValue] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/InlineInput",
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-      prop: valueProp
-    });
-    const editorRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(editorRef, outerRef);
-    React.useEffect(() => {
-      if (!editorRef.current) {
-        return;
-      }
-      const clippedValue = multiline || !value?.includes("\n") ? value : value?.slice(0, value.indexOf("\n"));
-      if (getText(editorRef.current) !== clippedValue) {
-        if (document.activeElement === editorRef.current) {
-          const selection = window.getSelection();
-          if (!selection) {
-            return;
-          }
-          selection.getRangeAt(0).selectNodeContents(editorRef.current);
-          document.execCommand("insertHTML", false, clippedValue);
-        } else {
-          editorRef.current.innerText = clippedValue ?? "null";
-        }
-      }
-    }, [multiline, value]);
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { ...input({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Box,
-      {
-        "aria-multiline": multiline,
-        "aria-readonly": disabled,
-        contentEditable: !disabled && "plaintext-only",
-        "data-placeholder": placeholder ?? label,
-        onInput: (event) => {
-          setValue(getText(event.currentTarget));
-        },
-        onKeyDown: (event) => {
-          if (!multiline && event.key === "Enter") {
-            event.preventDefault();
-          }
-        },
-        onPaste: (event) => {
-          const value2 = event.clipboardData.getData("text");
-          if (!multiline && value2.includes("\n")) {
-            event.preventDefault();
-            const clippedValue = value2.slice(0, value2.indexOf("\n"));
-            document.execCommand("insertHTML", false, clippedValue);
-            setValue(getText(event.currentTarget));
-          }
-        },
-        ref,
-        role: "textbox",
-        spellCheck: "true",
-        ...label && { "aria-label": label },
-        ...editor({ empty: !value?.length })
-      }
-    ) });
-  }
-);
+//#endregion
+//#region src/inline-input/InlineInput.css.ts
+var editor = require_Flex.recipeRuntime({
+	base: "ij1wxq",
+	variants: { empty: {
+		false: {},
+		true: "_13i5y1d"
+	} }
+});
+var input = require_Flex.recipeRuntime({ base: "_1tmsisg" });
+//#endregion
+//#region src/inline-input/InlineInput.tsx
+/**
+* Seamless textbox for capturing user input with completely customizable visual styles.
+*
+* @category form
+* @since 0.6.0
+* @experimental
+*/
+const InlineInput = (0, react.forwardRef)(({ className, defaultValue = "", disabled, label, multiline, onValueChange, placeholder, value: valueProp, ...props }, outerRef) => {
+	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/InlineInput",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const editorRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(editorRef, outerRef);
+	(0, react.useEffect)(() => {
+		if (!editorRef.current) return;
+		const clippedValue = multiline || !value?.includes("\n") ? value : value?.slice(0, value.indexOf("\n"));
+		if (getText(editorRef.current) !== clippedValue) if (document.activeElement === editorRef.current) {
+			const selection = window.getSelection();
+			if (!selection) return;
+			selection.getRangeAt(0).selectNodeContents(editorRef.current);
+			document.execCommand("insertHTML", false, clippedValue);
+		} else editorRef.current.innerText = clippedValue ?? "null";
+	}, [multiline, value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		...input({}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			"aria-multiline": multiline,
+			"aria-readonly": disabled,
+			contentEditable: !disabled && "plaintext-only",
+			"data-placeholder": placeholder ?? label,
+			onInput: (event) => {
+				setValue(getText(event.currentTarget));
+			},
+			onKeyDown: (event) => {
+				if (!multiline && event.key === "Enter") event.preventDefault();
+			},
+			onPaste: (event) => {
+				const value = event.clipboardData.getData("text");
+				if (!multiline && value.includes("\n")) {
+					event.preventDefault();
+					const clippedValue = value.slice(0, value.indexOf("\n"));
+					document.execCommand("insertHTML", false, clippedValue);
+					setValue(getText(event.currentTarget));
+				}
+			},
+			ref,
+			role: "textbox",
+			spellCheck: "true",
+			...label && { "aria-label": label },
+			...editor({ empty: !value?.length })
+		})
+	});
+});
 InlineInput.displayName = "@optiaxiom/react/InlineInput";
 function getText(element) {
-  const text = element.innerText;
-  if (text.endsWith("\n")) {
-    return text.slice(0, -1);
-  }
-  return text;
+	const text = element.innerText;
+	if (text.endsWith("\n")) return text.slice(0, -1);
+	return text;
 }
-
+//#endregion
+//#region src/resizable/Resizable.tsx
 const Resizable = ({ ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.PanelGroup, { direction: "horizontal", ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.PanelGroup, {
+		direction: "horizontal",
+		...props
+	});
 };
 Resizable.displayName = "@optiaxiom/react/Resizable";
-
-var handle$1 = Flex.recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'jh4poa']});
-var root$2 = Flex.recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_10qf8dv']});
-
+//#endregion
+//#region src/resizable/ResizableHandle.css.ts
+var handle$1 = require_Flex.recipeRuntime({ base: [{
+	border: "1",
+	h: "56",
+	rounded: "sm",
+	w: "12"
+}, "_1dg24rk"] });
+var root$2 = require_Flex.recipeRuntime({ base: [{
+	flexDirection: "column",
+	gap: "16",
+	justifyContent: "center",
+	rounded: "sm",
+	z: "10"
+}, "fwjia"] });
+//#endregion
+//#region src/resizable/ResizableHandle.tsx
 const ResizableHandle = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Group, { asChild: true, ...root$2(), children: /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { ...handle$1() }) }) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.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() })
+		})
+	});
 };
 ResizableHandle.displayName = "@optiaxiom/react/ResizableHandle";
-
+//#endregion
+//#region src/resizable/ResizablePanel.tsx
 const ResizablePanel = ({ ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.Panel, { ...props });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.Panel, { ...props });
 };
 ResizablePanel.displayName = "@optiaxiom/react/ResizablePanel";
-
-var layout = Flex.recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',fontSize:'md'},'n7zvh2'],variants:{size:{full:'_1ha8l1x',screen:'_1d2o3sh'}}});
-
-const Layout = React.forwardRef(
-  ({
-    children,
-    className,
-    detailsPanel,
-    header,
-    resizable,
-    sidebar,
-    size = "screen",
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Flex.Box, { ref, ...layout({ size }, className), ...props, children: [
-      header,
-      /* @__PURE__ */ jsxRuntime.jsxs(Flex.Box, { display: "flex", flex: "1", overflow: "auto", children: [
-        sidebar,
-        resizable ? /* @__PURE__ */ jsxRuntime.jsxs(Resizable, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ResizablePanel, { minSize: 33, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, h: "full", children }) }),
-          detailsPanel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ResizableHandle, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(ResizablePanel, { defaultSize: 33, minSize: 33, children: detailsPanel })
-          ] })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Flex.Box, { display: "flex", flex: "1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, w: detailsPanel ? "2/3" : "full", children }),
-          detailsPanel && /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { w: "1/3", children: detailsPanel })
-        ] })
-      ] })
-    ] });
-  }
-);
+//#endregion
+//#region src/layout/Layout.css.ts
+var layout = require_Flex.recipeRuntime({
+	base: [{
+		bg: "bg.default",
+		display: "flex",
+		flexDirection: "column",
+		fontSize: "md"
+	}, "u2j7eb"],
+	variants: { size: {
+		full: "_3jvf04",
+		screen: "uz6i7r"
+	} }
+});
+//#endregion
+//#region src/layout/Layout.tsx
+/**
+* Implement a basic page layout with multiple content areas.
+*
+* @category layout
+* @since 1.6.0
+* @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, {
+		ref,
+		...layout({ size }, className),
+		...props,
+		children: [header, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.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, {
+					asChild: true,
+					h: "full",
+					children
+				})
+			}), detailsPanel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizableHandle, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizablePanel, {
+				defaultSize: 33,
+				minSize: 33,
+				children: detailsPanel
+			})] })] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Box, {
+				display: "flex",
+				flex: "1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+					asChild: true,
+					w: detailsPanel ? "2/3" : "full",
+					children
+				}), detailsPanel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+					w: "1/3",
+					children: detailsPanel
+				})]
+			})]
+		})]
+	});
+});
 Layout.displayName = "@optiaxiom/react/Layout";
-
-var content = Flex.recipeRuntime({base:[{bg:'bg.page',flexDirection:'column',gap:'16',m:'4',ml:'0',overflow:'auto',px:'32',py:'24',rounded:'lg'},'_9g72fc']});
-
-const LayoutContent = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Group,
-      {
-        ref,
-        tabIndex: 0,
-        ...content({}, className),
-        ...props,
-        children
-      }
-    );
-  }
-);
+//#endregion
+//#region src/layout/LayoutContent.css.ts
+var content = require_Flex.recipeRuntime({ base: [{
+	bg: "bg.page",
+	flexDirection: "column",
+	gap: "16",
+	m: "4",
+	ml: "0",
+	overflow: "auto",
+	px: "32",
+	py: "24",
+	rounded: "lg"
+}, "_101g31b"] });
+//#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, {
+		ref,
+		tabIndex: 0,
+		...content({}, className),
+		...props,
+		children
+	});
+});
 LayoutContent.displayName = "@optiaxiom/react/LayoutContent";
-
-var pill = Flex.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontFamily:'mono',fontSize:'sm',gap:'4',px:'6',rounded:'md',textTransform:'uppercase',transition:'colors',whiteSpace:'nowrap'},'sdf7t9'],variants:{interactive:{false:{},true:'_1afmtp9'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
-
-const Slot$2 = reactSlot.createSlot("@optiaxiom/react/Pill");
-const Pill = React.forwardRef(
-  ({
-    asChild,
-    children,
-    className,
-    disabled,
-    onClick,
-    onDismiss,
-    readOnly,
-    size = "sm",
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot$2 : readOnly ? "span" : "button";
-    const { boxProps, restProps } = Flex.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Box,
-      {
-        asChild: true,
-        "data-disabled": disabled ? "" : void 0,
-        ...pill(
-          {
-            interactive: Boolean(!readOnly),
-            size
-          },
-          className
-        ),
-        ...boxProps,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Comp,
-          {
-            disabled,
-            onClick: (event) => {
-              if (readOnly) {
-                return;
-              }
-              onClick?.(event);
-              if (event.defaultPrevented) {
-                return;
-              }
-              onDismiss?.();
-            },
-            ref,
-            ...restProps,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Flex.Text, { truncate: true, children }),
-              onDismiss && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(Flex.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(icons.IconXmark, {}) })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+//#endregion
+//#region src/pill/Pill.css.ts
+var pill = require_Flex.recipeRuntime({
+	base: [{
+		alignItems: "center",
+		color: "fg.default",
+		display: "flex",
+		fontFamily: "mono",
+		fontSize: "sm",
+		gap: "4",
+		px: "6",
+		rounded: "md",
+		textTransform: "uppercase",
+		transition: "colors",
+		whiteSpace: "nowrap"
+	}, "_1o83055"],
+	variants: {
+		interactive: {
+			false: {},
+			true: "_8ta04j"
+		},
+		size: {
+			xs: { h: "xs" },
+			sm: { h: "sm" }
+		}
+	}
+});
+//#endregion
+//#region src/pill/Pill.tsx
+const Slot$2 = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/Pill");
+/**
+* A pill is a visual representation of an attribute, usually representing tags or metrics.
+*
+* @category data-display
+* @since 0.12.4
+* @experimental
+*/
+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, {
+		asChild: true,
+		"data-disabled": disabled ? "" : void 0,
+		...pill({
+			interactive: Boolean(!readOnly),
+			size
+		}, className),
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Comp, {
+			disabled,
+			onClick: (event) => {
+				if (readOnly) return;
+				onClick?.(event);
+				if (event.defaultPrevented) return;
+				onDismiss?.();
+			},
+			ref,
+			...restProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Text, {
+				truncate: true,
+				children
+			}), onDismiss && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Icon, {
+				asChild: true,
+				h: "12",
+				ml: "auto",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconXmark, {})
+			})]
+		})
+	});
+});
 Pill.displayName = "@optiaxiom/react/Pill";
-
-const PillGroup = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.Group, { flexWrap: "wrap", gap: "8", ref, ...props, children });
-  }
-);
+//#endregion
+//#region src/pill/PillGroup.tsx
+/**
+* @group Pill
+*/
+const PillGroup = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+		flexWrap: "wrap",
+		gap: "8",
+		ref,
+		...props,
+		children
+	});
+});
 PillGroup.displayName = "@optiaxiom/react/PillGroup";
-
-const [PillMenuProvider, usePillMenuContext] = reactContext.createContext("@optiaxiom/react/PillMenu");
-
-const PillMenu = React.forwardRef(
-  ({
-    children,
-    defaultOpen = false,
-    empty,
-    inputValue,
-    inputVisible,
-    loading,
-    onInputValueChange,
-    onOpenChange,
-    open: openProp,
-    options,
-    placeholder,
-    ...props
-  }, ref) => {
-    const [open, setOpen] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/PillMenu",
-      defaultProp: defaultOpen,
-      onChange: onOpenChange,
-      prop: openProp
-    });
-    const [optionIndexes, setOptionIndexes] = React.useState(
-      () => groupOptions(options)
-    );
-    const value = options.filter((item) => Flex.resolveItemProperty(item.selected));
-    return /* @__PURE__ */ jsxRuntime.jsx(PillMenuProvider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Menu,
-      {
-        empty,
-        inputValue,
-        inputVisible,
-        loading,
-        onInputValueChange,
-        onOpenChange: (open2) => {
-          setOpen(open2);
-          if (open2) {
-            setOptionIndexes(groupOptions(options));
-          }
-        },
-        open,
-        options: React.useMemo(
-          () => optionIndexes.map(({ group, index }) => ({
-            ...options[index],
-            ...group && {
-              group: {
-                hidden: true,
-                label: group,
-                separator: true
-              }
-            }
-          })),
-          [optionIndexes, options]
-        ),
-        placeholder,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Flex.Box,
-          {
-            alignItems: value.length ? void 0 : "start",
-            display: "flex",
-            flexDirection: "column",
-            ref,
-            ...props,
-            children
-          }
-        )
-      }
-    ) });
-  }
-);
+//#endregion
+//#region src/pill-menu/PillMenuContext.ts
+const [PillMenuProvider, usePillMenuContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/PillMenu");
+//#endregion
+//#region src/pill-menu/PillMenu.tsx
+const EMPTY_LIST = [];
+/**
+* Dropdown menu for making selection with pills showing the selected items.
+*
+* @since 1.6.2
+* @experimental
+* @category data-display
+* @category overlay
+
+*/
+const PillMenu = (0, react.forwardRef)(({ children, defaultOpen = false, empty, inputValue, inputVisible = "always", loading, onInputValueChange, onOpenChange, open: openProp, options: optionsProp, placeholder, value: valueProp, ...props }, ref) => {
+	const [open, setOpen] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/PillMenu",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const options = optionsProp ?? valueProp ?? EMPTY_LIST;
+	const value = valueProp ?? (optionsProp ? optionsProp.filter((item) => require_Flex.resolveItemProperty(item.selected)) : EMPTY_LIST);
+	const [selectedKeys, setSelectedKeys] = (0, react.useState)(() => collectSelectedKeys(value));
+	const optionIndexes = (0, react.useMemo)(() => groupOptions(options, selectedKeys), [options, selectedKeys]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillMenuProvider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Menu, {
+			empty,
+			inputValue,
+			inputVisible,
+			loading,
+			onInputValueChange,
+			onOpenChange: (open) => {
+				setOpen(open);
+				if (open) setSelectedKeys(collectSelectedKeys(value));
+			},
+			open,
+			options: (0, react.useMemo)(() => optionIndexes.map(({ group, index }) => ({
+				...(optionsProp ?? valueProp ?? EMPTY_LIST)[index],
+				...group && { group: {
+					hidden: true,
+					label: group,
+					priority: 1e3,
+					separator: true
+				} }
+			})), [
+				optionIndexes,
+				optionsProp,
+				valueProp
+			]),
+			placeholder,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				alignItems: value.length ? void 0 : "start",
+				display: "flex",
+				flexDirection: "column",
+				ref,
+				...props,
+				children
+			})
+		})
+	});
+});
 PillMenu.displayName = "@optiaxiom/react/PillMenu";
-const groupOptions = (options) => options.map((option, index) => ({
-  index,
-  option
-})).sort(({ index: aIndex, option: a }, { index: bIndex, option: b }) => {
-  if (Flex.resolveItemProperty(a.selected) === Flex.resolveItemProperty(b.selected)) {
-    return aIndex - bIndex;
-  } else if (Flex.resolveItemProperty(a.selected)) {
-    return -1;
-  } else {
-    return 1;
-  }
-}).map(({ index, option }) => ({
-  group: Flex.resolveItemProperty(option.selected) ? "selected" : void 0,
-  index
+const optionKey = (option) => option.key ?? require_Flex.resolveItemProperty(option.label, { inputValue: void 0 });
+const collectSelectedKeys = (options) => new Set(options.map(optionKey));
+const groupOptions = (options, selectedKeys) => options.map((option, index) => ({
+	index,
+	option,
+	selected: selectedKeys.has(optionKey(option))
+})).sort(({ index: aIndex, selected: aSel }, { index: bIndex, selected: bSel }) => {
+	if (aSel === bSel) return aIndex - bIndex;
+	else if (aSel) return -1;
+	else return 1;
+}).map(({ index, selected }) => ({
+	group: selected ? "selected" : void 0,
+	index
 }));
-
-const PillMenuContent = React.forwardRef(
-  (props, ref) => {
-    const lastFocusRef = React.useRef();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.MenuContent,
-      {
-        onCloseAutoFocus: (event) => {
-          if (lastFocusRef.current instanceof HTMLElement && lastFocusRef.current !== document.body && document.body.contains(lastFocusRef.current)) {
-            event.preventDefault();
-            lastFocusRef.current.focus();
-          }
-          lastFocusRef.current = void 0;
-        },
-        onOpenAutoFocus: () => {
-          lastFocusRef.current = document.activeElement ?? void 0;
-        },
-        ref,
-        ...props
-      }
-    );
-  }
-);
+//#endregion
+//#region src/pill-menu/PillMenuContent.tsx
+/**
+* @group PillMenu
+*/
+const PillMenuContent = (0, react.forwardRef)((props, ref) => {
+	const lastFocusRef = (0, react.useRef)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.MenuContent, {
+		onCloseAutoFocus: (event) => {
+			if (lastFocusRef.current instanceof HTMLElement && lastFocusRef.current !== document.body && document.body.contains(lastFocusRef.current)) {
+				event.preventDefault();
+				lastFocusRef.current.focus();
+			}
+			lastFocusRef.current = void 0;
+		},
+		onOpenAutoFocus: () => {
+			lastFocusRef.current = document.activeElement ?? void 0;
+		},
+		ref,
+		...props
+	});
+});
 PillMenuContent.displayName = "@optiaxiom/react/PillMenuContent";
-
-const [RovingFocusProvider, useRovingFocusContext] = reactContext.createContext("@optiaxiom/react/RovingFocus");
-
-const Slot$1 = reactSlot.createSlot("@optiaxiom/react/RovingFocus");
-const RovingFocus = React.forwardRef(
-  ({ asChild, children, disabled, loop, orientation, ...props }, ref) => {
-    const FocusComp = disabled ? Flex.Box : RadixRovingFocus__namespace.Root;
-    const Comp = asChild ? Slot$1 : "div";
-    return /* @__PURE__ */ jsxRuntime.jsx(RovingFocusProvider, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(FocusComp, { asChild: true, ...!disabled && { loop, orientation }, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children }) }) }) });
-  }
-);
+//#endregion
+//#region src/roving-focus/RovingFocusContext.ts
+const [RovingFocusProvider, useRovingFocusContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/RovingFocus");
+//#endregion
+//#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 Comp = asChild ? Slot$1 : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RovingFocusProvider, {
+		disabled,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			asChild: true,
+			ref,
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusComp, {
+				asChild: true,
+				...!disabled && {
+					loop,
+					orientation
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, { children })
+			})
+		})
+	});
+});
 RovingFocus.displayName = "@optiaxiom/react/RovingFocus";
-
-const Slot = reactSlot.createSlot("@optiaxiom/react/RovingFocusItem");
-const RovingFocusItem = React.forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    const { disabled } = useRovingFocusContext(
-      "@optiaxiom/react/RovingFocusItem"
-    );
-    const FocusComp = disabled ? Flex.Box : RadixRovingFocus__namespace.Item;
-    const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(FocusComp, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children }) }) });
-  }
-);
+//#endregion
+//#region src/roving-focus/RovingFocusItem.tsx
+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 Comp = asChild ? Slot : "div";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusComp, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, { children })
+		})
+	});
+});
 RovingFocusItem.displayName = "@optiaxiom/react/RovingFocusItem";
-
-const PillMenuPill = React.forwardRef(
-  ({ item, onKeyDown, readOnly, ...props }, ref) => {
-    const { value: options } = usePillMenuContext(
-      "@optiaxiom/react/PillMenuPill"
-    );
-    const { open, setOpen } = Flex.useMenuContext("@optiaxiom/react/PillMenuPill");
-    const { inputValue } = Flex.useCommandContext("@optiaxiom/react/PillMenuPill");
-    const index = options.indexOf(item);
-    const hasInteractedInsideRef = React.useRef(false);
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.Tooltip, { content: Flex.resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(
-      Pill,
-      {
-        onClick: () => {
-          if (hasInteractedInsideRef.current) {
-            hasInteractedInsideRef.current = false;
-            return;
-          }
-          setOpen(!open);
-        },
-        onKeyDown: (event) => {
-          if (event.key === "Backspace") {
-            if (Flex.resolveItemProperty(item.disabledReason)) {
-              return;
-            }
-            if (index === 0 || index !== options.length - 1) {
-              event.key = index > 0 ? "ArrowLeft" : "ArrowRight";
-            }
-            item.execute?.({ dismiss: false, inputValue });
-          } else if (event.key === "ArrowDown") {
-            setOpen(!open);
-          }
-          onKeyDown?.(event);
-        },
-        onPointerDown: () => {
-          hasInteractedInsideRef.current = Boolean(open);
-        },
-        readOnly,
-        ref,
-        ...props,
-        children: Flex.resolveItemProperty(item.label, { inputValue })
-      }
-    ) });
-  }
-);
+//#endregion
+//#region src/pill-menu/PillMenuPill.tsx
+const PillMenuPill = (0, react.forwardRef)(({ item, onKeyDown, readOnly, ...props }, ref) => {
+	const { value: options } = usePillMenuContext("@optiaxiom/react/PillMenuPill");
+	const { open, setOpen } = require_Flex.useMenuContext("@optiaxiom/react/PillMenuPill");
+	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, {
+		content: require_Flex.resolveItemProperty(item.disabledReason),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pill, {
+			onClick: () => {
+				if (hasInteractedInsideRef.current) {
+					hasInteractedInsideRef.current = false;
+					return;
+				}
+				setOpen(!open);
+			},
+			onKeyDown: (event) => {
+				if (event.key === "Backspace") {
+					/**
+					* The last item is always tied to the trigger to look nicer
+					* visually. So we skip shifting focus when deleting the last item
+					* unless it's the only item as radix will automatically move focus
+					* back to last available item.
+					*/
+					if (require_Flex.resolveItemProperty(item.disabledReason)) return;
+					if (index === 0 || index !== options.length - 1) event.key = index > 0 ? "ArrowLeft" : "ArrowRight";
+					item.execute?.({
+						dismiss: false,
+						inputValue
+					});
+				} else if (event.key === "ArrowDown") setOpen(!open);
+				onKeyDown?.(event);
+			},
+			onPointerDown: () => {
+				hasInteractedInsideRef.current = Boolean(open);
+			},
+			readOnly,
+			ref,
+			...props,
+			children: require_Flex.resolveItemProperty(item.label, { inputValue })
+		})
+	});
+});
 PillMenuPill.displayName = "@optiaxiom/react/PillMenuPill";
-
-var root$1 = Flex.recipeRuntime({base:[{border:'1',rounded:'md',transition:'colors'},'_81mq41'],variants:{size:{md:'_9oh77o',lg:'_1cs7yyt'}}});
-var trigger = Flex.recipeRuntime({base:[{display:'grid',placeItems:'center',rounded:'md'},'_17hkfoy']});
-var wrapper = Flex.recipeRuntime({base:'_7funpn'});
-
+//#endregion
+//#region src/pill-menu/PillMenuTrigger.css.ts
+var root$1 = require_Flex.recipeRuntime({
+	base: [{
+		border: "1",
+		rounded: "md",
+		transition: "colors"
+	}, "obncnb"],
+	variants: { size: {
+		md: "umjyxm",
+		lg: "jm8kij"
+	} }
+});
+var trigger = require_Flex.recipeRuntime({ base: [{
+	display: "grid",
+	placeItems: "center",
+	rounded: "md"
+}, "vxaex6"] });
+var wrapper = require_Flex.recipeRuntime({ base: "yuifiq" });
+//#endregion
+//#region src/pill-menu/PillMenuTrigger.tsx
 const remapSize = {
-  md: "xs",
-  lg: "sm"
+	md: "xs",
+	lg: "sm"
 };
-const PillMenuTrigger = React.forwardRef(
-  ({ children, className, readOnly, size = "md", ...props }, outerRef) => {
-    const { value } = usePillMenuContext("@optiaxiom/react/PillMenuTrigger");
-    const { size: menuSize } = Flex.useMenuContext(
-      "@optiaxiom/react/PillMenuTrigger"
-    );
-    const { inputValue } = Flex.useCommandContext(
-      "@optiaxiom/react/PillMenuTrigger"
-    );
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Flex.Box, { ...wrapper(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        PillGroup,
-        {
-          asChild: true,
-          "data-readonly": readOnly,
-          ref,
-          role: "toolbar",
-          ...root$1({ size }, className),
-          ...props,
-          children: /* @__PURE__ */ jsxRuntime.jsxs(RovingFocus, { disabled: readOnly, loop: true, orientation: "horizontal", children: [
-            value.slice(0, -1).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              RovingFocusItem,
-              {
-                asChild: true,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  PillMenuPill,
-                  {
-                    item,
-                    readOnly,
-                    size: remapSize[size]
-                  }
-                )
-              },
-              item.key ?? Flex.resolveItemProperty(item.label, { inputValue })
-            )),
-            /* @__PURE__ */ jsxRuntime.jsxs(PillGroup, { children: [
-              value.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(RovingFocusItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                PillMenuPill,
-                {
-                  item: value[value.length - 1],
-                  readOnly,
-                  size: remapSize[size]
-                }
-              ) }, "pill"),
-              !readOnly && /* @__PURE__ */ jsxRuntime.jsx(RovingFocusItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Flex.MenuTrigger,
-                {
-                  "aria-label": props["aria-label"] ?? (typeof children === "string" ? children : void 0),
-                  asChild: true,
-                  onKeyDown: (event) => {
-                    if (event.defaultPrevented) {
-                      return;
-                    }
-                    if (event.key === "Backspace") {
-                      if (value.length) {
-                        const last = value.length - 1;
-                        if (!Flex.resolveItemProperty(value[last].disabledReason)) {
-                          value[last].execute?.({
-                            dismiss: false,
-                            inputValue
-                          });
-                        }
-                      }
-                    }
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Cover, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, size: remapSize[size], ...trigger(), children: /* @__PURE__ */ jsxRuntime.jsx("button", { children: /* @__PURE__ */ jsxRuntime.jsx(icons.IconPlus, { size: "16" }) }) }) })
-                }
-              ) }, "trigger")
-            ] })
-          ] })
-        }
-      ),
-      menuSize === "sm" && /* @__PURE__ */ jsxRuntime.jsx(Flex.PopoverAnchor, { staticRef: innerRef })
-    ] });
-  }
-);
+/**
+* @group PillMenu
+* @extends PillGroup
+*/
+const PillMenuTrigger = (0, react.forwardRef)(({ children, className, readOnly, size = "md", ...props }, outerRef) => {
+	const { value } = usePillMenuContext("@optiaxiom/react/PillMenuTrigger");
+	const { size: menuSize } = require_Flex.useMenuContext("@optiaxiom/react/PillMenuTrigger");
+	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, {
+		...wrapper(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillGroup, {
+			asChild: true,
+			"data-readonly": readOnly,
+			ref,
+			role: "toolbar",
+			...root$1({ size }, className),
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RovingFocus, {
+				disabled: readOnly,
+				loop: true,
+				orientation: "horizontal",
+				children: [value.slice(0, -1).map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RovingFocusItem, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillMenuPill, {
+						item,
+						readOnly,
+						size: remapSize[size]
+					})
+				}, item.key ?? require_Flex.resolveItemProperty(item.label, { inputValue }))), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PillGroup, { children: [value.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RovingFocusItem, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PillMenuPill, {
+						item: value[value.length - 1],
+						readOnly,
+						size: remapSize[size]
+					})
+				}, "pill"), !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RovingFocusItem, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.MenuTrigger, {
+						"aria-label": props["aria-label"] ?? (typeof children === "string" ? children : void 0),
+						asChild: true,
+						onKeyDown: (event) => {
+							if (event.defaultPrevented) return;
+							if (event.key === "Backspace") {
+								if (value.length) {
+									const last = value.length - 1;
+									if (!require_Flex.resolveItemProperty(value[last].disabledReason)) value[last].execute?.({
+										dismiss: false,
+										inputValue
+									});
+								}
+							}
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Cover, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+								asChild: true,
+								size: remapSize[size],
+								...trigger(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconPlus, { size: "16" }) })
+							})
+						})
+					})
+				}, "trigger")] })]
+			})
+		}), menuSize === "sm" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.PopoverAnchor, { staticRef: innerRef })]
+	});
+});
 PillMenuTrigger.displayName = "@optiaxiom/react/PillMenuTrigger";
-
-var control = Flex.recipeRuntime({base:[{bg:'transparent'},'_1pdyneh']});
-var fillValue = 'var(--_1kxctof)';
-var mark = Flex.recipeRuntime({base:[{transition:'colors'},'_125pvbc'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--_1pxpif3)';
-var range = Flex.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1bvo3k2']});
-var root = Flex.recipeRuntime({base:['_1banxdq',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'_4je7p7'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
-var thumb = Flex.recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_1ekenaf']});
-var track = Flex.recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'m699hn']});
-
+//#endregion
+//#region src/range/Range.css.ts
+var control = require_Flex.recipeRuntime({ base: [{ bg: "transparent" }, "lj07d7"] });
+var fillValue = "var(--_1eo2cc1)";
+var mark = require_Flex.recipeRuntime({
+	base: [{ transition: "colors" }, "nbtfvf"],
+	variants: { active: {
+		false: { color: "fg.secondary" },
+		true: {}
+	} }
+});
+var markValue = "var(--_1t88mzx)";
+var range = require_Flex.recipeRuntime({ base: [{
+	h: "full",
+	rounded: "inherit"
+}, "_2stc86"] });
+var root = require_Flex.recipeRuntime({
+	base: [
+		"_1oehj7r",
+		{
+			alignItems: "center",
+			color: "fg.default",
+			display: "flex",
+			fontSize: "md",
+			w: "full"
+		},
+		"_1rux8hu"
+	],
+	variants: {
+		marks: {
+			false: {},
+			true: { mb: "24" }
+		},
+		size: {
+			md: { h: "md" },
+			lg: { h: "lg" }
+		}
+	}
+});
+var thumb = require_Flex.recipeRuntime({ base: [{
+	border: "1",
+	rounded: "full",
+	shadow: "sm",
+	size: "xs"
+}, "la7ww5"] });
+var track = require_Flex.recipeRuntime({ base: [{
+	display: "flex",
+	flex: "1",
+	rounded: "full"
+}, "_1aswgqj"] });
+//#endregion
+//#region src/range/useTooltipState.tsx
 const useTooltipState = () => {
-  const [tooltipOpen, setTooltipOpen] = React.useState(false);
-  const timerRef = React.useRef();
-  return [
-    tooltipOpen,
-    (flag, delayed = false) => {
-      if (delayed) {
-        window.clearTimeout(timerRef.current);
-        timerRef.current = window.setTimeout(() => {
-          setTooltipOpen(flag);
-        }, 50);
-      } else {
-        window.clearTimeout(timerRef.current);
-        setTooltipOpen(flag);
-      }
-    }
-  ];
+	const [tooltipOpen, setTooltipOpen] = (0, react.useState)(false);
+	const timerRef = (0, react.useRef)();
+	return [tooltipOpen, (flag, delayed = false) => {
+		if (delayed) {
+			window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => {
+				setTooltipOpen(flag);
+			}, 50);
+		} else {
+			window.clearTimeout(timerRef.current);
+			setTooltipOpen(flag);
+		}
+	}];
 };
-
-const Range = 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 } = Flex.extractBoxProps(props);
-    const { descriptionId, error, errorId, inputId } = Flex.useFieldContext(
-      "@optiaxiom/react/Range"
-    );
-    const [value, setValue] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/Range",
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-      prop: valueProp
-    });
-    const fillValue$1 = `${(value - min) / (max - min)}`;
-    const [tooltipOpen, setTooltipOpen] = useTooltipState();
-    const isPointerInsideRef = React.useRef(false);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Flex.Box,
-      {
-        "data-disabled": disabled ? "" : void 0,
-        ...root({ marks: !!marks, size }, className),
-        ...boxProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Flex.Box,
-            {
-              style: dynamic.assignInlineVars({
-                [fillValue]: fillValue$1
-              }),
-              ...track(),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { ...range() }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Flex.Tooltip,
-                  {
-                    content: getLabel(value),
-                    disabled: disabled || !showTooltip,
-                    disableHoverableContent: true,
-                    open: tooltipOpen,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { ...thumb() })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Flex.Box,
-                  {
-                    "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
-                    "aria-disabled": disabled,
-                    "aria-invalid": error ? true : void 0,
-                    asChild: true,
-                    id: inputId,
-                    ref,
-                    ...control(),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        disabled,
-                        max,
-                        min,
-                        onBlur: () => {
-                          if (isPointerInsideRef.current) {
-                            return;
-                          }
-                          setTooltipOpen(false);
-                        },
-                        onChange: (event) => {
-                          setValue(Number(event.currentTarget.value));
-                          onChange?.(event);
-                        },
-                        onFocus: (event) => {
-                          if (event.currentTarget.matches(":focus-visible")) {
-                            setTooltipOpen(true);
-                          }
-                        },
-                        onKeyDown: () => {
-                          setTooltipOpen(true);
-                        },
-                        onPointerLeave: (event) => {
-                          isPointerInsideRef.current = false;
-                          if (!event.currentTarget.matches(":focus-visible")) {
-                            setTooltipOpen(false);
-                          }
-                        },
-                        onPointerMove: () => {
-                          isPointerInsideRef.current = true;
-                          setTooltipOpen(true, true);
-                        },
-                        step,
-                        type: "range",
-                        value,
-                        ...restProps
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          marks?.map(
-            (mark) => typeof mark === "number" ? {
-              label: getLabel(mark),
-              value: mark
-            } : mark
-          ).map((mark$1) => /* @__PURE__ */ jsxRuntime.jsx(
-            Flex.Box,
-            {
-              onClick: () => {
-                if (!disabled) {
-                  setValue(mark$1.value);
-                }
-              },
-              style: dynamic.assignInlineVars({
-                [markValue]: `${(mark$1.value - min) / (max - min)}`
-              }),
-              ...mark({ active: value >= mark$1.value }),
-              children: mark$1.label
-            },
-            mark$1.value
-          ))
-        ]
-      }
-    );
-  }
-);
+//#endregion
+//#region src/range/Range.tsx
+/**
+* Allow users to select a numeric value within a range.
+*
+* @category form
+* @since 1.7.12
+* @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 { 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",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	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, {
+		"data-disabled": disabled ? "" : void 0,
+		...root({
+			marks: !!marks,
+			size
+		}, className),
+		...boxProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.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, {
+					content: getLabel(value),
+					disabled: disabled || !showTooltip,
+					disableHoverableContent: true,
+					open: tooltipOpen,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, { ...thumb() })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+					"aria-describedby": errorId || descriptionId ? (0, clsx.default)(errorId, descriptionId) : void 0,
+					"aria-disabled": disabled,
+					"aria-invalid": error ? true : void 0,
+					asChild: true,
+					id: inputId,
+					ref,
+					...control(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						disabled,
+						max,
+						min,
+						onBlur: () => {
+							if (isPointerInsideRef.current) return;
+							setTooltipOpen(false);
+						},
+						onChange: (event) => {
+							setValue(Number(event.currentTarget.value));
+							onChange?.(event);
+						},
+						onFocus: (event) => {
+							if (event.currentTarget.matches(":focus-visible")) setTooltipOpen(true);
+						},
+						onKeyDown: () => {
+							setTooltipOpen(true);
+						},
+						onPointerLeave: (event) => {
+							isPointerInsideRef.current = false;
+							if (!event.currentTarget.matches(":focus-visible")) setTooltipOpen(false);
+						},
+						onPointerMove: () => {
+							isPointerInsideRef.current = true;
+							setTooltipOpen(true, true);
+						},
+						step,
+						type: "range",
+						value,
+						...restProps
+					})
+				})
+			]
+		}), marks?.map((mark) => typeof mark === "number" ? {
+			label: getLabel(mark),
+			value: mark
+		} : mark).map((mark$2) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			onClick: () => {
+				if (!disabled) setValue(mark$2.value);
+			},
+			style: (0, _vanilla_extract_dynamic.assignInlineVars)({ [markValue]: `${(mark$2.value - min) / (max - min)}` }),
+			...mark({ active: value >= mark$2.value }),
+			children: mark$2.label
+		}, mark$2.value))]
+	});
+});
 Range.displayName = "@optiaxiom/react/Range";
-
-const [SortableProvider, useSortableContext] = reactContext.createContext("@optiaxiom/react/Sortable");
-
-const Sortable = React.forwardRef(
-  ({ children, items: itemsProp, onChange, onItemsChange, ...props }, ref) => {
-    const [itemsState, setItemsState] = React.useState(null);
-    const items = itemsState === null ? itemsProp ?? [] : itemsState;
-    const cacheRef = React.useRef(/* @__PURE__ */ new Map());
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      react.DragDropProvider,
-      {
-        onDragEnd: (event) => {
-          const { source } = event.operation;
-          if (!source || itemsState === null) {
-            return;
-          }
-          if (!event.canceled) {
-            onChange?.({
-              items: itemsState,
-              source: source.id.toString()
-            });
-            onItemsChange?.(itemsState);
-          }
-          setItemsState(null);
-        },
-        onDragOver: (event) => {
-          const { source } = event.operation;
-          if (!source || itemsState === null) {
-            return;
-          }
-          setItemsState(helpers.move(itemsState, event));
-        },
-        onDragStart: () => {
-          setItemsState(itemsProp ?? []);
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(SortableProvider, { cacheRef, isSorting: itemsState !== null, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Group, { flexDirection: "column", gap: "16", ...props, ref, children: children?.(items) }) })
-      }
-    );
-  }
-);
+//#endregion
+//#region src/sortable/SortableContext.ts
+const [SortableProvider, useSortableContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Sortable");
+//#endregion
+//#region src/sortable/Sortable.tsx
+/**
+* Basic building blocks for sortable interfaces.
+*
+* @group Sortable
+* @category actions
+* @since 1.5.0
+* @experimental
+*/
+const Sortable = (0, react.forwardRef)(({ children, items: itemsProp, onChange, onItemsChange, ...props }, ref) => {
+	const [itemsState, setItemsState] = (0, react.useState)(null);
+	const items = itemsState === null ? itemsProp ?? [] : itemsState;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_react.DragDropProvider, {
+		onDragEnd: (event) => {
+			const { source } = event.operation;
+			if (!source || itemsState === null) return;
+			if (!event.canceled) {
+				onChange?.({
+					items: itemsState,
+					source: source.id.toString()
+				});
+				onItemsChange?.(itemsState);
+			}
+			setItemsState(null);
+		},
+		onDragOver: (event) => {
+			const { source } = event.operation;
+			if (!source || itemsState === null) return;
+			setItemsState((0, _dnd_kit_helpers.move)(itemsState, event));
+		},
+		onDragStart: () => {
+			setItemsState(itemsProp ?? []);
+		},
+		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, {
+				flexDirection: "column",
+				gap: "16",
+				...props,
+				ref,
+				children: children?.(items)
+			})
+		})
+	});
+});
 Sortable.displayName = "@optiaxiom/react/Sortable";
-
-const [SortableGroupProvider, useSortableGroupContext] = reactContext.createContext("@optiaxiom/react/SortableGroup", {
-  id: void 0,
-  setHasDropTarget: () => {
-  }
+//#endregion
+//#region src/sortable/SortableGroupContext.ts
+const [SortableGroupProvider, useSortableGroupContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/SortableGroup", {
+	id: void 0,
+	setHasDropTarget: () => {}
+});
+//#endregion
+//#region src/sortable/SortableGroup.tsx
+/**
+* @group Sortable
+*/
+const SortableGroup = (0, react.forwardRef)(({ children, group: id, ...props }, outerRef) => {
+	const [hasDropTarget, setHasDropTarget] = (0, react.useState)(false);
+	const { isDropTarget, ref: innerRef } = (0, _dnd_kit_react.useDroppable)({
+		accept: "item",
+		collisionPriority: 1,
+		id,
+		type: "group"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableGroupProvider, {
+		id,
+		setHasDropTarget,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Group, {
+			flexDirection: "column",
+			gap: "16",
+			ref: (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef),
+			...props,
+			children: typeof children === "function" ? children(isDropTarget || hasDropTarget) : children
+		})
+	});
 });
-
-const SortableGroup = React.forwardRef(
-  ({ children, group: id, ...props }, outerRef) => {
-    const [hasDropTarget, setHasDropTarget] = React.useState(false);
-    const { isDropTarget, ref: innerRef } = react.useDroppable({
-      accept: "item",
-      collisionPriority: 1,
-      id,
-      type: "group"
-    });
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(SortableGroupProvider, { id, setHasDropTarget, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Group, { flexDirection: "column", gap: "16", ref, ...props, children: typeof children === "function" ? children(isDropTarget || hasDropTarget) : children }) });
-  }
-);
 SortableGroup.displayName = "@optiaxiom/react/SortableGroup";
-
-var handle = Flex.recipeRuntime({base:'ptpwbh'});
-
-const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
-
-const SortableHandle = React.forwardRef(
-  ({ children, className, ...props }, outerRef) => {
-    const { handleRef, isDragging } = useSortableItemContext(
-      "@optiaxiom/react/SortableHandle"
-    );
-    const ref = reactComposeRefs.useComposedRefs(handleRef, outerRef);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Box,
-      {
-        "aria-label": "draggable",
-        "data-state": isDragging ? "active" : void 0,
-        ref,
-        ...handle({}, className),
-        ...props,
-        children
-      }
-    );
-  }
-);
+//#endregion
+//#region src/sortable/SortableHandle.css.ts
+var handle = require_Flex.recipeRuntime({ base: "_9rs2r5" });
+//#endregion
+//#region src/sortable/SortableItemContext.ts
+const [SortableItemProvider, useSortableItemContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/SortableItem");
+//#endregion
+//#region src/sortable/SortableHandle.tsx
+/**
+* @group Sortable
+*/
+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, {
+		"aria-label": "draggable",
+		"data-state": isDragging ? "active" : void 0,
+		ref,
+		...handle({}, className),
+		...props,
+		children
+	});
+});
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
-
-var item = Flex.recipeRuntime({base:'n6co9r',variants:{handle:{false:{},true:'_5dxjbj'}}});
-
-const SortableItem = React.forwardRef(
-  ({ children, className, index, item: id, ...props }, outerRef) => {
-    const { cacheRef, isSorting } = useSortableContext(
-      "@optiaxiom/react/SortableItem"
-    );
-    const { id: group, setHasDropTarget } = useSortableGroupContext(
-      "@optiaxiom/react/SortableItem"
-    );
-    const handleRef = React.useRef(null);
-    const {
-      isDragging,
-      isDropTarget,
-      ref: innerRef
-    } = sortable.useSortable({
-      accept: "item",
-      feedback: "clone",
-      group,
-      handle: handleRef,
-      id,
-      index,
-      type: "item"
-    });
-    React.useEffect(() => {
-      if (!isDropTarget) {
-        return;
-      }
-      setHasDropTarget(true);
-      return () => setHasDropTarget(false);
-    }, [setHasDropTarget, id, isDropTarget]);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    if (!isSorting) {
-      cacheRef.current.set(id, children);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(SortableItemProvider, { handleRef, isDragging, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Flex.Box,
-      {
-        "data-sortable-dragging": isDragging ? "" : void 0,
-        ref,
-        ...item({ handle: !handleRef.current }, className),
-        ...props,
-        children: cacheRef.current.get(id)
-      }
-    ) });
-  }
-);
+//#endregion
+//#region src/sortable/SortableItem.css.ts
+var item = require_Flex.recipeRuntime({
+	base: "_1hue1vx",
+	variants: { handle: {
+		false: {},
+		true: "_1erk46k"
+	} }
+});
+//#endregion
+//#region src/sortable/SortableItem.tsx
+/**
+* @group Sortable
+*/
+const SortableItem = (0, react.forwardRef)(({ children, className, index, item: id, ...props }, outerRef) => {
+	const { cacheRef, isSorting } = useSortableContext("@optiaxiom/react/SortableItem");
+	const { id: group, setHasDropTarget } = useSortableGroupContext("@optiaxiom/react/SortableItem");
+	const handleRef = (0, react.useRef)(null);
+	const { isDragging, isDropTarget, ref: innerRef } = (0, _dnd_kit_react_sortable.useSortable)({
+		accept: "item",
+		feedback: "clone",
+		group,
+		handle: handleRef,
+		id,
+		index,
+		type: "item"
+	});
+	(0, react.useEffect)(() => {
+		if (!isDropTarget) return;
+		setHasDropTarget(true);
+		return () => setHasDropTarget(false);
+	}, [
+		setHasDropTarget,
+		id,
+		isDropTarget
+	]);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	if (!isSorting) cacheRef.current.set(id, children);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortableItemProvider, {
+		handleRef,
+		isDragging,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+			"data-sortable-dragging": isDragging ? "" : void 0,
+			ref,
+			...item({ handle: !handleRef.current }, className),
+			...props,
+			children: cacheRef.current.get(id)
+		})
+	});
+});
 SortableItem.displayName = "@optiaxiom/react/SortableItem";
-
+//#endregion
+//#region src/spotlight/Spotlight.tsx
+/**
+* Command menu for search and application navigation.
+*
+* @experimental
+*/
 function Spotlight({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.Menu, { inputVisible: "always", size: "lg", ...props, children });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Menu, {
+		inputVisible: "always",
+		size: "lg",
+		...props,
+		children
+	});
 }
 Spotlight.displayName = "@optiaxiom/react/Spotlight";
-
-const SpotlightContent = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.MenuContent, { "aria-label": "Quick search", ref, ...props });
+//#endregion
+//#region src/spotlight/SpotlightContent.tsx
+/**
+* @group Spotlight
+*/
+const SpotlightContent = (0, react.forwardRef)((props, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.MenuContent, {
+		"aria-label": "Quick search",
+		ref,
+		...props
+	});
 });
 SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
-
+//#endregion
+//#region src/spotlight/SpotlightTrigger.tsx
 const DEFAULT_HOTKEY = "mod+K";
-const SpotlightTrigger = React.forwardRef(({ children, ...props }, ref) => {
-  const { open, setOpen } = Flex.useMenuContext("@optiaxiom/react/SpotlightTrigger");
-  useHotkeys([[DEFAULT_HOTKEY, () => setOpen(!open)]]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Flex.MenuTrigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.IconSearch, {}), children: /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { color: "fg.tertiary", children }) }) });
+/**
+* @group Spotlight
+*/
+const SpotlightTrigger = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { open, setOpen } = require_Flex.useMenuContext("@optiaxiom/react/SpotlightTrigger");
+	useHotkeys([[DEFAULT_HOTKEY, () => setOpen(!open)]]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.MenuTrigger, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Button, {
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons.IconSearch, {}),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+				color: "fg.tertiary",
+				children
+			})
+		})
+	});
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
-
+//#endregion
+//#region src/time/formatDate.ts
 const options = {
-  date: {
-    day: "numeric",
-    month: "short",
-    year: "numeric"
-  },
-  time: {
-    hour: "numeric",
-    minute: "numeric"
-  }};
+	date: {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	},
+	hideYear: { year: void 0 },
+	time: {
+		hour: "numeric",
+		minute: "numeric"
+	},
+	timeZone: { timeZoneName: "short" },
+	weekday: { weekday: "short" }
+};
 function formatDate(date, { showDate = true, showTime = false }) {
-  return date.toLocaleString(["default", "en-US"], {
-    ...showDate ? options.date : {},
-    ...showTime ? options.time : {}
-  });
+	return date.toLocaleString(["default", "en-US"], {
+		...showDate ? options.date : {},
+		...showTime ? options.time : {}
+	});
 }
-
-const Time = React.forwardRef(
-  ({ date, showDate = true, showTime, ...props }, ref) => {
-    const { boxProps, restProps } = Flex.extractBoxProps(props);
-    if (typeof date === "string") {
-      date = new Date(date);
-    }
-    const value = formatDate(date, { showDate, showTime });
-    return /* @__PURE__ */ jsxRuntime.jsx(Flex.Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: date.toISOString(), ref, ...restProps, children: value }) });
-  }
-);
-Time.displayName = "@optiaxiom/react/Time";
-
-exports.Calendar = Flex.Calendar;
-exports.DataTableHeaderCell = Flex.DataTableHeaderCell;
-exports.SuggestionAlert = Flex.SuggestionAlert;
-exports.SuggestionPopover = Flex.SuggestionPopover;
-exports.VisuallyHidden = Flex.VisuallyHidden;
-exports.createDialogKit = Flex.createDialogKit;
-exports.dialogkit = Flex.dialogkit;
-exports.useSurface = Flex.useSurface;
-Object.defineProperty(exports, "SurfaceProvider", {
-  enumerable: true,
-  get: function () { return globals.unstable_SurfaceProvider; }
+//#endregion
+//#region src/time/Time.tsx
+/**
+* A flexbox layout component for grouping items horizontally or vertically.
+*
+* @category data-display
+* @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, {
+		showDate,
+		showTime
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Box, {
+		asChild: true,
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+			dateTime: date.toISOString(),
+			ref,
+			...restProps,
+			children: value
+		})
+	});
 });
+Time.displayName = "@optiaxiom/react/Time";
+//#endregion
+exports.Calendar = require_Flex.Calendar;
 exports.DataTableExpandableCell = DataTableExpandableCell;
 exports.DataTableExpandableHeader = DataTableExpandableHeader;
+exports.DataTableHeaderCell = require_Flex.DataTableHeaderCell;
 exports.DetailsPanel = DetailsPanel;
 exports.DetailsPanelBody = DetailsPanelBody;
 exports.DetailsPanelFooter = DetailsPanelFooter;
@@ -1849,6 +2019,18 @@ exports.SortableItem = SortableItem;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
 exports.SpotlightTrigger = SpotlightTrigger;
+exports.SuggestionAlert = require_Flex.SuggestionAlert;
+exports.SuggestionPopover = require_Flex.SuggestionPopover;
+Object.defineProperty(exports, "SurfaceProvider", {
+	enumerable: true,
+	get: function() {
+		return _optiaxiom_globals.unstable_SurfaceProvider;
+	}
+});
 exports.Time = Time;
+exports.VisuallyHidden = require_Flex.VisuallyHidden;
+exports.createDialogKit = require_Flex.createDialogKit;
+exports.dialogkit = require_Flex.dialogkit;
 exports.useDialogKit = useDialogKit;
 exports.useFileUploadTrigger = useFileUploadTrigger;
+exports.useSurface = require_Flex.useSurface;