@byline/ui 4.11.0 → 4.11.1

package/dist/components/accordion/accordion.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
-import classnames from "classnames";
+import clsx from "clsx";
 import accordion_module from "./accordion.module.js";
 const Root = ({ children, className, ref, ...props })=>/*#__PURE__*/ jsx(Accordion.Root, {
         ref: ref,
-        className: classnames('byline-accordion-root', className),
+        className: clsx('byline-accordion-root', className),
         ...props,
         children: children
     });
 const Item = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Item, {
-        className: classnames('byline-accordion-item', className),
+        className: clsx('byline-accordion-item', className),
         ...props,
         ref: ref,
         children: children
@@ -19,7 +19,7 @@ const Item = function({ ref, children, className, ...props }) {
 };
 const Header = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Header, {
-        className: classnames('byline-accordion-header', className),
+        className: clsx('byline-accordion-header', className),
         ...props,
         ref: ref,
         children: children
@@ -28,14 +28,14 @@ const Header = function({ ref, children, className, ...props }) {
 const Trigger = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Trigger, {
         ref: ref,
-        className: classnames('byline-accordion-trigger', accordion_module.trigger, className),
+        className: clsx('byline-accordion-trigger', accordion_module.trigger, className),
         ...props,
         children: children
     });
 };
 const Panel = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Panel, {
-        className: classnames('byline-accordion-content', accordion_module.content, className),
+        className: clsx('byline-accordion-content', accordion_module.content, className),
         ...props,
         ref: ref,
         children: children

package/dist/components/avatar/avatar.js

@@ -1,22 +1,22 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
-import classnames from "classnames";
+import clsx from "clsx";
 import avatar_module from "./avatar.module.js";
 const url = 'https://picsum.photos/150';
 const avatar_Avatar = ({ initials })=>/*#__PURE__*/ jsxs(Avatar.Root, {
-        className: classnames('byline-avatar-root', avatar_module["avatar-root"]),
+        className: clsx('byline-avatar-root', avatar_module["avatar-root"]),
         children: [
             /*#__PURE__*/ jsx(Avatar.Image, {
                 src: url,
                 alt: "Avatar",
-                className: classnames('byline-avatar-image', avatar_module["avatar-image"])
+                className: clsx('byline-avatar-image', avatar_module["avatar-image"])
             }),
             /*#__PURE__*/ jsx(Avatar.Fallback, {
-                className: classnames('byline-avatar-fallback', avatar_module["avatar-fallback"]),
+                className: clsx('byline-avatar-fallback', avatar_module["avatar-fallback"]),
                 delay: 600,
                 children: /*#__PURE__*/ jsx("span", {
-                    className: classnames('byline-avatar-text', avatar_module["avatar-text"]),
+                    className: clsx('byline-avatar-text', avatar_module["avatar-text"]),
                     children: initials
                 })
             })

package/dist/components/badge/badge.js

@@ -1,5 +1,5 @@
 import { useRender } from "@base-ui/react/use-render";
-import classnames from "classnames";
+import clsx from "clsx";
 import badge_module from "./badge.module.js";
 const Badge = ({ className, intent = 'primary', children, render, ref, ...rest })=>{
     const element = useRender({
@@ -8,7 +8,7 @@ const Badge = ({ className, intent = 'primary', children, render, ref, ...rest }
         ref,
         props: {
             ...rest,
-            className: classnames('byline-badge', `byline-badge-${intent}`, badge_module.badge, badge_module[intent], className),
+            className: clsx('byline-badge', `byline-badge-${intent}`, badge_module.badge, badge_module[intent], className),
             children
         }
     });

package/dist/components/button/button-group.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import react from "react";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
-import classnames from "classnames";
+import clsx from "clsx";
 import { Button } from "./button.js";
 import button_group_module from "./button-group.module.js";
 const ButtonGroupContext = /*#__PURE__*/ react.createContext({
@@ -32,7 +32,7 @@ const ButtonGroup = ({ className, variant = 'filled', size = 'md', ripple = true
         value: normalizedValue,
         ref: ref,
         onValueChange: handleValueChange,
-        className: classnames(button_group_module["button-group"], className),
+        className: clsx(button_group_module["button-group"], className),
         ...props,
         children: /*#__PURE__*/ jsx(ButtonGroupContext, {
             value: {

package/dist/components/button/button.js

@@ -1,13 +1,13 @@
 "use client";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import classnames from "classnames";
+import clsx from "clsx";
 import { Ripple } from "../../lib/ripple.js";
 import button_module from "./button.module.js";
 const Button = ({ variant = 'filled', size = 'md', type = 'button', intent = 'primary', fullWidth = false, ripple = true, className, children, render, ref, ...rest })=>{
     const defaultProps = {
         type,
-        className: classnames('byline-button', `byline-button-${intent}`, `byline-button-${variant}`, `byline-button-${size}`, button_module.button, button_module[variant], button_module[size], button_module[intent], {
+        className: clsx('byline-button', `byline-button-${intent}`, `byline-button-${variant}`, `byline-button-${size}`, button_module.button, button_module[variant], button_module[size], button_module[intent], {
             [button_module.fullWidth]: true === fullWidth
         }, className),
         children

package/dist/components/button/combo-button.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
 import { Dropdown } from "../dropdown/dropdown.js";
 import { Button } from "./button.js";
@@ -10,13 +10,13 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false,
     const wrapperRef = useRef(null);
     return /*#__PURE__*/ jsxs("div", {
         ref: wrapperRef,
-        className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"], className),
+        className: clsx('combo-button-wrapper', combo_button_module["combo-button-wrapper"], className),
         style: {
             '--ring-color': `var(--ring-${intent})`
         },
         children: [
             /*#__PURE__*/ jsx(Button, {
-                className: classnames('combo-button-button', combo_button_module["combo-button-button"], buttonClassName),
+                className: clsx('combo-button-button', combo_button_module["combo-button-button"], buttonClassName),
                 disabled: disabled || buttonDisabled,
                 intent: intent,
                 ...rest,
@@ -26,7 +26,7 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false,
             /*#__PURE__*/ jsxs(Dropdown.Root, {
                 children: [
                     /*#__PURE__*/ jsx(Dropdown.Trigger, {
-                        className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"], triggerClassName),
+                        className: clsx('combo-button-trigger', combo_button_module["combo-button-trigger"], triggerClassName),
                         render: /*#__PURE__*/ jsx(Button, {
                             disabled: disabled || optionsDisabled,
                             intent: intent,
@@ -39,7 +39,7 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false,
                     }),
                     options.length > 0 && /*#__PURE__*/ jsx(Dropdown.Portal, {
                         children: /*#__PURE__*/ jsx(Dropdown.Content, {
-                            className: classnames('combo-button-options', combo_button_module["combo-button-options"]),
+                            className: clsx('combo-button-options', combo_button_module["combo-button-options"]),
                             align: align,
                             anchor: wrapperRef,
                             "data-side": dataSide,
@@ -47,15 +47,15 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false,
                             children: options.map((option)=>/*#__PURE__*/ jsx(Dropdown.Item, {
                                     onClick: ()=>onOptionSelect?.(option.value),
                                     children: /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('combo-button-options-item', combo_button_module["combo-button-options-item"]),
+                                        className: clsx('combo-button-options-item', combo_button_module["combo-button-options-item"]),
                                         children: [
                                             anyOptionHasIcon && /*#__PURE__*/ jsx("span", {
-                                                className: classnames('combo-button-options-item-icon', combo_button_module["combo-button-options-item-icon"]),
+                                                className: clsx('combo-button-options-item-icon', combo_button_module["combo-button-options-item-icon"]),
                                                 "aria-hidden": "true",
                                                 children: option.icon
                                             }),
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('combo-button-options-item-label', combo_button_module["combo-button-options-item-label"]),
+                                                className: clsx('combo-button-options-item-label', combo_button_module["combo-button-options-item-label"]),
                                                 children: option.label
                                             })
                                         ]

package/dist/components/button/control-buttons.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import control_buttons_module from "./control-buttons.module.js";
 const DirectionalButton = ({ size = 'md', direction, className, onClick, ref, ...rest })=>{
     const handleClick = ()=>{
@@ -12,7 +12,7 @@ const DirectionalButton = ({ size = 'md', direction, className, onClick, ref, ..
         onClick: handleClick,
         type: "button",
         "aria-label": direction,
-        className: classnames('byline-control-button', direction, size, control_buttons_module["directional-button"], control_buttons_module[direction], control_buttons_module[size], className),
+        className: clsx('byline-control-button', direction, size, control_buttons_module["directional-button"], control_buttons_module[direction], control_buttons_module[size], className),
         children: /*#__PURE__*/ jsx("span", {
             children: /*#__PURE__*/ jsx("svg", {
                 className: "icon",
@@ -37,7 +37,7 @@ const PlayButton = ({ size = 'md', className, onClick, ref, ...rest })=>{
         onClick: handleClick,
         type: "button",
         "aria-label": "play",
-        className: classnames('control-button', 'play', size, control_buttons_module["play-button"], control_buttons_module[size], className),
+        className: clsx('control-button', 'play', size, control_buttons_module["play-button"], control_buttons_module[size], className),
         children: /*#__PURE__*/ jsx("span", {
             children: /*#__PURE__*/ jsx("svg", {
                 className: "icon",
@@ -65,7 +65,7 @@ const StopButton = ({ size = 'md', className, onClick, ref, ...rest })=>{
         onClick: handleClick,
         type: "button",
         "aria-label": "stop",
-        className: classnames('control-button', 'stop', size, control_buttons_module["stop-button"], control_buttons_module[size], className),
+        className: clsx('control-button', 'stop', size, control_buttons_module["stop-button"], control_buttons_module[size], className),
         children: /*#__PURE__*/ jsx("span", {
             children: /*#__PURE__*/ jsx("svg", {
                 className: "icon",

package/dist/components/button/copy-button.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { Button } from "./button.js";
 import copy_button_module from "./copy-button.module.js";
@@ -31,7 +31,7 @@ function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant,
     ]);
     const tooltipText = copied ? copiedText : hoverText;
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-copy-button-container', copy_button_module["copy-button-container"], containerClassName),
+        className: clsx('byline-copy-button-container', copy_button_module["copy-button-container"], containerClassName),
         children: /*#__PURE__*/ jsx(Tooltip, {
             side: "top",
             sideOffset: 2,
@@ -47,7 +47,7 @@ function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant,
                 intent: intent,
                 fullWidth: fullWidth,
                 ripple: ripple,
-                className: classnames('byline-copy-button', `byline-copy-button-${variant}`, `byline-copy-button-${size}`, `byline-copy-button-${intent}`, copy_button_module[size], className),
+                className: clsx('byline-copy-button', `byline-copy-button-${variant}`, `byline-copy-button-${size}`, `byline-copy-button-${intent}`, copy_button_module[size], className),
                 onClick: handleCopied,
                 ...rest,
                 children: /*#__PURE__*/ jsx("svg", {

package/dist/components/button/icon-button.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { Button } from "./button.js";
 import button_module from "./button.module.js";
 const IconButton = ({ square = false, round = true, variant, size = 'sm', intent, className, children, ...rest })=>/*#__PURE__*/ jsx(Button, {
         variant: variant,
         size: size,
         intent: intent,
-        className: classnames('icon-button', variant, size, intent, {
+        className: clsx('icon-button', variant, size, intent, {
             [button_module.square]: square
         }, {
             [button_module.round]: !square && round

package/dist/components/card/card.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
-import classnames from "classnames";
+import clsx from "clsx";
 import card_module from "./card.module.js";
 const Card = ({ className, hover, children, render, ref, ...rest })=>{
     const hoverClasses = null != hover && true === hover ? card_module["card-hover"] : void 0;
-    const classes = classnames('byline-card', card_module.card, hoverClasses, className);
+    const classes = clsx('byline-card', card_module.card, hoverClasses, className);
     const element = useRender({
         defaultTagName: 'div',
         render,
@@ -20,31 +20,31 @@ const Card = ({ className, hover, children, render, ref, ...rest })=>{
 Card.displayName = 'Card';
 const Header = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('byline-card-header', card_module["card-header"], className),
+        className: clsx('byline-card-header', card_module["card-header"], className),
         ...props
     });
 Header.displayName = 'CardHeader';
 const Title = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('byline-card-title', card_module["card-title"], className),
+        className: clsx('byline-card-title', card_module["card-title"], className),
         ...props
     });
 Title.displayName = 'CardTitle';
 const Description = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames("byline-card-description", card_module["card-description"], className),
+        className: clsx("byline-card-description", card_module["card-description"], className),
         ...props
     });
 Description.displayName = "CardDescription";
 const Content = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('byline-card-content', card_module["card-content"], className),
+        className: clsx('byline-card-content', card_module["card-content"], className),
         ...props
     });
 Content.displayName = 'CardContent';
 const Footer = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('byline-card-footer', card_module["card-footer"], className),
+        className: clsx('byline-card-footer', card_module["card-footer"], className),
         ...props
     });
 Footer.displayName = 'CardFooter';

package/dist/components/chips/chip.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import classnames from "classnames";
+import clsx from "clsx";
 import { CheckIcon } from "../../icons/check-icon.js";
 import { CloseIcon } from "../../icons/close-icon.js";
 import chip_module from "./chip.module.js";
@@ -54,7 +54,7 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
         onClick: handleRemoveClick,
         onKeyDown: handleRemoveKeyDown,
         children: /*#__PURE__*/ jsx(CloseIcon, {
-            className: classnames('byline-chip-close-icon', chip_module.icon, chip_module["close-icon"])
+            className: clsx('byline-chip-close-icon', chip_module.icon, chip_module["close-icon"])
         })
     }) : endIcon;
     const appliedVariant = isSelected ? 'filled' : 'outlined';
@@ -65,7 +65,7 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
         'aria-disabled': disabled || void 0,
         'aria-pressed': isSelectable ? isSelected : void 0,
         'aria-selected': isSelectable ? isSelected : void 0,
-        className: classnames('byline-chip', `byline-chip-${variant}`, `byline-chip-${intent}`, `byline-chip-${size}`, {
+        className: clsx('byline-chip', `byline-chip-${variant}`, `byline-chip-${intent}`, `byline-chip-${size}`, {
             selected: isSelected,
             disabled,
             removable: isRemovable
@@ -76,15 +76,15 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
         children: /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 null != leadingIcon && /*#__PURE__*/ jsx("span", {
-                    className: classnames('byline-chip-icon-wrapper', chip_module.iconWrapper),
+                    className: clsx('byline-chip-icon-wrapper', chip_module.iconWrapper),
                     children: leadingIcon
                 }),
                 /*#__PURE__*/ jsx("span", {
-                    className: classnames('byline-chip-label', chip_module.label),
+                    className: clsx('byline-chip-label', chip_module.label),
                     children: children
                 }),
                 null != trailingIcon && /*#__PURE__*/ jsx("span", {
-                    className: classnames('byline-chip-icon-wrapper', chip_module.iconWrapper),
+                    className: clsx('byline-chip-icon-wrapper', chip_module.iconWrapper),
                     children: trailingIcon
                 })
             ]

package/dist/components/container/container.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import container_module from "./container.module.js";
 const container_Container = function({ ref, className, children, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames('byline-container', container_module.container, className),
+        className: clsx('byline-container', container_module.container, className),
         children: children
     });
 };

package/dist/components/dropdown/dropdown.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
-import classnames from "classnames";
+import clsx from "clsx";
 import dropdown_module from "./dropdown.module.js";
 function Root({ children, ...rest }) {
     return /*#__PURE__*/ jsx(Menu.Root, {
@@ -10,7 +10,7 @@ function Root({ children, ...rest }) {
     });
 }
 const Trigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Trigger, {
-        className: classnames('byline-dropdown-trigger', className),
+        className: clsx('byline-dropdown-trigger', className),
         ref: ref,
         ...rest,
         children: children
@@ -31,7 +31,7 @@ const Content = ({ ref, className, children, side, sideOffset, align, alignOffse
         anchor: anchor,
         children: /*#__PURE__*/ jsx(Menu.Popup, {
             ref: ref,
-            className: classnames('byline-dropdown-content', dropdown_module["dropdown-content"], className),
+            className: clsx('byline-dropdown-content', dropdown_module["dropdown-content"], className),
             ...rest,
             children: children
         })
@@ -39,28 +39,28 @@ const Content = ({ ref, className, children, side, sideOffset, align, alignOffse
 Content.displayName = 'Content';
 const Group = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Group, {
         ref: ref,
-        className: classnames('byline-dropdown-group', className),
+        className: clsx('byline-dropdown-group', className),
         ...rest,
         children: children
     });
 Group.displayName = 'Group';
 const Item = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.Item, {
         ref: ref,
-        className: classnames('byline-dropdown-item', dropdown_module["dropdown-item"], className),
+        className: clsx('byline-dropdown-item', dropdown_module["dropdown-item"], className),
         ...rest,
         children: children
     });
 Item.displayName = 'Item';
 const Label = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.GroupLabel, {
         ref: ref,
-        className: classnames('byline-dropdown-label', className),
+        className: clsx('byline-dropdown-label', className),
         ...rest,
         children: children
     });
 Label.displayName = 'Label';
 const Separator = ({ ref, className, ...props })=>/*#__PURE__*/ jsx(Menu.Separator, {
         ref: ref,
-        className: classnames('byline-dropdown-separator', dropdown_module["dropdown-separator"], className),
+        className: clsx('byline-dropdown-separator', dropdown_module["dropdown-separator"], className),
         ...props
     });
 Separator.displayName = 'Separator';
@@ -78,7 +78,7 @@ const SubContent = ({ ref, className, children, side, sideOffset, align, alignOf
         collisionPadding: collisionPadding,
         children: /*#__PURE__*/ jsx(Menu.Popup, {
             ref: ref,
-            className: classnames('byline-dropdown-subcontent', dropdown_module["dropdown-subcontent"], className),
+            className: clsx('byline-dropdown-subcontent', dropdown_module["dropdown-subcontent"], className),
             ...rest,
             children: children
         })
@@ -86,7 +86,7 @@ const SubContent = ({ ref, className, children, side, sideOffset, align, alignOf
 SubContent.displayName = 'SubContent';
 const SubTrigger = ({ ref, className, children, ...rest })=>/*#__PURE__*/ jsx(Menu.SubmenuTrigger, {
         ref: ref,
-        className: classnames('byline-dropdown-subtrigger', className),
+        className: clsx('byline-dropdown-subtrigger', className),
         ...rest,
         children: children
     });

package/dist/components/hamburger/hamburger.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import hamburger_module from "./hamburger.module.js";
 function Hamburger({ className, colorScheme = 'auto', open = false, onChange, ariaLabel = 'Toggle menu', ariaControls, ...other }) {
     const handleClick = (event)=>{
@@ -25,7 +25,7 @@ function Hamburger({ className, colorScheme = 'auto', open = false, onChange, ar
     return /*#__PURE__*/ jsx("button", {
         type: "button",
         onClick: handleClick,
-        className: classnames('byline-hamburger', hamburger_module.hamburger, {
+        className: clsx('byline-hamburger', hamburger_module.hamburger, {
             [hamburger_module.open]: open,
             [hamburger_module.onDark]: 'onDark' === colorScheme,
             [hamburger_module.onLight]: 'onLight' === colorScheme
@@ -35,10 +35,10 @@ function Hamburger({ className, colorScheme = 'auto', open = false, onChange, ar
         "aria-expanded": open,
         ...other,
         children: /*#__PURE__*/ jsx("span", {
-            className: classnames('byline-hamburger-box', hamburger_module.box),
+            className: clsx('byline-hamburger-box', hamburger_module.box),
             "aria-hidden": "true",
             children: /*#__PURE__*/ jsx("span", {
-                className: classnames('byline-hamburger-inner', hamburger_module.inner)
+                className: clsx('byline-hamburger-inner', hamburger_module.inner)
             })
         })
     });

package/dist/components/inputs/autocomplete.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Autocomplete } from "@base-ui/react/autocomplete";
-import classnames from "classnames";
+import clsx from "clsx";
 import autocomplete_module from "./autocomplete.module.js";
 import { ErrorText } from "./error-text.js";
 import { HelpText } from "./help-text.js";
 import { Label } from "./label.js";
 function autocomplete_Autocomplete({ id, label, variant = 'outlined', inputSize = 'md', intent = 'primary', required, placeholder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', emptyText = 'No results found.', className, inputClassName, wrapperClassName, items, children, sideOffset = 4, ...rest }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-autocomplete-wrapper', autocomplete_module["autocomplete-wrapper"], wrapperClassName),
+        className: clsx('byline-autocomplete-wrapper', autocomplete_module["autocomplete-wrapper"], wrapperClassName),
         children: [
             /*#__PURE__*/ jsxs(Autocomplete.Root, {
                 items: items,
@@ -29,23 +29,23 @@ function autocomplete_Autocomplete({ id, label, variant = 'outlined', inputSize
                         "aria-required": required,
                         "aria-errormessage": error ? errorText : void 0,
                         "aria-describedby": error ? `error-for-${id}` : void 0,
-                        className: classnames('byline-autocomplete-input', `byline-autocomplete-input-${variant}`, `byline-autocomplete-input-${inputSize}`, `byline-autocomplete-input-${intent}`, autocomplete_module.input, autocomplete_module[variant], autocomplete_module[inputSize], autocomplete_module[intent], {
+                        className: clsx('byline-autocomplete-input', `byline-autocomplete-input-${variant}`, `byline-autocomplete-input-${inputSize}`, `byline-autocomplete-input-${intent}`, autocomplete_module.input, autocomplete_module[variant], autocomplete_module[inputSize], autocomplete_module[intent], {
                             [autocomplete_module.error]: error
                         }, className, inputClassName)
                     }),
                     /*#__PURE__*/ jsx(Autocomplete.Portal, {
                         children: /*#__PURE__*/ jsx(Autocomplete.Positioner, {
-                            className: classnames('byline-autocomplete-positioner', autocomplete_module.positioner),
+                            className: clsx('byline-autocomplete-positioner', autocomplete_module.positioner),
                             sideOffset: sideOffset,
                             children: /*#__PURE__*/ jsxs(Autocomplete.Popup, {
-                                className: classnames('byline-autocomplete-popup', autocomplete_module.popup, null != inputSize && autocomplete_module[`popup-${inputSize}`]),
+                                className: clsx('byline-autocomplete-popup', autocomplete_module.popup, null != inputSize && autocomplete_module[`popup-${inputSize}`]),
                                 children: [
                                     /*#__PURE__*/ jsx(Autocomplete.Empty, {
-                                        className: classnames('byline-autocomplete-empty', autocomplete_module.empty),
+                                        className: clsx('byline-autocomplete-empty', autocomplete_module.empty),
                                         children: emptyText
                                     }),
                                     /*#__PURE__*/ jsx(Autocomplete.List, {
-                                        className: classnames('byline-autocomplete-list', autocomplete_module.list),
+                                        className: clsx('byline-autocomplete-list', autocomplete_module.list),
                                         children: children
                                     })
                                 ]
@@ -66,7 +66,7 @@ function autocomplete_Autocomplete({ id, label, variant = 'outlined', inputSize
     });
 }
 const AutocompleteItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.Item, {
-        className: classnames('byline-autocomplete-item', autocomplete_module["autocomplete-item"], className),
+        className: clsx('byline-autocomplete-item', autocomplete_module["autocomplete-item"], className),
         ...props,
         ref: forwardedRef,
         children: children
@@ -74,13 +74,13 @@ const AutocompleteItem = ({ ref: forwardedRef, children, className, ...props })=
 AutocompleteItem.displayName = 'AutocompleteItem';
 const AutocompleteGroup = Autocomplete.Group;
 const AutocompleteGroupLabel = ({ children, className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.GroupLabel, {
-        className: classnames('byline-autocomplete-group-label', autocomplete_module["group-label"], className),
+        className: clsx('byline-autocomplete-group-label', autocomplete_module["group-label"], className),
         ...props,
         children: children
     });
 AutocompleteGroupLabel.displayName = 'AutocompleteGroupLabel';
 const AutocompleteSeparator = ({ className, ...props })=>/*#__PURE__*/ jsx(Autocomplete.Separator, {
-        className: classnames('byline-autocomplete-separator', autocomplete_module.separator, className),
+        className: clsx('byline-autocomplete-separator', autocomplete_module.separator, className),
         ...props
     });
 AutocompleteSeparator.displayName = 'AutocompleteSeparator';