@optiaxiom/react 0.11.1 → 0.12.1

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

@@ -18,7 +18,7 @@ const PopoverContent = forwardRef(
       {
         asChild: true,
         onBlur: onReactSelectInputBlur,
-        p: "12",
+        p: "16",
         provider: "popover",
         ...props,
         children: /* @__PURE__ */ jsxs(

package/dist/packages/react/src/popover-context/PopoverContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [PopoverContextProvider, usePopoverContext] = createContext("Popover");

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-BQ3O1Qep.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-BtsGgP1D.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'},'r6xqw6']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1t3k9p7']});
 
 export { indicator, progress };

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Vo2OEHTD.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CqmiPQWN.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-C9Ku1-cp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BgJJG2w1.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DWjnMxMo.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-CganvZ0Q.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'q4yvgl'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_13wxlee']});
-var input = recipeRuntime({base:'_1s63i5y'});
-var radio = recipeRuntime({base:'_1i4kmy'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'h0e4x'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1o2kfzm']});
+var input = recipeRuntime({base:'_1uc96w1'});
+var radio = recipeRuntime({base:'_24v63k'});
 
 export { control, indicator, input, radio };

package/dist/packages/react/src/radio-group-context/RadioGroupContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [RadioGroupContextProvider, useRadioGroupContext] = createContext("RadioGroup", null);

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DZWNnJ45.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CgPVEiFy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_1o75jfr']});
-var search = recipeRuntime({base:'_1upqmhz'});
+var clear = recipeRuntime({base:[{size:'sm'},'nag1mv']});
+var search = recipeRuntime({base:'_1kwp33i'});
 
 export { clear, search };

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

@@ -6,6 +6,9 @@ import { Button } from '../button/Button.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { IconX } from '../icons/IconX.js';
 import { Input } from '../input/Input.js';
+import '../utils/conditions.js';
+import '@radix-ui/react-slot';
+import { forceValueChange } from '../utils/forceValueChange.js';
 import { clear, search } from './SearchInput-css.js';
 
 const SearchInput = forwardRef(
@@ -59,12 +62,5 @@ const SearchInput = forwardRef(
   }
 );
 SearchInput.displayName = "@optiaxiom/react/SearchInput";
-function forceValueChange(input, value) {
-  Object.getOwnPropertyDescriptor(
-    input.constructor.prototype,
-    "value"
-  )?.set?.call(input, value);
-  input.dispatchEvent(new Event("change", { bubbles: true }));
-}
 
 export { SearchInput };

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

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [SegmentedControlContextProvider, useSegmentedControlContext] = createContext("SegmentedControl");

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

@@ -30,11 +30,14 @@ function Select({
     onChange: onOpenChange,
     prop: open
   });
-  const [highlightedIndex, setHighlightedIndex] = usePortalPatch(isOpen);
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    isOpen,
+    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+  );
   const downshift = useSelect({
     ...props,
     highlightedIndex,
-    isOpen,
+    isOpen: placed,
     items,
     itemToKey,
     itemToString,
@@ -55,12 +58,14 @@ function Select({
     {
       disabled,
       downshift,
-      highlightedItem: items[downshift.highlightedIndex],
-      isOpen: downshift.isOpen,
+      highlightedItem: items[highlightedIndex],
+      isOpen,
       items,
       itemToKey,
       itemToString,
+      placed,
       selectedItem,
+      setPlaced,
       children
     }
   ) });

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-DTscrtoE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-CThpq7Su.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['yzu8jn']});
+var content = recipeRuntime({base:['_1vbr180']});
 
 export { content };

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

@@ -21,7 +21,7 @@ const SelectContent = forwardRef(
     ...props
   }, ref) => {
     const { boxProps, restProps } = extractBoxProps(props);
-    const { downshift, isOpen } = useSelectContext("SelectContent");
+    const { downshift, isOpen, placed, setPlaced } = useSelectContext("SelectContent");
     return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
       MenuListbox,
       {
@@ -31,8 +31,20 @@ const SelectContent = forwardRef(
         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 })
+        ...downshift.getMenuProps(
+          { ref, ...restProps },
+          { suppressRefError: !placed }
+        ),
+        children: /* @__PURE__ */ jsx(
+          PopperContent,
+          {
+            align,
+            onPlaced: () => setPlaced(true),
+            side,
+            sideOffset: 5,
+            children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children
+          }
+        )
       }
     ) }) });
   }

package/dist/packages/react/src/select-context/SelectContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [SelectContextProvider, useSelectContext] = createContext("Select");

package/dist/packages/react/src/select-trigger/SelectTrigger.js

@@ -2,15 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { PopperAnchor } from '@radix-ui/react-popper';
 import { Slot } from '@radix-ui/react-slot';
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect, useState } from 'react';
+import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
-import { MenuButton } from '../menu-button/MenuButton.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
 
 const SelectTrigger = forwardRef(
   ({ asChild, children, onKeyDown, ...props }, ref) => {
-    const { disabled, downshift } = useSelectContext("SelectTrigger");
+    const { disabled, downshift, isOpen } = useSelectContext("SelectTrigger");
     const { labelId } = useFieldContext();
     const buttonRef = useRef(null);
     useEffect(() => {
@@ -26,6 +26,15 @@ const SelectTrigger = forwardRef(
       label.addEventListener("click", onLabelClick);
       return () => label.removeEventListener("click", onLabelClick);
     }, [labelId]);
+    const [focusOnOpen] = useState(isOpen);
+    useEffect(
+      function() {
+        if (focusOnOpen && buttonRef.current) {
+          buttonRef.current.focus();
+        }
+      },
+      [focusOnOpen]
+    );
     return /* @__PURE__ */ jsx(
       PopperAnchor,
       {
@@ -38,7 +47,7 @@ const SelectTrigger = forwardRef(
             document.dispatchEvent(new Event("tooltip.open"));
           }
         }),
-        children: /* @__PURE__ */ jsx(Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { "aria-labelledby": labelId, ref: buttonRef, children }) })
+        children: /* @__PURE__ */ jsx(Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { "aria-labelledby": labelId, ref: buttonRef, children }) })
       }
     );
   }

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-BOUaQX-2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-dG8voxGw.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:'zc19qr',md:'_4fc81x',base:'i5zaps'},defaultClass:'i5zaps'},vertical:{conditions:{sm:'_1ho925x',md:'_1xyfsgw',base:'tkgr'},defaultClass:'tkgr'}},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:'_7q2fdd',md:'n668n0',base:'_1rudpkd'},defaultClass:'_1rudpkd'},vertical:{conditions:{sm:'eeleyl',md:'_13snz4k',base:'_1rgirvq'},defaultClass:'_1rgirvq'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/packages/react/src/sidebar/Sidebar.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { SidebarContextProvider } from '../sidebar-context/SidebarContext.js';
+
+const Sidebar = forwardRef(
+  ({
+    children,
+    defaultExpanded,
+    expanded: expandedProp,
+    onExpandedChange,
+    ...props
+  }, ref) => {
+    const [expanded, setExpanded] = useControllableState({
+      defaultProp: defaultExpanded,
+      onChange: onExpandedChange,
+      prop: expandedProp
+    });
+    return /* @__PURE__ */ jsx(
+      SidebarContextProvider,
+      {
+        expanded,
+        onExpandedChange: setExpanded,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            alignItems: "stretch",
+            display: "flex",
+            gap: "0",
+            h: "full",
+            ref,
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Sidebar.displayName = "@optiaxiom/react/Sidebar";
+
+export { Sidebar };

package/dist/packages/react/src/sidebar-context/SidebarContext.js

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

package/dist/packages/react/src/sidebar-toggle/SidebarToggle.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { NavItem } from '../nav-item/NavItem.js';
+import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
+
+const SidebarToggle = forwardRef(
+  ({ "aria-label": ariaLabel, children, ...props }, ref) => {
+    const { expanded, onExpandedChange } = useSidebarContext("SidebarToggle");
+    return /* @__PURE__ */ jsx(
+      NavItem,
+      {
+        "aria-label": ariaLabel || (expanded ? "Collapse" : "Expand"),
+        fontWeight: "400",
+        onClick: () => onExpandedChange(!expanded),
+        ref,
+        ...props,
+        children: children ?? "Collapse"
+      }
+    );
+  }
+);
+SidebarToggle.displayName = "@optiaxiom/react/SidebarToggle";
+
+export { SidebarToggle };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CpstfDEQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-Cc53biCs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'ewbk62']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_1iwpwl2']});
 
 export { skeleton };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DSnWGUfa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DfF7FBRM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'_1wgc10c',inverse:'_9dnovk'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'_2ix490',inverse:'l84uxi'}}});
 
 export { track };

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

@@ -1,11 +1,10 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 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 { Transition } from '../transition/Transition.js';
 import { track } from './Spinner-css.js';
 
 const mapAppearanceToFg = {
@@ -14,7 +13,7 @@ const mapAppearanceToFg = {
 };
 const Spinner = forwardRef(
   ({ appearance = "default", children, size = "md", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Transition, { duration: "sm", children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(
       Flex,
       {
         alignItems: "center",
@@ -59,7 +58,7 @@ const Spinner = forwardRef(
           children
         ]
       }
-    ) });
+    );
   }
 );
 Spinner.displayName = "@optiaxiom/react/Spinner";

package/dist/packages/react/src/spotlight-context/SpotlightContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [SpotlightContextProvider, useSpotlightContext] = createContext("Spotlight");

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CUZzNcnS.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-CWhNlkj5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-DYoxdFeh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1d49ike']});
+var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'b3xx3a']});
 
 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-CUZzNcnS.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-BkPqhJCF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-zfGQlYHN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1bisez']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_15w1700']});
 
 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-CUZzNcnS.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-35fv_Rde.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-Dgnurw3H.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-Diwj-TNR.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BOxV-GNo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1lalajn',true:'_1r3f1ps'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_95pf1e',true:'_11j8ec8'}}});
 
 export { item };

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

@@ -7,10 +7,7 @@ import '../sprinkles/sprinklesMerge.js';
 import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 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.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-hotkeys/use-hotkeys.js';
+import { useHotkeys } from '../../../../node_modules/.pnpm/@mantine_hooks@7.16.2_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) => {
@@ -19,9 +16,8 @@ const SpotlightTrigger = forwardRef(({ addonAfter, children, hotkey = DEFAULT_HO
   return /* @__PURE__ */ jsx(
     DialogTrigger,
     {
-      addonAfter: /* @__PURE__ */ jsx(Box, { asChild: true, ml: "auto", children: fallbackSpan(addonAfter) }),
+      addonAfter,
       icon: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
-      justifyContent: "start",
       ref,
       ...props,
       children: /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children })