@optiaxiom/react 0.8.1 → 0.9.0

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

@@ -1,5 +1,6 @@
 "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';
@@ -7,12 +8,35 @@ 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 { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.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 { restProps, sprinkleProps } = extractSprinkles(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),
+        ...sprinkleProps,
+        ...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

@@ -3,23 +3,19 @@ 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';
 
 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/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-BWmEbqx7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-D46Ll8o8.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_wytlbii6gxwkkass3c6wfp66jm/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_wcbutaohqjnkd6euht5r5xgz74/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
-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:'_9jb2e7',md:'_5vsrr7',base:'_133gaau'},defaultClass:'_133gaau'},vertical:{conditions:{sm:'_1lr30im',md:'zbo3v',base:'_1jqkj7e'},defaultClass:'_1jqkj7e'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+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:'_8vsmsw',md:'_2bh1k0',base:'h33imv'},defaultClass:'h33imv'},vertical:{conditions:{sm:'_15v3eqb',md:'v2uxma',base:'venmqa'},defaultClass:'venmqa'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

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

@@ -33,21 +33,31 @@ const Sidenav = forwardRef(
           setAnimations(true);
           setExpanded(flag);
         },
-        children: /* @__PURE__ */ jsx(Flex, { borderR: "1", w: "fit", ...props, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(
           Flex,
           {
-            asChild: true,
-            bg: "bg.default",
-            flex: "1",
-            gap: "0",
-            overflow: "hidden",
-            pb: "8",
-            pt: "16",
-            transition: animations ? "all" : void 0,
-            w: expanded ? "224" : "56",
-            children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", ref, children })
+            borderColor: "border.tertiary",
+            borderR: "1",
+            h: "full",
+            w: "fit",
+            ...props,
+            children: /* @__PURE__ */ jsx(
+              Flex,
+              {
+                asChild: true,
+                bg: "bg.default",
+                flex: "1",
+                gap: "0",
+                overflow: "hidden",
+                pb: "8",
+                pt: "16",
+                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,6 +1,7 @@
 "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 { Flex } from '../flex/Flex.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
@@ -8,9 +9,9 @@ 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 +22,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 +42,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";

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CZ1Rbq10.css';
-import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-CB4jgwry.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CrqPWBsM.css';
+import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-Cs83XPKB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'8',textAlign:'start'},'_1scct5n']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'8',textAlign:'start'},'juay1o']});
 
 export { item };

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, isValidElement, cloneElement } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
@@ -8,26 +8,19 @@ import { useSidenavContext } from '../sidenav-context/SidenavContext.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { Transition } from '../transition/Transition.js';
 import '../utils/conditions.js';
-import '@radix-ui/react-slot';
+import { decorateChildren } from '../utils/decorateChildren.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { item } from './SidenavItem-css.js';
 
 const SidenavItem = forwardRef(
   ({ active, addonAfter, asChild, children, className, ...props }, ref) => {
     const { animations, expanded } = useSidenavContext("SidenavItem");
-    let tooltip = children;
-    if (asChild) {
-      const newElement = isValidElement(children) ? children : null;
-      tooltip = newElement ? newElement.props.children : tooltip;
-      children = newElement ? cloneElement(
-        newElement,
-        void 0,
-        expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: newElement.props.children }) })
-      ) : children;
-    } else {
-      children = expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children }) });
-    }
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    let tooltip = null;
+    children = decorateChildren({ asChild, children }, (children2) => {
+      tooltip = children2;
+      return expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: children2 }) });
+    });
+    return /* @__PURE__ */ jsx(Flex, { role: "listitem", children: /* @__PURE__ */ jsx(
       Tooltip,
       {
         content: !expanded && (props["aria-label"] || tooltip),
@@ -38,18 +31,18 @@ const SidenavItem = forwardRef(
             addonAfter: expanded && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "auto", children: fallbackSpan(addonAfter) }),
             appearance: "subtle",
             asChild,
-            "data-state": active ? "active" : void 0,
+            "data-state": active ? "active" : undefined,
             justifyContent: expanded ? "start" : "center",
             ref,
             size: "lg",
-            transition: animations ? "colors" : void 0,
+            transition: animations ? "colors" : undefined,
             ...item({}, className),
             ...props,
             children
           }
         )
       }
-    ) }) });
+    ) });
   }
 );
 SidenavItem.displayName = "@optiaxiom/react/SidenavItem";

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-DKTNHkb7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-B7O28Qy_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'bzmlw4']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_13c8u16']});
 
 export { skeleton };

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

@@ -1,21 +1,20 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, cloneElement } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { skeleton } from './Skeleton-css.js';
 
 const Skeleton = forwardRef(
-  ({ children, circle, className, h, rounded, w, ...props }, ref) => {
+  ({ asChild = true, children, circle, className, rounded, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
       {
-        asChild: true,
-        h,
+        asChild,
         rounded: circle || rounded === "full" ? "full" : rounded ?? "sm",
-        w: w ?? (circle || rounded === "full" ? h : void 0),
         ...skeleton({}, className),
         ...props,
-        children: children ? cloneElement(children, { ref }) : /* @__PURE__ */ jsx("span", { ref })
+        children: /* @__PURE__ */ jsx(Slot, { ref, children: children ? children : /* @__PURE__ */ jsx("span", {}) })
       }
     );
   }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-BFjOBM-0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-C7NfSuwZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'vtpvst',inverse:'_9i585f'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'_18c4v2',inverse:'yhnzpq'}}});
 
 export { track };

package/dist/packages/react/src/spotlight-content/SpotlightContent.js

@@ -23,7 +23,6 @@ const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size:
   return /* @__PURE__ */ jsxs(
     DialogContent,
     {
-      "aria-describedby": void 0,
       gap: "0",
       overflow: "hidden",
       pb: "24",

package/dist/packages/react/src/spotlight-input/SpotlightInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-C3xhdcCX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-DgV2N16s.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_18j8ixd']});
+var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1309dul']});
 
 export { input };

package/dist/packages/react/src/spotlight-radio-item/SpotlightRadioItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-ytchmrZi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-DHAnHklK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'clqpdd']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_15zt7wt']});
 
 export { item };

package/dist/packages/react/src/spotlight-sub-item/SpotlightSubItem-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-OwlF8UHd.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-CFBGY5rW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-BvS_yf0c.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-DWQ4oo_3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1wg0ezx',true:'_6dhqo2'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'bsiy2y',true:'_17ow54x'}}});
 
 export { item };

package/dist/packages/react/src/spotlight-trigger/SpotlightTrigger.js

@@ -8,7 +8,7 @@ import { useSpotlightContext } from '../spotlight-context/SpotlightContext.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { useHotkeys } from '../../../../node_modules/.pnpm/@mantine_hooks@7.14.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/use-hotkeys.js';
+import { useHotkeys } from '../../../../node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/use-hotkeys.js';
 
 const DEFAULT_HOTKEY = "mod+K";
 const SpotlightTrigger = forwardRef(({ addonAfter, children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {

package/dist/packages/react/src/sprinkles/extractSprinkles.js

@@ -5,7 +5,7 @@ function extractSprinkles(props) {
   const restProps = {};
   for (const [name, value] of Object.entries(props)) {
     if (sprinkles.properties.has(name)) {
-      if (value !== null && value !== void 0) {
+      if (value !== null && value !== undefined) {
         sprinkleProps[name] = value;
       }
     } else {