@byline/ui 4.11.0 → 4.11.1

package/dist/loaders/ring.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import ring_module from "./ring.module.js";
 function LoaderRing({ color, size, className, style, ...rest }) {
     const ringStyle = {
@@ -10,10 +10,10 @@ function LoaderRing({ color, size, className, style, ...rest }) {
     const circles = [
         ...Array(4)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
-            className: classnames('byline-loader-ring-arc', ring_module["loader-ring-arc"])
+            className: clsx('byline-loader-ring-arc', ring_module["loader-ring-arc"])
         }, index));
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-loader-ring', ring_module["loader-ring"], className),
+        className: clsx('byline-loader-ring', ring_module["loader-ring"], className),
         style: ringStyle,
         ...rest,
         children: circles

package/dist/loaders/spinner.js

@@ -1,13 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import spinner_module from "./spinner.module.js";
 function LoaderSpinner({ color, size, className, style, ...rest }) {
     const circles = [
         ...Array(12)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
-            className: classnames('byline-loader-spinner-blade', spinner_module["loader-spinner-blade"]),
+            className: clsx('byline-loader-spinner-blade', spinner_module["loader-spinner-blade"]),
             children: /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-loader-spinner-blade-inner', spinner_module["loader-spinner-blade-inner"])
+                className: clsx('byline-loader-spinner-blade-inner', spinner_module["loader-spinner-blade-inner"])
             })
         }, index));
     const spinnerStyle = {
@@ -16,7 +16,7 @@ function LoaderSpinner({ color, size, className, style, ...rest }) {
     if (null != size) spinnerStyle['--loader-spinner-size'] = 'number' == typeof size ? `${size}px` : size;
     if (color) spinnerStyle['--loader-spinner-color'] = color;
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-loader-spinner', spinner_module["loader-spinner"], className),
+        className: clsx('byline-loader-spinner', spinner_module["loader-spinner"], className),
         style: spinnerStyle,
         ...rest,
         children: circles

package/dist/widgets/datepicker/datepicker.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Popover } from "@base-ui/react/popover";
-import classnames from "classnames";
+import clsx from "clsx";
 import { format } from "date-fns";
 import { Button } from "../../components/button/button.js";
 import { IconButton } from "../../components/button/icon-button.js";
@@ -47,7 +47,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
         }
     });
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-datepicker-container', datepicker_module.container, containerClassName),
+        className: clsx('byline-datepicker-container', datepicker_module.container, containerClassName),
         children: [
             /*#__PURE__*/ jsx("div", {
                 style: {
@@ -65,8 +65,8 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                     intent: intent,
                     inputSize: inputSize,
                     ref: inputRef,
-                    className: classnames('byline-datepicker-input', datepicker_module.input, inputClassName),
-                    inputWrapperClassName: classnames('byline-datepicker-input-wrapper', datepicker_module["input-wrapper"], inputWrapperClassName),
+                    className: clsx('byline-datepicker-input', datepicker_module.input, inputClassName),
+                    inputWrapperClassName: clsx('byline-datepicker-input-wrapper', datepicker_module["input-wrapper"], inputWrapperClassName),
                     onKeyDown: handleOnKeyDown,
                     onClick: (e)=>{
                         e.preventDefault();
@@ -135,10 +135,10 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                         children: /*#__PURE__*/ jsx(Popover.Positioner, {
                             sideOffset: 5,
                             children: /*#__PURE__*/ jsxs(Popover.Popup, {
-                                className: classnames('byline-datepicker-content', datepicker_module.content, contentClassName),
+                                className: clsx('byline-datepicker-content', datepicker_module.content, contentClassName),
                                 children: [
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('byline-datepicker-content-components', datepicker_module["content-components"]),
+                                        className: clsx('byline-datepicker-content-components', datepicker_module["content-components"]),
                                         children: [
                                             /*#__PURE__*/ jsx("div", {
                                                 ref: calendarRef,
@@ -196,20 +196,20 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('byline-datepicker-status-and-actions', datepicker_module["status-and-actions"]),
+                                        className: clsx('byline-datepicker-status-and-actions', datepicker_module["status-and-actions"]),
                                         children: [
                                             /*#__PURE__*/ jsx("div", {
-                                                className: classnames('byline-datepicker-content-status', datepicker_module["content-status"]),
+                                                className: clsx('byline-datepicker-content-status', datepicker_module["content-status"]),
                                                 children: date ? format(date, 'datetime' === mode ? 'PPPp' : 'PPP') : 'No date selected'
                                             }),
                                             /*#__PURE__*/ jsxs("div", {
-                                                className: classnames('byline-datepicker-content-actions', datepicker_module["content-actions"]),
+                                                className: clsx('byline-datepicker-content-actions', datepicker_module["content-actions"]),
                                                 children: [
                                                     /*#__PURE__*/ jsx("div", {
                                                         children: /*#__PURE__*/ jsx(Button, {
                                                             variant: "outlined",
                                                             size: "sm",
-                                                            className: classnames('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                            className: clsx('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                             onClick: ()=>{
                                                                 const today = new Date();
                                                                 setDate(today);
@@ -228,7 +228,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                             /*#__PURE__*/ jsx(Button, {
                                                                 size: "sm",
                                                                 intent: "noeffect",
-                                                                className: classnames('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                                className: clsx('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                                 onClick: ()=>{
                                                                     setIsOpen(false);
                                                                 },
@@ -237,7 +237,7 @@ function DatePicker({ id, name, label, required, initialValue, mode = 'datetime'
                                                             /*#__PURE__*/ jsx(Button, {
                                                                 variant: "outlined",
                                                                 size: "sm",
-                                                                className: classnames('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
+                                                                className: clsx('byline-datepicker-content-actions-button', datepicker_module["content-actions-button"]),
                                                                 onClick: ()=>{
                                                                     setIsOpen(false);
                                                                     handleOnDateChange(date);

package/dist/widgets/drawer/drawer-container.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import drawer_module from "./drawer.module.js";
 function DrawerContainer({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('byline-drawer-container', drawer_module["drawer-container"], className),
+        className: clsx('byline-drawer-container', drawer_module["drawer-container"], className),
         ...rest,
         children: children
     });

package/dist/widgets/drawer/drawer-content.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import drawer_module from "./drawer.module.js";
 function DrawerContent({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames('byline-drawer-content', drawer_module["drawer-content"], className),
+        className: clsx('byline-drawer-content', drawer_module["drawer-content"], className),
         children: children
     });
 }

package/dist/widgets/drawer/drawer-header.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import drawer_module from "./drawer.module.js";
 const drawer_header_DrawerHeader = function({ ref, children, className, ...rest }) {
-    const classes = classnames('byline-drawer-header', drawer_module["drawer-header"], className);
+    const classes = clsx('byline-drawer-header', drawer_module["drawer-header"], className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             overflowWrap: 'anywhere'

package/dist/widgets/drawer/drawer-top-actions.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import drawer_module from "./drawer.module.js";
 const DrawerTopActions = function({ ref, children, className, ...rest }) {
-    const classes = classnames('byline-drawer-top-actions', drawer_module["drawer-top-actions"], className);
+    const classes = clsx('byline-drawer-top-actions', drawer_module["drawer-top-actions"], className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             whiteSpace: 'nowrap'

package/dist/widgets/drawer/drawer.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { Drawer } from "@base-ui/react/drawer";
-import classnames from "classnames";
+import clsx from "clsx";
 import drawer_module from "./drawer.module.js";
 import { DrawerContainer } from "./drawer-container.js";
 import { DrawerContent } from "./drawer-content.js";
@@ -35,15 +35,15 @@ const drawer_Drawer = ({ id, isOpen, onDismiss, closeOnOverlayClick, children, w
         children: /*#__PURE__*/ jsxs(Drawer.Portal, {
             children: [
                 /*#__PURE__*/ jsx(Drawer.Backdrop, {
-                    className: classnames('byline-drawer-backdrop', drawer_module.backdrop),
+                    className: clsx('byline-drawer-backdrop', drawer_module.backdrop),
                     style: hasTopOffset ? {
                         top: topOffset
                     } : void 0
                 }),
                 /*#__PURE__*/ jsx(Drawer.Viewport, {
-                    className: classnames('byline-drawer-viewport', drawer_module.viewport),
+                    className: clsx('byline-drawer-viewport', drawer_module.viewport),
                     children: /*#__PURE__*/ jsx(Drawer.Popup, {
-                        className: classnames('byline-drawer-wrapper', drawer_module["drawer-wrapper"], typedStyles[`drawer-${width}`], typedStyles[`drawer-depth-${depth.toString()}`], className),
+                        className: clsx('byline-drawer-wrapper', drawer_module["drawer-wrapper"], typedStyles[`drawer-${width}`], typedStyles[`drawer-depth-${depth.toString()}`], className),
                         style: hasTopOffset ? {
                             top: topOffset
                         } : void 0,

package/dist/widgets/image-lightbox/image-lightbox.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconButton } from "../../components/button/icon-button.js";
 import { CloseIcon } from "../../icons/close-icon.js";
 import { DownloadIcon } from "../../icons/download-icon.js";
@@ -30,20 +30,20 @@ function ImageLightbox({ isOpen, onDismiss, src, alt, downloadFilename, title, m
         closeOnOverlayClick: true,
         onDismiss: onDismiss,
         children: /*#__PURE__*/ jsxs(Modal.Container, {
-            className: classnames('byline-image-lightbox-container', image_lightbox_module.container),
+            className: clsx('byline-image-lightbox-container', image_lightbox_module.container),
             children: [
                 /*#__PURE__*/ jsxs(Modal.Header, {
-                    className: classnames('byline-image-lightbox-header', image_lightbox_module.header),
+                    className: clsx('byline-image-lightbox-header', image_lightbox_module.header),
                     children: [
                         /*#__PURE__*/ jsxs("div", {
-                            className: classnames('byline-image-lightbox-title-stack', image_lightbox_module["title-stack"]),
+                            className: clsx('byline-image-lightbox-title-stack', image_lightbox_module["title-stack"]),
                             children: [
                                 /*#__PURE__*/ jsx("h3", {
-                                    className: classnames('byline-image-lightbox-title', image_lightbox_module.title),
+                                    className: clsx('byline-image-lightbox-title', image_lightbox_module.title),
                                     children: headingText
                                 }),
                                 meta?.width != null && meta?.height != null && /*#__PURE__*/ jsxs("p", {
-                                    className: classnames('byline-image-lightbox-subtitle', image_lightbox_module.subtitle),
+                                    className: clsx('byline-image-lightbox-subtitle', image_lightbox_module.subtitle),
                                     children: [
                                         meta.width,
                                         "\xd7",
@@ -55,7 +55,7 @@ function ImageLightbox({ isOpen, onDismiss, src, alt, downloadFilename, title, m
                             ]
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: classnames('byline-image-lightbox-actions', image_lightbox_module["header-actions"]),
+                            className: clsx('byline-image-lightbox-actions', image_lightbox_module["header-actions"]),
                             children: [
                                 /*#__PURE__*/ jsx(IconButton, {
                                     onClick: ()=>triggerDownload(src, downloadFilename),
@@ -80,11 +80,11 @@ function ImageLightbox({ isOpen, onDismiss, src, alt, downloadFilename, title, m
                     ]
                 }),
                 /*#__PURE__*/ jsx(Modal.Content, {
-                    className: classnames('byline-image-lightbox-content', image_lightbox_module.content),
+                    className: clsx('byline-image-lightbox-content', image_lightbox_module.content),
                     children: /*#__PURE__*/ jsx("img", {
                         src: src,
                         alt: altText,
-                        className: classnames('byline-image-lightbox-image', image_lightbox_module.image)
+                        className: clsx('byline-image-lightbox-image', image_lightbox_module.image)
                     })
                 })
             ]

package/dist/widgets/modal/modal-actions.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import modal_module from "./modal.module.js";
 const modal_actions_ModalActions = function({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames('byline-modal-actions', modal_module["modal-actions"], className),
+        className: clsx('byline-modal-actions', modal_module["modal-actions"], className),
         children: children
     });
 };

package/dist/widgets/modal/modal-container.js

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

package/dist/widgets/modal/modal-content.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import modal_module from "./modal.module.js";
 const modal_content_ModalContent = function({ ref, children, className, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...rest,
-        className: classnames('byline-modal-content', modal_module["modal-content"], className),
+        className: clsx('byline-modal-content', modal_module["modal-content"], className),
         children: children
     });
 };

package/dist/widgets/modal/modal-header.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import modal_module from "./modal.module.js";
 const modal_header_ModalHeader = function({ ref, children, className, ...rest }) {
-    const classes = classnames('byline-modal-header', modal_module["modal-header"], 'prose', className);
+    const classes = clsx('byline-modal-header', modal_module["modal-header"], 'prose', className);
     return /*#__PURE__*/ jsx("div", {
         style: {
             overflowWrap: 'anywhere'

package/dist/widgets/modal/modal.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useRef, useState } from "react";
 import { Dialog } from "@base-ui/react/dialog";
-import classnames from "classnames";
+import clsx from "clsx";
 import modal_module from "./modal.module.js";
 import { ModalActions } from "./modal-actions.js";
 import { ModalContainer } from "./modal-container.js";
@@ -50,10 +50,10 @@ function Modal({ isOpen, onDismiss, closeOnOverlayClick, children }) {
             children: /*#__PURE__*/ jsxs(Dialog.Portal, {
                 children: [
                     /*#__PURE__*/ jsx(Dialog.Backdrop, {
-                        className: classnames('byline-modal-backdrop', modal_module.backdrop)
+                        className: clsx('byline-modal-backdrop', modal_module.backdrop)
                     }),
                     /*#__PURE__*/ jsx(Dialog.Popup, {
-                        className: classnames('byline-modal-wrapper', modal_module["modal-wrapper"]),
+                        className: clsx('byline-modal-wrapper', modal_module["modal-wrapper"]),
                         onPointerDown: handleOverlayPointerDown,
                         onClick: handleOverlayClick,
                         children: children

package/dist/widgets/timeline/timeline.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import timeline_module from "./timeline.module.js";
 const Timeline = ({ id, className, children, ...rest })=>/*#__PURE__*/ jsx("div", {
         id: id,
-        className: classnames(timeline_module.timeline, 'timeline', className),
+        className: clsx(timeline_module.timeline, 'timeline', className),
         ...rest,
         children: children
     });
 const Root = function({ ref, children, className, ...props }) {
-    const classes = classnames(timeline_module["timeline-root"], 'timeline-root', className);
+    const classes = clsx(timeline_module["timeline-root"], 'timeline-root', className);
     return /*#__PURE__*/ jsx("ol", {
         ref: ref,
         ...props,
@@ -21,7 +21,7 @@ const Item = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx("li", {
         ref: ref,
         ...props,
-        className: classnames(timeline_module["timeline-item"], 'timeline-item', className),
+        className: clsx(timeline_module["timeline-item"], 'timeline-item', className),
         children: children
     });
 };
@@ -29,7 +29,7 @@ const Icon = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
         ref: ref,
         ...props,
-        className: classnames(timeline_module["timeline-icon"], 'time-line-icon', className),
+        className: clsx(timeline_module["timeline-icon"], 'time-line-icon', className),
         children: /*#__PURE__*/ jsx("svg", {
             "aria-hidden": "true",
             xmlns: "http://www.w3.org/2000/svg",
@@ -45,7 +45,7 @@ const Heading = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx("h3", {
         ref: ref,
         ...props,
-        className: classnames(timeline_module["timeline-heading"], 'timeline-heading', className),
+        className: clsx(timeline_module["timeline-heading"], 'timeline-heading', className),
         children: children
     });
 };
@@ -53,7 +53,7 @@ const DateItem = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx("time", {
         ref: ref,
         ...props,
-        className: classnames(timeline_module["timeline-date"], 'timeline-date', className),
+        className: clsx(timeline_module["timeline-date"], 'timeline-date', className),
         children: children
     });
 };
@@ -61,7 +61,7 @@ const Content = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         ...props,
-        className: classnames(timeline_module["timeline-content"], 'timeline-content', className),
+        className: clsx(timeline_module["timeline-content"], 'timeline-content', className),
         children: children
     });
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -54,7 +54,7 @@
     "@base-ui/react": "^1.6.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "motion": "^12.42.2",
     "react-day-picker": "^10.0.1",

package/src/components/accordion/accordion.tsx

@@ -9,7 +9,7 @@
 import type React from 'react'
 
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './accordion.module.css'
 

package/src/components/avatar/avatar.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './avatar.module.css'
 

package/src/components/badge/badge.tsx

@@ -1,5 +1,5 @@
 import { useRender } from '@base-ui/react/use-render'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './badge.module.css'
 import type { Intent } from '../@types/shared'

package/src/components/button/button-group.tsx

@@ -4,7 +4,7 @@ import React, { type Ref } from 'react'
 
 import { Toggle } from '@base-ui/react/toggle'
 import { ToggleGroup } from '@base-ui/react/toggle-group'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { Button } from './button'
 import styles from './button-group.module.css'

package/src/components/button/button.tsx

@@ -4,7 +4,7 @@ import type React from 'react'
 
 import { mergeProps } from '@base-ui/react/merge-props'
 import { useRender } from '@base-ui/react/use-render'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { Ripple } from '../../lib/ripple.js'
 import styles from './button.module.css'

package/src/components/button/combo-button.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { ChevronDownIcon } from '../../icons/chevron-down-icon'
 import { Dropdown as DropdownComponent } from '../dropdown/dropdown'

package/src/components/button/control-buttons.tsx

@@ -2,7 +2,7 @@
 
 import type React from 'react'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './control-buttons.module.css'
 import type { Size } from './@types/button.js'

package/src/components/button/copy-button.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 import { useEffect, useState } from 'react'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { Tooltip } from '../tooltip/tooltip.js'
 import { Button } from './button.js'

package/src/components/button/icon-button.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { Button } from './button'
 import styles from './button.module.css'

package/src/components/card/card.tsx

@@ -1,7 +1,7 @@
 import type React from 'react'
 
 import { useRender } from '@base-ui/react/use-render'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './card.module.css'
 

package/src/components/chips/chip.tsx

@@ -4,7 +4,7 @@ import type React from 'react'
 
 import { mergeProps } from '@base-ui/react/merge-props'
 import { useRender } from '@base-ui/react/use-render'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { CheckIcon } from '../../icons/check-icon.js'
 import { CloseIcon } from '../../icons/close-icon.js'

package/src/components/container/container.tsx

@@ -1,6 +1,6 @@
 import type React from 'react'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './container.module.css'
 

package/src/components/dropdown/dropdown.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 
 import { Menu } from '@base-ui/react/menu'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './dropdown.module.css'
 

package/src/components/hamburger/hamburger.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 import { useCallback, useEffect } from 'react'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './hamburger.module.css'
 

package/src/components/inputs/autocomplete.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 
 import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './autocomplete.module.css'
 import { ErrorText } from './error-text.jsx'

package/src/components/inputs/calendar.tsx

@@ -11,7 +11,7 @@
 import * as React from 'react'
 
 import { Select as SelectPrimitive } from '@base-ui/react/select'
-import cx from 'classnames'
+import cx from 'clsx'
 import {
   DayPicker,
   type DayPickerProps,

package/src/components/inputs/checkbox-group.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 import { useEffect, useState } from 'react'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { Checkbox } from './checkbox.jsx'
 import styles from './checkbox-group.module.css'

package/src/components/inputs/checkbox.tsx

@@ -3,7 +3,7 @@
 import type * as React from 'react'
 
 import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
-import cx from 'classnames'
+import cx from 'clsx'
 
 import { CheckIcon } from '../../icons/check-icon'
 import styles from './checkbox.module.css'

package/src/components/inputs/error-text.tsx

@@ -1,6 +1,6 @@
 import type React from 'react'
 
-import cx from 'classnames'
+import cx from 'clsx'
 
 import styles from './error-text.module.css'