@navikt/ds-react 7.15.0 → 7.16.0

package/src/accordion/AccordionContent.tsx

@@ -1,6 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -17,6 +16,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
     const context = useContext(AccordionItemContext);
 
     const themeContext = useThemeInternal(false);
+    const { cn } = useRenameCSS();
 
     if (context === null) {
       console.error(
@@ -30,7 +30,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
         {...rest}
         as="div"
         ref={ref}
-        className={cl(
+        className={cn(
           "navds-accordion__content",
           {
             "navds-accordion__content--closed": !context.open,
@@ -42,7 +42,7 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
         } /* Added to fix bug with Radio component, where label text inside a span sometimes is ignored by screen readers after hiding/displaying the RadioGroup inside an Accordion */
       >
         {themeContext ? (
-          <div className="navds-accordion__content-inner">{children}</div>
+          <div className={cn("navds-accordion__content-inner")}>{children}</div>
         ) : (
           children
         )}

package/src/accordion/AccordionHeader.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
@@ -21,6 +20,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const accordionContext = useContext(AccordionContext);
 
     const themeContext = useThemeInternal(false);
+    const { cn } = useRenameCSS();
 
     if (itemContext === null) {
       console.error(
@@ -40,21 +40,21 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
       <button
         ref={ref}
         {...rest}
-        className={cl("navds-accordion__header", className)}
+        className={cn("navds-accordion__header", className)}
         onClick={composeEventHandlers(onClick, itemContext.toggleOpen)}
         aria-expanded={itemContext.open}
         type="button"
       >
-        <span className="navds-accordion__icon-wrapper">
+        <span className={cn("navds-accordion__icon-wrapper")}>
           <ChevronDownIcon
-            className="navds-accordion__header-chevron"
+            className={cn("navds-accordion__header-chevron")}
             aria-hidden
           />
         </span>
         <Heading
           size={headingSize}
           as="span"
-          className="navds-accordion__header-content"
+          className={cn("navds-accordion__header-content")}
         >
           {children}
         </Heading>

package/src/accordion/AccordionItem.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { createContext, forwardRef, useContext, useRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { omit } from "../util";
 import { useControllableState } from "../util/hooks/useControllableState";
 import { AccordionContext } from "./AccordionContext";
@@ -47,6 +47,8 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
     });
 
     const context = useContext(AccordionContext);
+    const { cn } = useRenameCSS();
+
     const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
 
     const handleOpen = () => {
@@ -60,7 +62,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
 
     return (
       <div
-        className={cl("navds-accordion__item", className, {
+        className={cn("navds-accordion__item", className, {
           "navds-accordion__item--open": _open,
           "navds-accordion__item--neutral": context?.variant === "neutral",
           "navds-accordion__item--no-animation": !shouldAnimate.current,

package/src/alert/Alert.tsx

@@ -1,4 +1,3 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import {
   CheckmarkCircleFillIcon,
@@ -8,6 +7,7 @@ import {
   XMarkOctagonFillIcon,
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -87,13 +87,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const translate = useI18n("Alert");
     const Icon = IconMap[variant];
     return (
       <div
         {...rest}
         ref={ref}
-        className={cl(
+        className={cn(
           className,
           "navds-alert",
           `navds-alert--${variant}`,
@@ -105,11 +106,11 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
           },
         )}
       >
-        <Icon title={translate(variant)} className="navds-alert__icon" />
+        <Icon title={translate(variant)} className={cn("navds-alert__icon")} />
         <BodyLong
           as="div"
           size={size}
-          className={cl(
+          className={cn(
             "navds-alert__wrapper",
             contentMaxWidth && "navds-alert__wrapper--maxwidth",
           )}
@@ -117,9 +118,9 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
           {children}
         </BodyLong>
         {closeButton && !inline && (
-          <div className="navds-alert__button-wrapper">
+          <div className={cn("navds-alert__button-wrapper")}>
             <Button
-              className="navds-alert__button"
+              className={cn("navds-alert__button")}
               size="small"
               variant="tertiary-neutral"
               onClick={onClose}

package/src/button/Button.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Loader } from "../loader";
+import { useRenameCSS } from "../theme/Theme";
 import { Label } from "../typography";
 import { omit } from "../util";
 import { composeEventHandlers } from "../util/composeEventHandlers";
@@ -79,6 +79,8 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       },
       ref,
     ) => {
+      const { cn } = useRenameCSS();
+
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled || loading ? omit(rest, ["href"]) : rest;
 
@@ -94,7 +96,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           {...filterProps}
           ref={ref}
           onKeyUp={composeEventHandlers(onKeyUp, handleKeyUp)}
-          className={cl(
+          className={cn(
             className,
             "navds-button",
             `navds-button--${variant}`,
@@ -108,7 +110,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           disabled={disabled ?? loading ? true : undefined}
         >
           {icon && iconPosition === "left" && (
-            <span className="navds-button__icon">{icon}</span>
+            <span className={cn("navds-button__icon")}>{icon}</span>
           )}
           {loading && <Loader size={size} />}
           {children && (
@@ -117,7 +119,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
             </Label>
           )}
           {icon && iconPosition === "right" && (
-            <span className="navds-button__icon">{icon}</span>
+            <span className={cn("navds-button__icon")}>{icon}</span>
           )}
         </Component>
       );

package/src/chat/Bubble.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { Detail } from "../typography";
 
 export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
@@ -23,11 +23,13 @@ export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
 
 const Bubble = forwardRef<HTMLDivElement, ChatBubbleProps>(
   ({ children, className, name, timestamp, toptextPosition, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+
     return (
-      <div ref={ref} className={cl("navds-chat__bubble", className)} {...rest}>
+      <div ref={ref} className={cn("navds-chat__bubble", className)} {...rest}>
         {(timestamp || name) && (
           <h3
-            className={cl(
+            className={cn(
               `navds-chat__top-text`,
               toptextPosition && `navds-chat__top-text--${toptextPosition}`,
             )}

package/src/chat/Chat.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import Bubble from "./Bubble";
 
@@ -91,41 +91,45 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       ...rest
     }: ChatProps,
     ref,
-  ) => (
-    <div
-      ref={ref}
-      className={cl(
-        "navds-chat",
-        className,
-        `navds-chat--${position}`,
-        `navds-chat--top-text-${toptextPosition ?? position}`,
-        `navds-chat--${size}`,
-        `navds-chat--${variant}`,
-      )}
-      {...rest}
-    >
-      {avatar && (
-        <div className="navds-chat__avatar" aria-hidden>
-          {avatar}
-        </div>
-      )}
-      <ol className="navds-chat__bubble-wrapper">
-        {React.Children.map(children, (child, i) => {
-          if (React.isValidElement(child)) {
-            return (
-              <BodyLong as="li" size={size}>
-                {React.cloneElement(child, {
-                  name: name && i === 0 ? name : undefined,
-                  timestamp: timestamp && i === 0 ? timestamp : undefined,
-                  ...child.props,
-                })}
-              </BodyLong>
-            );
-          }
-        })}
-      </ol>
-    </div>
-  ),
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "navds-chat",
+          className,
+          `navds-chat--${position}`,
+          `navds-chat--top-text-${toptextPosition ?? position}`,
+          `navds-chat--${size}`,
+          `navds-chat--${variant}`,
+        )}
+        {...rest}
+      >
+        {avatar && (
+          <div className={cn("navds-chat__avatar")} aria-hidden>
+            {avatar}
+          </div>
+        )}
+        <ol className={cn("navds-chat__bubble-wrapper")}>
+          {React.Children.map(children, (child, i) => {
+            if (React.isValidElement(child)) {
+              return (
+                <BodyLong as="li" size={size}>
+                  {React.cloneElement(child, {
+                    name: name && i === 0 ? name : undefined,
+                    timestamp: timestamp && i === 0 ? timestamp : undefined,
+                    ...child.props,
+                  })}
+                </BodyLong>
+              );
+            }
+          })}
+        </ol>
+      </div>
+    );
+  },
 ) as ChatComponent;
 
 Chat.Bubble = Bubble;

package/src/chips/Chips.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import RemovableChips, { ChipsRemovableProps } from "./Removable";
 import ToggleChips, { ChipsToggleProps } from "./Toggle";
@@ -60,11 +60,12 @@ interface ChipsComponent
  */
 export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
   ({ className, size = "medium", children, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     return (
       <ul
         {...rest}
         ref={ref}
-        className={cl("navds-chips", className, `navds-chips--${size}`, {
+        className={cn("navds-chips", className, `navds-chips--${size}`, {
           "navds-body-short navds-body-short--small": size === "medium",
           "navds-detail navds-detail--small": size === "small",
         })}

package/src/chips/Removable.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -35,12 +35,14 @@ export const RemovableChips = forwardRef<
     ref,
   ) => {
     const translate = useI18n("Chips");
+    const { cn } = useRenameCSS();
+
     return (
       <button
         {...rest}
         ref={ref}
         type={type}
-        className={cl(
+        className={cn(
           "navds-chips__chip navds-chips__removable navds-chips--icon-right",
           className,
           `navds-chips__removable--${variant}`,
@@ -48,8 +50,8 @@ export const RemovableChips = forwardRef<
         aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
-        <span className="navds-chips__chip-text">{children}</span>
-        <span className="navds-chips__removable-icon">
+        <span className={cn("navds-chips__chip-text")}>{children}</span>
+        <span className={cn("navds-chips__removable-icon")}>
           <XMarkIcon aria-hidden />
         </span>
       </button>

package/src/chips/Toggle.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface ChipsToggleProps
@@ -37,11 +37,13 @@ export const ToggleChips: OverridableComponent<
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
+
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cl(
+        className={cn(
           "navds-chips__chip navds-chips__toggle",
           className,
           `navds-chips__toggle--${variant}`,
@@ -53,7 +55,7 @@ export const ToggleChips: OverridableComponent<
         {checkmark && (
           <svg
             aria-hidden
-            className="navds-chips__toggle-icon"
+            className={cn("navds-chips__toggle-icon")}
             width="1.25em"
             height="1.25em"
             viewBox="0 0 20 20"
@@ -84,7 +86,7 @@ export const ToggleChips: OverridableComponent<
             )}
           </svg>
         )}
-        <span className="navds-chips__chip-text">{children}</span>
+        <span className={cn("navds-chips__chip-text")}>{children}</span>
       </Component>
     );
   },

package/src/copybutton/CopyButton.tsx

@@ -1,4 +1,3 @@
-import cl from "clsx";
 import React, {
   ButtonHTMLAttributes,
   forwardRef,
@@ -8,7 +7,7 @@ import React, {
 } from "react";
 import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../button";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
@@ -98,6 +97,8 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     const timeoutRef = useRef<number>();
     const translate = useI18n("CopyButton");
 
+    const { cn } = useRenameCSS();
+
     const themeContext = useThemeInternal(false);
 
     useEffect(() => {
@@ -127,14 +128,18 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
               <CheckmarkIcon
                 aria-hidden={!!text}
                 title={text ? undefined : activeString}
-                className={themeContext ? "navds-copybutton__icon" : undefined}
+                className={
+                  themeContext ? cn("navds-copybutton__icon") : undefined
+                }
               />
             )
           : icon ?? (
               <FilesIcon
                 aria-hidden={!!text}
                 title={text ? undefined : title || translate("title")}
-                className={themeContext ? "navds-copybutton__icon" : undefined}
+                className={
+                  themeContext ? cn("navds-copybutton__icon") : undefined
+                }
               />
             )}
       </LegacyIconWrapper>
@@ -145,7 +150,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         <Button
           ref={ref}
           type="button"
-          className={cl("navds-copybutton", className)}
+          className={cn("navds-copybutton", className)}
           {...rest}
           variant={variant === "action" ? "tertiary" : "tertiary-neutral"}
           onClick={composeEventHandlers(onClick, handleClick)}
@@ -164,7 +169,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         ref={ref}
         type="button"
         {...rest}
-        className={cl(
+        className={cn(
           "navds-copybutton",
           className,
           `navds-copybutton--${size}`,
@@ -177,7 +182,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         )}
         onClick={composeEventHandlers(onClick, handleClick)}
       >
-        <span className="navds-copybutton__content">
+        <span className={cn("navds-copybutton__content")}>
           {iconPosition === "left" && copyIcon}
           {text && (
             <Label as="span" size={size === "medium" ? "medium" : "small"}>
@@ -198,10 +203,12 @@ function LegacyIconWrapper({
   children: React.ReactNode;
   useLegacy: boolean;
 }) {
+  const { cn } = useRenameCSS();
+
   if (!useLegacy) {
     return children;
   }
-  return <span className="navds-copybutton__icon">{children}</span>;
+  return <span className={cn("navds-copybutton__icon")}>{children}</span>;
 }
 
 export default CopyButton;

package/src/date/Date.Dialog.tsx

@@ -1,9 +1,9 @@
-import cl from "clsx";
 import React, { useRef } from "react";
 import { Button } from "../button";
 import { Modal } from "../modal";
 import { useModalContext } from "../modal/Modal.context";
 import { Popover } from "../popover";
+import { useRenameCSS } from "../theme/Theme";
 import { useMedia } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { TFunction } from "../util/i18n/i18n.types";
@@ -42,6 +42,8 @@ const DateDialog = ({
   popoverProps,
 }: DateWrapperProps) => {
   const translateGlobal = useI18n("global", getGlobalTranslations(locale));
+  const { cn } = useRenameCSS();
+
   const modalRef = useRef<HTMLDialogElement>(null);
   const isInModal = useModalContext(false) !== undefined;
   const hideModal =
@@ -56,7 +58,7 @@ const DateDialog = ({
         onClose={onClose}
         placement="bottom-start"
         role="dialog"
-        className={cl("navds-date__popover", {
+        className={cn("navds-date__popover", {
           "navds-date": variant === "month",
         })}
         flip={false}
@@ -76,14 +78,14 @@ const DateDialog = ({
         onClose();
       }}
       aria-label={translate(variantToLabel[variant])}
-      className={cl("navds-date__modal", {
+      className={cn("navds-date__modal", {
         "navds-date__nested-modal": isInModal,
         "navds-date": variant === "month",
       })}
       closeOnBackdropClick
       placement="top"
     >
-      <div className="navds-date__modal-body">
+      <div className={cn("navds-date__modal-body")}>
         {children}
         <Button
           variant="tertiary"

package/src/date/Date.Input.tsx

@@ -1,8 +1,8 @@
-import cl from "clsx";
 import React, { InputHTMLAttributes, forwardRef, useRef } from "react";
 import { CalendarIcon } from "@navikt/aksel-icons";
 import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../form/useFormField";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../typography";
 import { omit } from "../util";
 import { createContext } from "../util/create-context";
@@ -72,6 +72,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
 
   const buttonRef = useRef<HTMLButtonElement>(null);
   const translate = useDateTranslationContext().translate;
+  const { cn } = useRenameCSS();
 
   const isDatepickerVariant = variant === "datepicker";
 
@@ -97,7 +98,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
 
   return (
     <div
-      className={cl(
+      className={cn(
         className,
         "navds-form-field",
         `navds-form-field--${size}`,
@@ -116,7 +117,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
       <Label
         htmlFor={inputProps.id}
         size={size}
-        className={cl("navds-form-field__label", {
+        className={cn("navds-form-field__label", {
           "navds-sr-only": hideLabel,
         })}
       >
@@ -126,7 +127,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
       {!!description && (
         <BodyShort
           as="div"
-          className={cl("navds-form-field__description", {
+          className={cn("navds-form-field__description", {
             "navds-sr-only": hideLabel,
           })}
           id={inputDescriptionId}
@@ -135,7 +136,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {description}
         </BodyShort>
       )}
-      <div className="navds-date__field-wrapper">
+      <div className={cn("navds-date__field-wrapper")}>
         <input
           ref={ref}
           {...omit(rest, ["error", "errorId", "size"])}
@@ -143,7 +144,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           autoComplete="off"
           aria-controls={context?.open ? context.ariaId : undefined}
           readOnly={readOnly}
-          className={cl(
+          className={cn(
             "navds-date__field-input",
             "navds-text-field__input",
             "navds-body-short",
@@ -159,7 +160,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
             setAnchorRef?.(buttonRef.current);
           }}
           type="button"
-          className="navds-date__field-button"
+          className={cn("navds-date__field-button")}
           ref={buttonRef}
         >
           <CalendarIcon
@@ -170,7 +171,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
         </button>
       </div>
       <div
-        className="navds-form-field__error"
+        className={cn("navds-form-field__error")}
         id={errorId}
         aria-relevant="additions removals"
         aria-live="polite"

package/src/date/datepicker/DatePicker.tsx

@@ -1,7 +1,7 @@
-import cl from "clsx";
 import { isSameDay } from "date-fns";
 import React, { forwardRef, useState } from "react";
 import { DateRange } from "react-day-picker";
+import { useRenameCSS } from "../../theme/Theme";
 import { useControllableState, useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
@@ -87,6 +87,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       translations,
       getTranslations(locale),
     );
+    const { cn } = useRenameCSS();
+
     const ariaId = useId(id);
 
     const [open, setOpen] = useControllableState({
@@ -137,7 +139,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
         >
           <div
             ref={mergedRef}
-            className={cl("navds-date__wrapper", wrapperClassName)}
+            className={cn("navds-date__wrapper", wrapperClassName)}
           >
             {children}
             <DateDialog

package/src/date/datepicker/parts/DatePicker.DayButton.tsx

@@ -1,7 +1,7 @@
-import cl from "clsx";
 import { Locale, format } from "date-fns";
 import React, { useEffect, useRef } from "react";
 import { CalendarDay, Modifiers } from "react-day-picker";
+import { useRenameCSS } from "../../../theme/Theme";
 
 const DatePickerDayButton = ({
   day,
@@ -14,6 +14,7 @@ const DatePickerDayButton = ({
   modifiers: Modifiers;
   locale: Locale;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const { cn } = useRenameCSS();
   const ref = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -37,7 +38,7 @@ const DatePickerDayButton = ({
       })}
       data-pressed={modifiers.selected}
       data-today={modifiers.today || undefined}
-      className={cl(rest.className, {
+      className={cn(rest.className, {
         "rdp-day_disabled": modifiers.disabled,
         "rdp-day_selected": modifiers.selected,
         "rdp-day_range_start": modifiers.range_start,