@navikt/ds-react 7.40.0 → 8.0.1

package/src/date/Date.Input.tsx

@@ -2,9 +2,9 @@ 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 { cl } from "../util/className";
 import { createStrictContext } from "../util/create-strict-context";
 import { useDateTranslationContext } from "./Date.locale";
 
@@ -75,7 +75,6 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
 
   const buttonRef = useRef<HTMLButtonElement>(null);
   const translate = useDateTranslationContext().translate;
-  const { cn } = useRenameCSS();
 
   const isDatepickerVariant = variant === "datepicker";
 
@@ -101,27 +100,27 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
 
   return (
     <div
-      className={cn(
+      className={cl(
         className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        "navds-date__field",
+        "aksel-form-field",
+        `aksel-form-field--${size}`,
+        "aksel-date__field",
         {
-          "navds-text-field--error": hasError,
-          "navds-date__field--error": hasError,
-          "navds-form-field--disabled": !!inputProps.disabled,
-          "navds-text-field--disabled": !!inputProps.disabled,
-          "navds-form-field--readonly": readOnly,
-          "navds-text-field--readonly": readOnly,
-          "navds-date__field--readonly": readOnly,
+          "aksel-text-field--error": hasError,
+          "aksel-date__field--error": hasError,
+          "aksel-form-field--disabled": !!inputProps.disabled,
+          "aksel-text-field--disabled": !!inputProps.disabled,
+          "aksel-form-field--readonly": readOnly,
+          "aksel-text-field--readonly": readOnly,
+          "aksel-date__field--readonly": readOnly,
         },
       )}
     >
       <Label
         htmlFor={inputProps.id}
         size={size}
-        className={cn("navds-form-field__label", {
-          "navds-sr-only": hideLabel,
+        className={cl("aksel-form-field__label", {
+          "aksel-sr-only": hideLabel,
         })}
       >
         {readOnly && <ReadOnlyIcon />}
@@ -130,8 +129,8 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
       {!!description && (
         <BodyShort
           as="div"
-          className={cn("navds-form-field__description", {
-            "navds-sr-only": hideLabel,
+          className={cl("aksel-form-field__description", {
+            "aksel-sr-only": hideLabel,
           })}
           id={inputDescriptionId}
           size={size}
@@ -139,7 +138,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {description}
         </BodyShort>
       )}
-      <div className={cn("navds-date__field-wrapper")}>
+      <div className="aksel-date__field-wrapper">
         <input
           ref={ref}
           {...omit(rest, ["error", "errorId", "size"])}
@@ -147,11 +146,11 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           autoComplete="off"
           aria-controls={context?.open ? context.ariaId : undefined}
           readOnly={readOnly}
-          className={cn(
-            "navds-date__field-input",
-            "navds-text-field__input",
-            "navds-body-short",
-            `navds-body-short--${size}`,
+          className={cl(
+            "aksel-date__field-input",
+            "aksel-text-field__input",
+            "aksel-body-short",
+            `aksel-body-short--${size}`,
           )}
           size={isDatepickerVariant ? 11 : 14}
         />
@@ -163,7 +162,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
             setAnchorRef?.(buttonRef.current);
           }}
           type="button"
-          className={cn("navds-date__field-button")}
+          className="aksel-date__field-button"
           ref={buttonRef}
         >
           <CalendarIcon
@@ -174,7 +173,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
         </button>
       </div>
       <div
-        className={cn("navds-form-field__error")}
+        className="aksel-form-field__error"
         id={errorId}
         aria-relevant="additions removals"
         aria-live="polite"

package/src/date/datepicker/DatePicker.tsx

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

package/src/date/datepicker/DatePicker.types.ts

@@ -96,6 +96,11 @@ export interface DatePickerDefaultProps
    * @default false
    */
   showWeekNumber?: boolean;
+  /**
+   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month.
+   * @default false
+   */
+  fixedWeeks?: boolean;
   /**
    * Open state for user-controlled state. Component controlled by default.
    */

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

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

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

@@ -12,7 +12,6 @@ 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";
@@ -41,7 +40,6 @@ const DatePickerMonths = ({
 
   const { captionLayout } = dayPickerProps;
 
-  const { cn } = useRenameCSS();
   const translate = useDateTranslationContext().translate;
 
   const handleMonthChange = useCallback(
@@ -80,13 +78,9 @@ const DatePickerMonths = ({
 
   return (
     <div {...omit(rest, ["displayIndex"])}>
-      <div className={cn("navds-date__caption")}>
+      <div className="aksel-date__caption">
         {captionLayout?.startsWith("dropdown") && (
-          <span
-            aria-live="polite"
-            aria-atomic="true"
-            className={cn("navds-sr-only")}
-          >
+          <span aria-live="polite" aria-atomic="true" className="aksel-sr-only">
             {format(calendarMonth.date, "LLLL y", { locale })}
           </span>
         )}
@@ -95,15 +89,15 @@ const DatePickerMonths = ({
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
           icon={<ArrowLeftIcon title={translate("goToPreviousMonth")} />}
-          className={cn("navds-date__caption-button")}
+          className="aksel-date__caption-button"
           type="button"
         />
         {captionLayout?.startsWith("dropdown") ? (
-          <div className={cn("navds-date__caption")}>
+          <div className="aksel-date__caption">
             <Select
               label={translate("month")}
               hideLabel
-              className={cn("navds-date__caption__month")}
+              className="aksel-date__caption__month"
               onChange={(event) => handleMonthChange(calendarMonth.date, event)}
               value={getMonth(calendarMonth.date)}
             >
@@ -117,7 +111,7 @@ const DatePickerMonths = ({
             <Select
               label={translate("year")}
               hideLabel
-              className={cn("navds-date__caption__year")}
+              className="aksel-date__caption__year"
               onChange={(event) => handleYearChange(calendarMonth.date, event)}
               value={getYear(calendarMonth.date)}
             >
@@ -134,7 +128,7 @@ const DatePickerMonths = ({
             as="span"
             aria-live="polite"
             role="status"
-            className={cn("navds-date__caption-label")}
+            className="aksel-date__caption-label"
           >
             {format(calendarMonth.date, "LLLL y", { locale })}
           </BodyShort>
@@ -145,7 +139,7 @@ const DatePickerMonths = ({
           icon={<ArrowRightIcon title={translate("goToNextMonth")} />}
           onClick={() => nextMonth && goToMonth(nextMonth)}
           disabled={!nextMonth}
-          className={cn("navds-date__caption-button")}
+          className="aksel-date__caption-button"
           type="button"
         />
       </div>

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

@@ -2,8 +2,8 @@ import { isBefore, isSameDay, 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 { cl } from "../../../util/className";
 import { useDateLocale } from "../../../util/i18n/i18n.hooks";
 import { getLocaleFromString } from "../../Date.locale";
 import { DateRange, isDateRange } from "../../Date.typeutils";
@@ -40,11 +40,6 @@ const LegacyClassNames: Partial<ClassNames> = {
 
 type ReactDayPickerProps = DatePickerDefaultProps &
   ConditionalModeProps & {
-    /**
-     * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
-     * @default false
-     */
-    fixedWeeks?: boolean;
     /**
      * Update selected date
      */
@@ -68,7 +63,6 @@ const ReactDayPicker = ({
   locale: _locale,
   ...rest
 }: ReactDayPickerProps) => {
-  const { cn } = useRenameCSS();
   const langProviderLocale = useDateLocale();
   const locale = _locale ? getLocaleFromString(_locale) : langProviderLocale;
 
@@ -180,7 +174,7 @@ const ReactDayPicker = ({
           [],
         ),
       }}
-      className={cn("navds-date", className)}
+      className={cl("aksel-date", className)}
       disabled={(day) => {
         return (
           (disableWeekends && isWeekend(day)) ||

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { DateRange } from "react-day-picker";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { useControllableState } from "../../../util/hooks";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import {
@@ -24,11 +24,6 @@ interface DatePickerStandaloneDefaultProps
    * Datepicker classname
    */
   className?: string;
-  /**
-   * If datepicker should be fixed to 6 weeks, regardless of actual weeks in month
-   * @default true
-   */
-  fixedWeeks?: boolean;
 }
 
 type StandaloneConditionalModeProps = SingleMode | MultipleMode | RangeMode;
@@ -57,7 +52,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n(
       "DatePicker",
       translations,
@@ -76,7 +70,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       <DateTranslationContextProvider translate={translate}>
         <div
           ref={ref}
-          className={cn("navds-date__standalone-wrapper", className)}
+          className={cl("aksel-date__standalone-wrapper", className)}
         >
           <ReactDayPicker
             {...rest}

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

@@ -2,8 +2,8 @@ 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 { cl } from "../../../util/className";
 import { useDateTranslationContext } from "../../Date.locale";
 import { MultipleMode } from "../DatePicker.types";
 
@@ -19,7 +19,6 @@ const DatePickerWeekNumber = ({
   showOnDesktop: boolean;
 } & React.ThHTMLAttributes<HTMLTableCellElement>) => {
   const translate = useDateTranslationContext().translate;
-  const { cn } = useRenameCSS();
 
   const { getModifiers } = useDayPicker();
 
@@ -58,8 +57,8 @@ const DatePickerWeekNumber = ({
   return (
     <DisplayMode above="sm" asChild>
       <td
-        className={cn("rdp-cell", {
-          "navds-date__week-wrapper": !showOnDesktop,
+        className={cl("rdp-cell", {
+          "aksel-date__week-wrapper": !showOnDesktop,
         })}
       >
         <Button
@@ -68,7 +67,7 @@ const DatePickerWeekNumber = ({
           name="week-number"
           aria-label={translate("selectWeekNumber", { week: weekNumber })}
           style={style}
-          className={cn("navds-date__weeknumber", "rdp-weeknumber")}
+          className="aksel-date__weeknumber rdp-weeknumber"
           onClick={() => {
             onWeekNumberClick(
               weekNumber,
@@ -76,9 +75,7 @@ const DatePickerWeekNumber = ({
             );
           }}
           icon={
-            <span className={cn("navds-date__weeknumber-number")}>
-              {weekNumber}
-            </span>
+            <span className="aksel-date__weeknumber-number">{weekNumber}</span>
           }
         />
       </td>

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

@@ -1,7 +1,6 @@
 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";
@@ -16,7 +15,6 @@ const DatePickerWeekRow = ({
   weeks?: CalendarWeek[];
 }) => {
   const translate = useDateTranslationContext().translate;
-  const { cn } = useRenameCSS();
   const labelId = useId();
 
   if (!onWeekNumberClick) {
@@ -27,13 +25,13 @@ const DatePickerWeekRow = ({
     <Show below="sm" asChild>
       <table className="rdp-table" role="grid">
         <tbody className="rdp-tbody">
-          <tr className={cn("rdp-row navds-date__week-row")}>
+          <tr className="rdp-row aksel-date__week-row">
             <Detail
               as="th"
               weight="semibold"
-              className={cn("rdp-cell navds-date__week-cell")}
+              className="rdp-cell aksel-date__week-cell"
             >
-              <span className={cn("navds-date__week-wrapper")} id={labelId}>
+              <span className="aksel-date__week-wrapper" id={labelId}>
                 {translate("week")}
               </span>
             </Detail>
@@ -44,7 +42,7 @@ const DatePickerWeekRow = ({
                 week={week}
                 onWeekNumberClick={onWeekNumberClick}
                 showOnDesktop={false}
-                className={cn("navds-date__week-wrapper")}
+                className="aksel-date__week-wrapper"
               />
             ))}
           </tr>

package/src/date/monthpicker/MonthPicker.tsx

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

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

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

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

@@ -10,7 +10,6 @@ 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";
 
@@ -19,7 +18,6 @@ const MonthPickerCaption = () => {
     useMonthPickerContext();
 
   const translate = useDateTranslationContext().translate;
-  const { cn } = useRenameCSS();
 
   const years: Date[] = [];
 
@@ -59,9 +57,9 @@ const MonthPickerCaption = () => {
   };
 
   return (
-    <div className={cn("navds-date__caption")}>
+    <div className="aksel-date__caption">
       <Button
-        className={cn("navds-date__caption-button")}
+        className="aksel-date__caption-button"
         disabled={disablePreviousYear()}
         onClick={() => handleButtonClick(-1)}
         icon={<ArrowLeftIcon title={translate("goToPreviousYear")} />}
@@ -75,7 +73,7 @@ const MonthPickerCaption = () => {
           hideLabel
           value={year.getFullYear()}
           onChange={handleYearChange}
-          className={cn("navds-date__caption__year")}
+          className="aksel-date__caption__year"
         >
           {years.map((yearOpt) => (
             <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
@@ -84,12 +82,12 @@ const MonthPickerCaption = () => {
           ))}
         </Select>
       ) : (
-        <span className={cn("navds-date__year-label")} aria-live="polite">
+        <span className="aksel-date__year-label" aria-live="polite">
           {year.getFullYear()}
         </span>
       )}
       <Button
-        className={cn("navds-date__caption-button")}
+        className="aksel-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 React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { useDateLocale, useI18n } from "../../../util/i18n/i18n.hooks";
 import {
   DateTranslationContextProvider,
@@ -47,7 +47,6 @@ export const MonthPickerStandalone = forwardRef<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n(
       "DatePicker",
       translations,
@@ -61,7 +60,7 @@ export const MonthPickerStandalone = forwardRef<
     }
 
     return (
-      <div ref={ref} className={cn("navds-date__wrapper", className)}>
+      <div ref={ref} className={cl("aksel-date__wrapper", className)}>
         <DateTranslationContextProvider translate={translate}>
           <MonthPickerProvider
             dropdownCaption={dropdownCaption}
@@ -75,7 +74,7 @@ export const MonthPickerStandalone = forwardRef<
             onMonthSelect={onMonthSelect}
             locale={locale ? getLocaleFromString(locale) : langProviderLocale}
           >
-            <div className={cn("navds-date rdp-month")}>
+            <div className="aksel-date rdp-month">
               <MonthPickerCaption />
               <MonthPickerTable />
             </div>

package/src/dialog/backdrop/DialogBackdropInternal.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { createTransitionStatusAttribute } from "../../util/hooks/useTransitionStatus";
 import { useDialogContext } from "../root/DialogRoot.context";
 
@@ -12,14 +12,13 @@ const DialogBackdropInternal = forwardRef<
   HTMLDivElement,
   DialogBackdropInternalProps
 >(({ className, ...restProps }, forwardedRef) => {
-  const { cn } = useRenameCSS();
   const { transitionStatus } = useDialogContext();
 
   return (
     <div
       {...restProps}
       ref={forwardedRef}
-      className={cn("navds-dialog__backdrop", className)}
+      className={cl("aksel-dialog__backdrop", className)}
       {...createTransitionStatusAttribute(transitionStatus)}
     />
   );

package/src/dialog/body/DialogBody.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 
 type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -18,13 +18,11 @@ type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
  */
 const DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(
   ({ className, children, ...restProps }, forwardedRef) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         {...restProps}
         ref={forwardedRef}
-        className={cn("navds-dialog__body", className)}
+        className={cl("aksel-dialog__body", className)}
       >
         {children}
       </div>

package/src/dialog/description/DialogDescription.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
+import { cl } from "../../util/className";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
@@ -23,14 +23,13 @@ const DialogDescription = forwardRef<
   HTMLParagraphElement,
   DialogDescriptionProps
 >(({ className, children, ...restProps }, forwardedRef) => {
-  const { cn } = useRenameCSS();
   const { size } = useDialogContext();
 
   return (
     <BodyShort
       {...restProps}
       ref={forwardedRef}
-      className={cn("navds-dialog__description", className)}
+      className={cl("aksel-dialog__description", className)}
       size={size}
       data-color="neutral"
       textColor="subtle"