@navikt/ds-react 8.0.0 → 8.0.1

package/src/chips/Toggle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface ChipsToggleProps
@@ -44,15 +44,13 @@ export const ToggleChips: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         data-color={color ?? variantToColor(variant)}
         {...rest}
         ref={ref}
-        className={cn("navds-chips__chip navds-chips__toggle", className, {
-          "navds-chips__toggle--with-checkmark": checkmark,
+        className={cl("aksel-chips__chip aksel-chips__toggle", className, {
+          "aksel-chips__toggle--with-checkmark": checkmark,
         })}
         aria-pressed={selected}
         data-pressed={selected}
@@ -60,7 +58,7 @@ export const ToggleChips: OverridableComponent<
         {checkmark && (
           <svg
             aria-hidden
-            className={cn("navds-chips__toggle-icon")}
+            className="aksel-chips__toggle-icon"
             width="1.25em"
             height="1.25em"
             viewBox="0 0 20 20"
@@ -87,7 +85,7 @@ export const ToggleChips: OverridableComponent<
             )}
           </svg>
         )}
-        <span className={cn("navds-chips__chip-text")}>{children}</span>
+        <span className="aksel-chips__chip-text">{children}</span>
       </Component>
     );
   },

package/src/copybutton/CopyButton.tsx

@@ -2,8 +2,8 @@ import React, { ButtonHTMLAttributes, forwardRef, useState } from "react";
 import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { Button, ButtonProps } from "../button";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types/theme";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
 import { useTimeout } from "../util/hooks/useTimeout";
@@ -103,8 +103,6 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     const translate = useI18n("CopyButton");
     const timeout = useTimeout();
 
-    const { cn } = useRenameCSS();
-
     const handleClick = () => {
       copy(copyText);
       setActive(true);
@@ -122,7 +120,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       <Button
         ref={ref}
         type="button"
-        className={cn("navds-copybutton", className)}
+        className={cl("aksel-copybutton", className)}
         {...rest}
         variant="tertiary"
         data-color={variantToDataColor(variant) ?? dataColor}
@@ -134,14 +132,14 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
                 <CheckmarkIcon
                   aria-hidden={!!text}
                   title={text ? undefined : activeString}
-                  className={cn("navds-copybutton__icon")}
+                  className="aksel-copybutton__icon"
                 />
               ))
             : (icon ?? (
                 <FilesIcon
                   aria-hidden={!!text}
                   title={text ? undefined : title || translate("title")}
-                  className={cn("navds-copybutton__icon")}
+                  className="aksel-copybutton__icon"
                 />
               ))
         }

package/src/date/Date.Dialog.tsx

@@ -4,7 +4,7 @@ import { useDialogContext } from "../dialog/root/DialogRoot.context";
 import { Modal } from "../modal";
 import { useModalContext } from "../modal/Modal.context";
 import { Popover } from "../popover";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { useMedia } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { TFunction } from "../util/i18n/i18n.types";
@@ -43,7 +43,6 @@ const DateDialog = ({
   popoverProps,
 }: DateWrapperProps) => {
   const translateGlobal = useI18n("global", getGlobalTranslations(locale));
-  const { cn } = useRenameCSS();
 
   const modalRef = useRef<HTMLDialogElement>(null);
 
@@ -65,8 +64,8 @@ const DateDialog = ({
         open={open}
         onClose={onClose}
         placement="bottom-start"
-        className={cn("navds-date__popover", {
-          "navds-date": variant === "month",
+        className={cl("aksel-date__popover", {
+          "aksel-date": variant === "month",
         })}
         {...popoverProps}
       >
@@ -84,14 +83,14 @@ const DateDialog = ({
         onClose();
       }}
       aria-label={translate(variantToLabel[variant])}
-      className={cn("navds-date__modal", {
-        "navds-date__nested-modal": isInModal,
-        "navds-date": variant === "month",
+      className={cl("aksel-date__modal", {
+        "aksel-date__nested-modal": isInModal,
+        "aksel-date": variant === "month",
       })}
       closeOnBackdropClick
       placement="top"
     >
-      <div className={cn("navds-date__modal-body")}>
+      <div className="aksel-date__modal-body">
         {children}
         <Button
           variant="tertiary"

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>