@moduix/solid 1.0.0 → 1.1.1

package/dist/components/command-palette/CommandPalette.js

@@ -2,7 +2,7 @@ import { createComponent, mergeProps } from "solid-js/web";
 import { Combobox } from "@ark-ui/solid/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
 import { ark } from "@ark-ui/solid/factory";
-import { isHotKey } from "@zag-js/hotkeys";
+import { isHotKey } from "@ark-ui/solid/hotkeys";
 import { clsx } from "clsx";
 import { children, createEffect, onCleanup, splitProps } from "solid-js";
 import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.js";
@@ -113,11 +113,12 @@ function CommandPaletteTrigger(props) {
         get asChild () {
             return local.asChild;
         },
-        "data-slot": "command-palette-trigger",
         get ["class"] () {
             return clsx(!local.asChild && CommandPalette_module.trigger, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-trigger"
+    }));
 }
 function CommandPaletteBackdrop(props) {
     const [local, others] = splitProps(props, [
@@ -126,11 +127,12 @@ function CommandPaletteBackdrop(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Backdrop, mergeProps({
-                "data-slot": "command-palette-backdrop",
                 get ["class"] () {
                     return clsx(CommandPalette_module.backdrop, local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "command-palette-backdrop"
+            }));
         }
     });
 }
@@ -141,11 +143,12 @@ function CommandPalettePositioner(props) {
     return createComponent(OverlayPortal, {
         get children () {
             return createComponent(Dialog.Positioner, mergeProps({
-                "data-slot": "command-palette-positioner",
                 get ["class"] () {
                     return clsx(CommandPalette_module.positioner, local.class);
                 }
-            }, others));
+            }, others, {
+                "data-slot": "command-palette-positioner"
+            }));
         }
     });
 }
@@ -154,11 +157,12 @@ function CommandPaletteContent(props) {
         'class'
     ]);
     return createComponent(Dialog.Content, mergeProps({
-        "data-slot": "command-palette-content",
         get ["class"] () {
             return clsx(CommandPalette_module.content, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-content"
+    }));
 }
 function CommandPalettePanel(props) {
     const [local, others] = splitProps(props, [
@@ -186,44 +190,48 @@ function CommandPaletteTitle(props) {
         'class'
     ]);
     return createComponent(Dialog.Title, mergeProps({
-        "data-slot": "command-palette-title",
         get ["class"] () {
             return clsx(CommandPalette_module.title, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-title"
+    }));
 }
 function CommandPaletteDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Dialog.Description, mergeProps({
-        "data-slot": "command-palette-description",
         get ["class"] () {
             return clsx(CommandPalette_module.description, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-description"
+    }));
 }
 function CommandPaletteHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "command-palette-header",
         get ["class"] () {
             return clsx(CommandPalette_module.header, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-header"
+    }));
 }
 function CommandPaletteBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "command-palette-body",
         get ["class"] () {
             return clsx(CommandPalette_module.body, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-body"
+    }));
 }
 const CommandPalette_CommandPaletteCombobox = function(props) {
     const [local, others] = splitProps(props, [
@@ -242,7 +250,6 @@ const CommandPalette_CommandPaletteCombobox = function(props) {
         if (local.closeOnSelect ?? true) dialog().setOpen(false);
     };
     return createComponent(Combobox.Root, mergeProps({
-        "data-slot": "command-palette-combobox",
         get ["class"] () {
             return clsx(CommandPalette_module.combobox, local.class);
         },
@@ -263,6 +270,7 @@ const CommandPalette_CommandPaletteCombobox = function(props) {
         },
         onSelect: handleSelect
     }, others, {
+        "data-slot": "command-palette-combobox",
         get children () {
             return local.children;
         }
@@ -273,22 +281,24 @@ function CommandPaletteControl(props) {
         'class'
     ]);
     return createComponent(Combobox.Control, mergeProps({
-        "data-slot": "command-palette-control",
         get ["class"] () {
             return clsx(CommandPalette_module.control, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-control"
+    }));
 }
 function CommandPaletteInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.Input, mergeProps({
-        "data-slot": "command-palette-input",
         get ["class"] () {
             return clsx(CommandPalette_module.input, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-input"
+    }));
 }
 function CommandPaletteSearch(props) {
     const [local, others] = splitProps(props, [
@@ -327,7 +337,6 @@ function CommandPaletteClearTrigger(props) {
                 get asChild () {
                     return local.asChild;
                 },
-                "data-slot": "command-palette-clear-trigger",
                 get hidden () {
                     return 0 === combobox().inputValue.length;
                 },
@@ -346,12 +355,10 @@ function CommandPaletteClearTrigger(props) {
                 },
                 onPointerDown: (event)=>{
                     local.onPointerDown?.(event);
-                    if (0 === event.button) {
-                        event.preventDefault();
-                        combobox().setInputValue('');
-                    }
+                    if (0 === event.button) event.preventDefault();
                 }
             }, others, {
+                "data-slot": "command-palette-clear-trigger",
                 get children () {
                     return resolvedChildren() ?? createComponent(CloseIcon, {});
                 }
@@ -364,11 +371,11 @@ function CommandPaletteList(props) {
         'children'
     ]);
     return createComponent(Combobox.Content, mergeProps({
-        "data-slot": "command-palette-list",
         get ["class"] () {
             return clsx(CommandPalette_module.list, local.class);
         }
     }, others, {
+        "data-slot": "command-palette-list",
         get children () {
             return createComponent(ScrollArea, {
                 "data-slot": "command-palette-scroll-area",
@@ -403,55 +410,60 @@ function CommandPaletteEmpty(props) {
         'class'
     ]);
     return createComponent(Combobox.Empty, mergeProps({
-        "data-slot": "command-palette-empty",
         get ["class"] () {
             return clsx(CommandPalette_module.empty, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-empty"
+    }));
 }
 function CommandPaletteItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemGroup, mergeProps({
-        "data-slot": "command-palette-item-group",
         get ["class"] () {
             return clsx(CommandPalette_module.itemGroup, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-group"
+    }));
 }
 function CommandPaletteItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemGroupLabel, mergeProps({
-        "data-slot": "command-palette-item-group-label",
         get ["class"] () {
             return clsx(CommandPalette_module.itemGroupLabel, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-group-label"
+    }));
 }
 function CommandPaletteItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.Item, mergeProps({
-        "data-slot": "command-palette-item",
         get ["class"] () {
             return clsx(CommandPalette_module.item, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item"
+    }));
 }
 function CommandPaletteItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Combobox.ItemText, mergeProps({
-        "data-slot": "command-palette-item-text",
         get ["class"] () {
             return clsx(CommandPalette_module.itemText, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-text"
+    }));
 }
 function CommandPaletteItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -460,11 +472,11 @@ function CommandPaletteItemIndicator(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return createComponent(Combobox.ItemIndicator, mergeProps({
-        "data-slot": "command-palette-item-indicator",
         get ["class"] () {
             return clsx(CommandPalette_module.itemIndicator, local.class);
         }
     }, others, {
+        "data-slot": "command-palette-item-indicator",
         get children () {
             return resolvedChildren() ?? createComponent(CheckIcon, {});
         }
@@ -475,44 +487,48 @@ function CommandPaletteItemIcon(props) {
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-icon",
         get ["class"] () {
             return clsx(CommandPalette_module.itemIcon, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-icon"
+    }));
 }
 function CommandPaletteItemLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-label",
         get ["class"] () {
             return clsx(CommandPalette_module.itemLabel, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-label"
+    }));
 }
 function CommandPaletteItemDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-description",
         get ["class"] () {
             return clsx(CommandPalette_module.itemDescription, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-description"
+    }));
 }
 function CommandPaletteItemMeta(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.span, mergeProps({
-        "data-slot": "command-palette-item-meta",
         get ["class"] () {
             return clsx(CommandPalette_module.itemMeta, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-item-meta"
+    }));
 }
 function CommandPaletteSeparator(props) {
     const [local, others] = splitProps(props, [
@@ -520,33 +536,36 @@ function CommandPaletteSeparator(props) {
     ]);
     return createComponent(ark.div, mergeProps({
         role: "separator",
-        "data-slot": "command-palette-separator",
         get ["class"] () {
             return clsx(CommandPalette_module.separator, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-separator"
+    }));
 }
 function CommandPaletteFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(ark.div, mergeProps({
-        "data-slot": "command-palette-footer",
         get ["class"] () {
             return clsx(CommandPalette_module.footer, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-footer"
+    }));
 }
 function CommandPaletteKbd(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return createComponent(Kbd.Root, mergeProps({
-        "data-slot": "command-palette-kbd",
         get ["class"] () {
             return clsx(CommandPalette_module.kbd, local.class);
         }
-    }, others));
+    }, others, {
+        "data-slot": "command-palette-kbd"
+    }));
 }
 const CommandPalette = Object.assign(CommandPaletteRoot, {
     Root: CommandPaletteRoot,

package/dist/components/command-palette/CommandPalette.jsx

@@ -1,7 +1,7 @@
 import { Combobox } from "@ark-ui/solid/combobox";
 import { Dialog, useDialog, useDialogContext } from "@ark-ui/solid/dialog";
 import { ark } from "@ark-ui/solid/factory";
-import { isHotKey } from "@zag-js/hotkeys";
+import { isHotKey } from "@ark-ui/solid/hotkeys";
 import { clsx } from "clsx";
 import { children, createEffect, onCleanup, splitProps } from "solid-js";
 import { CheckIcon, CloseIcon } from "../../internal/icons/ui/Icons.jsx";
@@ -65,14 +65,14 @@ function CommandPaletteTrigger(props) {
         'asChild',
         'class'
     ]);
-    return <Dialog.Trigger asChild={local.asChild} data-slot="command-palette-trigger" class={clsx(!local.asChild && CommandPalette_module.trigger, local.class)} {...others}/>;
+    return <Dialog.Trigger asChild={local.asChild} class={clsx(!local.asChild && CommandPalette_module.trigger, local.class)} {...others} data-slot="command-palette-trigger"/>;
 }
 function CommandPaletteBackdrop(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Backdrop data-slot="command-palette-backdrop" class={clsx(CommandPalette_module.backdrop, local.class)} {...others}/>
+      <Dialog.Backdrop class={clsx(CommandPalette_module.backdrop, local.class)} {...others} data-slot="command-palette-backdrop"/>
     </OverlayPortal>;
 }
 function CommandPalettePositioner(props) {
@@ -80,14 +80,14 @@ function CommandPalettePositioner(props) {
         'class'
     ]);
     return <OverlayPortal>
-      <Dialog.Positioner data-slot="command-palette-positioner" class={clsx(CommandPalette_module.positioner, local.class)} {...others}/>
+      <Dialog.Positioner class={clsx(CommandPalette_module.positioner, local.class)} {...others} data-slot="command-palette-positioner"/>
     </OverlayPortal>;
 }
 function CommandPaletteContent(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Content data-slot="command-palette-content" class={clsx(CommandPalette_module.content, local.class)} {...others}/>;
+    return <Dialog.Content class={clsx(CommandPalette_module.content, local.class)} {...others} data-slot="command-palette-content"/>;
 }
 function CommandPalettePanel(props) {
     const [local, others] = splitProps(props, [
@@ -106,25 +106,25 @@ function CommandPaletteTitle(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Title data-slot="command-palette-title" class={clsx(CommandPalette_module.title, local.class)} {...others}/>;
+    return <Dialog.Title class={clsx(CommandPalette_module.title, local.class)} {...others} data-slot="command-palette-title"/>;
 }
 function CommandPaletteDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Dialog.Description data-slot="command-palette-description" class={clsx(CommandPalette_module.description, local.class)} {...others}/>;
+    return <Dialog.Description class={clsx(CommandPalette_module.description, local.class)} {...others} data-slot="command-palette-description"/>;
 }
 function CommandPaletteHeader(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="command-palette-header" class={clsx(CommandPalette_module.header, local.class)} {...others}/>;
+    return <ark.div class={clsx(CommandPalette_module.header, local.class)} {...others} data-slot="command-palette-header"/>;
 }
 function CommandPaletteBody(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="command-palette-body" class={clsx(CommandPalette_module.body, local.class)} {...others}/>;
+    return <ark.div class={clsx(CommandPalette_module.body, local.class)} {...others} data-slot="command-palette-body"/>;
 }
 const CommandPalette_CommandPaletteCombobox = function(props) {
     const [local, others] = splitProps(props, [
@@ -142,7 +142,7 @@ const CommandPalette_CommandPaletteCombobox = function(props) {
         local.onSelect?.(details);
         if (local.closeOnSelect ?? true) dialog().setOpen(false);
     };
-    return <Combobox.Root data-slot="command-palette-combobox" class={clsx(CommandPalette_module.combobox, local.class)} open={local.open ?? true} inputBehavior={local.inputBehavior ?? 'autohighlight'} selectionBehavior={local.selectionBehavior ?? 'preserve'} closeOnSelect={local.closeOnSelect ?? true} disableLayer={local.disableLayer ?? true} onSelect={handleSelect} {...others}>
+    return <Combobox.Root class={clsx(CommandPalette_module.combobox, local.class)} open={local.open ?? true} inputBehavior={local.inputBehavior ?? 'autohighlight'} selectionBehavior={local.selectionBehavior ?? 'preserve'} closeOnSelect={local.closeOnSelect ?? true} disableLayer={local.disableLayer ?? true} onSelect={handleSelect} {...others} data-slot="command-palette-combobox">
       {local.children}
     </Combobox.Root>;
 };
@@ -150,13 +150,13 @@ function CommandPaletteControl(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Control data-slot="command-palette-control" class={clsx(CommandPalette_module.control, local.class)} {...others}/>;
+    return <Combobox.Control class={clsx(CommandPalette_module.control, local.class)} {...others} data-slot="command-palette-control"/>;
 }
 function CommandPaletteInput(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Input data-slot="command-palette-input" class={clsx(CommandPalette_module.input, local.class)} {...others}/>;
+    return <Combobox.Input class={clsx(CommandPalette_module.input, local.class)} {...others} data-slot="command-palette-input"/>;
 }
 function CommandPaletteSearch(props) {
     const [local, others] = splitProps(props, [
@@ -180,16 +180,13 @@ function CommandPaletteClearTrigger(props) {
     ]);
     const resolvedChildren = children(()=>local.children);
     return <Combobox.Context>
-      {(combobox)=><Combobox.ClearTrigger asChild={local.asChild} data-slot="command-palette-clear-trigger" hidden={0 === combobox().inputValue.length} aria-label={local['aria-label'] ?? (!local.asChild && null == local.children && null == local['aria-labelledby'] ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={clsx(CloseButton_module.root, CommandPalette_module.clearTrigger, local.class)} onClick={(event)=>{
+      {(combobox)=><Combobox.ClearTrigger asChild={local.asChild} hidden={0 === combobox().inputValue.length} aria-label={local['aria-label'] ?? (!local.asChild && null == local.children && null == local['aria-labelledby'] ? DEFAULT_CLEAR_TRIGGER_LABEL : void 0)} aria-labelledby={local['aria-labelledby']} class={clsx(CloseButton_module.root, CommandPalette_module.clearTrigger, local.class)} onClick={(event)=>{
             local.onClick?.(event);
             if (!event.defaultPrevented) combobox().setInputValue('');
         }} onPointerDown={(event)=>{
             local.onPointerDown?.(event);
-            if (0 === event.button) {
-                event.preventDefault();
-                combobox().setInputValue('');
-            }
-        }} {...others}>
+            if (0 === event.button) event.preventDefault();
+        }} {...others} data-slot="command-palette-clear-trigger">
           {resolvedChildren() ?? <CloseIcon/>}
         </Combobox.ClearTrigger>}
     </Combobox.Context>;
@@ -199,7 +196,7 @@ function CommandPaletteList(props) {
         'class',
         'children'
     ]);
-    return <Combobox.Content data-slot="command-palette-list" class={clsx(CommandPalette_module.list, local.class)} {...others}>
+    return <Combobox.Content class={clsx(CommandPalette_module.list, local.class)} {...others} data-slot="command-palette-list">
       <ScrollArea data-slot="command-palette-scroll-area" class={CommandPalette_module.scrollArea}>
         <ScrollArea.Viewport data-slot="command-palette-scroll-viewport" class={CommandPalette_module.scrollViewport}>
           <ScrollArea.Content data-slot="command-palette-scroll-content" class={CommandPalette_module.scrollContent}>
@@ -213,31 +210,31 @@ function CommandPaletteEmpty(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Empty data-slot="command-palette-empty" class={clsx(CommandPalette_module.empty, local.class)} {...others}/>;
+    return <Combobox.Empty class={clsx(CommandPalette_module.empty, local.class)} {...others} data-slot="command-palette-empty"/>;
 }
 function CommandPaletteItemGroup(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemGroup data-slot="command-palette-item-group" class={clsx(CommandPalette_module.itemGroup, local.class)} {...others}/>;
+    return <Combobox.ItemGroup class={clsx(CommandPalette_module.itemGroup, local.class)} {...others} data-slot="command-palette-item-group"/>;
 }
 function CommandPaletteItemGroupLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemGroupLabel data-slot="command-palette-item-group-label" class={clsx(CommandPalette_module.itemGroupLabel, local.class)} {...others}/>;
+    return <Combobox.ItemGroupLabel class={clsx(CommandPalette_module.itemGroupLabel, local.class)} {...others} data-slot="command-palette-item-group-label"/>;
 }
 function CommandPaletteItem(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.Item data-slot="command-palette-item" class={clsx(CommandPalette_module.item, local.class)} {...others}/>;
+    return <Combobox.Item class={clsx(CommandPalette_module.item, local.class)} {...others} data-slot="command-palette-item"/>;
 }
 function CommandPaletteItemText(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Combobox.ItemText data-slot="command-palette-item-text" class={clsx(CommandPalette_module.itemText, local.class)} {...others}/>;
+    return <Combobox.ItemText class={clsx(CommandPalette_module.itemText, local.class)} {...others} data-slot="command-palette-item-text"/>;
 }
 function CommandPaletteItemIndicator(props) {
     const [local, others] = splitProps(props, [
@@ -245,7 +242,7 @@ function CommandPaletteItemIndicator(props) {
         'children'
     ]);
     const resolvedChildren = children(()=>local.children);
-    return <Combobox.ItemIndicator data-slot="command-palette-item-indicator" class={clsx(CommandPalette_module.itemIndicator, local.class)} {...others}>
+    return <Combobox.ItemIndicator class={clsx(CommandPalette_module.itemIndicator, local.class)} {...others} data-slot="command-palette-item-indicator">
       {resolvedChildren() ?? <CheckIcon/>}
     </Combobox.ItemIndicator>;
 }
@@ -253,43 +250,43 @@ function CommandPaletteItemIcon(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-icon" class={clsx(CommandPalette_module.itemIcon, local.class)} {...others}/>;
+    return <ark.span class={clsx(CommandPalette_module.itemIcon, local.class)} {...others} data-slot="command-palette-item-icon"/>;
 }
 function CommandPaletteItemLabel(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-label" class={clsx(CommandPalette_module.itemLabel, local.class)} {...others}/>;
+    return <ark.span class={clsx(CommandPalette_module.itemLabel, local.class)} {...others} data-slot="command-palette-item-label"/>;
 }
 function CommandPaletteItemDescription(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-description" class={clsx(CommandPalette_module.itemDescription, local.class)} {...others}/>;
+    return <ark.span class={clsx(CommandPalette_module.itemDescription, local.class)} {...others} data-slot="command-palette-item-description"/>;
 }
 function CommandPaletteItemMeta(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.span data-slot="command-palette-item-meta" class={clsx(CommandPalette_module.itemMeta, local.class)} {...others}/>;
+    return <ark.span class={clsx(CommandPalette_module.itemMeta, local.class)} {...others} data-slot="command-palette-item-meta"/>;
 }
 function CommandPaletteSeparator(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div role="separator" data-slot="command-palette-separator" class={clsx(CommandPalette_module.separator, local.class)} {...others}/>;
+    return <ark.div role="separator" class={clsx(CommandPalette_module.separator, local.class)} {...others} data-slot="command-palette-separator"/>;
 }
 function CommandPaletteFooter(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <ark.div data-slot="command-palette-footer" class={clsx(CommandPalette_module.footer, local.class)} {...others}/>;
+    return <ark.div class={clsx(CommandPalette_module.footer, local.class)} {...others} data-slot="command-palette-footer"/>;
 }
 function CommandPaletteKbd(props) {
     const [local, others] = splitProps(props, [
         'class'
     ]);
-    return <Kbd.Root data-slot="command-palette-kbd" class={clsx(CommandPalette_module.kbd, local.class)} {...others}/>;
+    return <Kbd.Root class={clsx(CommandPalette_module.kbd, local.class)} {...others} data-slot="command-palette-kbd"/>;
 }
 const CommandPalette = Object.assign(CommandPaletteRoot, {
     Root: CommandPaletteRoot,

package/dist/components/container/Container_module.css

@@ -32,7 +32,7 @@
   }
 
   .root-U4_b43[data-gutter="none"] {
-    --_container-gutter: 0;
+    --_container-gutter: 0px;
   }
 
   .root-U4_b43[data-gutter="sm"] {