@optiaxiom/react 0.7.7 → 0.8.0

package/dist/index.js

@@ -56,6 +56,7 @@ export { DropdownMenuSubContent } from './packages/react/src/dropdown-menu-sub-c
 export { DropdownMenuSubTrigger } from './packages/react/src/dropdown-menu-sub-trigger/DropdownMenuSubTrigger.js';
 export { DropdownMenuTrigger } from './packages/react/src/dropdown-menu-trigger/DropdownMenuTrigger.js';
 export { Field } from './packages/react/src/field/Field.js';
+export { FieldLabel } from './packages/react/src/field-label/FieldLabel.js';
 export { Flex } from './packages/react/src/flex/Flex.js';
 export { Grid } from './packages/react/src/grid/Grid.js';
 export { Heading } from './packages/react/src/heading/Heading.js';
@@ -83,6 +84,7 @@ export { ListboxRadioItem } from './packages/react/src/listbox-radio-item/Listbo
 export { ListboxScrollArea } from './packages/react/src/listbox-scroll-area/ListboxScrollArea.js';
 export { ListboxSeparator } from './packages/react/src/listbox-separator/ListboxSeparator.js';
 export { MenuButton } from './packages/react/src/menu-button/MenuButton.js';
+export { ModalLayer } from './packages/react/src/modal-layer/ModalLayer.js';
 export { Pagination } from './packages/react/src/pagination/Pagination.js';
 export { Paper } from './packages/react/src/paper/Paper.js';
 export { Popover } from './packages/react/src/popover/Popover.js';

package/dist/node_modules/.pnpm/@mantine_hooks@7.14.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/parse-hotkey.js

@@ -0,0 +1,48 @@
+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
+  };
+}
+function isExactHotkey(hotkey, event) {
+  const { alt, ctrl, meta, mod, shift, key } = hotkey;
+  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = 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 && (pressedKey.toLowerCase() === key.toLowerCase() || event.code.replace("Key", "").toLowerCase() === key.toLowerCase())) {
+    return true;
+  }
+  return false;
+}
+function getHotkeyMatcher(hotkey) {
+  return (event) => isExactHotkey(parseHotkey(hotkey), event);
+}
+
+export { getHotkeyMatcher, parseHotkey };

package/dist/node_modules/.pnpm/@mantine_hooks@7.14.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/use-hotkeys.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { getHotkeyMatcher } from './parse-hotkey.js';
+
+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;
+}
+function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
+  useEffect(() => {
+    const keydownListener = (event) => {
+      hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
+        if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
+          if (options.preventDefault) {
+            event.preventDefault();
+          }
+          handler(event);
+        }
+      });
+    };
+    document.documentElement.addEventListener("keydown", keydownListener);
+    return () => document.documentElement.removeEventListener("keydown", keydownListener);
+  }, [hotkeys]);
+}
+
+export { useHotkeys };

package/dist/node_modules/.pnpm/@mantine_hooks@7.14.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-media-query/use-media-query.js

@@ -0,0 +1,36 @@
+import { useState, useRef, useEffect } from 'react';
+
+function attachMediaListener(query, callback) {
+  try {
+    query.addEventListener("change", callback);
+    return () => query.removeEventListener("change", callback);
+  } catch (e) {
+    query.addListener(callback);
+    return () => query.removeListener(callback);
+  }
+}
+function getInitialValue(query, initialValue) {
+  if (typeof window !== "undefined" && "matchMedia" in window) {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+}
+function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
+  getInitialValueInEffect: true
+}) {
+  const [matches, setMatches] = useState(
+    getInitialValueInEffect ? initialValue : getInitialValue(query)
+  );
+  const queryRef = useRef();
+  useEffect(() => {
+    if ("matchMedia" in window) {
+      queryRef.current = window.matchMedia(query);
+      setMatches(queryRef.current.matches);
+      return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
+    }
+    return void 0;
+  }, [query]);
+  return matches;
+}
+
+export { useMediaQuery };

package/dist/node_modules/.pnpm/@mantine_hooks@7.14.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import { useUncontrolled } from '../use-uncontrolled/use-uncontrolled.js';
+
+function range(start, end) {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, index) => index + start);
+}
+const DOTS = "dots";
+function usePagination({
+  total,
+  siblings = 1,
+  boundaries = 1,
+  page,
+  initialPage = 1,
+  onChange
+}) {
+  const _total = Math.max(Math.trunc(total), 0);
+  const [activePage, setActivePage] = useUncontrolled({
+    value: page,
+    onChange,
+    defaultValue: initialPage,
+    finalValue: initialPage
+  });
+  const setPage = (pageNumber) => {
+    if (pageNumber <= 0) {
+      setActivePage(1);
+    } else if (pageNumber > _total) {
+      setActivePage(_total);
+    } else {
+      setActivePage(pageNumber);
+    }
+  };
+  const next = () => setPage(activePage + 1);
+  const previous = () => setPage(activePage - 1);
+  const first = () => setPage(1);
+  const last = () => setPage(_total);
+  const paginationRange = useMemo(() => {
+    const totalPageNumbers = siblings * 2 + 3 + boundaries * 2;
+    if (totalPageNumbers >= _total) {
+      return range(1, _total);
+    }
+    const leftSiblingIndex = Math.max(activePage - siblings, boundaries);
+    const rightSiblingIndex = Math.min(activePage + siblings, _total - boundaries);
+    const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;
+    const shouldShowRightDots = rightSiblingIndex < _total - (boundaries + 1);
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = siblings * 2 + boundaries + 2;
+      return [...range(1, leftItemCount), DOTS, ...range(_total - (boundaries - 1), _total)];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = boundaries + 1 + 2 * siblings;
+      return [...range(1, boundaries), DOTS, ...range(_total - rightItemCount, _total)];
+    }
+    return [
+      ...range(1, boundaries),
+      DOTS,
+      ...range(leftSiblingIndex, rightSiblingIndex),
+      DOTS,
+      ...range(_total - boundaries + 1, _total)
+    ];
+  }, [_total, siblings, activePage]);
+  return {
+    range: paginationRange,
+    active: activePage,
+    setPage,
+    next,
+    previous,
+    first,
+    last
+  };
+}
+
+export { DOTS, usePagination };

package/dist/node_modules/.pnpm/@mantine_hooks@7.14.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-uncontrolled/use-uncontrolled.js

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+
+function useUncontrolled({
+  value,
+  defaultValue,
+  finalValue,
+  onChange = () => {
+  }
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    defaultValue !== void 0 ? defaultValue : finalValue
+  );
+  const handleUncontrolledChange = (val, ...payload) => {
+    setUncontrolledValue(val);
+    onChange?.(val, ...payload);
+  };
+  if (value !== void 0) {
+    return [value, onChange, true];
+  }
+  return [uncontrolledValue, handleUncontrolledChange, false];
+}
+
+export { useUncontrolled };

package/dist/node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../../../../../@reach_utils@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/utils/dist/reach-utils.js';
+
+var serverHandoffComplete = false;
+var id = 0;
+function genId() {
+  return ++id;
+}
+var maybeReactUseId = React["useId".toString()];
+function useId(providedId) {
+  if (maybeReactUseId !== void 0) {
+    let generatedId = maybeReactUseId();
+    return providedId ?? generatedId;
+  }
+  let initialId = providedId ?? (serverHandoffComplete ? genId() : null);
+  let [id2, setId] = React.useState(initialId);
+  useIsomorphicLayoutEffect(() => {
+    if (id2 === null) {
+      setId(genId());
+    }
+  }, []);
+  React.useEffect(() => {
+    if (serverHandoffComplete === false) {
+      serverHandoffComplete = true;
+    }
+  }, []);
+  return providedId ?? id2 ?? void 0;
+}
+
+export { useId };

package/dist/node_modules/.pnpm/@reach_utils@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/utils/dist/reach-utils.js

@@ -0,0 +1,21 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+/**
+  * @reach/utils v0.18.0
+  *
+  * Copyright (c) 2018-2022, React Training LLC
+  *
+  * This source code is licensed under the MIT license found in the
+  * LICENSE.md file in the root directory of this source tree.
+  *
+  * @license MIT
+  */
+
+
+// src/can-use-dom.ts
+function canUseDOM() {
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
+}
+var useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect;
+
+export { canUseDOM, useIsomorphicLayoutEffect };

package/dist/node_modules/.pnpm/framer-motion@11.13.1_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
-import { useId } from '@reach/auto-id';
+import { useId } from '../../../../../../../@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
 import { PresenceContext } from '../../context/PresenceContext.js';
 import { useConstant } from '../../utils/use-constant.js';
 

package/dist/node_modules/.pnpm/framer-motion@11.13.1_patch_hash_fcf7jjqh4eojsxb6ugcpywnnuy_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.js

@@ -1,4 +1,4 @@
-import { useId } from '@reach/auto-id';
+import { useId } from '../../../../../../../@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
 import { useContext, useEffect, useCallback } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.js';
 

package/dist/packages/react/package.json.js

@@ -1,3 +1,3 @@
-var version = "0.7.7";
+var version = "0.8.0";
 
 export { version };

package/dist/packages/react/src/alert/Alert-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'xs',justifyContent:'space-between',p:'sm',pr:'md',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
+var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',justifyContent:'space-between',p:'12',pr:'16',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
 var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { alert, icon };

package/dist/packages/react/src/alert/Alert.js

@@ -1,24 +1,24 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId } from '@reach/auto-id';
+import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
 import { forwardRef, createElement } from 'react';
 import { AlertContextProvider } from '../alert-context/AlertContext.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
-import { IconCircleCheckFilled } from '../icons/IconCircleCheckFilled.js';
-import { IconCircleExclamationFilled } from '../icons/IconCircleExclamationFilled.js';
-import { IconCircleInfoFilled } from '../icons/IconCircleInfoFilled.js';
-import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationFilled.js';
+import { IconCircleCheckSolid } from '../icons/IconCircleCheckSolid.js';
+import { IconCircleExclamationSolid } from '../icons/IconCircleExclamationSolid.js';
+import { IconCircleInfoSolid } from '../icons/IconCircleInfoSolid.js';
+import { IconTriangleExclamationSolid } from '../icons/IconTriangleExclamationSolid.js';
 import { IconX } from '../icons/IconX.js';
 import { alert, icon } from './Alert-css.js';
 
 const mapIntentToIcon = {
-  danger: IconCircleExclamationFilled,
-  information: IconCircleInfoFilled,
-  neutral: IconCircleInfoFilled,
-  success: IconCircleCheckFilled,
-  warning: IconTriangleExclamationFilled
+  danger: IconCircleExclamationSolid,
+  information: IconCircleInfoSolid,
+  neutral: IconCircleInfoSolid,
+  success: IconCircleCheckSolid,
+  warning: IconTriangleExclamationSolid
 };
 const Alert = forwardRef(
   ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
@@ -35,7 +35,7 @@ const Alert = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
+          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,
             {

package/dist/packages/react/src/alert-dialog-body/AlertDialogBody-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',px:'24',py:'16'}]});

package/dist/packages/react/src/alert-dialog-content/AlertDialogContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-CsVX7tyj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-BWOQFnSz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var container = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_1ug8j88']});
-var content = recipeRuntime({base:[{display:'flex',flexDirection:'column'},'_84selg'],variants:{size:{sm:'dfz899',md:'_1stm9jr',lg:'_1n0e1yw'}}});
+var container = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_1db3ot3']});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1ppr2cd'],variants:{size:{sm:'_147qypv',md:'_1k2uz21',lg:'_1xxrh2x'}}});
 
 export { container, content };

package/dist/packages/react/src/alert-dialog-footer/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-B1iPu0c4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-XLxmsBbj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_1lfkftn']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'16',justifyContent:'end',px:'24',py:'20'},'_1vlr6cy']});
 
 export { footer };

package/dist/packages/react/src/alert-dialog-title/AlertDialogTitle.js

@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { Heading } from '../heading/Heading.js';
 import { Icon } from '../icon/Icon.js';
-import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationFilled.js';
+import { IconTriangleExclamationSolid } from '../icons/IconTriangleExclamationSolid.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -15,8 +15,8 @@ import { fallbackSpan } from '../utils/fallbackSpan.js';
 
 const AlertDialogTitle = forwardRef(({ addonBefore, children, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", p: "lg", pb: "md", ...sprinkleProps, children: [
-    /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore ? fallbackSpan(addonBefore) : /* @__PURE__ */ jsx(IconTriangleExclamationFilled, {}) }),
+  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", p: "24", pb: "16", ...sprinkleProps, children: [
+    /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore ? fallbackSpan(addonBefore) : /* @__PURE__ */ jsx(IconTriangleExclamationSolid, {}) }),
     /* @__PURE__ */ jsx(
       Heading,
       {

package/dist/packages/react/src/autocomplete-content/AutocompleteContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-BoMb4Ur1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-BgxKhr-0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'_53spj4']});
+var content = recipeRuntime({base:[{p:'4'},'_1e4bsnr']});
 
 export { content };

package/dist/packages/react/src/autocomplete-content/AutocompleteContent.js

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
 import { Box } from '../box/Box.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
-import { RemoveScroll } from '../remove-scroll/RemoveScroll.js';
+import { ModalLayer } from '../modal-layer/ModalLayer.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { AutocompleteContentImpl } from './AutocompleteContentImpl.js';
 
@@ -14,7 +14,7 @@ const AutocompleteContent = forwardRef(({ children, loading, ...props }, ref) =>
   const { isOpen, items } = useAutocompleteContext("AutocompleteContent");
   return isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Box, { role: "status", children: loading ? "Loading" : `${items.length} option${items.length === 1 ? "" : "s"} available` }) }) }),
-    /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(RemoveScroll, { children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, minW: "trigger", provider: "popper", ...props, children: /* @__PURE__ */ jsx(AutocompleteContentImpl, { ref, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) }) })
+    /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, minW: "trigger", provider: "popper", ...props, children: /* @__PURE__ */ jsx(AutocompleteContentImpl, { ref, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) }) })
   ] });
 });
 AutocompleteContent.displayName = "@optiaxiom/react/AutocompleteContent";

package/dist/packages/react/src/autocomplete-content/AutocompleteContentImpl.js

@@ -1,7 +1,5 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
-import { useFocusGuards } from '@radix-ui/react-focus-guards';
 import { PopperContent } from '@radix-ui/react-popper';
 import { forwardRef } from 'react';
 import { CommandListbox } from '../command-listbox/CommandListbox.js';
@@ -9,8 +7,7 @@ import { content } from './AutocompleteContent-css.js';
 
 const AutocompleteContentImpl = forwardRef(
   ({ align = "center", children, className, sideOffset = 5, ...props }, ref) => {
-    useFocusGuards();
-    return /* @__PURE__ */ jsx(DismissableLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       CommandListbox,
       {
         asChild: true,
@@ -19,7 +16,7 @@ const AutocompleteContentImpl = forwardRef(
         ...props,
         children: /* @__PURE__ */ jsx(PopperContent, { align, sideOffset, children })
       }
-    ) });
+    );
   }
 );
 AutocompleteContentImpl.displayName = "@optiaxiom/react/AutocompleteContentImpl";

package/dist/packages/react/src/autocomplete-empty/AutocompleteEmpty.js

@@ -12,7 +12,7 @@ const AutocompleteEmpty = forwardRef(({ children, ...props }, ref) => {
       display: "flex",
       flexDirection: "column",
       fontSize: "md",
-      p: "md",
+      p: "16",
       ref,
       ...props,
       children: children || "No options"

package/dist/packages/react/src/autocomplete-trigger/AutocompleteTrigger.js

@@ -29,12 +29,12 @@ const AutocompleteTrigger = forwardRef((props, ref) => {
               {
                 cursor: disabled ? "default" : "pointer",
                 onClick: () => setSelectedItem(null),
-                w: "32",
+                w: "md",
                 children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconX, { "aria-hidden": true, focusable: false }) })
               }
             ),
-            /* @__PURE__ */ jsx(Separator, { my: "xs", orientation: "vertical" }),
-            /* @__PURE__ */ jsx(Flex, { asChild: true, w: "32", children: /* @__PURE__ */ jsx(CommandToggleButton, { "aria-label": "Toggle", disabled, children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconAngleDown, { "aria-hidden": true, focusable: false }) }) }) })
+            /* @__PURE__ */ jsx(Separator, { my: "8", orientation: "vertical" }),
+            /* @__PURE__ */ jsx(Flex, { asChild: true, w: "md", children: /* @__PURE__ */ jsx(CommandToggleButton, { "aria-label": "Toggle", disabled, children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconAngleDown, { "aria-hidden": true, focusable: false }) }) }) })
           ]
         }
       ),

package/dist/packages/react/src/avatar/Avatar-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DPVF9K5Q.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DLh8X3n8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DQf8X4KK.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-BcxQyIYb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'f8sptn'],variants:{colorScheme:{neutral:{bg:'avatar.bg.neutral',color:'avatar.fg.neutral'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_1eid8kq'],sm:[{fontSize:'xs',size:'sm'},'d116h0'],md:[{fontSize:'md',size:'md'},'_1pi7gfh'],lg:[{fontSize:'lg',size:'lg'},'_5e985t'],xl:[{fontSize:'2xl',size:'xl'},'jbzaxd'],'5xl':[{fontSize:'4xl',size:'5xl'},'_1duarq2']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'_1yfnqsu'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'hrn06'],sm:[{fontSize:'xs',size:'sm'},'rrpxq4'],md:[{fontSize:'md',size:'md'},'wdtwrk'],lg:[{fontSize:'lg',size:'lg'},'n7qblm'],xl:[{fontSize:'2xl',size:'xl'},'_1p7e8m9'],'3xl':[{fontSize:'4xl',size:'3xl'},'_1qkscyw']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
-var icon = recipeRuntime({base:[{h:'auto'}],variants:{size:{xs:{w:'12'},sm:{w:'12'},md:{w:'16'},lg:{w:'20'},xl:{w:'20'},'5xl':{w:'32'}}}});
+var icon = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 
 export { avatar, fallback, icon };

package/dist/packages/react/src/avatar/Avatar.js

@@ -4,6 +4,8 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import { forwardRef, useContext } from 'react';
 import { AvatarContext } from '../avatar-context/AvatarContext.js';
 import { Box } from '../box/Box.js';
+import { IconUserSolid } from '../icons/IconUserSolid.js';
+import { IconUsersSolid } from '../icons/IconUsersSolid.js';
 import { avatar, fallback, icon } from './Avatar-css.js';
 
 function getInitialsFromName(name) {
@@ -12,11 +14,16 @@ function getInitialsFromName(name) {
   const lastName = names.length > 1 ? names[names.length - 1] : "";
   return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
 }
+const mapFallbackToIcon = {
+  team: /* @__PURE__ */ jsx(IconUsersSolid, {}),
+  user: /* @__PURE__ */ jsx(IconUserSolid, {})
+};
 const Avatar = forwardRef(
   ({
     children,
     className,
     colorScheme = "neutral",
+    fallback: fallback$1 = "user",
     icon: icon$1,
     name,
     size: sizeProp,
@@ -33,7 +40,7 @@ const Avatar = forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, children: [
           src && /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name, src }) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : void 0, children: icon$1 ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : name ? getInitialsFromName(name) : children }) })
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: src ? 600 : void 0, children: icon$1 ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : name ? getInitialsFromName(name) : children || /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
         ] })
       }
     );

package/dist/packages/react/src/avatar-group/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DPVF9K5Q.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DQf8X4KK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['ygvc1v',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['_10ud605',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-C-Ta-72C.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DEuRARWr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1a76112']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'hhp2fr']});
 
 export { backdrop };

package/dist/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-B8PnEnIy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-CHk_Hm4E.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_10904u4'],variants:{intent:{danger:'_2mt8zu',information:'q5xbhl',neutral:'_164ms55',primary:'_1rm3pqe',success:'_1lyd61c',warning:'qlvqa7'},variant:{light:'_15hwc3c',solid:'_1mjhl35'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_2kjgd4'],variants:{intent:{danger:'_19hicqr',information:'_15mvcnq',neutral:'dhyfwr',primary:'yz45w2',success:'_1uwi35j',warning:'yls0bp'},variant:{light:'kmu6ei',solid:'_2al6wa'}}});
 
 export { badge };

package/dist/packages/react/src/badge/Badge.js

@@ -19,7 +19,6 @@ const Badge = forwardRef(
       Text,
       {
         asChild: true,
-        role: "presentation",
         ...badge({ intent, variant }, className),
         ...props,
         children: /* @__PURE__ */ jsx(Comp, { ref, children })

package/dist/packages/react/src/banner/Banner-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
+var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
 var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { banner, icon };