@byline/ui 4.11.0 → 4.11.2

package/dist/components/pager/previous-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 { ChevronLeftIcon } from "../../icons/chevron-left-icon.js";
 import { usePager } from "./pagination.js";
 import pagination_module from "./pagination.module.js";
 const PreviousButton = ({ ref, className, disabled, render, children, ...rest })=>{
     const { showFirstButton, variant } = usePager();
     const sharedProps = {
-        className: classnames(pagination_module["previous-button"], pagination_module[variant], {
+        className: clsx(pagination_module["previous-button"], pagination_module[variant], {
             [pagination_module["rounded-left"]]: null == showFirstButton || false === showFirstButton
         }, 'pagination-previous', className),
         disabled,

package/dist/components/scroll-area/scroll-area.js

@@ -1,33 +1,33 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
-import classnames from "classnames";
+import clsx from "clsx";
 import scroll_area_module from "./scroll-area.module.js";
 const scroll_area_ScrollArea = ({ children, style, className })=>/*#__PURE__*/ jsxs(ScrollArea.Root, {
         style: style,
-        className: classnames('byline-scroll-area', scroll_area_module.root, className),
+        className: clsx('byline-scroll-area', scroll_area_module.root, className),
         children: [
             /*#__PURE__*/ jsx(ScrollArea.Viewport, {
-                className: classnames('byline-scroll-area-viewport', scroll_area_module.viewport),
+                className: clsx('byline-scroll-area-viewport', scroll_area_module.viewport),
                 children: /*#__PURE__*/ jsx(ScrollArea.Content, {
                     children: children
                 })
             }),
             /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
-                className: classnames('byline-scroll-area-scrollbar', scroll_area_module.scrollbar),
+                className: clsx('byline-scroll-area-scrollbar', scroll_area_module.scrollbar),
                 orientation: "vertical",
                 children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {
-                    className: classnames('byline-scroll-area-thumb', scroll_area_module.thumb)
+                    className: clsx('byline-scroll-area-thumb', scroll_area_module.thumb)
                 })
             }),
             /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
-                className: classnames('byline-scroll-area-scrollbar', scroll_area_module.scrollbar),
+                className: clsx('byline-scroll-area-scrollbar', scroll_area_module.scrollbar),
                 orientation: "horizontal",
                 children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {
-                    className: classnames('byline-scroll-area-thumb', scroll_area_module.thumb)
+                    className: clsx('byline-scroll-area-thumb', scroll_area_module.thumb)
                 })
             }),
             /*#__PURE__*/ jsx(ScrollArea.Corner, {
-                className: classnames('byline-scroll-area-corner', scroll_area_module.corner)
+                className: clsx('byline-scroll-area-corner', scroll_area_module.corner)
             })
         ]
     });

package/dist/components/scroll-to-top/scroll-to-top.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import scroll_to_top_module from "./scroll-to-top.module.js";
 function ScrollToTop({ className, showAt = 200, offset = -65, type = 'button', 'aria-label': ariaLabel = 'Scroll to top', onClick, ...props }) {
     const [show, setShow] = useState(false);
@@ -38,7 +38,7 @@ function ScrollToTop({ className, showAt = 200, offset = -65, type = 'button', '
         type: type,
         "aria-label": ariaLabel,
         onClick: handleOnClick,
-        className: classnames('byline-scroll-to-top', scroll_to_top_module["scroll-to-top"], {
+        className: clsx('byline-scroll-to-top', scroll_to_top_module["scroll-to-top"], {
             'byline-scroll-to-top-shown': show,
             [scroll_to_top_module["scroll-to-top-shown"]]: show
         }, className),

package/dist/components/section/section.js

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

package/dist/components/shimmer/shimmer.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import shimmer_module from "./shimmer.module.js";
 const toCssSize = (value)=>'number' == typeof value ? `${value}px` : value;
 function Shimmer({ className, width = '100%', height, lineHeight, borderRadius, variant = 'rectangular', lines = 1, children, ...other }) {
@@ -16,7 +16,7 @@ function Shimmer({ className, width = '100%', height, lineHeight, borderRadius,
     if ('text' === variant && lines > 1) {
         const resolvedLineHeight = toCssSize(lineHeight);
         return /*#__PURE__*/ jsx("div", {
-            className: classnames(shimmer_module.shimmerContainer, className),
+            className: clsx(shimmer_module.shimmerContainer, className),
             style: {
                 width: toCssSize(width),
                 height: toCssSize(height)
@@ -25,7 +25,7 @@ function Shimmer({ className, width = '100%', height, lineHeight, borderRadius,
             children: Array.from({
                 length: lines
             }, (_, index)=>/*#__PURE__*/ jsx("div", {
-                    className: classnames(shimmer_module.shimmer, shimmer_module.text),
+                    className: clsx(shimmer_module.shimmer, shimmer_module.text),
                     style: {
                         width: index === lines - 1 ? '75%' : '100%',
                         height: resolvedLineHeight,
@@ -41,7 +41,7 @@ function Shimmer({ className, width = '100%', height, lineHeight, borderRadius,
         borderRadius
     };
     return /*#__PURE__*/ jsx("div", {
-        className: classnames(shimmer_module.shimmer, getVariantClass(), className),
+        className: clsx(shimmer_module.shimmer, getVariantClass(), className),
         style: shimmerStyle,
         ...other,
         children: children

package/dist/components/table/table.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import table_module from "./table.module.js";
 function Table({ ref, className, children, ...rest }) {
-    const classes = classnames(table_module.table, 'byline-table', className);
+    const classes = clsx(table_module.table, 'byline-table', className);
     return /*#__PURE__*/ jsx("table", {
         ref: ref,
         className: classes,
@@ -11,13 +11,13 @@ function Table({ ref, className, children, ...rest }) {
     });
 }
 function Container({ ref, className, children, ...rest }) {
-    const classes = classnames(table_module["table-container"], 'byline-table-container', className);
+    const classes = clsx(table_module["table-container"], 'byline-table-container', className);
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         className: classes,
         ...rest,
         children: /*#__PURE__*/ jsx("div", {
-            className: classnames('byline-table-scroller', table_module["table-scroller"]),
+            className: clsx('byline-table-scroller', table_module["table-scroller"]),
             children: children
         })
     });
@@ -25,13 +25,13 @@ function Container({ ref, className, children, ...rest }) {
 function Body({ ref, className, children, ...rest }) {
     return /*#__PURE__*/ jsx("tbody", {
         ref: ref,
-        className: classnames('byline-table-body', className),
+        className: clsx('byline-table-body', className),
         ...rest,
         children: children
     });
 }
 function Header({ ref, className, children, ...rest }) {
-    const classes = classnames(table_module["table-header"], 'byline-table-header', className);
+    const classes = clsx(table_module["table-header"], 'byline-table-header', className);
     return /*#__PURE__*/ jsx("thead", {
         ref: ref,
         className: classes,
@@ -40,7 +40,7 @@ function Header({ ref, className, children, ...rest }) {
     });
 }
 function Row({ ref, className, children, ...rest }) {
-    const classes = classnames(table_module["table-row"], 'byline-table-row', className);
+    const classes = clsx(table_module["table-row"], 'byline-table-row', className);
     return /*#__PURE__*/ jsx("tr", {
         ref: ref,
         className: classes,
@@ -49,7 +49,7 @@ function Row({ ref, className, children, ...rest }) {
     });
 }
 function HeadingCell({ ref, className, children, ...rest }) {
-    const classes = classnames(table_module["table-heading-cell"], 'byline-table-heading-cell', 'not-prose', className);
+    const classes = clsx(table_module["table-heading-cell"], 'byline-table-heading-cell', 'not-prose', className);
     return /*#__PURE__*/ jsx("th", {
         ref: ref,
         className: classes,
@@ -58,7 +58,7 @@ function HeadingCell({ ref, className, children, ...rest }) {
     });
 }
 function Cell({ ref, className, children, ...rest }) {
-    const classes = classnames(table_module["table-cell"], 'byline-table-cell', className);
+    const classes = clsx(table_module["table-cell"], 'byline-table-cell', className);
     return /*#__PURE__*/ jsx("td", {
         ref: ref,
         className: classes,
@@ -67,7 +67,7 @@ function Cell({ ref, className, children, ...rest }) {
     });
 }
 function Footer({ ref, className, children, ...rest }) {
-    const classes = classnames('text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', className);
+    const classes = clsx('text-xs text-gray-700 uppercase bg-canvas-100 dark:bg-canvas-700 dark:text-gray-400', className);
     return /*#__PURE__*/ jsx("tfoot", {
         ref: ref,
         className: classes,

package/dist/components/tabs/tabs.js

@@ -1,30 +1,30 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
-import classnames from "classnames";
+import clsx from "clsx";
 import tabs_module from "./tabs.module.js";
 const tabs_Tabs = ({ ref, className, ...props })=>/*#__PURE__*/ jsx(Tabs.Root, {
         ref: ref,
-        className: classnames(tabs_module["tabs-root"], 'byline-tabs-root', className),
+        className: clsx(tabs_module["tabs-root"], 'byline-tabs-root', className),
         ...props
     });
 tabs_Tabs.displayName = 'Tabs';
 const TabsList = ({ ref, className, ...props })=>/*#__PURE__*/ jsx(Tabs.List, {
         ref: ref,
-        className: classnames(tabs_module["tabs-list"], 'byline-tabs-list', className),
+        className: clsx(tabs_module["tabs-list"], 'byline-tabs-list', className),
         ...props
     });
 TabsList.displayName = 'TabsList';
 const TabsTrigger = ({ ref, className, ...props })=>/*#__PURE__*/ jsx(Tabs.Tab, {
         ref: ref,
-        className: classnames(tabs_module["tabs-trigger"], 'byline-tabs-trigger', className),
+        className: clsx(tabs_module["tabs-trigger"], 'byline-tabs-trigger', className),
         ...props
     });
 TabsTrigger.displayName = 'TabsTrigger';
 const TabsContent = ({ ref, className, keepMounted = true, ...props })=>/*#__PURE__*/ jsx(Tabs.Panel, {
         ref: ref,
         keepMounted: keepMounted,
-        className: classnames(tabs_module["tabs-content"], 'byline-tabs-content', className),
+        className: clsx(tabs_module["tabs-content"], 'byline-tabs-content', className),
         ...props
     });
 TabsContent.displayName = 'TabsContent';

package/dist/components/tooltip/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as tooltip_Tooltip } from "@base-ui/react/tooltip";
-import classnames from "classnames";
+import clsx from "clsx";
 import tooltip_module from "./tooltip.module.js";
 function ArrowSvg(props) {
     return /*#__PURE__*/ jsxs("svg", {
@@ -45,10 +45,10 @@ const tooltip_tooltip_Tooltip = function({ ref, text, delay = 500, side = 'top',
                         side: side,
                         sideOffset: sideOffset,
                         children: /*#__PURE__*/ jsxs(tooltip_Tooltip.Popup, {
-                            className: classnames(tooltip_module.tooltip, 'byline-tooltip'),
+                            className: clsx(tooltip_module.tooltip, 'byline-tooltip'),
                             children: [
                                 /*#__PURE__*/ jsx(tooltip_Tooltip.Arrow, {
-                                    className: classnames(tooltip_module["tooltip-arrow"], 'byline-tooltip-arrow'),
+                                    className: clsx(tooltip_module["tooltip-arrow"], 'byline-tooltip-arrow'),
                                     children: /*#__PURE__*/ jsx(ArrowSvg, {})
                                 }),
                                 text

package/dist/dnd/draggable-sortable/demo/draggable-list-demo.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Card, GripperVerticalIcon } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { DraggableSortable, moveItem, useSortable } from "../index.js";
 import draggable_list_demo_module from "./draggable-list-demo.module.js";
 const sourceItems = [
@@ -50,7 +50,7 @@ const DraggableCard = ({ item, disabled, isSortable = true })=>{
     });
     return /*#__PURE__*/ jsxs(Card, {
         ref: setNodeRef,
-        className: classnames('byline-demo-card', draggable_list_demo_module.card, isDragging && [
+        className: clsx('byline-demo-card', draggable_list_demo_module.card, isDragging && [
             'byline-demo-card-dragging',
             draggable_list_demo_module["card-dragging"]
         ]),
@@ -61,10 +61,10 @@ const DraggableCard = ({ item, disabled, isSortable = true })=>{
         },
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-demo-card-header', draggable_list_demo_module["card-header"]),
+                className: clsx('byline-demo-card-header', draggable_list_demo_module["card-header"]),
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-demo-card-grip', draggable_list_demo_module["card-grip"]),
+                        className: clsx('byline-demo-card-grip', draggable_list_demo_module["card-grip"]),
                         ...attributes,
                         ...listeners,
                         children: /*#__PURE__*/ jsx(GripperVerticalIcon, {})
@@ -90,7 +90,7 @@ function DraggableList() {
         setItems(newItems);
     };
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-demo-list', draggable_list_demo_module.list),
+        className: clsx('byline-demo-list', draggable_list_demo_module.list),
         children: /*#__PURE__*/ jsx(DraggableSortable, {
             ids: items.map((item)=>item.id),
             onDragEnd: handleOnDragEnd,

package/dist/icons/activity-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ActivityIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    const applied = clsx(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('activity-icon', className),
+        className: clsx('activity-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             className: applied,

package/dist/icons/ai-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const AiIcon = ({ className, svgClassName, ...rest })=>{
-    classnames(icons_module["stroke-current"], svgClassName);
+    clsx(icons_module["stroke-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('ai-icon', className),
+        className: clsx('ai-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/byline-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 const svgStylesDefault = '';
 const BylineIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(svgStylesDefault, svgClassName);
+    const applied = clsx(svgStylesDefault, svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('byline-icon', className),
+        className: clsx('byline-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             className: applied,

package/dist/icons/calendar-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const CalendarIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('calendar-icon', className),
+        className: clsx('calendar-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             className: applied,

package/dist/icons/check-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const CheckIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('check-icon', className),
+        className: clsx('check-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             className: applied,

package/dist/icons/chevron-down-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ChevronDownIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('chevron-down-icon', className),
+        className: clsx('chevron-down-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/chevron-left-double-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ChevronLeftDoubleIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('chevron-left-double-icon', className),
+        className: clsx('chevron-left-double-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/chevron-left-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ChevronLeftIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('chevron-left-icon', className),
+        className: clsx('chevron-left-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/chevron-right-double-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ChevronRightDoubleIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('chevron-right-double-icon', className),
+        className: clsx('chevron-right-double-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/chevron-right-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ChevronRightIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('chevron-right-icon', className),
+        className: clsx('chevron-right-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/chevron-up-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ChevronUpIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('chevron-up-icon', className),
+        className: clsx('chevron-up-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/chevrons-up-down.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const ChevronsUpDown = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["stroke-current"], svgClassName);
+    const applied = clsx(icons_module["stroke-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('chevrons-up-down', className),
+        className: clsx('chevrons-up-down', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/close-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const CloseIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["stroke-current"], svgClassName);
+    const applied = clsx(icons_module["stroke-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('close-icon', className),
+        className: clsx('close-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             className: applied,

package/dist/icons/copy-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const CopyIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('copy-icon', className),
+        className: clsx('copy-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             className: applied,

package/dist/icons/danger-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const DangerIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-danger"], svgClassName);
+    const applied = clsx(icons_module["fill-danger"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('danger-icon', className),
+        className: clsx('danger-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             className: applied,

package/dist/icons/dashboard-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const DashboardIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    const applied = clsx(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('dashboard-icon', className),
+        className: clsx('dashboard-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/delete-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const DeleteIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-none"], icons_module["stroke-danger"], svgClassName);
+    const applied = clsx(icons_module["fill-none"], icons_module["stroke-danger"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('delete-icon', className),
+        className: clsx('delete-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             xmlns: "http://www.w3.org/2000/svg",

package/dist/icons/document-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const DocumentIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    const applied = clsx(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('document-icon', className),
+        className: clsx('document-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             className: applied,

package/dist/icons/download-icon.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const DownloadIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-current"], svgClassName);
+    const applied = clsx(icons_module["fill-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('download-icon', className),
+        className: clsx('download-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsx("svg", {
             className: applied,

package/dist/icons/edit-icon.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import { IconElement } from "./icon-element.js";
 import icons_module from "./icons.module.js";
 const EditIcon = ({ className, svgClassName, ...rest })=>{
-    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    const applied = clsx(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
     return /*#__PURE__*/ jsx(IconElement, {
-        className: classnames('edit-icon', className),
+        className: clsx('edit-icon', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("svg", {
             className: applied,