@navikt/ds-react 7.15.0 → 7.16.0

package/src/list/List.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, BodyShort, Heading, HeadingProps } from "../typography";
 import { ListItem } from "./List.Item";
 import { ListContext } from "./List.context";
@@ -57,6 +56,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
   ) => {
     const { size: contextSize } = useContext(ListContext);
 
+    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal(false);
 
     const listSize = size ?? contextSize;
@@ -83,7 +83,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
             {...rest}
             size={listSize}
             ref={ref}
-            className={cl("navds-list", `navds-list--${listSize}`, className)}
+            className={cn("navds-list", `navds-list--${listSize}`, className)}
           >
             <ListTag role="list">{children}</ListTag>
           </BodyLong>
@@ -103,7 +103,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
           {...rest}
           size={listSize}
           ref={ref}
-          className={cl("navds-list", `navds-list--${listSize}`, className)}
+          className={cn("navds-list", `navds-list--${listSize}`, className)}
         >
           {title && (
             <Heading size={headingSizeMap[listSize]} as={headingTag}>

package/src/loader/Loader.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { SVGProps, forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { omit } from "../util";
 import { useId } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -64,6 +64,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const internalId = useId();
     const translate = useI18n("Loader");
 
@@ -71,7 +72,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
       <svg
         aria-labelledby={id ?? `loader-${internalId}`}
         ref={ref}
-        className={cl(
+        className={cn(
           "navds-loader",
           className,
           `navds-loader--${size}`,
@@ -89,7 +90,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           {title || translate("title")}
         </title>
         <circle
-          className="navds-loader__background"
+          className={cn("navds-loader__background")}
           xmlns="http://www.w3.org/2000/svg"
           cx="25"
           cy="25"
@@ -97,7 +98,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           fill="none"
         />
         <circle
-          className="navds-loader__foreground"
+          className={cn("navds-loader__foreground")}
           cx="25"
           cy="25"
           r="20"

package/src/modal/Modal.tsx

@@ -1,9 +1,9 @@
 import { useFloatingPortalNode } from "@floating-ui/react";
-import cl from "clsx";
 import React, { forwardRef, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { useDateInputContext } from "../date/Date.Input";
 import { useProvider } from "../provider/Provider";
+import { useRenameCSS } from "../theme/Theme";
 import { Detail, Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
@@ -21,8 +21,6 @@ import {
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
 
-const polyfillClassName = "navds-modal--polyfilled";
-
 interface ModalComponent
   extends React.ForwardRefExoticComponent<
     ModalProps & React.RefAttributes<HTMLDialogElement>
@@ -99,6 +97,10 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     }: ModalProps,
     ref,
   ) => {
+    const { cn } = useRenameCSS();
+
+    const polyfillClassName = useRef(cn("navds-modal--polyfilled"));
+
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMergeRefs(modalRef, ref);
 
@@ -120,7 +122,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         dialogPolyfill.registerDialog(modalRef.current);
 
         // Force-add the "polyfilled" class in case of SSR (needPolyfill will always be false on the server)
-        modalRef.current.classList.add(polyfillClassName);
+        modalRef.current.classList.add(polyfillClassName.current);
       }
       // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
       // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
@@ -147,8 +149,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 
-    const mergedClassName = cl("navds-modal", className, {
-      [polyfillClassName]: needPolyfill,
+    const mergedClassName = cn("navds-modal", className, {
+      [polyfillClassName.current]: needPolyfill,
       "navds-modal--autowidth": !width,
       [`navds-modal--${width}`]: isWidthPreset,
       "navds-modal--top": placement === "top" && !needPolyfill,
@@ -238,7 +240,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           {header && (
             <ModalHeader>
               {header.label && (
-                <Detail className="navds-modal__label">{header.label}</Detail>
+                <Detail className={cn("navds-modal__label")}>
+                  {header.label}
+                </Detail>
               )}
               <Heading
                 size={header.size ?? "medium"}
@@ -246,7 +250,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
                 id={ariaLabelId}
               >
                 {header.icon && (
-                  <span className="navds-modal__header-icon">
+                  <span className={cn("navds-modal__header-icon")}>
                     {header.icon}
                   </span>
                 )}

package/src/modal/ModalBody.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 
 export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -7,8 +7,9 @@ export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
   ({ className, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     return (
-      <div {...rest} ref={ref} className={cl("navds-modal__body", className)} />
+      <div {...rest} ref={ref} className={cn("navds-modal__body", className)} />
     );
   },
 );

package/src/modal/ModalFooter.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 
 export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -7,11 +7,12 @@ export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
   ({ className, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     return (
       <div
         {...rest}
         ref={ref}
-        className={cl("navds-modal__footer", className)}
+        className={cn("navds-modal__footer", className)}
       />
     );
   },

package/src/modal/ModalHeader.tsx

@@ -1,7 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
+import { useRenameCSS } from "../theme/Theme";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { useModalContext } from "./Modal.context";
 
@@ -16,15 +16,16 @@ export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const context = useModalContext();
     const translate = useI18n("global");
 
     return (
-      <div {...rest} ref={ref} className={cl("navds-modal__header", className)}>
+      <div {...rest} ref={ref} className={cn("navds-modal__header", className)}>
         {context.closeHandler && closeButton && (
           <Button
             type="button"
-            className="navds-modal__button"
+            className={cn("navds-modal__button")}
             size="small"
             variant="tertiary-neutral"
             onKeyDown={(event) => {

package/src/overlays/action-menu/ActionMenu.tsx

@@ -1,9 +1,8 @@
-import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
 import { Slot } from "../../slot/Slot";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, useId } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { createContext } from "../../util/create-context";
@@ -351,6 +350,7 @@ export const ActionMenuContent = forwardRef<
     ref,
   ) => {
     const context = useActionMenuContext();
+    const { cn } = useRenameCSS();
 
     return (
       <Menu.Portal rootElement={context.rootElement} asChild>
@@ -358,7 +358,7 @@ export const ActionMenuContent = forwardRef<
           ref={ref}
           id={context.contentId}
           aria-labelledby={context.triggerId}
-          className={cl("navds-action-menu__content", className)}
+          className={cn("navds-action-menu__content", className)}
           {...rest}
           align={align}
           sideOffset={4}
@@ -377,7 +377,9 @@ export const ActionMenuContent = forwardRef<
             },
           }}
         >
-          <div className="navds-action-menu__content-inner">{children}</div>
+          <div className={cn("navds-action-menu__content-inner")}>
+            {children}
+          </div>
         </Menu.Content>
       </Menu.Portal>
     );
@@ -393,11 +395,12 @@ interface ActionMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const ActionMenuLabel = forwardRef<HTMLDivElement, ActionMenuLabelProps>(
   ({ children, className, ...rest }: ActionMenuLabelProps, ref) => {
+    const { cn } = useRenameCSS();
     return (
       <div
         ref={ref}
         {...rest}
-        className={cl("navds-action-menu__label", className)}
+        className={cn("navds-action-menu__label", className)}
       >
         {children}
       </div>
@@ -441,12 +444,13 @@ export const ActionMenuGroup = forwardRef<
   ActionMenuGroupProps
 >(({ children, className, label, ...rest }: ActionMenuGroupProps, ref) => {
   const labelId = useId();
+  const { cn } = useRenameCSS();
 
   return (
     <Menu.Group
       ref={ref}
       {...rest}
-      className={cl("navds-action-menu__group", className)}
+      className={cn("navds-action-menu__group", className)}
       asChild={false}
       aria-labelledby={label ? labelId : undefined}
     >
@@ -470,10 +474,12 @@ type MarkerProps = {
 };
 
 const Marker = ({ children, className, placement }: MarkerProps) => {
+  const { cn } = useRenameCSS();
+
   return (
     <div
       aria-hidden
-      className={cl(
+      className={cn(
         className,
         "navds-action-menu__marker",
         `navds-action-menu__marker--${placement}`,
@@ -489,6 +495,7 @@ type ShortcutProps = {
 };
 
 const Shortcut = ({ children }: ShortcutProps) => {
+  const { cn } = useRenameCSS();
   /**
    * Assumes the user will input either a single keyboard key
    * or keys separated by "+"
@@ -498,7 +505,7 @@ const Shortcut = ({ children }: ShortcutProps) => {
   return (
     <Marker placement="right">
       {parsed.map((char, index) => (
-        <span key={char + index} className="navds-action-menu__shortcut">
+        <span key={char + index} className={cn("navds-action-menu__shortcut")}>
           {char}
         </span>
       ))}
@@ -544,10 +551,12 @@ export const ActionMenuItem: OverridableComponent<
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
+
     return (
       <Menu.Item
         {...rest}
-        className={cl("navds-action-menu__item", className, {
+        className={cn("navds-action-menu__item", className, {
           "navds-action-menu__item--danger": variant === "danger",
           "navds-action-menu__item--has-icon": icon,
         })}
@@ -557,7 +566,10 @@ export const ActionMenuItem: OverridableComponent<
         <Component ref={ref}>
           {children}
           {icon && (
-            <Marker placement="left" className="navds-action-menu__marker-icon">
+            <Marker
+              placement="left"
+              className={cn("navds-action-menu__marker-icon")}
+            >
               {icon}
             </Marker>
           )}
@@ -600,6 +612,8 @@ export const ActionMenuCheckboxItem = forwardRef<
     }: ActionMenuCheckboxItemProps,
     ref,
   ) => {
+    const { cn } = useRenameCSS();
+
     return (
       <Menu.CheckboxItem
         ref={ref}
@@ -611,7 +625,7 @@ export const ActionMenuCheckboxItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cl(
+        className={cn(
           "navds-action-menu__item navds-action-menu__item--has-icon",
           className,
         )}
@@ -619,17 +633,17 @@ export const ActionMenuCheckboxItem = forwardRef<
       >
         {children}
         <Marker placement="left">
-          <Menu.ItemIndicator className="navds-action-menu__indicator">
+          <Menu.ItemIndicator className={cn("navds-action-menu__indicator")}>
             <svg
               width="1em"
               height="1em"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className="navds-action-menu__indicator-icon"
+              className={cn("navds-action-menu__indicator-icon")}
               aria-hidden
             >
-              <g className="navds-action-menu__indicator-icon--unchecked">
+              <g className={cn("navds-action-menu__indicator-icon--unchecked")}>
                 <rect
                   width="24"
                   height="24"
@@ -646,7 +660,11 @@ export const ActionMenuCheckboxItem = forwardRef<
                   strokeWidth="2"
                 />
               </g>
-              <g className="navds-action-menu__indicator-icon--indeterminate">
+              <g
+                className={cn(
+                  "navds-action-menu__indicator-icon--indeterminate",
+                )}
+              >
                 <rect
                   width="24"
                   height="24"
@@ -662,7 +680,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
-              <g className="navds-action-menu__indicator-icon--checked">
+              <g className={cn("navds-action-menu__indicator-icon--checked")}>
                 <rect
                   width="24"
                   height="24"
@@ -736,6 +754,7 @@ export const ActionMenuRadioItem = forwardRef<
     { children, className, onSelect, ...rest }: ActionMenuRadioItemProps,
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal(false);
 
     return (
@@ -749,24 +768,24 @@ export const ActionMenuRadioItem = forwardRef<
           event.preventDefault();
         })}
         asChild={false}
-        className={cl(
+        className={cn(
           "navds-action-menu__item navds-action-menu__item--has-icon",
           className,
         )}
       >
         {children}
         <Marker placement="left">
-          <Menu.ItemIndicator className="navds-action-menu__indicator">
+          <Menu.ItemIndicator className={cn("navds-action-menu__indicator")}>
             <svg
               width="1em"
               height="1em"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className="navds-action-menu__indicator-icon"
+              className={cn("navds-action-menu__indicator-icon")}
               aria-hidden
             >
-              <g className="navds-action-menu__indicator-icon--unchecked">
+              <g className={cn("navds-action-menu__indicator-icon--unchecked")}>
                 <rect
                   width="24"
                   height="24"
@@ -784,7 +803,7 @@ export const ActionMenuRadioItem = forwardRef<
                 />
               </g>
               {themeContext ? (
-                <g className="navds-action-menu__indicator-icon--checked">
+                <g className={cn("navds-action-menu__indicator-icon--checked")}>
                   <rect
                     width="24"
                     height="24"
@@ -801,7 +820,7 @@ export const ActionMenuRadioItem = forwardRef<
                   />
                 </g>
               ) : (
-                <g className="navds-action-menu__indicator-icon--checked">
+                <g className={cn("navds-action-menu__indicator-icon--checked")}>
                   <rect
                     x="1"
                     y="1"
@@ -844,12 +863,14 @@ export const ActionMenuDivider = forwardRef<
   ActionMenuDividerElement,
   ActionMenuDividerProps
 >(({ className, ...rest }: ActionMenuDividerProps, ref) => {
+  const { cn } = useRenameCSS();
+
   return (
     <Menu.Divider
       ref={ref}
       asChild={false}
       {...rest}
-      className={cl("navds-action-menu__divider", className)}
+      className={cn("navds-action-menu__divider", className)}
     />
   );
 });
@@ -901,12 +922,14 @@ export const ActionMenuSubTrigger = forwardRef<
   ActionMenuSubTriggerElement,
   ActionMenuSubTriggerProps
 >(({ children, className, icon, ...rest }: ActionMenuSubTriggerProps, ref) => {
+  const { cn } = useRenameCSS();
+
   return (
     <Menu.SubTrigger
       ref={ref}
       {...rest}
       asChild={false}
-      className={cl(
+      className={cn(
         "navds-action-menu__item navds-action-menu__sub-trigger",
         className,
         { "navds-action-menu__item--has-icon": icon },
@@ -914,11 +937,17 @@ export const ActionMenuSubTrigger = forwardRef<
     >
       {children}
       {icon && (
-        <Marker placement="left" className="navds-action-menu__marker-icon">
+        <Marker
+          placement="left"
+          className={cn("navds-action-menu__marker-icon")}
+        >
           {icon}
         </Marker>
       )}
-      <Marker placement="right" className="navds-action-menu__marker-icon">
+      <Marker
+        placement="right"
+        className={cn("navds-action-menu__marker-icon")}
+      >
         <ChevronRightIcon aria-hidden />
       </Marker>
     </Menu.SubTrigger>
@@ -939,6 +968,7 @@ export const ActionMenuSubContent = forwardRef<
   ActionMenuSubContentElement,
   ActionMenuSubContentProps
 >(({ children, className, style, ...rest }: ActionMenuSubContentProps, ref) => {
+  const { cn } = useRenameCSS();
   const context = useActionMenuContext();
 
   return (
@@ -949,7 +979,7 @@ export const ActionMenuSubContent = forwardRef<
         sideOffset={1}
         collisionPadding={10}
         {...rest}
-        className={cl(
+        className={cn(
           "navds-action-menu__content navds-action-menu__sub-content",
           className,
         )}
@@ -968,7 +998,7 @@ export const ActionMenuSubContent = forwardRef<
           },
         }}
       >
-        <div className="navds-action-menu__content-inner">{children}</div>
+        <div className={cn("navds-action-menu__content-inner")}>{children}</div>
       </Menu.SubContent>
     </Menu.Portal>
   );

package/src/pagination/Pagination.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -153,6 +154,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const headingId = useId();
     const translate = useI18n("Pagination");
 
@@ -180,7 +182,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         aria-labelledby={
           srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
         }
-        className={cl(
+        className={cn(
           "navds-pagination",
           `navds-pagination--${size}`,
           className,
@@ -196,10 +198,10 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             {srHeading.text}
           </Heading>
         )}
-        <ul className="navds-pagination__list">
+        <ul className={cn("navds-pagination__list")}>
           <li>
             <Item
-              className={cl("navds-pagination__prev-next", {
+              className={cn("navds-pagination__prev-next", {
                 "navds-pagination--invisible": page === 1,
                 "navds-pagination--prev-next--with-text": prevNextTexts,
               })}
@@ -222,7 +224,10 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             (step, i) => {
               const n = Number(step);
               return Number.isNaN(n) ? (
-                <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
+                <li
+                  className={cn("navds-pagination__ellipsis")}
+                  key={`${step}${i}`}
+                >
                   <BodyShort
                     size={size === "xsmall" ? "small" : size}
                     as="span"
@@ -247,7 +252,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           )}
           <li>
             <Item
-              className={cl("navds-pagination__prev-next", {
+              className={cn("navds-pagination__prev-next", {
                 "navds-pagination--invisible": page === count,
                 "navds-pagination--prev-next--with-text": prevNextTexts,
               })}

package/src/pagination/PaginationItem.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -41,6 +40,7 @@ export const Item: PaginationItemType = forwardRef(
     ref,
   ) => {
     const themeContext = useThemeInternal(false);
+    const { cn } = useRenameCSS();
 
     return (
       <Button
@@ -49,7 +49,7 @@ export const Item: PaginationItemType = forwardRef(
         aria-current={selected}
         data-selected={selected}
         ref={ref}
-        className={cl("navds-pagination__item", className, {
+        className={cn("navds-pagination__item", className, {
           "navds-pagination__item--selected": selected,
         })}
         data-page={page}

package/src/panel/Panel.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 /**
@@ -33,10 +33,11 @@ export const Panel: PanelType = forwardRef(
     { children, className, border = false, as: Component = "div", ...rest },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     return (
       <Component
         ref={ref}
-        className={cl("navds-panel", className, {
+        className={cn("navds-panel", className, {
           "navds-panel--border": border,
         })}
         {...rest}

package/src/popover/Popover.tsx

@@ -6,12 +6,11 @@ import {
   shift,
   useFloating,
 } from "@floating-ui/react";
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useDateInputContext } from "../date/Date.Input";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -119,6 +118,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useModalContext(false) !== undefined;
     const datepickerContext = useDateInputContext(false);
@@ -182,7 +182,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         <div
           ref={floatingRef}
           {...rest}
-          className={cl("navds-popover", className, {
+          className={cn("navds-popover", className, {
             "navds-popover--hidden": !open || !anchorEl,
           })}
           style={{ ...rest.style, ...floatingStyles }}
@@ -201,7 +201,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
                 ...(arrowY != null ? { top: arrowY } : {}),
                 ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
               }}
-              className="navds-popover__arrow"
+              className={cn("navds-popover__arrow")}
             />
           )}
         </div>