@byline/ui 4.10.2 → 4.11.1

package/dist/components/inputs/calendar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
-import classnames from "classnames";
+import clsx from "clsx";
 import { DayPicker } from "react-day-picker";
 import { ChevronsUpDown } from "../../icons/chevrons-up-down.js";
 import { Button } from "../button/button.js";
@@ -9,26 +9,26 @@ import { ScrollArea } from "../scroll-area/scroll-area.js";
 import calendar_module from "./calendar.module.js";
 import * as __rspack_external_react from "react";
 function Calendar({ ref, className, classNames, hideNavigation, showOutsideDays = true, components: customComponents, ...props }) {
-    const _monthsClassName = classnames(calendar_module.months, props.monthsClassName);
-    const _monthCaptionClassName = classnames(calendar_module["months-caption"], props.monthCaptionClassName);
-    const _dropdownsClassName = classnames(calendar_module.dropdowns, props.dropdownsClassName);
-    const _footerClassName = classnames(calendar_module.footer, props.footerClassName);
-    const _weekdaysClassName = classnames(calendar_module.weekdays, props.weekdaysClassName);
-    const _weekdayClassName = classnames(calendar_module.weekday, props.weekdayClassName);
-    const _captionLabelClassName = classnames(calendar_module["caption-label"], props.captionLabelClassName);
-    const _monthGridClassName = classnames(calendar_module["month-grid"], props.monthGridClassName);
-    const _weekClassName = classnames(calendar_module.week, props.weekClassName);
-    const _dayClassName = classnames(calendar_module.day, props.dayClassName);
-    const _dayButtonClassName = classnames(calendar_module["day-button"], props.dayButtonClassName);
-    const buttonRangeClassName = classnames(calendar_module["button-range"]);
-    const _rangeStartClassName = classnames(buttonRangeClassName, calendar_module["range-start"], props.rangeStartClassName);
-    const _rangeEndClassName = classnames(buttonRangeClassName, calendar_module["range-end"], props.rangeEndClassName);
-    const _rangeMiddleClassName = classnames(calendar_module["range-middle"], props.rangeMiddleClassName);
-    const _selectedClassName = classnames(calendar_module["day-selected"], props.selectedClassName);
-    const _todayClassName = classnames(calendar_module.today, props.todayClassName);
-    const _outsideClassName = classnames(calendar_module.outside, props.outsideClassName);
-    const _disabledClassName = classnames(calendar_module.disabled, props.disabledClassName);
-    const _hiddenClassName = classnames(calendar_module.hidden, props.hiddenClassName);
+    const _monthsClassName = clsx(calendar_module.months, props.monthsClassName);
+    const _monthCaptionClassName = clsx(calendar_module["months-caption"], props.monthCaptionClassName);
+    const _dropdownsClassName = clsx(calendar_module.dropdowns, props.dropdownsClassName);
+    const _footerClassName = clsx(calendar_module.footer, props.footerClassName);
+    const _weekdaysClassName = clsx(calendar_module.weekdays, props.weekdaysClassName);
+    const _weekdayClassName = clsx(calendar_module.weekday, props.weekdayClassName);
+    const _captionLabelClassName = clsx(calendar_module["caption-label"], props.captionLabelClassName);
+    const _monthGridClassName = clsx(calendar_module["month-grid"], props.monthGridClassName);
+    const _weekClassName = clsx(calendar_module.week, props.weekClassName);
+    const _dayClassName = clsx(calendar_module.day, props.dayClassName);
+    const _dayButtonClassName = clsx(calendar_module["day-button"], props.dayButtonClassName);
+    const buttonRangeClassName = clsx(calendar_module["button-range"]);
+    const _rangeStartClassName = clsx(buttonRangeClassName, calendar_module["range-start"], props.rangeStartClassName);
+    const _rangeEndClassName = clsx(buttonRangeClassName, calendar_module["range-end"], props.rangeEndClassName);
+    const _rangeMiddleClassName = clsx(calendar_module["range-middle"], props.rangeMiddleClassName);
+    const _selectedClassName = clsx(calendar_module["day-selected"], props.selectedClassName);
+    const _todayClassName = clsx(calendar_module.today, props.todayClassName);
+    const _outsideClassName = clsx(calendar_module.outside, props.outsideClassName);
+    const _disabledClassName = clsx(calendar_module.disabled, props.disabledClassName);
+    const _hiddenClassName = clsx(calendar_module.hidden, props.hiddenClassName);
     const Dropdown = __rspack_external_react.useCallback(({ value, onChange, options })=>{
         const selected = options?.find((option)=>option.value === value);
         const handleChange = (newValue)=>{
@@ -49,7 +49,7 @@ function Calendar({ ref, className, classNames, hideNavigation, showOutsideDays
                     render: /*#__PURE__*/ jsx(Button, {
                         variant: "outlined",
                         size: "sm",
-                        className: classnames(calendar_module["select-trigger"], props.selectTriggerClassName)
+                        className: clsx(calendar_module["select-trigger"], props.selectTriggerClassName)
                     }),
                     children: [
                         /*#__PURE__*/ jsx(Select.Value, {
@@ -72,7 +72,7 @@ function Calendar({ ref, className, classNames, hideNavigation, showOutsideDays
                         alignItemWithTrigger: false,
                         children: /*#__PURE__*/ jsx(Select.Popup, {
                             children: /*#__PURE__*/ jsx(ScrollArea, {
-                                className: classnames(calendar_module["scroll-area"]),
+                                className: clsx(calendar_module["scroll-area"]),
                                 children: /*#__PURE__*/ jsx(Select.List, {
                                     children: options?.map(({ value, label, disabled }, id)=>/*#__PURE__*/ jsx(Select.Item, {
                                             className: calendar_module["select-item"],
@@ -95,7 +95,7 @@ function Calendar({ ref, className, classNames, hideNavigation, showOutsideDays
     return /*#__PURE__*/ jsx(DayPicker, {
         showOutsideDays: showOutsideDays,
         hideNavigation: true,
-        className: classnames(calendar_module["day-picker"], className),
+        className: clsx(calendar_module["day-picker"], className),
         classNames: {
             caption_label: _captionLabelClassName,
             day: _dayClassName,

package/dist/components/inputs/checkbox-group.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 { Checkbox } from "./checkbox.js";
 import checkbox_group_module from "./checkbox-group.module.js";
 const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defaultValues, controlledValue, disabled = false, onChange })=>{
@@ -30,7 +30,7 @@ const CheckboxGroup = ({ groupName, className, checkBoxClasses, checkBoxes, defa
         onChange?.(s);
     };
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-checkbox-group', checkbox_group_module["checkbox-group"], className),
+        className: clsx('byline-checkbox-group', checkbox_group_module["checkbox-group"], className),
         children: checkBoxes.map((cb)=>/*#__PURE__*/ jsx(Checkbox, {
                 id: `${groupName}-${cb.id}`,
                 name: `${groupName}-${cb.id}`,

package/dist/components/inputs/checkbox.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as checkbox_Checkbox } from "@base-ui/react/checkbox";
-import classnames from "classnames";
+import clsx from "clsx";
 import { CheckIcon } from "../../icons/check-icon.js";
 import checkbox_module from "./checkbox.module.js";
 import { ErrorText } from "./error-text.js";
 import { HelpText } from "./help-text.js";
 const inputs_checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined', size = 'md', intent = 'primary', reverse = false, className, checkBoxClasses, containerClasses, componentClasses, labelClasses, error = false, helpText = '', errorText = '', ...rest }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-checkbox-container', checkbox_module.container, containerClasses),
+        className: clsx('byline-checkbox-container', checkbox_module.container, containerClasses),
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-checkbox-component', checkbox_module.component, componentClasses, {
+                className: clsx('byline-checkbox-component', checkbox_module.component, componentClasses, {
                     [checkbox_module.reverse]: reverse
                 }),
                 children: [
@@ -23,11 +23,11 @@ const inputs_checkbox_Checkbox = function({ ref, id, name, label, variant = 'out
                         render: /*#__PURE__*/ jsx("button", {
                             type: "button"
                         }),
-                        className: classnames('byline-checkbox', `byline-checkbox-${variant}`, `byline-checkbox-${size}`, `byline-checkbox-${intent}`, checkbox_module.checkbox, checkbox_module[variant], checkbox_module[size], checkbox_module[intent], checkBoxClasses, className),
+                        className: clsx('byline-checkbox', `byline-checkbox-${variant}`, `byline-checkbox-${size}`, `byline-checkbox-${intent}`, checkbox_module.checkbox, checkbox_module[variant], checkbox_module[size], checkbox_module[intent], checkBoxClasses, className),
                         ...rest,
                         children: /*#__PURE__*/ jsx(checkbox_Checkbox.Indicator, {
                             keepMounted: true,
-                            className: classnames('byline-checkbox-indicator', checkbox_module.indicator),
+                            className: clsx('byline-checkbox-indicator', checkbox_module.indicator),
                             children: /*#__PURE__*/ jsx(CheckIcon, {
                                 className: checkbox_module.icon
                             })
@@ -35,7 +35,7 @@ const inputs_checkbox_Checkbox = function({ ref, id, name, label, variant = 'out
                     }),
                     null != label && /*#__PURE__*/ jsx("label", {
                         htmlFor: id,
-                        className: classnames('byline-checkbox-label', checkbox_module.label, labelClasses),
+                        className: clsx('byline-checkbox-label', checkbox_module.label, labelClasses),
                         children: label
                     })
                 ]

package/dist/components/inputs/error-text.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import error_text_module from "./error-text.module.js";
 function ErrorText({ id, className, size, text }) {
     return /*#__PURE__*/ jsx("p", {
         id: id,
-        className: classnames('error-text', error_text_module.text, size && error_text_module[size], className),
+        className: clsx('error-text', error_text_module.text, size && error_text_module[size], className),
         children: text
     });
 }

package/dist/components/inputs/help-text.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import help_text_module from "./help-text.module.js";
 function HelpText({ id, className, size, text }) {
     return /*#__PURE__*/ jsx("p", {
         id: id,
-        className: classnames('byline-help-text', help_text_module.text, size && help_text_module[size], className),
+        className: clsx('byline-help-text', help_text_module.text, size && help_text_module[size], className),
         children: text
     });
 }

package/dist/components/inputs/input-adornment.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import input_adornment_module from "./input-adornment.module.js";
 function InputAdornment({ position = 'start', margins = true, className, children, ...rest }) {
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-input-adornment', `byline-input-adornment-${position}`, input_adornment_module.adornment, {
+        className: clsx('byline-input-adornment', `byline-input-adornment-${position}`, input_adornment_module.adornment, {
             [input_adornment_module.start]: 'start' === position
         }, {
             [input_adornment_module.end]: 'end' === position

package/dist/components/inputs/input.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { ErrorText } from "./error-text.js";
 import { HelpText } from "./help-text.js";
 import input_module from "./input.module.js";
 import { Label } from "./label.js";
 const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize = 'md', intent = 'primary', required, label, startAdornment, endAdornment, placeHolder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', inputWrapperClassName, className, ...rest })=>/*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-input-wrapper', input_module["input-wrapper"], inputWrapperClassName),
+        className: clsx('byline-input-wrapper', input_module["input-wrapper"], inputWrapperClassName),
         children: [
             null != label && /*#__PURE__*/ jsx(Label, {
                 id: id,
@@ -15,10 +15,10 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
                 label: label
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-input-container', input_module["input-container"]),
+                className: clsx('byline-input-container', input_module["input-container"]),
                 children: [
                     null != startAdornment && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-input-start-adornment', input_module["start-adornment"], input_module[variant]),
+                        className: clsx('byline-input-start-adornment', input_module["start-adornment"], input_module[variant]),
                         children: startAdornment
                     }),
                     /*#__PURE__*/ jsx("input", {
@@ -34,7 +34,7 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
                         "aria-required": required,
                         "aria-errormessage": errorText,
                         "aria-describedby": error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : void 0,
-                        className: classnames('byline-input', `byline-input-${variant}`, `byline-input-${inputSize}`, `byline-input-${intent}`, input_module.input, input_module[variant], input_module[inputSize], input_module[intent], {
+                        className: clsx('byline-input', `byline-input-${variant}`, `byline-input-${inputSize}`, `byline-input-${intent}`, input_module.input, input_module[variant], input_module[inputSize], input_module[intent], {
                             [input_module["start-adornment-padding"]]: null != startAdornment
                         }, {
                             [input_module["end-adornment-padding"]]: null != endAdornment
@@ -44,7 +44,7 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
                         ...rest
                     }),
                     null != endAdornment && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-input-end-adornment', input_module["end-adornment"], input_module[variant]),
+                        className: clsx('byline-input-end-adornment', input_module["end-adornment"], input_module[variant]),
                         children: endAdornment
                     })
                 ]

package/dist/components/inputs/label.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import label_module from "./label.module.js";
 function Label({ className, id, htmlFor, label, required }) {
     return /*#__PURE__*/ jsxs("label", {
         id: `label-for-${id}`,
         htmlFor: htmlFor,
-        className: classnames('label', label_module.label, className),
+        className: clsx('label', label_module.label, className),
         children: [
             label,
             required && /*#__PURE__*/ jsx("span", {

package/dist/components/inputs/radio-group.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
-import classnames from "classnames";
+import clsx from "clsx";
 import radio_group_module from "./radio-group.module.js";
 const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref: forwardedRef, ...props })=>/*#__PURE__*/ jsxs("div", {
         ref: forwardedRef,
@@ -10,7 +10,7 @@ const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref:
         children: [
             /*#__PURE__*/ jsx(Radio.Root, {
                 ...props,
-                className: classnames(radio_group_module.item, radio_group_module[intent]),
+                className: clsx(radio_group_module.item, radio_group_module[intent]),
                 value: value,
                 id: id,
                 nativeButton: true,
@@ -30,7 +30,7 @@ const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref:
     });
 const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup, {
         ref: forwardedRef,
-        className: classnames('byline-radio-group', radio_group_module[direction], className),
+        className: clsx('byline-radio-group', radio_group_module[direction], className),
         ...props,
         children: children
     });

package/dist/components/inputs/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
-import classnames from "classnames";
+import clsx from "clsx";
 import { CheckIcon } from "../../icons/check-icon.js";
 import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
 import { ChevronUpIcon } from "../../icons/chevron-up-icon.js";
@@ -10,7 +10,7 @@ import { HelpText } from "./help-text.js";
 import select_module from "./select.module.js";
 function select_Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, items, ...rest }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-select-container', containerClassName),
+        className: clsx('byline-select-container', containerClassName),
         children: [
             /*#__PURE__*/ jsxs(Select.Root, {
                 items: items,
@@ -23,7 +23,7 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
                             intent: intent,
                             variant: variant,
                             size: size,
-                            className: classnames('whitespace-nowrap', className)
+                            className: clsx('whitespace-nowrap', className)
                         }),
                         children: [
                             /*#__PURE__*/ jsx(Select.Value, {
@@ -44,7 +44,7 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
                                     children: /*#__PURE__*/ jsx(ChevronUpIcon, {})
                                 }),
                                 /*#__PURE__*/ jsx(Select.Popup, {
-                                    className: classnames(select_module.popup, null != size && select_module[`popup-${size}`]),
+                                    className: clsx(select_module.popup, null != size && select_module[`popup-${size}`]),
                                     children: /*#__PURE__*/ jsx(Select.List, {
                                         className: select_module.list,
                                         children: children ?? items?.map((item)=>/*#__PURE__*/ jsx(SelectItem, {
@@ -70,12 +70,12 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
     });
 }
 const SelectItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__PURE__*/ jsxs(Select.Item, {
-        className: classnames('byline-select-item', select_module["select-item"], className),
+        className: clsx('byline-select-item', select_module["select-item"], className),
         ...props,
         ref: forwardedRef,
         children: [
             /*#__PURE__*/ jsx(Select.ItemIndicator, {
-                className: classnames('byline-select-item-indicator', select_module["select-item-indicator"]),
+                className: clsx('byline-select-item-indicator', select_module["select-item-indicator"]),
                 children: /*#__PURE__*/ jsx(CheckIcon, {})
             }),
             /*#__PURE__*/ jsx(Select.ItemText, {

package/dist/components/inputs/text-area.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { ErrorText } from "./error-text.js";
 import { HelpText } from "./help-text.js";
 import input_module from "./input.module.js";
@@ -7,7 +7,7 @@ import { Label } from "./label.js";
 import text_area_module from "./text-area.module.js";
 const text_area_TextArea = function({ ref, id, name, label, rows = 4, required = false, variant = 'outlined', intent = 'primary', placeHolder = '', autoComplete = 'off', error = false, helpText = '', errorText = '', className, ...rest }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('text-area-wrapper', input_module["input-wrapper"]),
+        className: clsx('text-area-wrapper', input_module["input-wrapper"]),
         children: [
             null != label && /*#__PURE__*/ jsx(Label, {
                 id: id,
@@ -28,7 +28,7 @@ const text_area_TextArea = function({ ref, id, name, label, rows = 4, required =
                 "aria-required": required,
                 "aria-errormessage": errorText,
                 "aria-describedby": error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : void 0,
-                className: classnames('byline-text-area', `byline-text-area-${variant}`, `byline-text-area-${intent}`, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], text_area_module[variant], {
+                className: clsx('byline-text-area', `byline-text-area-${variant}`, `byline-text-area-${intent}`, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], text_area_module[variant], {
                     [input_module.error]: error
                 }, className),
                 ...rest

package/dist/components/notifications/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { CloseIcon } from "../../icons/close-icon.js";
 import { DangerIcon } from "../../icons/danger-icon.js";
 import { InfoIcon } from "../../icons/info-icon.js";
@@ -31,21 +31,21 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
     if (false === show) return null;
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
-        className: classnames('byline-alert', `byline-alert-${intent}`, alert_module.alert, alert_module[intent], className, {
+        className: clsx('byline-alert', `byline-alert-${intent}`, alert_module.alert, alert_module[intent], className, {
             [alert_module.fade]: fade
         }),
         ...rest,
         children: null != title ? /*#__PURE__*/ jsxs("div", {
-            className: classnames('byline-alert-with-title', alert_module["alert-with-title"]),
+            className: clsx('byline-alert-with-title', alert_module["alert-with-title"]),
             children: [
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-alert-header', alert_module.header),
+                    className: clsx('byline-alert-header', alert_module.header),
                     children: [
                         icon && /*#__PURE__*/ jsx(Icon, {
-                            className: classnames('byline-alert-icon', alert_module.icon)
+                            className: clsx('byline-alert-icon', alert_module.icon)
                         }),
                         /*#__PURE__*/ jsx("div", {
-                            className: classnames('byline-alert-title', alert_module.title),
+                            className: clsx('byline-alert-title', alert_module.title),
                             children: /*#__PURE__*/ jsx("span", {
                                 children: title
                             })
@@ -54,7 +54,7 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
                             intent: intent,
                             variant: "filled",
                             "aria-label": "Close",
-                            className: classnames('byline-alert-close', alert_module.close),
+                            className: clsx('byline-alert-close', alert_module.close),
                             type: "button",
                             onClick: handleOnClose,
                             ...rest,
@@ -66,24 +66,24 @@ const alert_Alert = function({ ref, intent = 'success', icon = true, close = tru
                     ]
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: classnames('byline-alert-content', alert_module.content),
+                    className: clsx('byline-alert-content', alert_module.content),
                     children: children
                 })
             ]
         }) : /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 icon && /*#__PURE__*/ jsx(Icon, {
-                    className: classnames('byline-alert-icon', alert_module.icon)
+                    className: clsx('byline-alert-icon', alert_module.icon)
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: classnames('byline-alert-content', alert_module.content),
+                    className: clsx('byline-alert-content', alert_module.content),
                     children: children
                 }),
                 true === close && /*#__PURE__*/ jsx(Button, {
                     intent: intent,
                     variant: "filled",
                     "aria-label": "Close",
-                    className: classnames('byline-alert-close', alert_module.close),
+                    className: clsx('byline-alert-close', alert_module.close),
                     type: "button",
                     onClick: handleOnClose,
                     ...rest,

package/dist/components/notifications/toast.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react from "react";
 import { Toast } from "@base-ui/react/toast";
-import classnames from "classnames";
+import clsx from "clsx";
 import { CloseIcon } from "../../icons/close-icon.js";
 import { DangerIcon } from "../../icons/danger-icon.js";
 import { InfoIcon } from "../../icons/info-icon.js";
@@ -30,7 +30,7 @@ function ToastViewport({ position = 'bottom-right', className }) {
     const { toasts } = Toast.useToastManager();
     return /*#__PURE__*/ jsx(Toast.Portal, {
         children: /*#__PURE__*/ jsx(Toast.Viewport, {
-            className: classnames('byline-toast-viewport', toast_module.viewport, toast_module[position], className),
+            className: clsx('byline-toast-viewport', toast_module.viewport, toast_module[position], className),
             children: toasts.map((toast)=>/*#__PURE__*/ jsx(ToastItem, {
                     toast: toast
                 }, toast.id))
@@ -48,12 +48,12 @@ function ToastItem({ toast }) {
     return /*#__PURE__*/ jsx(Toast.Root, {
         toast: toast,
         swipeDirection: swipeDirection,
-        className: classnames('byline-toast', toast_module.root),
+        className: clsx('byline-toast', toast_module.root),
         children: /*#__PURE__*/ jsxs(Toast.Content, {
-            className: classnames('byline-toast-content', toast_module.content),
+            className: clsx('byline-toast-content', toast_module.content),
             children: [
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-toast-header', toast_module.header),
+                    className: clsx('byline-toast-header', toast_module.header),
                     children: [
                         /*#__PURE__*/ jsx("time", {
                             dateTime: eventDateRef.current.toISOString(),
@@ -70,7 +70,7 @@ function ToastItem({ toast }) {
                                 tabIndex: 0,
                                 variant: "filled",
                                 "aria-label": "Close",
-                                className: classnames('byline-toast-close', toast_module.close),
+                                className: clsx('byline-toast-close', toast_module.close),
                                 type: "button"
                             }),
                             children: /*#__PURE__*/ jsx(CloseIcon, {
@@ -81,14 +81,14 @@ function ToastItem({ toast }) {
                     ]
                 }),
                 /*#__PURE__*/ jsxs(Toast.Title, {
-                    className: classnames('byline-toast-title', toast_module.title),
+                    className: clsx('byline-toast-title', toast_module.title),
                     children: [
                         icon && Icon && /*#__PURE__*/ jsx(Icon, {}),
                         toast.title
                     ]
                 }),
                 /*#__PURE__*/ jsx(Toast.Description, {
-                    className: classnames("byline-toast-description", toast_module.description),
+                    className: clsx("byline-toast-description", toast_module.description),
                     children: toast.description
                 })
             ]

package/dist/components/pager/ellipses.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
 function Ellipses() {
@@ -8,7 +8,7 @@ function Ellipses() {
     return /*#__PURE__*/ jsx("li", {
         className: "flex",
         children: /*#__PURE__*/ jsx("div", {
-            className: classnames(pagination_module.ellipses, 'pagination-ellipses'),
+            className: clsx(pagination_module.ellipses, 'pagination-ellipses'),
             children: "..."
         })
     });

package/dist/components/pager/first-button.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import react from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { ChevronLeftDoubleIcon } from "../../icons/chevron-left-double-icon.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
 const FirstButton = ({ ref, className, disabled, render, children, ...rest })=>{
     const { variant } = usePager();
     const sharedProps = {
-        className: classnames(pagination_module["first-button"], pagination_module[variant], pagination_module["rounded-left"], 'pagination-first', className),
+        className: clsx(pagination_module["first-button"], pagination_module[variant], pagination_module["rounded-left"], 'pagination-first', className),
         disabled,
         'data-testid': 'pagination-first',
         title: 'First',

package/dist/components/pager/last-button.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import react from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { ChevronRightDoubleIcon } from "../../icons/chevron-right-double-icon.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
 const LastButton = ({ ref, className, disabled, count, render, children, ...rest })=>{
     const { variant } = usePager();
     const sharedProps = {
-        className: classnames(pagination_module["last-button"], pagination_module[variant], pagination_module["rounded-right"], 'pagination-last', className),
+        className: clsx(pagination_module["last-button"], pagination_module[variant], pagination_module["rounded-right"], 'pagination-last', className),
         disabled,
         title: 'Last',
         'data-testid': 'pagination-last',

package/dist/components/pager/next-button.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import react from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { ChevronRightIcon } from "../../icons/chevron-right-icon.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
 const NextButton = ({ ref, className, disabled, page, render, children, ...rest })=>{
     const { variant, showLastButton } = usePager();
     const sharedProps = {
-        className: classnames(pagination_module["next-button"], [
+        className: clsx(pagination_module["next-button"], [
             pagination_module[variant]
         ], {
             [pagination_module["rounded-right"]]: null == showLastButton || false === showLastButton

package/dist/components/pager/number-button.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import react from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useMediaQuery } from "../../hooks/use-media-query.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
@@ -10,7 +10,7 @@ const NumberButton = ({ ref, page, className, disabled, activeClassName, render,
     const { variant, currentPage, count, showFirstButton, showLastButton, hideNextButton, hidePrevButton } = usePager();
     const active = page === currentPage;
     const sharedProps = {
-        className: classnames(pagination_module["number-button"], [
+        className: clsx(pagination_module["number-button"], [
             pagination_module[variant]
         ], {
             [pagination_module.active]: true === active,
@@ -20,7 +20,7 @@ const NumberButton = ({ ref, page, className, disabled, activeClassName, render,
         }, {
             [pagination_module["rounded-right"]]: page === count && (!(showLastButton ?? false) && (hideNextButton ?? false) || mobile)
         }, 'pagination-number', className),
-        'data-testid': classnames({
+        'data-testid': clsx({
             'pager-number-active': currentPage === page,
             [`pager-number-${page}`]: currentPage !== page
         }).length > 0 || void 0,

package/dist/components/pager/pagination.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx } from "react/jsx-runtime";
 import react, { useContext } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { Ellipses } from "./ellipses.js";
 import { FirstButton } from "./first-button.js";
 import { usePagination } from "./hooks/usePagination.js";
@@ -113,11 +113,11 @@ const Root = ({ ref, className, itemsClassName, children, ariaLabel, dataTestId,
     return /*#__PURE__*/ jsx("nav", {
         "data-testid": dataTestId,
         ref: ref,
-        className: classnames('byline-pagination-root', pagination_module["pagination-root"], 'pagination-root', className),
+        className: clsx('byline-pagination-root', pagination_module["pagination-root"], 'pagination-root', className),
         ...rest,
         "aria-label": ariaLabel ?? 'Pager navigation',
         children: /*#__PURE__*/ jsx("ul", {
-            className: classnames('byline-pagination-items', pagination_module["pagination-items"], pagination_module[variant], itemsClassName),
+            className: clsx('byline-pagination-items', pagination_module["pagination-items"], pagination_module[variant], itemsClassName),
             children: children
         })
     });