@optiaxiom/react 1.8.0 → 1.8.2

package/dist/esm/packages/react/src/pill-menu/PillMenuTrigger.js

@@ -1,48 +1,111 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
 import { forwardRef, useRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
+import { Cover } from '../cover/Cover.js';
 import { IconPlus } from '../icons/IconPlus.js';
 import '../menu/Menu.js';
 import '../menu/MenuContent.js';
 import { MenuTrigger } from '../menu/MenuTrigger.js';
+import { useMenuContext } from '../menu/MenuContext.js';
+import '../pill/Pill.js';
+import { PillGroup } from '../pill/PillGroup.js';
+import '../popover/Popover.js';
+import { PopoverAnchor } from '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
+import { RovingFocus } from '../roving-focus/RovingFocus.js';
+import { RovingFocusItem } from '../roving-focus/RovingFocusItem.js';
 import { usePillMenuContext } from './PillMenuContext.js';
+import { PillMenuPill } from './PillMenuPill.js';
+import { wrapper, root, trigger } from './PillMenuTrigger-css.js';
 
-const PillMenuTrigger = forwardRef(({ children, onKeyDown, ...props }, outerRef) => {
-  const { options } = usePillMenuContext("@optiaxiom/react/PillMenuTrigger");
-  const { inputValue } = useCommandContext("@optiaxiom/react/PillMenuTrigger");
-  const innerRef = useRef(null);
-  const ref = useComposedRefs(innerRef, outerRef);
-  return /* @__PURE__ */ jsx(RadixRovingFocus.Item, { asChild: true, children: /* @__PURE__ */ jsx(
-    MenuTrigger,
-    {
-      appearance: options.length ? "subtle" : "default",
-      "aria-label": props["aria-label"] ?? (typeof children === "string" ? children : void 0),
-      icon: /* @__PURE__ */ jsx(IconPlus, {}),
-      onKeyDown: (event) => {
-        onKeyDown?.(event);
-        if (event.defaultPrevented) {
-          return;
+const remapSize = {
+  md: "xs",
+  lg: "sm"
+};
+const PillMenuTrigger = forwardRef(
+  ({ children, className, readOnly, size = "md", ...props }, outerRef) => {
+    const { value } = usePillMenuContext("@optiaxiom/react/PillMenuTrigger");
+    const { size: menuSize } = useMenuContext(
+      "@optiaxiom/react/PillMenuTrigger"
+    );
+    const { inputValue } = useCommandContext(
+      "@optiaxiom/react/PillMenuTrigger"
+    );
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    return /* @__PURE__ */ jsxs(Box, { ...wrapper(), children: [
+      /* @__PURE__ */ jsx(
+        PillGroup,
+        {
+          asChild: true,
+          "data-readonly": readOnly,
+          ref,
+          role: "toolbar",
+          ...root({ size }, className),
+          ...props,
+          children: /* @__PURE__ */ jsxs(RovingFocus, { disabled: readOnly, loop: true, orientation: "horizontal", children: [
+            value.slice(0, -1).map((item) => /* @__PURE__ */ jsx(
+              RovingFocusItem,
+              {
+                asChild: true,
+                children: /* @__PURE__ */ jsx(
+                  PillMenuPill,
+                  {
+                    item,
+                    readOnly,
+                    size: remapSize[size]
+                  }
+                )
+              },
+              item.key ?? resolveItemProperty(item.label, { inputValue })
+            )),
+            /* @__PURE__ */ jsxs(PillGroup, { children: [
+              value.length > 0 && /* @__PURE__ */ jsx(RovingFocusItem, { asChild: true, children: /* @__PURE__ */ jsx(
+                PillMenuPill,
+                {
+                  item: value[value.length - 1],
+                  readOnly,
+                  size: remapSize[size]
+                }
+              ) }, "pill"),
+              !readOnly && /* @__PURE__ */ jsx(RovingFocusItem, { asChild: true, children: /* @__PURE__ */ jsx(
+                MenuTrigger,
+                {
+                  "aria-label": props["aria-label"] ?? (typeof children === "string" ? children : void 0),
+                  asChild: true,
+                  onKeyDown: (event) => {
+                    if (event.defaultPrevented) {
+                      return;
+                    }
+                    if (event.key === "Backspace") {
+                      if (value.length) {
+                        const last = value.length - 1;
+                        if (!resolveItemProperty(value[last].disabledReason)) {
+                          value[last].execute?.({
+                            dismiss: false,
+                            inputValue
+                          });
+                        }
+                      }
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsx(Box, { asChild: true, size: remapSize[size], ...trigger(), children: /* @__PURE__ */ jsx("button", { children: /* @__PURE__ */ jsx(IconPlus, {}) }) }) })
+                }
+              ) }, "trigger")
+            ] })
+          ] })
         }
-        if (event.key === "Backspace") {
-          if (options.length) {
-            const last = options.length - 1;
-            if (!resolveItemProperty(options[last].disabledReason)) {
-              options[last].execute?.({ dismiss: false, inputValue });
-            }
-          }
-        }
-      },
-      ref,
-      rounded: options.length ? "full" : void 0,
-      size: "sm",
-      ...props,
-      children: options.length ? void 0 : children
-    }
-  ) }, "trigger");
-});
+      ),
+      menuSize === "sm" && /* @__PURE__ */ jsx(PopoverAnchor, { staticRef: innerRef })
+    ] });
+  }
+);
 PillMenuTrigger.displayName = "@optiaxiom/react/PillMenuTrigger";
 
 export { PillMenuTrigger };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-DnpG8mth.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-Bvq7V2e8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'_1firq8a',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_17c2f2']});
+var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'cxlkfs',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1fds47h']});
 
 export { indicator, progress };

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DR0szHMw.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-CJ79FKil.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CT2t-0cr.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BwHTqH9s.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-Css22k0q.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_17nyl75'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1kmtm9j']});
-var input = recipeRuntime({base:'_1ogwqlh'});
-var radio = recipeRuntime({base:'_1sjxd3d'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1o2rdq0'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1yvd83r']});
+var input = recipeRuntime({base:'_1wk3nz3'});
+var radio = recipeRuntime({base:'_1yj7ye9'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/radio/RadioGroup.js

@@ -4,6 +4,8 @@ import { forwardRef } from 'react';
 import { Group } from '../group/Group.js';
 import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
 import { RadioGroupProvider } from './RadioGroupContext.js';
 
 const mapGapToOrientation = {
@@ -25,6 +27,8 @@ const RadioGroup = forwardRef(
     value,
     ...props
   }, ref) => {
+    const surface = useSurface("property");
+    const { track } = surface ?? {};
     return /* @__PURE__ */ jsx(
       RadioGroupProvider,
       {
@@ -33,8 +37,13 @@ const RadioGroup = forwardRef(
         name,
         onBlur,
         onChange: (event) => {
+          const newValue = event.target.value;
           onChange?.(event);
-          onValueChange?.(event.target.value);
+          onValueChange?.(newValue);
+          track?.({
+            name: "changed",
+            value: newValue
+          });
         },
         value,
         children: /* @__PURE__ */ jsx(

package/dist/esm/packages/react/src/range/Range-css.js

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/range/Range.css.ts.vanilla-BC-GeMQC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/range/Range.css.ts.vanilla-DUwdO7ts.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'transparent'},'ry13e2']});
-var fillValue = 'var(--_1wwwl8l)';
-var mark = recipeRuntime({base:[{transition:'colors'},'_1f2yjgj'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--wxjcsj)';
-var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1gh6inu']});
-var root = recipeRuntime({base:['_14qnpzv',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'d4ysek'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
-var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_1nnmax4']});
-var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_5iociz']});
+var control = recipeRuntime({base:[{bg:'transparent'},'_125dynu']});
+var fillValue = 'var(--zhgjnu)';
+var mark = recipeRuntime({base:[{transition:'colors'},'h2m0ps'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
+var markValue = 'var(--ph97qh)';
+var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'ax4pbw']});
+var root = recipeRuntime({base:['_1adzwvv',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'phzqmp'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
+var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_1bm1gtv']});
+var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'dlpmdb']});
 
 export { control, fillValue, mark, markValue, range, root, thumb, track };

package/dist/esm/packages/react/src/resizable/ResizableHandle-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-Be-XUYFT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-C3_u-q00.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'zgy7oz']});
-var root = recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_1v3m5s3']});
+var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_17isytz']});
+var root = recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_1lc1ik7']});
 
 export { handle, root };

package/dist/esm/packages/react/src/roving-focus/RovingFocus.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { RovingFocusProvider } from './RovingFocusContext.js';
+
+const Slot = createSlot("@optiaxiom/react/RovingFocus");
+const RovingFocus = forwardRef(
+  ({ asChild, children, disabled, loop, orientation, ...props }, ref) => {
+    const FocusComp = disabled ? Box : RadixRovingFocus.Root;
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(RovingFocusProvider, { disabled, children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FocusComp, { asChild: true, ...!disabled && { loop, orientation }, children: /* @__PURE__ */ jsx(Comp, { children }) }) }) });
+  }
+);
+RovingFocus.displayName = "@optiaxiom/react/RovingFocus";
+
+export { RovingFocus };

package/dist/esm/packages/react/src/roving-focus/RovingFocusContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [RovingFocusProvider, useRovingFocusContext] = createContext("@optiaxiom/react/RovingFocus");
+
+export { RovingFocusProvider, useRovingFocusContext };

package/dist/esm/packages/react/src/roving-focus/RovingFocusItem.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { useRovingFocusContext } from './RovingFocusContext.js';
+
+const Slot = createSlot("@optiaxiom/react/RovingFocusItem");
+const RovingFocusItem = forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const { disabled } = useRovingFocusContext(
+      "@optiaxiom/react/RovingFocusItem"
+    );
+    const FocusComp = disabled ? Box : RadixRovingFocus.Item;
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(FocusComp, { asChild: true, children: /* @__PURE__ */ jsx(Comp, { children }) }) });
+  }
+);
+RovingFocusItem.displayName = "@optiaxiom/react/RovingFocusItem";
+
+export { RovingFocusItem };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-a7yaBnaN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DLx_CaAT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1gnl2hg']});
-var input = recipeRuntime({base:'_8lqd9s'});
-var search = recipeRuntime({base:'kx6ra7'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1cvqf1r']});
+var input = recipeRuntime({base:'_1bzkcpg'});
+var search = recipeRuntime({base:'ffnijd'});
 
 export { clear, input, search };

package/dist/esm/packages/react/src/select/Select.js

@@ -5,11 +5,16 @@ import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useSelect } from 'downshift';
 import { forwardRef, useRef, useMemo } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import '../avatar/AvatarGroup.js';
 import { useHighlightedIndex } from '../downshift/useHighlightedIndex.js';
 import '../field/FieldContext.js';
 import { useObserveValue } from '../hooks/useObserveValue.js';
 import '../utils/conditions.js';
 import '../utils/isHoverSupported.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { useSuggestions } from '../surface/useSuggestions.js';
 import { SelectProvider } from './SelectContext.js';
 import { SelectHiddenSelect } from './SelectHiddenSelect.js';
 import { useObserveReset } from './useObserveReset.js';
@@ -27,20 +32,47 @@ const Select = forwardRef(
     onOpenChange,
     onValueChange,
     open,
-    options: items,
+    options,
     required,
     value
   }, outerRef) => {
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
+    const surface = useSurface("property");
+    const suggestions = useSuggestions("value");
+    const suggestion = suggestions?.[0];
     const [shadowValue, setShadowValue] = useControllableState({
       caller: "@optiaxiom/react/Select",
       defaultProp: defaultValue ?? "",
-      onChange: onValueChange,
+      onChange: (newValue) => {
+        surface?.track({
+          name: "changed",
+          value: newValue
+        });
+        if (suggestion && newValue === suggestion.value) {
+          surface?.accept(suggestion.id);
+        }
+        onValueChange?.(newValue);
+      },
       prop: value
     });
     const forceValueChange = useObserveValue(innerRef, setShadowValue);
     useObserveReset(innerRef, setShadowValue);
+    const items = useMemo(() => {
+      return options.map(
+        (option) => option.value === suggestion?.value ? {
+          ...option,
+          detail: /* @__PURE__ */ jsx(Avatar, { fallback: "opal", size: "2xs" }),
+          group: {
+            hidden: true,
+            label: "Suggested",
+            priority: 1e3
+          }
+        } : option
+      ).sort((a, b) => {
+        return (b.group?.priority ?? 0) - (a.group?.priority ?? 0);
+      });
+    }, [options, suggestion]);
     const selectedItem = useMemo(
       () => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0,
       [items, shadowValue]
@@ -62,7 +94,6 @@ const Select = forwardRef(
       highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
       isItemDisabled: (item) => !!item.disabledReason,
       isOpen,
-      // @ts-expect-error -- no harm in supporting read only arrays
       items,
       itemToKey: (item) => item !== null ? item.value : item,
       itemToString: (item) => item !== null ? item.label : "",
@@ -120,7 +151,6 @@ const Select = forwardRef(
               disabled,
               name,
               onChange: (event) => {
-                setShadowValue(event.target.value);
                 onChange?.(event);
               },
               ref,

package/dist/esm/packages/react/src/select/SelectContent.js

@@ -20,6 +20,7 @@ import { shouldShowSeparator, shouldShowGroup } from '../listbox/utils.js';
 import { ModalLayer } from '../modal/ModalLayer.js';
 import { ModalListbox } from '../modal/ModalListbox.js';
 import { Portal } from '../portal/Portal.js';
+import { Text } from '../text/Text.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import '../tooltip/TooltipContent.js';
 import '../tooltip/TooltipProvider.js';
@@ -27,7 +28,10 @@ import '../tooltip/TooltipRoot.js';
 import '../tooltip/TooltipTrigger.js';
 import '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
-import { useSelectContext } from './SelectContext.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import '../utils/isHoverSupported.js';
+import { useSelectContext, resolveItemProperty } from './SelectContext.js';
 import { SelectRadioItem } from './SelectRadioItem.js';
 
 const SelectContent = forwardRef(
@@ -108,18 +112,27 @@ const SelectContent = forwardRef(
                   return /* @__PURE__ */ jsxs(Fragment, { children: [
                     shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
                     shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
-                    /* @__PURE__ */ jsx(Tooltip, { content: item.disabledReason, children: /* @__PURE__ */ jsx(
-                      SelectRadioItem,
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
                       {
-                        addonBefore: item.addon,
-                        "aria-label": item["aria-label"],
-                        description: item.description,
-                        index,
-                        item,
-                        children: item.label
-                      },
-                      item.value
-                    ) })
+                        content: resolveItemProperty(item.disabledReason),
+                        children: /* @__PURE__ */ jsxs(
+                          SelectRadioItem,
+                          {
+                            addonBefore: item.addon,
+                            "aria-label": item["aria-label"],
+                            description: item.description,
+                            index,
+                            item,
+                            children: [
+                              item.label,
+                              item.detail && /* @__PURE__ */ jsx(Text, { asChild: true, color: "fg.secondary", truncate: true, children: fallbackSpan(item.detail) })
+                            ]
+                          },
+                          item.value
+                        )
+                      }
+                    )
                   ] });
                 })
               }

package/dist/esm/packages/react/src/select/SelectContext.js

@@ -1,6 +1,7 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
+const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
 const [SelectProvider, useSelectContext] = createContext("@optiaxiom/react/Select");
 
-export { SelectProvider, useSelectContext };
+export { SelectProvider, resolveItemProperty, useSelectContext };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-DY6wwOcC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-BBFF9jdM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createAtomsFn as createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_patch_hash_530004842e1937cf2ffe2728e2a18629c5dd638aa44_ff29e2a63cc347b263901e6ac2d561ef/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:'_1inco0r',md:'jjrugo',base:'_6e8lm4'},defaultClass:'_6e8lm4'},vertical:{conditions:{sm:'_5g7638',md:'_8yxidz',base:'_3t8v5w'},defaultClass:'_3t8v5w'}},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:'_1v0mnod',md:'_36ffun',base:'jj6s7b'},defaultClass:'jj6s7b'},vertical:{conditions:{sm:'_1tz5iaj',md:'_1l518ml',base:'mazl0b'},defaultClass:'mazl0b'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CqxpPZZK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-Dq_jFICH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_17tln3a']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'vnrixm']});
 
 export { skeleton };

package/dist/esm/packages/react/src/sortable/SortableHandle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-DiiCKH8L.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-DJKEmyBY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:'_1xfjv4u'});
+var handle = recipeRuntime({base:'t13ikm'});
 
 export { handle };

package/dist/esm/packages/react/src/sortable/SortableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/sortable/SortableItem.css.ts.vanilla-Qw_DSSvk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/sortable/SortableItem.css.ts.vanilla-D0rw7uqB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_1osl2r8',variants:{handle:{false:{},true:'_35dp03'}}});
+var item = recipeRuntime({base:'clt348',variants:{handle:{false:{},true:'_1s75mv3'}}});
 
 export { item };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DCtjkPl0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-bETfJDoA.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-C5e2QG_r.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'_1va9c2u',inverse:'g21ywb'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'_15q6o7f',inverse:'yz0ell'}}});
 
 export { track };