@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/molecules/form-checkbox.js

@@ -1,59 +1,132 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
-import { Label } from "../atoms/label.js";
-import { Checkbox } from "./checkbox.js";
-function FormCheckboxRaw({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, ...props }) {
-    const extraTextId = extraText ? `${id}-extra` : void 0;
+import { connect, machine } from "@zag-js/checkbox";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { StatusText } from "../atoms/status-text.js";
+import { tv } from "../utils.js";
+const checkboxVariants = tv({
+    slots: {
+        root: "flex items-center gap-form-checkbox-gap",
+        control: [
+            "relative shrink-0 cursor-pointer",
+            "size-checkbox",
+            "rounded-checkbox border border-checkbox-border",
+            "bg-checkbox-bg",
+            "flex items-center justify-center",
+            "transition-all duration-200 motion-reduce:transition-none",
+            "data-[state=checked]:bg-checkbox-bg-checked",
+            "data-[state=checked]:border-checkbox-border-checked",
+            "data-[state=indeterminate]:bg-checkbox-bg-indeterminate",
+            "data-[state=indeterminate]:border-checkbox-border-indeterminate",
+            "data-disabled:cursor-not-allowed",
+            "data-disabled:bg-checkbox-bg-disabled",
+            "data-disabled:border-checkbox-border-disabled",
+            "data-focus-visible:outline-(style:--default-ring-style) data-focus-visible:outline-(length:--default-ring-width)",
+            "data-focus-visible:outline-checkbox-ring-focus",
+            "data-focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-invalid:border-(length:--border-width-validation)",
+            "data-invalid:border-checkbox-border-error"
+        ],
+        indicator: [
+            "text-checkbox-fg-checked",
+            "data-[state=checked]:token-icon-checkbox",
+            "data-[state=indeterminate]:size-checkbox-indeterminate-icon",
+            "data-[state=indeterminate]:rounded-full",
+            "data-[state=indeterminate]:bg-checkbox-fg-indeterminate",
+            "data-disabled:text-checkbox-fg-disabled"
+        ],
+        label: [
+            "cursor-pointer select-none",
+            "text-label-fg",
+            "data-disabled:cursor-not-allowed",
+            "data-disabled:text-label-fg-disabled"
+        ],
+        hiddenInput: "sr-only",
+        textIndented: "data-[icon=false]:pl-form-checkbox-text-offset"
+    },
+    variants: {
+        size: {
+            sm: {
+                label: "text-label-sm"
+            },
+            md: {
+                label: "text-label-md"
+            },
+            lg: {
+                label: "text-label-lg"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+function FormCheckbox({ id, name, value, checked, defaultChecked, indeterminate, disabled = false, required = false, readOnly = false, children, label, helpText, validateStatus = "default", showHelpTextIcon = "default" !== validateStatus, size = "md", className, onCheckedChange }) {
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const service = useMachine(machine, {
+        id: uniqueId,
+        name,
+        value,
+        checked: indeterminate ? "indeterminate" : checked,
+        defaultChecked,
+        disabled,
+        invalid: "error" === validateStatus,
+        readOnly,
+        required,
+        onCheckedChange: (details)=>{
+            onCheckedChange?.(true === details.checked);
+        }
+    });
+    const api = connect(service, normalizeProps);
+    const styles = checkboxVariants({
+        size
+    });
+    const labelContent = label ?? children;
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex gap-150",
+        className: className,
         children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "mt-2 flex items-start",
-                children: /*#__PURE__*/ jsx(Checkbox, {
-                    id: id,
-                    required: required,
-                    disabled: disabled,
-                    ...props
-                })
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "flex flex-col",
+            /*#__PURE__*/ jsxs("label", {
+                className: styles.root(),
+                ...api.getRootProps(),
                 children: [
-                    /*#__PURE__*/ jsx(Label, {
-                        htmlFor: id,
-                        size: size,
-                        required: required,
-                        disabled: disabled,
-                        children: label
+                    /*#__PURE__*/ jsx("div", {
+                        className: styles.control(),
+                        ...api.getControlProps(),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: styles.indicator(),
+                            ...api.getIndicatorProps()
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        className: styles.hiddenInput(),
+                        ...api.getHiddenInputProps()
                     }),
-                    helpText,
-                    extraText && /*#__PURE__*/ jsx(ExtraText, {
-                        id: extraTextId,
-                        size: size,
-                        children: extraText
+                    labelContent && /*#__PURE__*/ jsxs("span", {
+                        className: styles.label(),
+                        ...api.getLabelProps(),
+                        children: [
+                            labelContent,
+                            required && /*#__PURE__*/ jsx("span", {
+                                className: "text-label-fg-required",
+                                children: " *"
+                            })
+                        ]
                     })
                 ]
+            }),
+            helpText && /*#__PURE__*/ jsx("div", {
+                className: styles.textIndented(),
+                "data-icon": showHelpTextIcon,
+                children: /*#__PURE__*/ jsx(StatusText, {
+                    showIcon: showHelpTextIcon,
+                    size: size,
+                    status: validateStatus,
+                    children: helpText
+                })
             })
         ]
     });
 }
-function FormCheckbox({ helpText, id, validateStatus, size, ...props }) {
-    const helpTextId = helpText ? `${id}-helper` : void 0;
-    return /*#__PURE__*/ jsx(FormCheckboxRaw, {
-        id: id,
-        size: size,
-        validateStatus: validateStatus,
-        helpText: 'error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
-            id: helpTextId,
-            size: size,
-            children: helpText
-        }) : helpText ?? /*#__PURE__*/ jsx(ExtraText, {
-            id: helpTextId,
-            size: size,
-            children: helpText
-        }),
-        ...props
-    });
-}
-export { FormCheckbox, FormCheckboxRaw };
+FormCheckbox.displayName = "FormCheckbox";
+export { FormCheckbox };

package/dist/molecules/form-input.js

@@ -1,54 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
 import { Input } from "../atoms/input.js";
 import { Label } from "../atoms/label.js";
-function FormInputRaw({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, ...props }) {
-    const extraTextId = extraText ? `${id}-extra` : void 0;
+import { StatusText } from "../atoms/status-text.js";
+function FormInputRaw({ id, label, validateStatus = "default", helpText, size = "md", required, disabled, ...props }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-col gap-1",
+        className: "flex flex-col gap-form-field-gap",
         children: [
             /*#__PURE__*/ jsx(Label, {
+                disabled: disabled,
                 htmlFor: id,
-                size: size,
                 required: required,
-                disabled: disabled,
+                size: size,
                 children: label
             }),
             /*#__PURE__*/ jsx(Input, {
+                disabled: disabled,
                 id: id,
-                size: size,
                 required: required,
+                size: size,
                 variant: validateStatus,
-                disabled: disabled,
                 ...props,
                 className: "p-input-sm md:p-input-md"
             }),
-            helpText,
-            extraText && /*#__PURE__*/ jsx(ExtraText, {
-                id: extraTextId,
-                size: size,
-                children: extraText
-            })
+            helpText
         ]
     });
 }
-function FormInput({ helpText, id, validateStatus, size, ...props }) {
-    const helpTextId = helpText ? `${id}-helper` : void 0;
+function FormInput({ helpText, id, validateStatus = "default", showHelpTextIcon = "default" !== validateStatus, size = "md", ...props }) {
     return /*#__PURE__*/ jsx(FormInputRaw, {
-        id: id,
-        size: size,
-        validateStatus: validateStatus,
-        helpText: 'error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
-            id: helpTextId,
-            size: size,
-            showIcon: true,
-            children: helpText
-        }) : /*#__PURE__*/ jsx(ExtraText, {
-            id: helpTextId,
+        helpText: helpText && /*#__PURE__*/ jsx(StatusText, {
+            status: validateStatus,
+            showIcon: showHelpTextIcon,
             size: size,
             children: helpText
         }),
+        id: id,
+        size: size,
+        validateStatus: validateStatus,
         ...props
     });
 }

package/dist/molecules/form-numeric-input.js

@@ -1,45 +1,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
 import { Label } from "../atoms/label.js";
 import { NumericInput } from "../atoms/numeric-input.js";
-function FormNumericInput({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, children, ...numericInputProps }) {
-    const helpTextId = helpText ? `${id}-helper` : void 0;
-    const extraTextId = extraText ? `${id}-extra` : void 0;
+import { StatusText } from "../atoms/status-text.js";
+function FormNumericInput({ id, label, validateStatus = "default", helpText, showHelpTextIcon = "default" !== validateStatus, size = "md", required, disabled, children, ...numericInputProps }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-col gap-numeric-input-root-md data-[size=lg]:gap-numeric-input-root-lg data-[size=sm]:gap-numeric-input-root-sm",
-        "data-size": size,
+        className: "flex flex-col gap-form-field-gap",
         children: [
             /*#__PURE__*/ jsx(Label, {
+                disabled: disabled,
                 htmlFor: id,
-                size: size,
                 required: required,
-                disabled: disabled,
+                size: size,
                 children: label
             }),
             /*#__PURE__*/ jsx(NumericInput, {
+                disabled: disabled,
                 id: id,
-                size: size,
+                invalid: "error" === validateStatus,
                 required: required,
-                invalid: 'error' === validateStatus,
-                disabled: disabled,
+                size: size,
                 ...numericInputProps,
                 children: children
             }),
-            helpText && ('error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
-                id: helpTextId,
+            helpText && /*#__PURE__*/ jsx(StatusText, {
+                status: validateStatus,
+                showIcon: showHelpTextIcon,
                 size: size,
-                showIcon: true,
                 children: helpText
-            }) : /*#__PURE__*/ jsx(ExtraText, {
-                id: helpTextId,
-                size: size,
-                children: helpText
-            })),
-            extraText && /*#__PURE__*/ jsx(ExtraText, {
-                id: extraTextId,
-                size: size,
-                children: extraText
             })
         ]
     });

package/dist/molecules/form-textarea.js

@@ -1,53 +1,41 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
 import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
 import { Textarea } from "../atoms/textarea.js";
-function FormTextareaRaw({ id, label, validateStatus = 'default', helpText, extraText, size = 'md', required, disabled, ...props }) {
-    const extraTextId = extraText ? `${id}-extra` : void 0;
+function FormTextareaRaw({ id, label, validateStatus = "default", helpText, size = "md", required, disabled, ...props }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-col gap-1",
+        className: "flex flex-col gap-form-field-gap",
         children: [
             /*#__PURE__*/ jsx(Label, {
+                disabled: disabled,
                 htmlFor: id,
-                size: size,
                 required: required,
-                disabled: disabled,
+                size: size,
                 children: label
             }),
             /*#__PURE__*/ jsx(Textarea, {
+                disabled: disabled,
                 id: id,
-                size: size,
                 required: required,
+                size: size,
                 variant: validateStatus,
-                disabled: disabled,
                 ...props
             }),
-            helpText,
-            extraText && /*#__PURE__*/ jsx(ExtraText, {
-                id: extraTextId,
-                size: size,
-                children: extraText
-            })
+            helpText
         ]
     });
 }
-function FormTextarea({ helpText, id, validateStatus, size, ...props }) {
-    const helpTextId = helpText ? `${id}-helper` : void 0;
+function FormTextarea({ helpText, id, validateStatus = "default", showHelpTextIcon = "default" !== validateStatus, size = "md", ...props }) {
     return /*#__PURE__*/ jsx(FormTextareaRaw, {
-        id: id,
-        size: size,
-        validateStatus: validateStatus,
-        helpText: 'error' === validateStatus ? /*#__PURE__*/ jsx(ErrorText, {
-            id: helpTextId,
-            size: size,
-            showIcon: true,
-            children: helpText
-        }) : /*#__PURE__*/ jsx(ExtraText, {
-            id: helpTextId,
+        helpText: helpText && /*#__PURE__*/ jsx(StatusText, {
+            status: validateStatus,
+            showIcon: showHelpTextIcon,
             size: size,
             children: helpText
         }),
+        id: id,
+        size: size,
+        validateStatus: validateStatus,
         ...props
     });
 }

package/dist/molecules/menu.js

@@ -7,70 +7,72 @@ import { Button } from "../atoms/button.js";
 import { Icon } from "../atoms/icon.js";
 const menuVariants = tv({
     slots: {
-        trigger: '',
+        trigger: "",
         positioner: [
-            'w-(--reference-width)',
-            'isolate z-(--z-index)'
+            "w-(--reference-width)",
+            "isolate z-(--z-index)"
         ],
         content: [
-            'bg-menu-content-bg border border-menu-content-border',
-            'rounded-menu shadow-menu-content-shadow',
-            'p-menu-content',
-            'overflow-auto',
-            'focus:outline-none',
-            'data-[state=open]:animate-in',
-            'data-[state=closed]:animate-out'
+            "border border-menu-content-border bg-menu-content-bg",
+            "rounded-menu shadow-menu-content-shadow",
+            "p-menu-content",
+            "overflow-auto",
+            "focus-visible:outline-none",
+            "data-[state=open]:animate-in",
+            "data-[state=closed]:animate-out",
+            "motion-reduce:animate-none"
         ],
         item: [
-            'flex items-center gap-menu-item',
-            'cursor-pointer',
-            'px-menu-item-x py-menu-item-y',
-            'text-menu-item-fg',
-            'rounded-menu-item',
-            'hover:bg-menu-item-hover',
-            'focus:bg-menu-item-hover focus:outline-none',
-            'data-[disabled]:text-menu-fg-disabled data-[disabled]:cursor-not-allowed',
-            'data-[highlighted]:bg-menu-item-hover'
+            "flex items-center gap-menu-item",
+            "cursor-pointer",
+            "px-menu-item-x py-menu-item-y",
+            "text-menu-item-fg",
+            "rounded-menu-item",
+            "hover:bg-menu-item-hover",
+            "focus:bg-menu-item-hover focus-visible:outline-none",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:text-menu-fg-disabled",
+            "data-[highlighted]:bg-menu-item-hover",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         optionItem: [
-            'data-[state=checked]:font-semibold'
+            "data-[state=checked]:font-semibold"
         ],
         separator: [
-            'my-menu-separator',
-            'h-menu-separator',
-            'bg-menu-separator-bg'
+            "my-menu-separator",
+            "h-menu-separator",
+            "bg-menu-separator-bg"
         ],
         itemText: [
-            'flex-grow'
+            "flex-grow"
         ],
         itemIcon: [
-            'text-menu-item-icon-size text-menu-item-icon-fg'
+            "text-menu-item-icon-fg text-menu-item-icon-size"
         ],
         submenuIndicator: [
-            'ms-menu-submenu-indicator text-menu-submenu-indicator-fg'
+            "ms-menu-submenu-indicator text-menu-submenu-indicator-fg"
         ]
     },
     variants: {
         size: {
             sm: {
-                content: 'text-sm',
-                item: 'text-sm'
+                content: "text-sm",
+                item: "text-sm"
             },
             md: {
-                content: 'text-md',
-                item: 'text-md'
+                content: "text-md",
+                item: "text-md"
             },
             lg: {
-                content: 'text-lg',
-                item: 'text-lg'
+                content: "text-lg",
+                item: "text-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md'
+        size: "md"
     }
 });
-function SubmenuItem({ item, parentApi, parentService, size = 'md', onCheckedChange, onSelect, closeOnSelect = true }) {
+function SubmenuItem({ item, parentApi, parentService, size = "md", onCheckedChange, onSelect, closeOnSelect = true }) {
     const submenuService = useMachine(machine, {
         id: useId(),
         closeOnSelect,
@@ -90,19 +92,19 @@ function SubmenuItem({ item, parentApi, parentService, size = 'md', onCheckedCha
         size
     });
     const renderMenuItem = (menuItem)=>{
-        if ('separator' === menuItem.type) return /*#__PURE__*/ jsx("hr", {
+        if ("separator" === menuItem.type) return /*#__PURE__*/ jsx("hr", {
             className: separator()
         }, `separator-${menuItem.id}`);
-        if ('submenu' === menuItem.type) return /*#__PURE__*/ jsx(SubmenuItem, {
+        if ("submenu" === menuItem.type) return /*#__PURE__*/ jsx(SubmenuItem, {
+            closeOnSelect: closeOnSelect,
             item: menuItem,
-            parentApi: submenuApi,
-            parentService: submenuService,
-            size: size,
             onCheckedChange: onCheckedChange,
             onSelect: onSelect,
-            closeOnSelect: closeOnSelect
+            parentApi: submenuApi,
+            parentService: submenuService,
+            size: size
         }, menuItem.value);
-        if ('radio' === menuItem.type || 'checkbox' === menuItem.type) return /*#__PURE__*/ jsxs("li", {
+        if ("radio" === menuItem.type || "checkbox" === menuItem.type) return /*#__PURE__*/ jsxs("li", {
             className: `${itemSlot()} ${optionItem()}`,
             ...submenuApi.getOptionItemProps({
                 type: menuItem.type,
@@ -114,8 +116,8 @@ function SubmenuItem({ item, parentApi, parentService, size = 'md', onCheckedCha
             }),
             children: [
                 menuItem.checked && /*#__PURE__*/ jsx(Icon, {
-                    icon: "token-icon-check",
-                    className: itemIcon()
+                    className: itemIcon(),
+                    icon: "token-icon-check"
                 }),
                 /*#__PURE__*/ jsx("span", {
                     className: itemText(),
@@ -131,8 +133,8 @@ function SubmenuItem({ item, parentApi, parentService, size = 'md', onCheckedCha
             }),
             children: [
                 menuItem.icon && /*#__PURE__*/ jsx(Icon, {
-                    icon: menuItem.icon,
-                    className: itemIcon()
+                    className: itemIcon(),
+                    icon: menuItem.icon
                 }),
                 /*#__PURE__*/ jsx("span", {
                     className: itemText(),
@@ -150,16 +152,16 @@ function SubmenuItem({ item, parentApi, parentService, size = 'md', onCheckedCha
                 "data-disabled": item.disabled || void 0,
                 children: [
                     item.icon && /*#__PURE__*/ jsx(Icon, {
-                        icon: item.icon,
-                        className: itemIcon()
+                        className: itemIcon(),
+                        icon: item.icon
                     }),
                     /*#__PURE__*/ jsx("span", {
                         className: itemText(),
                         children: item.label
                     }),
                     /*#__PURE__*/ jsx(Icon, {
-                        icon: "token-icon-menu-submenu",
-                        className: submenuIndicator()
+                        className: submenuIndicator(),
+                        icon: "token-icon-menu-submenu"
                     })
                 ]
             }),
@@ -177,7 +179,7 @@ function SubmenuItem({ item, parentApi, parentService, size = 'md', onCheckedCha
         ]
     });
 }
-function Menu({ 'aria-label': ariaLabel, dir, id, closeOnSelect = true, loopFocus = true, typeahead = true, positioning, anchorPoint, open, defaultOpen, composite, navigate, defaultHighlightedValue, highlightedValue, onHighlightChange, onSelect, onOpenChange, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, onFocusOutside, items, triggerText = 'Menu', triggerIcon, customTrigger, size = 'md', onCheckedChange }) {
+function Menu({ "aria-label": ariaLabel, dir, id, closeOnSelect = true, loopFocus = true, typeahead = true, positioning, anchorPoint, open, defaultOpen, composite, navigate, defaultHighlightedValue, highlightedValue, onHighlightChange, onSelect, onOpenChange, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, onFocusOutside, items, triggerText = "Menu", triggerIcon, customTrigger, size = "md", onCheckedChange }) {
     const generatedId = useId();
     const service = useMachine(machine, {
         id: id || generatedId,
@@ -200,26 +202,26 @@ function Menu({ 'aria-label': ariaLabel, dir, id, closeOnSelect = true, loopFocu
         onInteractOutside,
         onFocusOutside,
         onHighlightChange,
-        'aria-label': ariaLabel
+        "aria-label": ariaLabel
     });
     const api = connect(service, normalizeProps);
     const { trigger, positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText } = menuVariants({
         size
     });
     const renderMenuItem = (item)=>{
-        if ('separator' === item.type) return /*#__PURE__*/ jsx("hr", {
+        if ("separator" === item.type) return /*#__PURE__*/ jsx("hr", {
             className: separator()
         }, `separator-${item.id}`);
-        if ('submenu' === item.type) return /*#__PURE__*/ jsx(SubmenuItem, {
+        if ("submenu" === item.type) return /*#__PURE__*/ jsx(SubmenuItem, {
+            closeOnSelect: closeOnSelect,
             item: item,
-            parentApi: api,
-            parentService: service,
-            size: size,
             onCheckedChange: onCheckedChange,
             onSelect: onSelect,
-            closeOnSelect: closeOnSelect
+            parentApi: api,
+            parentService: service,
+            size: size
         }, item.value);
-        if ('radio' === item.type || 'checkbox' === item.type) return /*#__PURE__*/ jsxs("li", {
+        if ("radio" === item.type || "checkbox" === item.type) return /*#__PURE__*/ jsxs("li", {
             className: `${itemSlot()} ${optionItem()}`,
             ...api.getOptionItemProps({
                 type: item.type,
@@ -231,8 +233,8 @@ function Menu({ 'aria-label': ariaLabel, dir, id, closeOnSelect = true, loopFocu
             }),
             children: [
                 item.checked && /*#__PURE__*/ jsx(Icon, {
-                    icon: "token-icon-check",
-                    className: itemIcon()
+                    className: itemIcon(),
+                    icon: "token-icon-check"
                 }),
                 /*#__PURE__*/ jsx("span", {
                     className: itemText(),
@@ -248,8 +250,8 @@ function Menu({ 'aria-label': ariaLabel, dir, id, closeOnSelect = true, loopFocu
             }),
             children: [
                 item.icon && /*#__PURE__*/ jsx(Icon, {
-                    icon: item.icon,
-                    className: itemIcon()
+                    className: itemIcon(),
+                    icon: item.icon
                 }),
                 /*#__PURE__*/ jsx("span", {
                     className: itemText(),
@@ -271,14 +273,14 @@ function Menu({ 'aria-label': ariaLabel, dir, id, closeOnSelect = true, loopFocu
                 children: [
                     triggerText,
                     triggerIcon && /*#__PURE__*/ jsx(Icon, {
-                        icon: triggerIcon,
-                        className: "ms-1"
+                        className: "ms-1",
+                        icon: triggerIcon
                     }),
                     !triggerIcon && /*#__PURE__*/ jsx("span", {
                         ...api.getIndicatorProps(),
                         children: /*#__PURE__*/ jsx(Icon, {
-                            icon: "token-icon-menu-trigger",
-                            className: "ms-1"
+                            className: "ms-1",
+                            icon: "token-icon-menu-trigger"
                         })
                     })
                 ]
@@ -297,5 +299,5 @@ function Menu({ 'aria-label': ariaLabel, dir, id, closeOnSelect = true, loopFocu
         ]
     });
 }
-Menu.displayName = 'Menu';
+Menu.displayName = "Menu";
 export { Menu };