@firecms/ui 3.0.0-canary.56 → 3.0.0-canary.58

package/dist/util/{cn.d.ts → cls.d.ts}

@@ -1,2 +1,6 @@
 import { type ClassValue } from "clsx";
+export declare function cls(...classes: ClassValue[]): string;
+/**
+ * @deprecated
+ */
 export declare function cn(...classes: ClassValue[]): string;

package/dist/util/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./cn";
+export * from "./cls";
 export * from "./debounce";
 export * from "./chip_colors";
 export * from "./key_to_icon_component";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-canary.56",
+    "version": "3.0.0-canary.58",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -53,6 +53,7 @@
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-menubar": "^1.0.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-portal": "^1.0.4",
         "@radix-ui/react-radio-group": "^1.1.3",
@@ -116,7 +117,7 @@
         "src",
         "tailwind.config.js"
     ],
-    "gitHead": "37917e082bfabddffe91337b21cc9b01af4a7773",
+    "gitHead": "8fb738b6abf384c0cba679f293b049a0ac56a7c2",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Alert.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface AlertProps {
     children: React.ReactNode;
@@ -52,7 +52,7 @@ export const Alert: React.FC<AlertProps> = ({
     return (
         <div
             style={style}
-            className={cn(
+            className={cls(
                 getSizeClasses(size),
                 "w-full",
                 "font-medium",

package/src/components/Autocomplete.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { paperMixin } from "../styles";
 import { Collapse } from "./Collapse";
-import { cn } from "../util";
+import { cls } from "../util";
 import { useOutsideAlerter } from "../hooks";
 
 export type AutocompleteProps = {
@@ -50,14 +50,14 @@ export function Autocomplete({
     return <Collapse
         in={open}
         duration={50}
-        className={cn(
+        className={cls(
             "absolute top-full left-0 right-0 overflow-visible",
             open ? "shadow" : "",
             "my-2",
             "z-20",
             "w-full")}>
         <div ref={autocompleteRef}
-             className={cn(
+             className={cls(
                  open ? paperMixin : "",
                  "bg-slate-50 dark:bg-slate-900 py-2"
              )}>

package/src/components/Avatar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 import { focusedMixin } from "../styles";
 
 export interface AvatarProps {
@@ -27,14 +27,14 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
             ref={ref}
             style={style}
             {...props}
-            className={cn("rounded-full flex items-center justify-center overflow-hidden",
+            className={cls("rounded-full flex items-center justify-center overflow-hidden",
                 focusedMixin,
                 "p-1 hover:bg-slate-200 hover:dark:bg-slate-700 w-12 h-12",
                 outerClassName
             )}>
             {src
                 ? (
-                    <img className={cn(
+                    <img className={cls(
                         "bg-slate-100 dark:bg-slate-800",
                         "w-full h-full object-cover rounded-full",
                         className)}
@@ -43,7 +43,7 @@ const AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps
                 )
                 : (
                     <span
-                        className={cn(
+                        className={cls(
                             "bg-slate-100 dark:bg-slate-800",
                             "flex items-center justify-center",
                             "w-full h-full py-1.5 text-lg font-medium text-slate-900 dark:text-white rounded-full",

package/src/components/BooleanSwitch.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type BooleanSwitchProps = {
     value: boolean | null;
@@ -39,7 +39,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                         onValueChange?.(!value);
                     }
                 }}
-            className={cn(
+            className={cls(
                 size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
                 "outline-none rounded-full relative shadow-sm",
                 value ? (disabled
@@ -51,7 +51,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
         >
             {allowIndeterminate && (value === null || value === undefined) && <div
                 key={"knob"}
-                className={cn(
+                className={cls(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
                     disabled ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600",
                     {
@@ -65,7 +65,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
 
             {!(allowIndeterminate && (value === null || value === undefined)) && <div
                 key={"knob"}
-                className={cn(
+                className={cls(
                     "block rounded-full transition-transform duration-100 transform will-change-auto",
                     disabled ? "bg-slate-300 dark:bg-slate-700" : (value ? "bg-white" : "bg-slate-600 dark:bg-slate-400"),
                     {

package/src/components/BooleanSwitchWithLabel.tsx

@@ -6,7 +6,7 @@ import {
     focusedClasses
 } from "../styles";
 import { BooleanSwitch, BooleanSwitchProps } from "./BooleanSwitch";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     position?: "start" | "end",
@@ -53,7 +53,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
             onFocus={onFocus}
             onBlur={onBlur}
             tabIndex={-1}
-            className={cn(
+            className={cls(
                 !invisible && fieldBackgroundMixin,
                 !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin),
                 disabled ? "cursor-default" : "cursor-pointer",
@@ -86,7 +86,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 {...props}
             />
 
-            <div className={cn(
+            <div className={cls(
                 "flex-grow",
                 position === "end" ? "mr-4" : "ml-4",
                 size === "small" ? "text-sm" : "text-base"

package/src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ButtonProps<P extends React.ElementType> =
     Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
@@ -34,7 +34,7 @@ const ButtonInner = React.forwardRef<
     const baseClasses =
         "h-fit rounded-md uppercase whitespace-nowrap inline-flex items-center justify-center p-2 px-4 text-sm font-medium focus:outline-none transition ease-in-out duration-150 gap-2";
 
-    const buttonClasses = cn({
+    const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
         // Filled Variants
@@ -58,7 +58,7 @@ const ButtonInner = React.forwardRef<
         "border border-gray-500 bg-gray-500 opacity-50": variant === "filled" && disabled,
     });
 
-    const sizeClasses = cn(
+    const sizeClasses = cls(
         {
             "py-1 px-2": size === "small",
             "py-2 px-4": size === "medium",
@@ -73,7 +73,7 @@ const ButtonInner = React.forwardRef<
             <Component
                 ref={ref}
                 onClick={props.onClick}
-                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 {...(props as React.ComponentPropsWithRef<any>)}>
                 {startIcon}
                 {children}
@@ -85,7 +85,7 @@ const ButtonInner = React.forwardRef<
         <button ref={ref as any}
                 type={props.type ?? "button"}
                 onClick={props.onClick}
-                className={cn(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
+                className={cls(focusedMixin, startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
                 disabled={disabled}
                 {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}>
             {startIcon}

package/src/components/Card.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { cardClickableMixin, cardMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 type CardProps = {
     children: React.ReactNode;
@@ -29,7 +29,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(({
             role={onClick ? "button" : undefined}
             tabIndex={onClick ? 0 : undefined}
             onClick={onClick}
-            className={cn(cardMixin, onClick && focusedMixin, onClick && cardClickableMixin, className)}
+            className={cls(cardMixin, onClick && focusedMixin, onClick && cardClickableMixin, className)}
             style={style}
             {...props}>
             {children}

package/src/components/CenteredView.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Container } from "./Container";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type CenteredViewProps = {
     children: React.ReactNode;
@@ -21,9 +21,9 @@ export const CenteredView = React.forwardRef<HTMLDivElement, CenteredViewProps>(
 
     return (
         <div ref={ref}
-             className={cn("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
+             className={cls("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
              {...rest}>
-            <Container className={cn("m-auto", className)} maxWidth={maxWidth}>
+            <Container className={cls("m-auto", className)} maxWidth={maxWidth}>
                 {children}
             </Container>
         </div>

package/src/components/Checkbox.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 import { Icon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface CheckboxProps {
     checked: boolean;
@@ -67,7 +67,7 @@ export const Checkbox = ({
             disabled={disabled}
             onCheckedChange={disabled ? undefined : onCheckedChange}>
 
-            <div className={cn(
+            <div className={cls(
                 padding ? paddingClasses[size] : "",
                 outerSizeClasses[size],
                 "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
@@ -75,7 +75,7 @@ export const Checkbox = ({
                 onCheckedChange ? "cursor-pointer" : "cursor-default"
             )}>
                 <div
-                    className={cn(
+                    className={cls(
                         "border-2 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled

package/src/components/Chip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CHIP_COLORS, cn, getColorSchemeForKey } from "../util";
+import { CHIP_COLORS, cls, getColorSchemeForKey } from "../util";
 
 export type ChipColorScheme = {
     color: string;
@@ -42,7 +42,7 @@ export function Chip({
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
     return (
         <div
-            className={cn("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
                 "text-ellipsis",
                 onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
                 sizeClassNames[size],

package/src/components/CircularProgress.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type CircularProgressProps = {
     size?: "small" | "medium" | "large",
@@ -31,7 +31,7 @@ export function CircularProgress({
 
     return (
         <div
-            className={cn(
+            className={cls(
                 sizeClasses,
                 borderClasses,
                 "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",

package/src/components/Collapse.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
-import { cn } from "../util";
+import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
 
 interface CollapseProps {
@@ -54,7 +54,7 @@ export function Collapse({
             className={className}>
 
             <Collapsible.Content
-                className={cn(`CollapseContent-${duration}`)}
+                className={cls(`CollapseContent-${duration}`)}
             >
                 {children}
             </Collapsible.Content>

package/src/components/Container.tsx

@@ -1,5 +1,5 @@
 import React, { ForwardRefRenderFunction } from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type ContainerProps = {
     children: React.ReactNode;
@@ -37,7 +37,7 @@ const ContainerInner: ForwardRefRenderFunction<HTMLDivElement, ContainerProps> =
     return (
         <div
             ref={ref}
-            className={cn("mx-auto px-3 md:px-4 lg-px-6",
+            className={cls("mx-auto px-3 md:px-4 lg-px-6",
                 classForMaxWidth,
                 className)}
             style={style}>

package/src/components/DateTimeField.tsx

@@ -13,7 +13,7 @@ import {
 } from "../styles";
 import { InputLabel } from "./InputLabel";
 import { Typography } from "./Typography";
-import { cn } from "../util";
+import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
 
 interface DateTimeFieldProps {
@@ -68,7 +68,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
         <>
 
             <div
-                className={cn(
+                className={cls(
                     "rounded-md relative max-w-full",
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
@@ -81,7 +81,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
                 {label && (
                     <InputLabel
-                        className={cn("absolute top-1 pointer-events-none",
+                        className={cls("absolute top-1 pointer-events-none",
                             !error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-500",
                             disabled ? "opacity-50" : "")}
                         shrink={hasValue || focused}
@@ -96,7 +96,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     selected={(invalidValue ? null : value) ?? null}
                     onChange={onChange}
                     disabled={false}
-                    popperClassName={cn(paperMixin, "my-4 shadow")}
+                    popperClassName={cls(paperMixin, "my-4 shadow")}
                     onClick={(e: any) => e.stopPropagation()}
                     onFocus={() => setFocused(true)}
                     onBlur={() => setFocused(false)}
@@ -106,7 +106,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                     timeCaption="time"
                     dateFormat={mode === "date_time" ? "Pp" : "P"}
                     preventOpenOnFocus={true}
-                    className={cn(
+                    className={cls(
                         "w-full outline-none bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
                         "rounded-md",

package/src/components/Dialog.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type DialogProps = {
     open?: boolean;
@@ -69,7 +69,7 @@ export const Dialog = ({
                 <div className={"fixed inset-0 z-30"}>
 
                     <DialogPrimitive.Overlay
-                        className={cn("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
+                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}
@@ -80,10 +80,10 @@ export const Dialog = ({
 
                     <DialogPrimitive.Content
                         onOpenAutoFocus={onOpenAutoFocus}
-                        className={cn("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
+                        className={cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div
-                            className={cn(paperMixin,
+                            className={cls(paperMixin,
                                 "z-30",
                                 "relative",
                                 "outline-none focus:outline-none",

package/src/components/DialogActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { defaultBorderMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function DialogActions({
                                   children,
@@ -15,7 +15,7 @@ export function DialogActions({
 }) {
 
     return <div
-        className={cn(
+        className={cls(
             defaultBorderMixin,
             "py-3 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
             position,

package/src/components/DialogContent.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export function DialogContent({
                                   children,
@@ -17,7 +17,7 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cn("py-6 px-6 h-full flex-grow", className)}>
+        className={cls("py-6 px-6 h-full flex-grow", className)}>
         {children}
     </div>;
 }

package/src/components/ExpandablePanel.tsx

@@ -3,7 +3,7 @@ import React, { PropsWithChildren, useEffect, useState } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { defaultBorderMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
 import { ExpandMoreIcon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
 
 export function ExpandablePanel({
@@ -76,7 +76,7 @@ export function ExpandablePanel({
 
     return (<>
             <Collapsible.Root
-                className={cn(
+                className={cls(
                     !invisible && defaultBorderMixin + " border",
                     "rounded-md",
                     "w-full"
@@ -88,7 +88,7 @@ export function ExpandablePanel({
                 }}>
 
                 <Collapsible.Trigger
-                    className={cn(focusedMixin,
+                    className={cls(focusedMixin,
                         "rounded flex items-center justify-between w-full min-h-[52px]",
                         "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
                         invisible ? "border-b px-2" : "p-4",
@@ -98,11 +98,11 @@ export function ExpandablePanel({
                     )}
                 >
                     {title}
-                    <ExpandMoreIcon className={cn("transition", open ? "rotate-180" : "")}/>
+                    <ExpandMoreIcon className={cls("transition", open ? "rotate-180" : "")}/>
                 </Collapsible.Trigger>
 
                 <Collapsible.Content
-                    className={cn("CollapsibleContent")}
+                    className={cls("CollapsibleContent")}
                     style={{
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}

package/src/components/FileUpload.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDropzone } from "react-dropzone";
 import { fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 import { Typography } from "./Typography";
 
 export interface FileUploadError {
@@ -63,7 +63,7 @@ export function FileUpload({
     );
     return <div
         {...getRootProps()}
-        className={cn(
+        className={cls(
             fieldBackgroundMixin,
             fieldBackgroundHoverMixin,
             focusedMixin,

package/src/components/IconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { focusedMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type IconButtonProps<C extends React.ElementType> =
     Omit<(C extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<C>), "onClick">
@@ -49,7 +49,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
             type="button"
             ref={ref}
             {...props}
-            className={cn(
+            className={cls(
                 focusedMixin,
                 disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
                 toggled ? "outline outline-2 outline-primary" : "",

package/src/components/InfoLabel.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 const colorClasses = {
     info: "bg-sky-200 dark:bg-teal-900",
@@ -16,7 +16,7 @@ export function InfoLabel({
 
     return (
         <div
-            className={cn("my-3 py-2 px-4 rounded", colorClasses[mode])}>
+            className={cls("my-3 py-2 px-4 rounded", colorClasses[mode])}>
             {children}
         </div>
     )

package/src/components/InputLabel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 import { Label } from "./Label";
 
 export type InputLabelProps = {
@@ -21,7 +21,7 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
         ...other
     } = inProps;
 
-    const computedClassName = cn(defaultClasses.root,
+    const computedClassName = cls(defaultClasses.root,
         {
             [defaultClasses.shrink]: shrink,
             [defaultClasses.expanded]: !shrink

package/src/components/Label.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
-import { cn } from "../util";
+import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
 
 type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
@@ -19,7 +19,7 @@ const Label = React.forwardRef<
     <LabelPrimitive.Root
         ref={ref}
         onClick={onClick}
-        className={cn("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
             border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
             onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
             defaultBorderMixin, className)}

package/src/components/Markdown.tsx

@@ -3,7 +3,7 @@ import equal from "react-fast-compare"
 
 // @ts-ignore
 import MarkdownIt from "markdown-it";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export interface MarkdownProps {
     source: string,
@@ -33,7 +33,7 @@ export const Markdown = React.memo<MarkdownProps>(function Markdown({
         }, [source]);
 
         return <div
-            className={cn(proseClasses[size], "dark:prose-invert prose-headings:font-title", className)}
+            className={cls(proseClasses[size], "dark:prose-invert prose-headings:font-title", className)}
             dangerouslySetInnerHTML={{ __html: html }}
         />;
     }

package/src/components/Menu.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { focusedMixin, paperMixin } from "../styles";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type MenuProps = {
     children: React.ReactNode;
@@ -31,7 +31,7 @@ export function Menu({
                 {trigger}
             </DropdownMenu.Trigger>
             <DropdownMenu.Portal container={portalContainer}>
-                <DropdownMenu.Content className={cn(paperMixin, "shadow py-2 z-30")}>
+                <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
                     {children}
                 </DropdownMenu.Content>
             </DropdownMenu.Portal>
@@ -51,7 +51,7 @@ export function MenuItem({
                              onClick
                          }: MenuItemProps) {
     // Dynamically adjusting the class based on the "dense" prop
-    const classNames = cn(
+    const classNames = cls(
         focusedMixin,
         onClick && "cursor-pointer",
         "rounded-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center gap-4",