@navikt/ds-react 7.15.0 → 7.16.0

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

@@ -12,6 +12,7 @@ import { CalendarMonth, useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Select } from "../../../form/select";
+import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
 import { omit } from "../../../util";
 import { useDateTranslationContext } from "../../Date.locale";
@@ -40,6 +41,7 @@ const DatePickerMonths = ({
 
   const { captionLayout } = dayPickerProps;
 
+  const { cn } = useRenameCSS();
   const translate = useDateTranslationContext().translate;
 
   const handleMonthChange = useCallback(
@@ -72,9 +74,13 @@ const DatePickerMonths = ({
 
   return (
     <div {...omit(rest, ["displayIndex"])}>
-      <div className="navds-date__caption">
+      <div className={cn("navds-date__caption")}>
         {captionLayout?.startsWith("dropdown") && (
-          <span aria-live="polite" aria-atomic="true" className="navds-sr-only">
+          <span
+            aria-live="polite"
+            aria-atomic="true"
+            className={cn("navds-sr-only")}
+          >
             {format(calendarMonth.date, "LLLL y", { locale })}
           </span>
         )}
@@ -83,15 +89,15 @@ const DatePickerMonths = ({
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
           icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
-          className="navds-date__caption-button"
+          className={cn("navds-date__caption-button")}
           type="button"
         />
         {captionLayout?.startsWith("dropdown") ? (
-          <div className="navds-date__caption">
+          <div className={cn("navds-date__caption")}>
             <Select
               label={translate("month")}
               hideLabel
-              className="navds-date__caption__month"
+              className={cn("navds-date__caption__month")}
               onChange={(event) => handleMonthChange(calendarMonth.date, event)}
               value={getMonth(calendarMonth.date)}
             >
@@ -105,7 +111,7 @@ const DatePickerMonths = ({
             <Select
               label={translate("year")}
               hideLabel
-              className="navds-date__caption__year"
+              className={cn("navds-date__caption__year")}
               onChange={(event) => handleYearChange(calendarMonth.date, event)}
               value={getYear(calendarMonth.date)}
             >
@@ -122,7 +128,7 @@ const DatePickerMonths = ({
             as="span"
             aria-live="polite"
             role="status"
-            className="navds-date__caption-label"
+            className={cn("navds-date__caption-label")}
           >
             {format(calendarMonth.date, "LLLL y", { locale })}
           </BodyShort>
@@ -133,7 +139,7 @@ const DatePickerMonths = ({
           icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
-          className="navds-date__caption-button"
+          className={cn("navds-date__caption-button")}
           type="button"
         />
       </div>

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

@@ -1,8 +1,8 @@
-import cl from "clsx";
 import { isWeekend } from "date-fns";
 import React, { useCallback } from "react";
 import { ClassNames, DayPicker, dateMatchModifiers } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
+import { useRenameCSS } from "../../../theme/Theme";
 import { omit } from "../../../util";
 import { useDateLocale } from "../../../util/i18n/i18n.hooks";
 import { getLocaleFromString } from "../../Date.locale";
@@ -67,6 +67,7 @@ const ReactDayPicker = ({
   locale: _locale,
   ...rest
 }: ReactDayPickerProps) => {
+  const { cn } = useRenameCSS();
   const langProviderLocale = useDateLocale();
   const locale = _locale ? getLocaleFromString(_locale) : langProviderLocale;
 
@@ -139,7 +140,7 @@ const ReactDayPicker = ({
           [],
         ),
       }}
-      className={cl("navds-date", className)}
+      className={cn("navds-date", className)}
       disabled={(day) => {
         return (
           (disableWeekends && isWeekend(day)) ||

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

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { DateRange } from "react-day-picker";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useControllableState } from "../../../util/hooks";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import {
@@ -57,6 +57,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const translate = useI18n(
       "DatePicker",
       translations,
@@ -75,7 +76,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       <DateTranslationContextProvider translate={translate}>
         <div
           ref={ref}
-          className={cl("navds-date__standalone-wrapper", className)}
+          className={cn("navds-date__standalone-wrapper", className)}
         >
           <ReactDayPicker
             {...rest}

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

@@ -1,8 +1,8 @@
-import cl from "clsx";
 import React, { useMemo } from "react";
 import { CalendarWeek, useDayPicker } from "react-day-picker";
 import { Button } from "../../../button";
 import { Hide, Show } from "../../../layout/responsive";
+import { useRenameCSS } from "../../../theme/Theme";
 import { Detail } from "../../../typography";
 import { useDateTranslationContext } from "../../Date.locale";
 import { MultipleMode } from "../DatePicker.types";
@@ -19,6 +19,7 @@ const DatePickerWeekNumber = ({
   showOnDesktop: boolean;
 } & React.ThHTMLAttributes<HTMLTableCellElement>) => {
   const translate = useDateTranslationContext().translate;
+  const { cn } = useRenameCSS();
 
   const { getModifiers } = useDayPicker();
 
@@ -57,7 +58,7 @@ const DatePickerWeekNumber = ({
   return (
     <DisplayMode above="sm" asChild>
       <td
-        className={cl("rdp-cell", {
+        className={cn("rdp-cell", {
           "navds-date__week-wrapper": !showOnDesktop,
         })}
       >
@@ -67,7 +68,7 @@ const DatePickerWeekNumber = ({
           name="week-number"
           aria-label={translate("selectWeekNumber", { week: weekNumber })}
           style={style}
-          className={cl("navds-date__weeknumber", "rdp-weeknumber")}
+          className={cn("navds-date__weeknumber", "rdp-weeknumber")}
           onClick={() => {
             onWeekNumberClick(
               weekNumber,

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { CalendarWeek } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
+import { useRenameCSS } from "../../../theme/Theme";
 import { Detail } from "../../../typography";
 import { useId } from "../../../util/hooks";
 import { useDateTranslationContext } from "../../Date.locale";
@@ -15,6 +16,7 @@ const DatePickerWeekRow = ({
   weeks?: CalendarWeek[];
 }) => {
   const translate = useDateTranslationContext().translate;
+  const { cn } = useRenameCSS();
   const labelId = useId();
 
   if (!onWeekNumberClick) {
@@ -25,13 +27,13 @@ const DatePickerWeekRow = ({
     <Show below="sm" asChild>
       <table className="rdp-table" role="grid">
         <tbody className="rdp-tbody">
-          <tr className="rdp-row navds-date__week-row">
+          <tr className={cn("rdp-row navds-date__week-row")}>
             <Detail
               as="th"
               weight="semibold"
-              className="rdp-cell navds-date__week-cell"
+              className={cn("rdp-cell navds-date__week-cell")}
             >
-              <span className="navds-date__week-wrapper" id={labelId}>
+              <span className={cn("navds-date__week-wrapper")} id={labelId}>
                 {translate("week")}
               </span>
             </Detail>
@@ -42,7 +44,7 @@ const DatePickerWeekRow = ({
                 week={week}
                 onWeekNumberClick={onWeekNumberClick}
                 showOnDesktop={false}
-                className="navds-date__week-wrapper"
+                className={cn("navds-date__week-wrapper")}
               />
             ))}
           </tr>

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { useControllableState, useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
@@ -88,6 +88,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       translations,
       getTranslations(locale),
     );
+    const { cn } = useRenameCSS();
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
 
@@ -139,7 +140,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
           >
             <div
               ref={mergedRef}
-              className={cl("navds-date__wrapper", wrapperClassName)}
+              className={cn("navds-date__wrapper", wrapperClassName)}
             >
               {children}
               <DateDialog
@@ -157,7 +158,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
                   strategy,
                 }}
               >
-                <div className={cl("rdp-month", className)}>
+                <div className={cn("rdp-month", className)}>
                   <MonthPickerCaption />
                   <MonthPickerTable />
                 </div>

package/src/date/monthpicker/parts/MonthPicker.Button.tsx

@@ -1,4 +1,3 @@
-import cl from "clsx";
 import {
   compareAsc,
   compareDesc,
@@ -7,6 +6,7 @@ import {
   setYear,
 } from "date-fns";
 import React, { useEffect, useRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { dateIsInCurrentMonth, isMatch } from "../../date-utils";
 import { useMonthPickerContext } from "../MonthPicker.context";
 import { nextEnabled } from "../MonthPicker.util";
@@ -48,6 +48,7 @@ export const MonthButton = ({
 }: MonthType) => {
   const ref = useRef<HTMLButtonElement>(null);
 
+  const { cn } = useRenameCSS();
   const {
     fromDate,
     toDate,
@@ -82,7 +83,7 @@ export const MonthButton = ({
       disabled={isDisabled}
       aria-pressed={!!isSelected}
       data-current-month={isThisMonth}
-      className={cl("navds-date__month-button", {
+      className={cn("navds-date__month-button", {
         "rdp-day_today": isThisMonth,
         "rdp-day_selected": isSelected,
         "rdp-day_disabled": isDisabled,
@@ -116,7 +117,7 @@ export const MonthButton = ({
           .replace(".", "")
           .substring(0, 3)}
       </span>
-      <span className="navds-sr-only">
+      <span className={cn("navds-sr-only")}>
         {format(new Date(month), "LLLL", { locale })}
       </span>
     </button>

package/src/date/monthpicker/parts/MonthPicker.Caption.tsx

@@ -10,6 +10,7 @@ import React from "react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Select } from "../../../form/select";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useDateTranslationContext } from "../../Date.locale";
 import { useMonthPickerContext } from "../MonthPicker.context";
 
@@ -18,6 +19,7 @@ const MonthPickerCaption = () => {
     useMonthPickerContext();
 
   const translate = useDateTranslationContext().translate;
+  const { cn } = useRenameCSS();
 
   const years: Date[] = [];
 
@@ -57,9 +59,9 @@ const MonthPickerCaption = () => {
   };
 
   return (
-    <div className="navds-date__caption">
+    <div className={cn("navds-date__caption")}>
       <Button
-        className="navds-date__caption-button"
+        className={cn("navds-date__caption-button")}
         disabled={disablePreviousYear()}
         onClick={() => handleButtonClick(-1)}
         icon={<ArrowLeftIcon title={translate("goToPreviousYear")} />}
@@ -73,7 +75,7 @@ const MonthPickerCaption = () => {
           hideLabel
           value={year.getFullYear()}
           onChange={handleYearChange}
-          className="navds-date__caption__year"
+          className={cn("navds-date__caption__year")}
         >
           {years.map((yearOpt) => (
             <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
@@ -82,12 +84,12 @@ const MonthPickerCaption = () => {
           ))}
         </Select>
       ) : (
-        <span className="navds-date__year-label" aria-live="polite">
+        <span className={cn("navds-date__year-label")} aria-live="polite">
           {year.getFullYear()}
         </span>
       )}
       <Button
-        className="navds-date__caption-button"
+        className={cn("navds-date__caption-button")}
         disabled={disableNextYear()}
         onClick={() => handleButtonClick(1)}
         icon={<ArrowRightIcon title={translate("goToNextYear")} />}

package/src/date/monthpicker/parts/MonthPicker.Standalone.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useDateLocale, useI18n } from "../../../util/i18n/i18n.hooks";
 import {
   DateTranslationContextProvider,
@@ -47,6 +47,7 @@ export const MonthPickerStandalone = forwardRef<
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const translate = useI18n(
       "DatePicker",
       translations,
@@ -60,7 +61,7 @@ export const MonthPickerStandalone = forwardRef<
     }
 
     return (
-      <div ref={ref} className={cl("navds-date__wrapper", className)}>
+      <div ref={ref} className={cn("navds-date__wrapper", className)}>
         <DateTranslationContextProvider translate={translate}>
           <MonthPickerProvider
             dropdownCaption={dropdownCaption}
@@ -74,7 +75,7 @@ export const MonthPickerStandalone = forwardRef<
             onMonthSelect={onMonthSelect}
             locale={locale ? getLocaleFromString(locale) : langProviderLocale}
           >
-            <div className="navds-date rdp-month">
+            <div className={cn("navds-date rdp-month")}>
               <MonthPickerCaption />
               <MonthPickerTable />
             </div>

package/src/dropdown/Menu/Divider.tsx

@@ -1,15 +1,19 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 
 export const Divider = forwardRef<
   HTMLHRElement,
   React.HTMLAttributes<HTMLHRElement>
->(({ className, ...rest }, ref) => (
-  <hr
-    {...rest}
-    ref={ref}
-    className={cl("navds-dropdown__divider", className)}
-  />
-));
+>(({ className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <hr
+      {...rest}
+      ref={ref}
+      className={cn("navds-dropdown__divider", className)}
+    />
+  );
+});
 
 export default Divider;

package/src/dropdown/Menu/GroupedList/GroupedHeading.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 
 export interface GroupedHeadingProps
   extends React.HTMLAttributes<HTMLDetailsElement> {
@@ -12,17 +12,20 @@ export interface GroupedHeadingProps
 export const GroupedHeading = forwardRef<
   HTMLDetailsElement,
   GroupedHeadingProps
->(({ className, ...rest }, ref) => (
-  <dt
-    {...rest}
-    ref={ref}
-    className={cl(
-      "navds-dropdown__list-heading",
-      "navds-heading",
-      "navds-heading--xsmall",
-      className,
-    )}
-  />
-));
+>(({ className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+  return (
+    <dt
+      {...rest}
+      ref={ref}
+      className={cn(
+        "navds-dropdown__list-heading",
+        "navds-heading",
+        "navds-heading--xsmall",
+        className,
+      )}
+    />
+  );
+});
 
 export default GroupedHeading;

package/src/dropdown/Menu/GroupedList/GroupedItem.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
@@ -17,16 +17,17 @@ export const GroupedItem: OverridableComponent<
   HTMLButtonElement
 > = forwardRef(
   ({ as: Component = "button", className, onClick, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const context = useContext(DropdownContext);
 
     return (
-      <dd className="navds-dropdown__list-item">
+      <dd className={cn("navds-dropdown__list-item")}>
         <Component
           {...rest}
           value={rest.children}
           onClick={composeEventHandlers(onClick, context?.onSelect)}
           ref={ref}
-          className={cl(
+          className={cn(
             "navds-dropdown__item",
             "navds-body-short",
             "navds-body-short--small",

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { OverridableComponent } from "../../../util/types";
 import GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
@@ -30,11 +30,14 @@ export interface GroupedListType
 }
 
 export const DescriptionList = forwardRef(
-  ({ className, children, ...rest }, ref) => (
-    <dl {...rest} ref={ref} className={cl("navds-dropdown__list", className)}>
-      {children}
-    </dl>
-  ),
+  ({ className, children, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+    return (
+      <dl {...rest} ref={ref} className={cn("navds-dropdown__list", className)}>
+        {children}
+      </dl>
+    );
+  },
 ) as GroupedListType;
 
 DescriptionList.Heading = GroupedHeading;

package/src/dropdown/Menu/List/Item.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { OverridableComponent } from "../../../util/types";
 import { DropdownContext } from "../../context";
@@ -14,16 +14,17 @@ export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
 export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
   forwardRef(
     ({ as: Component = "button", className, onClick, ...rest }, ref) => {
+      const { cn } = useRenameCSS();
       const context = useContext(DropdownContext);
 
       return (
-        <li className="navds-dropdown__list-item">
+        <li className={cn("navds-dropdown__list-item")}>
           <Component
             {...rest}
             value={rest.children}
             onClick={composeEventHandlers(onClick, context?.onSelect)}
             ref={ref}
-            className={cl(
+            className={cn(
               "navds-dropdown__item",
               "navds-body-short",
               "navds-body-short--small",

package/src/dropdown/Menu/List/index.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { OverridableComponent } from "../../../util/types";
 import ListItem, { ListItemProps } from "./Item";
 
@@ -21,11 +21,15 @@ export interface ListType
   Item: OverridableComponent<ListItemProps, HTMLButtonElement>;
 }
 
-export const List = forwardRef(({ className, children, ...rest }, ref) => (
-  <ul {...rest} ref={ref} className={cl("navds-dropdown__list", className)}>
-    {children}
-  </ul>
-)) as ListType;
+export const List = forwardRef(({ className, children, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <ul {...rest} ref={ref} className={cn("navds-dropdown__list", className)}>
+      {children}
+    </ul>
+  );
+}) as ListType;
 
 List.Item = ListItem;
 List.displayName = "Dropdown.Menu.List";

package/src/dropdown/Menu/index.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Popover } from "../../popover";
+import { useRenameCSS } from "../../theme/Theme";
 import { DropdownContext } from "../context";
 import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
@@ -61,6 +61,7 @@ export interface MenuType<Props = DropdownMenuProps>
 
 export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
   ({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const context = useContext(DropdownContext);
 
     if (!context) {
@@ -76,7 +77,7 @@ export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
         placement={placement}
         ref={ref}
         arrow={false}
-        className={cl("navds-dropdown__menu", className)}
+        className={cn("navds-dropdown__menu", className)}
         offset={-4}
         anchorEl={anchorEl}
         open={isOpen}

package/src/dropdown/Toggle.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { DropdownContext } from "./context";
 
@@ -16,6 +16,7 @@ export const DropdownToggle = forwardRef<
   DropdownToggleProps
 >(({ className, onClick, ...rest }, ref) => {
   const context = useContext(DropdownContext);
+  const { cn } = useRenameCSS();
 
   if (!context) {
     console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
@@ -43,7 +44,7 @@ export const DropdownToggle = forwardRef<
       }}
       onClick={composeEventHandlers(onClick, handleClick)}
       aria-expanded={isOpen}
-      className={cl("navds-dropdown__toggle", className)}
+      className={cn("navds-dropdown__toggle", className)}
     />
   );
 });

package/src/expansion-card/ExpansionCard.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { useControllableState } from "../util/hooks";
 import { OverridableComponent } from "../util/types";
 import ExpansionCardContent, {
@@ -117,6 +117,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
 
     const [_open, _setOpen] = useControllableState({
@@ -138,7 +139,7 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
       >
         <section
           {...rest}
-          className={cl(
+          className={cn(
             "navds-expansioncard",
             className,
             `navds-expansioncard--${size}`,

package/src/expansion-card/ExpansionCardContent.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import { ExpansionCardContext } from "./context";
 
@@ -12,6 +12,7 @@ const ExpansionCardContent = forwardRef<
   HTMLDivElement,
   ExpansionCardContentProps
 >(({ children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
 
   if (panelContext === null) {
@@ -26,14 +27,14 @@ const ExpansionCardContent = forwardRef<
       {...rest}
       ref={ref}
       as="div"
-      className={cl("navds-expansioncard__content", className, {
+      className={cn("navds-expansioncard__content", className, {
         "navds-expansioncard__content--closed": !panelContext.open,
       })}
       aria-hidden={!panelContext.open}
       size={panelContext.size}
       data-open={panelContext.open}
     >
-      <div className="navds-expansioncard__content-inner">{children}</div>
+      <div className={cn("navds-expansioncard__content-inner")}>{children}</div>
     </BodyLong>
   );
 });