@optiaxiom/react 0.8.2 → 0.10.0

package/dist/packages/react/src/listbox-item/ListboxItem.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 import { Slot } from '@radix-ui/react-slot';
-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 } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
 import { Text } from '../text/Text.js';
@@ -30,7 +32,7 @@ const ListboxItem = forwardRef(
     return /* @__PURE__ */ jsx(
       Flex,
       {
-        "aria-describedby": description$1 ? descriptionId : void 0,
+        "aria-describedby": description$1 ? descriptionId : undefined,
         "aria-labelledby": labelId,
         asChild: true,
         ref,

package/dist/packages/react/src/listbox-item-indicator/ListboxItemIndicator.js

@@ -2,17 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { IconCheck } from '../icons/IconCheck.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
-const ListboxItemIndicator = forwardRef(({ active, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
+const ListboxItemIndicator = forwardRef(({ active, children, className, ...props }, ref) => {
+  const { boxProps, restProps } = extractBoxProps(props);
   if (!active) {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "0", w: "xs", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, className, h: "0", w: "xs", ...boxProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
   }
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
+  return (
+    // @ts-expect-error -- too complex
+    /* @__PURE__ */ jsx(Box, { asChild: true, className, ref, ...props, children: children ?? /* @__PURE__ */ jsx(IconCheck, {}) })
+  );
 });
 ListboxItemIndicator.displayName = "@optiaxiom/react/ListboxItemIndicator";
 

package/dist/packages/react/src/listbox-label/ListboxLabel.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useListboxGroupContext } from '../listbox-group-context/ListboxGroupContext.js';
 
 const ListboxLabel = forwardRef(

package/dist/packages/react/src/listbox-scroll-area/ListboxScrollArea.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const ListboxScrollArea = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(

package/dist/packages/react/src/menu-listbox/MenuListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-l4UA2n3T.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-CpbOp7yG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'y3bn58'],variants:{minW:{'0':{},trigger:'_15sy2mo'},provider:{'dropdown-menu':'_1psasr',popover:'clf3ek',popper:'l7mnih'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1n62ao6'],variants:{maxH:{xs:'_11tw9sz',sm:'b3c7d6',md:'n2ii9j',lg:'s4owt9',full:{}},minW:{'0':{},trigger:'_1ubpn6f'},provider:{'dropdown-menu':'_173qrnw',popover:'_12lizdn',popper:'_1kxbhti'}}});
 
 export { listbox };

package/dist/packages/react/src/menu-listbox/MenuListbox.js

@@ -7,11 +7,11 @@ import { Transition } from '../transition/Transition.js';
 import { listbox } from './MenuListbox-css.js';
 
 const MenuListbox = forwardRef(
-  ({ children, className, minW, provider = "popover", ...props }, ref) => /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, children: /* @__PURE__ */ jsx(
+  ({ children, className, maxH, minW, provider = "popover", ...props }, ref) => /* @__PURE__ */ jsx(Transition, { duration: "sm", type: "pop", children: /* @__PURE__ */ jsx(Paper, { asChild: true, children: /* @__PURE__ */ jsx(
     Listbox,
     {
       ref,
-      ...listbox({ minW, provider }, className),
+      ...listbox({ maxH, minW, provider }, className),
       ...props,
       children
     }

package/dist/packages/react/src/nested-dialog-context/NestedDialogContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [NestedDialogContextProvider, useNestedDialogContext] = createContext("NestedDialog", null);
+
+export { NestedDialogContextProvider, useNestedDialogContext };

package/dist/packages/react/src/nested-dialog-context/useNestedDialogCount.js

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+import { useNestedDialogContext } from './NestedDialogContext.js';
+
+function useNestedDialogCount(name, open) {
+  const { onCountChange } = useNestedDialogContext(name) ?? {};
+  const [nestedDialogCount, setNestedDialogCount] = useState(0);
+  useEffect(() => {
+    if (!onCountChange) {
+      return;
+    }
+    onCountChange(open ? nestedDialogCount + 1 : 0);
+  }, [nestedDialogCount, onCountChange, open]);
+  const isRootDialog = !onCountChange;
+  return [isRootDialog, nestedDialogCount, setNestedDialogCount];
+}
+
+export { useNestedDialogCount };

package/dist/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-C_z8svbw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BHMR9cI8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'iahczk'});
-var cursor = recipeRuntime({base:[{z:'10'},'_175fayo'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'ln5mak']});
+var button = recipeRuntime({base:'f3j28'});
+var cursor = recipeRuntime({base:[{z:'10'},'wagb9o'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1gihx9t']});
 
 export { button, cursor, list };

package/dist/packages/react/src/pagination/Pagination.js

@@ -4,6 +4,8 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Button } from '../button/Button.js';
 import { ButtonBase } from '../button-base/ButtonBase.js';
 import { Flex } from '../flex/Flex.js';
@@ -13,7 +15,7 @@ import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { list, cursor, button } from './Pagination-css.js';
-import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@7.15.1_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
+import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
 
 const Pagination = forwardRef(
   ({ defaultPage, disabled, onPageChange, page: pageProp, total, ...props }, ref) => {
@@ -89,10 +91,10 @@ const Pagination = forwardRef(
             ButtonBase,
             {
               appearance: "subtle",
-              "aria-current": active === page ? "page" : void 0,
+              "aria-current": active === page ? "page" : undefined,
               disabled,
               onClick: () => setPage(page),
-              ref: active === page ? activeRef : void 0,
+              ref: active === page ? activeRef : undefined,
               ...button(),
               children: [
                 /* @__PURE__ */ jsx(VisuallyHidden, { children: "page" }),

package/dist/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},drawer:{},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'}}}});

package/dist/packages/react/src/paper/Paper.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { paper } from './Paper-css.js';
 
 const Paper = forwardRef(

package/dist/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-BSJiY-na.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-B0H5ESHh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_4vh52t'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_1wq5mdz'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
 
 export { pill };

package/dist/packages/react/src/popover-anchor/PopoverAnchor.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const PopoverAnchor = forwardRef(
   ({ asChild, children, ...props }, ref) => {

package/dist/packages/react/src/popover-content/PopoverContent.js

@@ -3,9 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { theme } from '@optiaxiom/globals';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { usePopoverContext } from '../popover-context/PopoverContext.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
@@ -13,7 +13,7 @@ import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
 const PopoverContent = forwardRef(
   ({ align = "start", children, sideOffset = 2, withArrow, ...props }, ref) => {
     const { open } = usePopoverContext("PopoverContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
       MenuListbox,
       {
         asChild: true,

package/dist/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-CRcfDKun.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-BcjeNZvD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_2ue1gl']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1qf1ifw']});
 
 export { indicator, progress };

package/dist/packages/react/src/progress/Progress.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { progress, indicator } from './Progress-css.js';
 
 const Progress = forwardRef(

package/dist/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DaiPcs9V.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-wh6Kjw9Q.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CKQ2Aadr.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-C5sxqXEH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'qfzx1k'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_106e9bu']});
-var input = recipeRuntime({base:'d3i63d'});
-var radio = recipeRuntime({base:'crsq45'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_13ym2b5'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1p43e78']});
+var input = recipeRuntime({base:'aqaeym'});
+var radio = recipeRuntime({base:'_1m88ksa'});
 
 export { control, indicator, input, radio };

package/dist/packages/react/src/radio/Radio.js

@@ -2,10 +2,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { useRadioGroupContext } from '../radio-group-context/RadioGroupContext.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { ToggleInput } from '../toggle-input/ToggleInput.js';
 import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
 import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
@@ -25,7 +23,7 @@ const Radio = forwardRef(
     onChange,
     ...props
   }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const groupContext = useRadioGroupContext("Radio");
     if (groupContext) {
       if ("checked" in props) {
@@ -33,7 +31,7 @@ const Radio = forwardRef(
           `Cannot use \`checked\` prop when \`Radio\` is used within \`RadioGroup\``
         );
       }
-      if (props.value === void 0) {
+      if (props.value === undefined) {
         throw new Error(
           `Must use \`value\` prop when \`Radio\` is used within \`RadioGroup\``
         );
@@ -44,13 +42,13 @@ const Radio = forwardRef(
       {
         description: !!description,
         ...radio({}, className),
-        ...sprinkleProps,
+        ...boxProps,
         children: [
           /* @__PURE__ */ jsx(
             ToggleInputHiddenInput,
             {
-              checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
-              defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
+              checked: groupContext?.value !== undefined ? groupContext.value === props.value : undefined,
+              defaultChecked: groupContext?.defaultValue !== undefined ? groupContext.defaultValue === props.value : undefined,
               disabled: groupContext?.disabled ?? disabled,
               name: groupContext?.name ?? name,
               onBlur: groupContext?.onBlur ?? onBlur,

package/dist/packages/react/src/search-input/SearchInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CaLykiH1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-B2d30-S5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1u4xfds']});
-var search = recipeRuntime({base:'_1ulr8fe'});
+var clear = recipeRuntime({base:[{size:'sm'},'_15wg88j']});
+var search = recipeRuntime({base:'_3vse1v'});
 
 export { clear, search };

package/dist/packages/react/src/select-content/SelectContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-BnpWp8VE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-WG6yp2If.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_13udu6r']});
+var content = recipeRuntime({base:['_1kdkfjf']});
 
 export { content };

package/dist/packages/react/src/select-content/SelectContent.js

@@ -1,18 +1,40 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { PopperContent } from '@radix-ui/react-popper';
 import { Portal } from '@radix-ui/react-portal';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { ModalLayer } from '../modal-layer/ModalLayer.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
 import { Spinner } from '../spinner/Spinner.js';
-import { SelectContentImpl } from './SelectContentImpl.js';
+import { content } from './SelectContent-css.js';
 
 const SelectContent = forwardRef(
-  ({ children, loading, ...props }, ref) => {
-    const { isOpen } = useSelectContext("SelectContent");
-    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "popper", children: /* @__PURE__ */ jsx(SelectContentImpl, { ref, ...props, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) }) });
+  ({
+    align = "start",
+    children,
+    className,
+    loading,
+    side = "bottom",
+    ...props
+  }, ref) => {
+    const { boxProps, restProps } = extractBoxProps(props);
+    const { downshift, isOpen } = useSelectContext("SelectContent");
+    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+      MenuListbox,
+      {
+        asChild: true,
+        maxH: "sm",
+        minW: loading ? "trigger" : undefined,
+        provider: "popper",
+        ...content({}, className),
+        ...boxProps,
+        ...downshift.getMenuProps({ ref, ...restProps }),
+        children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset: 5, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children })
+      }
+    ) }) });
   }
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";

package/dist/packages/react/src/select-item/SelectItem.js

@@ -2,24 +2,22 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { useSelectContext } from '../select-context/SelectContext.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { useSelectContext } from '../select-context/SelectContext.js';
 
 const SelectItem = forwardRef(
-  ({ children, item, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, item, size, ...props }, ref) => {
     const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
-    const itemProps = downshift.getItemProps({ item, ...restProps });
+    const itemProps = downshift.getItemProps({ item, ...props });
     return /* @__PURE__ */ jsx(
       Box,
       {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        "data-selected": selectedItem === item ? "" : void 0,
+        "data-disabled": itemProps["aria-disabled"] ? "" : undefined,
+        "data-highlighted": highlightedItem === item ? "" : undefined,
+        "data-selected": selectedItem === item ? "" : undefined,
         ref,
-        ...sprinkleProps,
+        size,
         ...itemProps,
         children
       }

package/dist/packages/react/src/select-value/SelectValue.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
 
 const SelectValue = forwardRef(

package/dist/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-DV5lkUl8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-3S55fa_d.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_wcbutaohqjnkd6euht5r5xgz74/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'ndd967',md:'ft7h3i',base:'_1a3bffl'},defaultClass:'_1a3bffl'},vertical:{conditions:{sm:'_17gl5nd',md:'_9aivn3',base:'_1aos1qy'},defaultClass:'_1aos1qy'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1nn13m4',md:'ucf76u',base:'tqfy3c'},defaultClass:'tqfy3c'},vertical:{conditions:{sm:'_140fjwy',md:'_1regt9n',base:'pq6ys8'},defaultClass:'pq6ys8'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/packages/react/src/separator/Separator.js

@@ -4,6 +4,8 @@ import * as RadixSeparator from '@radix-ui/react-separator';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { base, separator } from './Separator-css.js';
 
 const Separator = forwardRef(

package/dist/packages/react/src/sidenav/Sidenav.js

@@ -33,7 +33,7 @@ const Sidenav = forwardRef(
           setAnimations(true);
           setExpanded(flag);
         },
-        children: /* @__PURE__ */ jsx(Flex, { borderR: "1", w: "fit", ...props, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Flex, { borderR: "1", h: "full", w: "fit", ...props, children: /* @__PURE__ */ jsx(
           Flex,
           {
             asChild: true,
@@ -43,7 +43,7 @@ const Sidenav = forwardRef(
             overflow: "hidden",
             pb: "8",
             pt: "16",
-            transition: animations ? "all" : void 0,
+            transition: animations ? "all" : undefined,
             w: expanded ? "224" : "56",
             children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", ref, children })
           }

package/dist/packages/react/src/sidenav-account-item/SidenavAccountItem.js

@@ -1,16 +1,19 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Flex } from '../flex/Flex.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 import { useSidenavContext } from '../sidenav-context/SidenavContext.js';
 import { Text } from '../text/Text.js';
 import { Transition } from '../transition/Transition.js';
 
-const SidenavAccountItem = forwardRef(({ avatar, name, organization, ...props }, ref) => {
+const SidenavAccountItem = forwardRef(({ name, organization, src, ...props }, ref) => {
   const { animations, expanded } = useSidenavContext("SidenavAccountItem");
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "8", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Flex, { my: "8", role: "listitem", children: /* @__PURE__ */ jsx(
     Flex,
     {
       asChild: true,
@@ -21,7 +24,17 @@ const SidenavAccountItem = forwardRef(({ avatar, name, organization, ...props },
       textAlign: "start",
       ...props,
       children: /* @__PURE__ */ jsxs("button", { ref, children: [
-        /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", my: "2", rounded: "sm", children: avatar }),
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            "aria-hidden": true,
+            flex: "none",
+            my: "2",
+            name,
+            rounded: "sm",
+            src
+          }
+        ),
         expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsxs(Flex, { flex: "1", flexDirection: "row", gap: "8", overflowX: "hidden", children: [
           /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
             /* @__PURE__ */ jsx(Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
@@ -31,7 +44,7 @@ const SidenavAccountItem = forwardRef(({ avatar, name, organization, ...props },
         ] }) })
       ] })
     }
-  ) }) });
+  ) });
 });
 SidenavAccountItem.displayName = "@optiaxiom/react/SidenavAccountItem";
 

package/dist/packages/react/src/sidenav-body/SidenavBody.js

@@ -2,26 +2,23 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const SidenavBody = forwardRef(
   ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
     return /* @__PURE__ */ jsx(
       Flex,
       {
-        asChild: true,
         flex: "1",
         gap: "4",
         justifyContent: "start",
         overflowX: "hidden",
         overflowY: "auto",
         py: "8",
+        ref,
+        role: "list",
         w: "full",
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })
+        ...props,
+        children
       }
     );
   }

package/dist/packages/react/src/sidenav-footer/SidenavFooter.js

@@ -2,23 +2,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const SidenavFooter = forwardRef(
   ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
     return /* @__PURE__ */ jsx(
       Flex,
       {
-        asChild: true,
         gap: "8",
         mt: "auto",
         overflowX: "hidden",
         py: "8",
-        ...sprinkleProps,
-        children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })
+        ref,
+        role: "list",
+        ...props,
+        children
       }
     );
   }

package/dist/packages/react/src/sidenav-header/SidenavHeader.js

@@ -2,14 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const SidenavHeader = forwardRef(
   ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsx(Flex, { ref, role: "list", ...props, children });
   }
 );
 SidenavHeader.displayName = "@optiaxiom/react/SidenavHeader";