@optiaxiom/react 0.7.7 → 0.8.0

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-OOa9fASY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-209PlUzC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1b5oahm']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'ahm3tt'],variants:{intent:{danger:'l7bfz3',neutral:'_1vzhtu7'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'xs'},'m081sh']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1ud3yrf']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'on9ure'],variants:{intent:{danger:'_1pwvqb3',neutral:'_1lpk2lb'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'k4nfzl']});
 
 export { description, item, title };

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-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 } from 'react';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
@@ -42,7 +42,7 @@ const ListboxItem = forwardRef(
             /* @__PURE__ */ jsx(Flex, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children2) }),
             description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
           ] }),
-          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(addonAfter) })
+          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "8", children: fallbackSpan(addonAfter) })
         ] })) })
       }
     );

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

@@ -10,7 +10,7 @@ import '../sprinkles/sprinklesMerge.js';
 const ListboxItemIndicator = forwardRef(({ active, children, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
   if (!active) {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "0", w: "20", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "0", w: "xs", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
   }
   return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
 });

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

@@ -7,18 +7,7 @@ import { useListboxGroupContext } from '../listbox-group-context/ListboxGroupCon
 const ListboxLabel = forwardRef(
   ({ children, ...props }, ref) => {
     const { id } = useListboxGroupContext("ListboxLabel");
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        color: "fg.tertiary",
-        fontSize: "sm",
-        id,
-        p: "xs",
-        ref,
-        ...props,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", fontSize: "sm", id, p: "8", ref, ...props, children });
   }
 );
 ListboxLabel.displayName = "@optiaxiom/react/ListboxLabel";

package/dist/packages/react/src/listbox-radio-item/ListboxRadioItem.js

@@ -9,7 +9,7 @@ const ListboxRadioItem = forwardRef(({ addonAfter, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
-      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
         addonAfter,
         /* @__PURE__ */ jsx(ListboxItemIndicator, { active: Boolean(props["aria-selected"]) })
       ] }),

package/dist/packages/react/src/listbox-separator/ListboxSeparator.js

@@ -3,17 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Separator } from '../separator/Separator.js';
 
-const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(
-  Separator,
-  {
-    bg: "border.secondary",
-    flex: "none",
-    mx: "8",
-    my: "4",
-    ref,
-    ...props
-  }
-));
+const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { bg: "bg.tertiary", flex: "none", mx: "8", my: "4", ref, ...props }));
 ListboxSeparator.displayName = "@optiaxiom/react/ListboxSeparator";
 
 export { ListboxSeparator };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-D_lM3AoT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Ctq-oZKM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'rl2dfr'],variants:{minW:{'0':{},trigger:'_1u9h5xs'},provider:{'dropdown-menu':'_12db8il',popover:'_19hhm3i',popper:'_4rc5st'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'wmozz0'],variants:{minW:{'0':{},trigger:'u9v51g'},provider:{'dropdown-menu':'_7d6d6b',popover:'_101ybpz',popper:'_1rww0of'}}});
 
 export { listbox };

package/dist/packages/react/src/modal-layer/ModalLayer.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
+import { FocusGuards } from '@radix-ui/react-focus-guards';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef, useState } from 'react';
+import { RemoveScroll } from 'react-remove-scroll';
+
+const ModalLayer = forwardRef(({ asChild, children, ...props }, ref) => {
+  let result = /* @__PURE__ */ jsx(DismissableLayer, { asChild, ref, ...props, children });
+  const [locked] = useState(() => document.body.dataset.scrollLocked);
+  if (locked) {
+    result = /* @__PURE__ */ jsx(RemoveScroll, { allowPinchZoom: true, as: Slot, children: result });
+  }
+  const [guards] = useState(
+    () => document.querySelector("[data-radix-focus-guard]")
+  );
+  if (guards) {
+    result = /* @__PURE__ */ jsx(FocusGuards, { children: result });
+  }
+  return result;
+});
+ModalLayer.displayName = "@optiaxiom/react/ModalLayer";
+
+export { ModalLayer };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-D4IvTu0u.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-nM_Lh1ef.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'xik2e7'});
-var cursor = recipeRuntime({base:[{z:'10'},'dziaio'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'xfov93']});
+var button = recipeRuntime({base:'sbye6q'});
+var cursor = recipeRuntime({base:[{z:'10'},'_1wfkc87'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'k3towl']});
 
 export { button, cursor, list };

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

@@ -1,6 +1,5 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { usePagination } from '@mantine/hooks';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef, useState, useRef, useEffect } from 'react';
@@ -14,6 +13,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.14.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) => {

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

@@ -1,6 +1,6 @@
-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 paper = recipeRuntime({base:{bg:'bg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},drawer:{},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'}}}});
+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'}}}});
 
 export { paper };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-D5PmLiul.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-BlMhwqsc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_17lid85'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_89wqqb'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
 
 export { pill };

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

@@ -6,44 +6,57 @@ 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 '../utils/conditions.js';
+import '@radix-ui/react-slot';
+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(MenuListbox, { asChild: true, p: "sm", provider: "popover", ...props, children: /* @__PURE__ */ jsxs(
-      RadixPopover.Content,
+    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+      MenuListbox,
       {
-        align,
-        ref,
-        sideOffset,
-        children: [
-          children,
-          withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              fill: theme.colors["bg.default"],
-              height: 4,
-              preserveAspectRatio: "none",
-              stroke: theme.colors["border.secondary"],
-              viewBox: "0 0 30 10",
-              width: 8,
-              children: [
-                /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
-                /* @__PURE__ */ jsx(
-                  "polyline",
-                  {
-                    points: "0,0 15,10 30,0",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2.5"
-                  }
-                )
-              ]
-            }
-          ) })
-        ]
+        asChild: true,
+        onBlur: onReactSelectInputBlur,
+        p: "12",
+        provider: "popover",
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          RadixPopover.Content,
+          {
+            align,
+            ref,
+            sideOffset,
+            children: [
+              children,
+              withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  fill: theme.colors["bg.default"],
+                  height: 4,
+                  preserveAspectRatio: "none",
+                  stroke: theme.colors["border.secondary"],
+                  viewBox: "0 0 30 10",
+                  width: 8,
+                  children: [
+                    /* @__PURE__ */ jsx("polygon", { points: "0,0 30,0 15,10" }),
+                    /* @__PURE__ */ jsx(
+                      "polyline",
+                      {
+                        points: "0,0 15,10 30,0",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: "2.5"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
       }
-    ) }) }) });
+    ) }) });
   }
 );
 PopoverContent.displayName = "@optiaxiom/react/PopoverContent";

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

@@ -1,6 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-DpZY2Qcs.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'},'_1jjj2pm']});
 
-export { indicator };
+export { indicator, progress };

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

@@ -3,36 +3,25 @@ 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 { indicator } from './Progress-css.js';
+import { progress, indicator } from './Progress-css.js';
 
 const Progress = forwardRef(
-  ({ intent = "primary", ...props }, ref) => {
+  ({ className, intent = "primary", ...props }, ref) => {
     const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
     const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...progress({}, className), ...props, children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
-        bg: "bg.tertiary",
-        h: "8",
-        overflow: "hidden",
-        rounded: "full",
-        ...props,
-        children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
-          Box,
-          {
-            asChild: true,
-            style: {
-              width: `${widthPercentage}%`
-            },
-            ...indicator({
-              intent
-            }),
-            children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
-          }
-        ) })
+        style: {
+          width: `${widthPercentage}%`
+        },
+        ...indicator({
+          intent
+        }),
+        children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
       }
-    );
+    ) }) });
   }
 );
 const DEFAULT_MAX = 100;

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DPVF9K5Q.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BKCyAUcg.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-D1I3XFlP.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/toggle-input/ToggleInput.css.ts.vanilla-BgZ4qGHG.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-dPxC1ZT8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'_1eg2n5g'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_9eu8th']});
-var input = recipeRuntime({base:'_1i487lo'});
-var radio = recipeRuntime({base:'_3sp6xy'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'rsvqp1'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1t693me']});
+var input = recipeRuntime({base:'luj9wy'});
+var radio = recipeRuntime({base:'sxr1tr'});
 
 export { control, indicator, input, radio };

package/dist/packages/react/src/radio-group/RadioGroup.js

@@ -7,10 +7,10 @@ import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
 const mapGapToOrientation = {
-  column: "sm",
-  "column-reverse": "sm",
-  row: "md",
-  "row-reverse": "md"
+  column: "12",
+  "column-reverse": "12",
+  row: "16",
+  "row-reverse": "16"
 };
 const RadioGroup = forwardRef(
   ({

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DUIqMdEz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-By--5a52.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{my:'-2',size:'sm'},'_1oatc2q']});
-var search = recipeRuntime({base:'_1l5tkwj'});
+var clear = recipeRuntime({base:[{size:'sm'},'uggr39']});
+var search = recipeRuntime({base:'_1v9akx0'});
 
 export { clear, search };

package/dist/packages/react/src/segmented-control/SegmentedControl.js

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
+import { SegmentedControlContextProvider } from '../segmented-control-context/SegmentedControlContext.js';
 
 const SegmentedControl = forwardRef(({ children, type = "single", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children }) });
+  return /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children: /* @__PURE__ */ jsx(SegmentedControlContextProvider, { children }) }) });
 });
 SegmentedControl.displayName = "@optiaxiom/react/SegmentedControl";
 

package/dist/packages/react/src/segmented-control-context/SegmentedControlContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [SegmentedControlContextProvider, useSegmentedControlContext] = createContext("SegmentedControl");
+
+export { SegmentedControlContextProvider, useSegmentedControlContext };

package/dist/packages/react/src/segmented-control-item/SegmentedControlItem.js

@@ -3,8 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
+import { useSegmentedControlContext } from '../segmented-control-context/SegmentedControlContext.js';
 
 const SegmentedControlItem = forwardRef(({ children, ...props }, ref) => {
+  useSegmentedControlContext("SegmentedControlItem");
   return /* @__PURE__ */ jsx(
     RadixSegmentedControl.Item,
     {

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-DW7K8K_L.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-BNDxClit.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_1rdzv6b']});
+var content = recipeRuntime({base:['_1e6kdyf']});
 
 export { content };

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

@@ -4,7 +4,7 @@ import { Portal } from '@radix-ui/react-portal';
 import { forwardRef } from 'react';
 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 { useSelectContext } from '../select-context/SelectContext.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { SelectContentImpl } from './SelectContentImpl.js';
@@ -12,7 +12,7 @@ import { SelectContentImpl } from './SelectContentImpl.js';
 const SelectContent = forwardRef(
   ({ children, loading, ...props }, ref) => {
     const { isOpen } = useSelectContext("SelectContent");
-    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(RemoveScroll, { children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "popper", children: /* @__PURE__ */ jsx(SelectContentImpl, { ref, ...props, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) }) });
+    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 }) }) }) });
   }
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";

package/dist/packages/react/src/select-content/SelectContentImpl.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 { Box } from '../box/Box.js';
@@ -22,8 +20,7 @@ const SelectContentImpl = forwardRef(
   }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const { downshift } = useSelectContext("SelectContentImpl");
-    useFocusGuards();
-    return /* @__PURE__ */ jsx(DismissableLayer, { asChild: true, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
@@ -32,7 +29,7 @@ const SelectContentImpl = forwardRef(
         ...downshift.getMenuProps({ ref, ...restProps }),
         children: /* @__PURE__ */ jsx(PopperContent, { align, side, sideOffset, children })
       }
-    ) });
+    );
   }
 );
 SelectContentImpl.displayName = "@optiaxiom/react/SelectContentImpl";

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-CZPhogb7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-yVJAd9DI.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.16.1/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
+import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_wytlbii6gxwkkass3c6wfp66jm/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
-var base = recipeRuntime({base:{bg:'border.default'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_19de9pg',md:'vx8a42',lg:'_2cn75r',base:'_191n1pj'},defaultClass:'_191n1pj'},vertical:{conditions:{sm:'_12b9lmn',md:'s0qbub',lg:'_11mng29',base:'bcllws'},defaultClass:'bcllws'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var base = recipeRuntime({base:{bg:'bg.tertiary.hovered'}});
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1q7hcxh',md:'_1qj0qb0',base:'_1y44xsf'},defaultClass:'_1y44xsf'},vertical:{conditions:{sm:'_1rj39q1',md:'_5eq2io',base:'ut8f99'},defaultClass:'ut8f99'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

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

@@ -41,8 +41,8 @@ const Sidenav = forwardRef(
             flex: "1",
             gap: "0",
             overflow: "hidden",
-            pb: "xs",
-            pt: "md",
+            pb: "8",
+            pt: "16",
             transition: animations ? "all" : void 0,
             w: expanded ? "224" : "56",
             children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", ref, children })

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

@@ -10,19 +10,19 @@ import { Transition } from '../transition/Transition.js';
 
 const SidenavAccountItem = forwardRef(({ avatar, name, organization, ...props }, ref) => {
   const { animations, expanded } = useSidenavContext("SidenavAccountItem");
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "xs", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "8", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
     Flex,
     {
       asChild: true,
       flexDirection: "row",
-      gap: "xs",
-      mx: "xs",
+      gap: "8",
+      mx: "8",
       p: "4",
       textAlign: "start",
       ...props,
       children: /* @__PURE__ */ jsxs("button", { ref, children: [
         /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", my: "2", rounded: "sm", children: avatar }),
-        expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsxs(Flex, { flex: "1", flexDirection: "row", gap: "xs", overflowX: "hidden", children: [
+        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 }),
             /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })

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

@@ -18,7 +18,7 @@ const SidenavBody = forwardRef(
         justifyContent: "start",
         overflowX: "hidden",
         overflowY: "auto",
-        py: "xs",
+        py: "8",
         w: "full",
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })

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

@@ -13,10 +13,10 @@ const SidenavFooter = forwardRef(
       Flex,
       {
         asChild: true,
-        gap: "xs",
+        gap: "8",
         mt: "auto",
         overflowX: "hidden",
-        py: "xs",
+        py: "8",
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })
       }

package/dist/packages/react/src/sidenav-item/SidenavItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DPVF9K5Q.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DG0diu8R.css';
-import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-CSC3_8bx.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/button-base/ButtonBase.css.ts.vanilla-DRakNEUr.css';
+import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-QATO8oXy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'hhhuyg']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'8',textAlign:'start'},'_1mjrena']});
 
 export { item };

package/dist/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-B06Zil1P.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-Bc7MzQWG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1s4l6eo']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'fg.default.inverse',display:'block'},'cfsajq']});
 
 export { skeleton };

package/dist/packages/react/src/spinner/Spinner-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DxcYRSgz.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var track = recipeRuntime({variants:{appearance:{'default':'m36dmt',inverse:'aoidqf'}}});
+
+export { track };