@moduix/react 2.5.1 → 2.7.0

package/dist/components/listbox/Listbox_module.css

@@ -112,7 +112,6 @@
     --moduix-close-button-color: var(--moduix-listbox-filter-icon-color, var(--moduix-color-muted-foreground));
     --moduix-close-button-color-hover: var(--moduix-listbox-filter-action-color-hover, var(--moduix-color-foreground));
     --moduix-close-button-icon-size: var(--moduix-listbox-filter-icon-size, var(--moduix-spacing-4));
-    --moduix-close-button-transition: var(--moduix-listbox-transition, var(--moduix-transition-default));
     position: absolute;
     inset-inline-end: var(--moduix-listbox-filter-padding-x, var(--moduix-spacing-3));
     transform: translateY(-50%);
@@ -132,7 +131,6 @@
       solid transparent;
     outline-offset: calc(var(--moduix-listbox-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm))) *
         -1);
-    overscroll-behavior: auto;
     scrollbar-gutter: stable;
     scroll-padding-block: var(--moduix-listbox-content-padding-y, var(--moduix-popup-list-padding-y, var(--moduix-spacing-1)));
     transition: border-color var(--moduix-listbox-transition, var(--moduix-transition-default)),
@@ -156,7 +154,7 @@
   .content-bWizSr[data-orientation="horizontal"]:not([data-layout="grid"]) {
     gap: var(--moduix-listbox-horizontal-gap, var(--moduix-spacing-2));
     max-height: var(--moduix-listbox-horizontal-content-max-height, none);
-    padding-inline: var(--moduix-listbox-content-padding-y, var(--moduix-spacing-1));
+    padding-inline: var(--moduix-spacing-1);
     flex-direction: row;
     overflow: auto hidden;
   }
@@ -219,7 +217,7 @@
   }
 
   @media (hover: hover) {
-    .item-zgaYnD:not([data-disabled]):hover {
+    .item-zgaYnD:where(:not([data-disabled]):hover) {
       background-color: var(--moduix-listbox-hover-bg, var(--moduix-listbox-highlight-bg, var(--moduix-color-accent)));
       color: var(--moduix-listbox-hover-color, var(--moduix-listbox-highlight-color, var(--moduix-color-accent-foreground)));
     }
@@ -261,10 +259,9 @@
     color: var(--moduix-listbox-grid-selected-color, var(--moduix-color-foreground));
   }
 
-  .itemText-UXCIHm {
+  .itemText-UXCIHm, .itemTextLabel-gzLhrK {
     text-overflow: ellipsis;
     white-space: nowrap;
-    flex: 1;
     min-width: 0;
     overflow: hidden;
   }
@@ -312,12 +309,5 @@
     align-items: center;
     display: inline-flex;
   }
-
-  .itemTextLabel-gzLhrK {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    overflow: hidden;
-  }
 }
 

package/dist/components/marquee/Marquee.js

@@ -2,54 +2,53 @@ import { jsx } from "react/jsx-runtime";
 import { Marquee, useMarquee, useMarqueeContext } from "@ark-ui/react/marquee";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import Marquee_module from "./Marquee.module.js";
 const Marquee_MarqueeRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Root, {
         ref: ref,
-        "data-slot": "marquee-root",
-        className: clsx(Marquee_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Marquee_module.root, className),
+        ...props,
+        "data-slot": "marquee-root"
     });
 });
 const Marquee_MarqueeRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.RootProvider, {
         ref: ref,
-        "data-slot": "marquee-root-provider",
-        className: clsx(Marquee_module.root, normalizeClassName(className)),
-        ...props
+        className: clsx(Marquee_module.root, className),
+        ...props,
+        "data-slot": "marquee-root-provider"
     });
 });
 const Marquee_MarqueeViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Viewport, {
         ref: ref,
-        "data-slot": "marquee-viewport",
-        className: clsx(Marquee_module.viewport, normalizeClassName(className)),
-        ...props
+        className: clsx(Marquee_module.viewport, className),
+        ...props,
+        "data-slot": "marquee-viewport"
     });
 });
 const Marquee_MarqueeContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Content, {
         ref: ref,
-        "data-slot": "marquee-content",
-        className: clsx(Marquee_module.content, normalizeClassName(className)),
-        ...props
+        className: clsx(Marquee_module.content, className),
+        ...props,
+        "data-slot": "marquee-content"
     });
 });
 const Marquee_MarqueeItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Item, {
         ref: ref,
-        "data-slot": "marquee-item",
-        className: clsx(Marquee_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(Marquee_module.item, className),
+        ...props,
+        "data-slot": "marquee-item"
     });
 });
 const Marquee_MarqueeEdge = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Marquee.Edge, {
         ref: ref,
-        "data-slot": "marquee-edge",
-        className: clsx(Marquee_module.edge, normalizeClassName(className)),
-        ...props
+        className: clsx(Marquee_module.edge, className),
+        ...props,
+        "data-slot": "marquee-edge"
     });
 });
 const Marquee_Marquee = Object.assign(Marquee_MarqueeRoot, {

package/dist/components/menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import { Menu as MenuPrimitive, useMenu, useMenuContext, useMenuItemContext } from '@ark-ui/react/menu';
 import type { ComponentProps } from 'react';
-import { type OverlayPortalProps } from '../../internal/overlayPortal';
+import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
 type MenuIndicatorPosition = 'start' | 'end' | 'none';
 type MenuItemTone = 'default' | 'destructive';
 type MenuItemProps = ComponentProps<typeof MenuPrimitive.Item> & {
@@ -28,6 +28,7 @@ declare const Menu: typeof MenuRoot & {
     ContextTrigger: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ContextTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     Positioner: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.PositionerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLDivElement>>;
     Arrow: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ArrowProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     ArrowTip: import("react").ForwardRefExoticComponent<Omit<MenuPrimitive.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/menu/Menu.js

@@ -1,11 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { Menu, useMenu, useMenuContext, useMenuItemContext } from "@ark-ui/react/menu";
 import { clsx } from "clsx";
-import { Children, forwardRef, isValidElement } from "react";
+import { forwardRef } from "react";
 import { CheckIcon, ChevronDownIcon, ChevronRightIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../internal/overlayPortal.js";
 import Menu_module from "./Menu.module.js";
 function MenuRoot({ lazyMount = true, portalled, portalRef, unmountOnExit = true, ...props }) {
@@ -33,17 +32,17 @@ function MenuRootProvider({ lazyMount = true, portalled, portalRef, unmountOnExi
 const Menu_MenuTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Trigger, {
         ref: ref,
-        "data-slot": "menu-trigger",
         asChild: asChild,
-        className: clsx(!asChild && Menu_module.trigger, normalizeClassName(className)),
-        ...props
+        className: clsx(!asChild && Menu_module.trigger, className),
+        ...props,
+        "data-slot": "menu-trigger"
     });
 });
 function MenuTriggerIcon({ className, children, ...props }) {
     return /*#__PURE__*/ jsx("span", {
-        "data-slot": "menu-trigger-icon",
         className: clsx(Menu_module.triggerIcon, className),
         ...props,
+        "data-slot": "menu-trigger-icon",
         children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {
             className: Menu_module.iconSvg
         })
@@ -52,9 +51,9 @@ function MenuTriggerIcon({ className, children, ...props }) {
 const Menu_MenuIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Indicator, {
         ref: ref,
-        "data-slot": "menu-indicator",
-        className: clsx(Menu_module.indicator, normalizeClassName(className)),
+        className: clsx(Menu_module.indicator, className),
         ...props,
+        "data-slot": "menu-indicator",
         children: children ?? /*#__PURE__*/ jsx(ChevronDownIcon, {
             className: Menu_module.iconSvg
         })
@@ -63,89 +62,82 @@ const Menu_MenuIndicator = /*#__PURE__*/ forwardRef(function({ className, childr
 const Menu_MenuContextTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.ContextTrigger, {
         ref: ref,
-        "data-slot": "menu-context-trigger",
         asChild: asChild,
-        className: clsx(!asChild && Menu_module.contextTrigger, normalizeClassName(className)),
-        ...props
+        className: clsx(!asChild && Menu_module.contextTrigger, className),
+        ...props,
+        "data-slot": "menu-context-trigger"
     });
 });
 const Menu_MenuPositioner = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(OverlayPortal, {
         children: /*#__PURE__*/ jsx(Menu.Positioner, {
             ref: ref,
-            "data-slot": "menu-positioner",
-            className: clsx(Menu_module.positioner, normalizeClassName(className)),
-            ...props
+            className: clsx(Menu_module.positioner, className),
+            ...props,
+            "data-slot": "menu-positioner"
         })
     });
 });
 const Menu_MenuContent = /*#__PURE__*/ forwardRef(function({ asChild, className, children, ...props }, ref) {
-    if (asChild) return /*#__PURE__*/ jsx(Menu.Content, {
+    return /*#__PURE__*/ jsx(Menu.Content, {
         ref: ref,
-        "data-slot": "menu-content",
-        asChild: true,
-        className: clsx(Menu_module.content, normalizeClassName(className)),
+        asChild: asChild,
+        className: clsx(Menu_module.content, className),
         ...props,
+        "data-slot": "menu-content",
         children: children
     });
-    const childrenArray = Children.toArray(children);
-    const arrows = childrenArray.filter((child)=>/*#__PURE__*/ isValidElement(child) && child.type === Menu_MenuArrow);
-    const content = childrenArray.filter((child)=>!/*#__PURE__*/ isValidElement(child) || child.type !== Menu_MenuArrow);
-    return /*#__PURE__*/ jsxs(Menu.Content, {
+});
+const Menu_MenuViewport = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(ark.div, {
         ref: ref,
-        "data-slot": "menu-content",
-        asChild: asChild,
-        className: clsx(Menu_module.content, normalizeClassName(className)),
+        "data-scope": "menu",
+        "data-part": "viewport",
+        className: clsx(Menu_module.viewport, className),
         ...props,
-        children: [
-            arrows,
-            /*#__PURE__*/ jsx("div", {
-                className: Menu_module.contentViewport,
-                children: content
-            })
-        ]
+        "data-slot": "menu-viewport"
     });
 });
 const Menu_MenuArrow = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Arrow, {
         ref: ref,
-        "data-slot": "menu-arrow",
-        className: clsx(Menu_module.arrow, normalizeClassName(className)),
+        className: clsx(Menu_module.arrow, className),
         ...props,
+        "data-slot": "menu-arrow",
         children: children ?? /*#__PURE__*/ jsx(Menu_MenuArrowTip, {})
     });
 });
 const Menu_MenuArrowTip = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.ArrowTip, {
         ref: ref,
-        "data-slot": "menu-arrow-tip",
-        className: clsx(Menu_module.arrowTip, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.arrowTip, className),
+        ...props,
+        "data-slot": "menu-arrow-tip"
     });
 });
 const Menu_MenuItem = /*#__PURE__*/ forwardRef(function({ className, tone = 'default', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Item, {
         ref: ref,
-        "data-slot": "menu-item",
         "data-tone": tone,
-        className: clsx(Menu_module.item, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.item, className),
+        ...props,
+        "data-slot": "menu-item"
     });
 });
 const Menu_MenuTriggerItem = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.TriggerItem, {
         ref: ref,
-        "data-slot": "menu-trigger-item",
-        className: clsx(Menu_module.triggerItem, normalizeClassName(className)),
+        className: clsx(Menu_module.triggerItem, className),
         ...props,
+        "data-slot": "menu-trigger-item",
         children: children
     });
 });
 function MenuTriggerItemIcon({ className, children, ...props }) {
     return /*#__PURE__*/ jsx("span", {
-        "data-slot": "menu-trigger-item-icon",
         className: clsx(Menu_module.triggerItemIcon, className),
         ...props,
+        "data-slot": "menu-trigger-item-icon",
         children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {
             className: Menu_module.iconSvg
         })
@@ -154,59 +146,59 @@ function MenuTriggerItemIcon({ className, children, ...props }) {
 const Menu_MenuSeparator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.Separator, {
         ref: ref,
-        "data-slot": "menu-separator",
-        className: clsx(Menu_module.separator, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.separator, className),
+        ...props,
+        "data-slot": "menu-separator"
     });
 });
 const Menu_MenuItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.ItemGroup, {
         ref: ref,
-        "data-slot": "menu-item-group",
-        className: clsx(Menu_module.itemGroup, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.itemGroup, className),
+        ...props,
+        "data-slot": "menu-item-group"
     });
 });
 const Menu_MenuItemGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.ItemGroupLabel, {
         ref: ref,
-        "data-slot": "menu-item-group-label",
-        className: clsx(Menu_module.itemGroupLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.itemGroupLabel, className),
+        ...props,
+        "data-slot": "menu-item-group-label"
     });
 });
 const Menu_MenuRadioItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.RadioItemGroup, {
         ref: ref,
-        "data-slot": "menu-radio-item-group",
-        className: clsx(Menu_module.radioItemGroup, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.radioItemGroup, className),
+        ...props,
+        "data-slot": "menu-radio-item-group"
     });
 });
 const Menu_MenuRadioItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.RadioItem, {
         ref: ref,
-        "data-slot": "menu-radio-item",
         "data-indicator-position": indicator,
-        className: clsx(Menu_module.radioItem, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.radioItem, className),
+        ...props,
+        "data-slot": "menu-radio-item"
     });
 });
 const Menu_MenuCheckboxItem = /*#__PURE__*/ forwardRef(function({ className, indicator = 'start', ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.CheckboxItem, {
         ref: ref,
-        "data-slot": "menu-checkbox-item",
         "data-indicator-position": indicator,
-        className: clsx(Menu_module.checkboxItem, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.checkboxItem, className),
+        ...props,
+        "data-slot": "menu-checkbox-item"
     });
 });
 const Menu_MenuItemIndicator = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.ItemIndicator, {
         ref: ref,
-        "data-slot": "menu-item-indicator",
-        className: clsx(Menu_module.itemIndicator, normalizeClassName(className)),
+        className: clsx(Menu_module.itemIndicator, className),
         ...props,
+        "data-slot": "menu-item-indicator",
         children: children ?? /*#__PURE__*/ jsx(CheckIcon, {
             className: Menu_module.itemIndicatorIcon
         })
@@ -215,41 +207,41 @@ const Menu_MenuItemIndicator = /*#__PURE__*/ forwardRef(function({ className, ch
 const Menu_MenuItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(Menu.ItemText, {
         ref: ref,
-        "data-slot": "menu-item-text",
-        className: clsx(Menu_module.itemText, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.itemText, className),
+        ...props,
+        "data-slot": "menu-item-text"
     });
 });
 const Menu_MenuItemTextContent = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "menu-item-text-content",
-        className: clsx(Menu_module.itemTextContent, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.itemTextContent, className),
+        ...props,
+        "data-slot": "menu-item-text-content"
     });
 });
 const Menu_MenuItemTextIcon = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "menu-item-text-icon",
-        className: clsx(Menu_module.itemTextIcon, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.itemTextIcon, className),
+        ...props,
+        "data-slot": "menu-item-text-icon"
     });
 });
 const Menu_MenuItemTextLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "menu-item-text-label",
-        className: clsx(Menu_module.itemTextLabel, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.itemTextLabel, className),
+        ...props,
+        "data-slot": "menu-item-text-label"
     });
 });
 const Menu_MenuItemShortcut = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
     return /*#__PURE__*/ jsx(ark.span, {
         ref: ref,
-        "data-slot": "menu-item-shortcut",
-        className: clsx(Menu_module.itemShortcut, normalizeClassName(className)),
-        ...props
+        className: clsx(Menu_module.itemShortcut, className),
+        ...props,
+        "data-slot": "menu-item-shortcut"
     });
 });
 const Menu_Menu = Object.assign(MenuRoot, {
@@ -262,6 +254,7 @@ const Menu_Menu = Object.assign(MenuRoot, {
     ContextTrigger: Menu_MenuContextTrigger,
     Positioner: Menu_MenuPositioner,
     Content: Menu_MenuContent,
+    Viewport: Menu_MenuViewport,
     Arrow: Menu_MenuArrow,
     ArrowTip: Menu_MenuArrowTip,
     Item: Menu_MenuItem,

package/dist/components/menu/Menu.module.js

@@ -8,8 +8,8 @@ const Menu_module = {
     positioner: "positioner-Dxj8G1",
     content: "content-yFF7GN",
     menuContentIn: "menuContentIn-XDpUnW",
-    contentViewport: "contentViewport-GpY3ZX",
     menuContentOut: "menuContentOut-Q7Drkj",
+    viewport: "viewport-aiGW8J",
     arrow: "arrow-sziCms",
     arrowTip: "arrowTip-h3KKa6",
     item: "item-DZSt0x",

package/dist/components/menu/Menu_module.css

@@ -44,7 +44,7 @@
           -1);
   }
 
-  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV)[data-disabled], :is(.trigger-GnJcCa, .contextTrigger-jyrQRV):disabled {
+  :is(.trigger-GnJcCa, .contextTrigger-jyrQRV)[data-disabled] {
     pointer-events: none;
     opacity: var(--moduix-menu-disabled-opacity, var(--moduix-opacity-disabled));
   }
@@ -100,19 +100,19 @@
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
   }
 
-  .content-yFF7GN .contentViewport-GpY3ZX {
-    max-height: min(var(--moduix-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
-    flex-direction: column;
-    display: flex;
-    overflow: auto;
-  }
-
   .content-yFF7GN[data-state="closed"] {
     animation: menuContentOut-Q7Drkj
         var(--moduix-menu-transition, var(--moduix-popup-motion-duration, var(--moduix-duration-normal))
             var(--moduix-popup-motion-easing, var(--moduix-ease-in-out)));
   }
 
+  .viewport-aiGW8J {
+    max-height: min(var(--moduix-menu-popup-max-height, 24rem), var(--available-height, 100dvh));
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+
   .arrow-sziCms {
     --arrow-background: var(--moduix-menu-popup-bg, var(--moduix-color-popover));
   }

package/dist/components/native-select/NativeSelect.js

@@ -3,7 +3,6 @@ import { Field } from "@ark-ui/react/field";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
 import { ChevronDownIcon } from "../../internal/icons/ui/index.js";
-import { normalizeClassName } from "../../internal/normalizeClassName.js";
 import NativeSelect_module from "./NativeSelect.module.js";
 const NativeSelect_NativeSelectRoot = /*#__PURE__*/ forwardRef(function({ className, controlProps, ...props }, ref) {
     return /*#__PURE__*/ jsxs("span", {
@@ -11,13 +10,13 @@ const NativeSelect_NativeSelectRoot = /*#__PURE__*/ forwardRef(function({ classN
         "data-scope": "native-select",
         "data-part": "control",
         "data-slot": "native-select-control",
-        className: clsx(NativeSelect_module.control, normalizeClassName(controlProps?.className)),
+        className: clsx(NativeSelect_module.control, controlProps?.className),
         children: [
             /*#__PURE__*/ jsx(Field.Select, {
                 ...props,
                 ref: ref,
                 "data-slot": "native-select-root",
-                className: clsx(NativeSelect_module.root, normalizeClassName(className))
+                className: clsx(NativeSelect_module.root, className)
             }),
             /*#__PURE__*/ jsx("span", {
                 "aria-hidden": "true",

package/dist/components/native-select/NativeSelect_module.css

@@ -1,6 +1,5 @@
 @layer moduix.components {
   .control-D7osAi {
-    width: -moz-fit-content;
     width: fit-content;
     min-width: 0;
     max-width: 100%;