@navikt/ds-react 8.0.0 → 8.0.1

package/src/form/checkbox/Checkbox.tsx

@@ -1,33 +1,31 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../util";
+import { cl } from "../../util/className";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
-    const { cn } = useRenameCSS();
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
     const descriptionId = useId();
 
     return (
       <div
-        className={cn(
+        className={cl(
           props.className,
-          "navds-checkbox",
-          `navds-checkbox--${size}`,
+          "aksel-checkbox",
+          `aksel-checkbox--${size}`,
           {
-            "navds-checkbox--error": hasError,
-            "navds-checkbox--disabled": inputProps.disabled,
-            "navds-checkbox--readonly": readOnly,
+            "aksel-checkbox--error": hasError,
+            "aksel-checkbox--disabled": inputProps.disabled,
+            "aksel-checkbox--readonly": readOnly,
           },
         )}
         data-color={hasError ? "danger" : props["data-color"]}
       >
-        <div className={cn("navds-checkbox__input-wrapper")}>
+        <div className="aksel-checkbox__input-wrapper">
           <input
             {...omit(props, [
               "children",
@@ -46,7 +44,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               }) || undefined
             }
             type="checkbox"
-            className={cn("navds-checkbox__input")}
+            className="aksel-checkbox__input"
             ref={(el) => {
               if (el) {
                 el.indeterminate = props.indeterminate ?? false;
@@ -66,7 +64,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             focusable={false}
             role="img"
             aria-hidden
-            className={cn("navds-checkbox__icon")}
+            className="aksel-checkbox__icon"
           >
             <path
               d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
@@ -78,8 +76,8 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           as="label"
           htmlFor={inputProps.id}
           size={size}
-          className={cn("navds-checkbox__label", {
-            "navds-sr-only": props.hideLabel,
+          className={cl("aksel-checkbox__label", {
+            "aksel-sr-only": props.hideLabel,
           })}
         >
           {!nested && readOnly && <ReadOnlyIconWithTitle />}
@@ -89,9 +87,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           <BodyShort
             id={descriptionId}
             size={size}
-            className={cn(
-              "navds-form-field__subdescription navds-checkbox__description",
-            )}
+            className="aksel-form-field__subdescription aksel-checkbox__description"
           >
             {props.description}
           </BodyShort>

package/src/form/checkbox/CheckboxGroup.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, forwardRef, useContext, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
 
@@ -59,7 +59,6 @@ export const CheckboxGroup = forwardRef<
     { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const [state, setState] = useState<any[]>(defaultValue ?? []);
@@ -78,10 +77,10 @@ export const CheckboxGroup = forwardRef<
       <Fieldset
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-checkbox-group",
-          `navds-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          "aksel-checkbox-group",
+          `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
         )}
         nativeReadOnly={false}
       >
@@ -92,7 +91,7 @@ export const CheckboxGroup = forwardRef<
             toggleValue,
           }}
         >
-          <div className={cn("navds-checkboxes")}>{children}</div>
+          <div className="aksel-checkboxes">{children}</div>
         </CheckboxGroupContext.Provider>
       </Fieldset>
     );

package/src/form/combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { Floating } from "../../overlays/floating/Floating";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { cl } from "../../util/className";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
@@ -18,8 +18,6 @@ export const Combobox = forwardRef<
 >((props, ref) => {
   const { className, hideLabel = false, description, label, ...rest } = props;
 
-  const { cn } = useRenameCSS();
-
   const {
     error,
     errorId,
@@ -42,8 +40,8 @@ export const Combobox = forwardRef<
         <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 && <ReadOnlyIconWithTitle />}
@@ -52,8 +50,8 @@ export const Combobox = forwardRef<
         {!!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}
@@ -61,12 +59,12 @@ export const Combobox = forwardRef<
             {description}
           </BodyShort>
         )}
-        <div className={cn("navds-combobox__wrapper")}>
+        <div className="aksel-combobox__wrapper">
           <InputController ref={ref} {...rest} />
           <FilteredOptions />
         </div>
         <div
-          className={cn("navds-form-field__error")}
+          className="aksel-form-field__error"
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { useInputContext } from "./Input/Input.context";
 
 type ComboboxWrapperProps = {
@@ -20,7 +20,6 @@ const ComboboxWrapper = ({
   inputProps,
   inputSize,
 }: ComboboxWrapperProps) => {
-  const { cn } = useRenameCSS();
   const { toggleOpenButtonRef, clearInput, readOnly } = useInputContext();
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -46,16 +45,16 @@ const ComboboxWrapper = ({
     // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper for combobox input and chips.
     <div
       ref={wrapperRef}
-      className={cn(
+      className={cl(
         className,
-        "navds-form-field",
-        `navds-form-field--${inputSize}`,
+        "aksel-form-field",
+        `aksel-form-field--${inputSize}`,
         {
-          "navds-combobox--error": hasError,
-          "navds-combobox--disabled": !!inputProps.disabled,
-          "navds-combobox--focused": hasFocusWithin,
-          "navds-combobox--readonly": readOnly,
-          "navds-form-field--readonly": readOnly,
+          "aksel-combobox--error": hasError,
+          "aksel-combobox--disabled": !!inputProps.disabled,
+          "aksel-combobox--focused": hasFocusWithin,
+          "aksel-combobox--readonly": readOnly,
+          "aksel-form-field--readonly": readOnly,
         },
       )}
       onFocus={onFocusInsideWrapper}

package/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort, Label } from "../../../typography";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -10,8 +10,6 @@ import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const AddNewOption = () => {
-  const { cn } = useRenameCSS();
-
   const {
     inputProps: { id },
     size,
@@ -47,10 +45,10 @@ const AddNewOption = () => {
           toggleIsListOpen(false);
       }}
       id={filteredOptionsUtil.getAddNewOptionId(id)}
-      className={cn(
-        "navds-combobox__list-item navds-combobox__list-item--new-option",
+      className={cl(
+        "aksel-combobox__list-item aksel-combobox__list-item--new-option",
         {
-          "navds-combobox__list-item--new-option--focus":
+          "aksel-combobox__list-item--new-option--focus":
             activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
         },
       )}

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useState } from "react";
 import { DismissableLayer } from "../../../overlays/dismissablelayer/DismissableLayer";
 import { Floating } from "../../../overlays/floating/Floating";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useClientLayoutEffect } from "../../../util";
+import { cl } from "../../../util/className";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import AddNewOption from "./AddNewOption";
@@ -14,7 +14,6 @@ import filteredOptionsUtil from "./filtered-options-util";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
-  const { cn } = useRenameCSS();
   const {
     inputProps: { id },
     anchorRef,
@@ -69,9 +68,9 @@ const FilteredOptions = () => {
     >
       <Floating.Content
         ref={floatingRef}
-        className={cn("navds-combobox__list", {
-          "navds-combobox__list--closed": !isListOpen,
-          "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
+        className={cl("aksel-combobox__list", {
+          "aksel-combobox__list--closed": !isListOpen,
+          "aksel-combobox__list--with-hover": isMouseLastUsedInputDevice,
         })}
         id={filteredOptionsUtil.getFilteredOptionsId(id)}
         tabIndex={-1}
@@ -87,10 +86,7 @@ const FilteredOptions = () => {
         autoUpdateWhileMounted={false}
       >
         {shouldRenderNonSelectables && (
-          <div
-            className={cn("navds-combobox__list_non-selectables")}
-            role="status"
-          >
+          <div className="aksel-combobox__list_non-selectables" role="status">
             {isMultiSelect && maxSelected.limit && <MaxSelectedMessage />}
             {isLoading && <LoadingMessage />}
             {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
@@ -103,7 +99,7 @@ const FilteredOptions = () => {
           <ul
             ref={setFilteredOptionsRef}
             role="listbox"
-            className={cn("navds-combobox__list-options")}
+            className="aksel-combobox__list-options"
           >
             {isValueNew && !maxSelected.isLimitReached && allowNewValues && (
               <AddNewOption />

package/src/form/combobox/FilteredOptions/FilteredOptionsItem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CheckmarkIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
+import { cl } from "../../../util/className";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList } from "../combobox-utils";
@@ -27,8 +27,6 @@ const useTextHighlight = (text: string, searchTerm: string) => {
 };
 
 const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
-  const { cn } = useRenameCSS();
-
   const {
     inputProps: { id },
     size,
@@ -52,9 +50,9 @@ const FilteredOptionsItem = ({ option }: { option: ComboboxOption }) => {
 
   return (
     <li
-      className={cn("navds-combobox__list-item", {
-        "navds-combobox__list-item--focus": isActive,
-        "navds-combobox__list-item--selected": isInList(
+      className={cl("aksel-combobox__list-item", {
+        "aksel-combobox__list-item--focus": isActive,
+        "aksel-combobox__list-item--selected": isInList(
           option.value,
           selectedOptions,
         ),

package/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Loader } from "../../../loader";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
@@ -9,12 +8,11 @@ const LoadingMessage = () => {
   const {
     inputProps: { id },
   } = useInputContext();
-  const { cn } = useRenameCSS();
   const translate = useI18n("Combobox");
 
   return (
     <div
-      className={cn("navds-combobox__list-item--loading")}
+      className="aksel-combobox__list-item--loading"
       id={filteredOptionsUtil.getIsLoadingId(id)}
     >
       <Loader title={translate("loading")} />

package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";
 
 const MaxSelectedMessage = () => {
-  const { cn } = useRenameCSS();
   const {
     inputProps: { id },
   } = useInputContext();
@@ -15,7 +13,7 @@ const MaxSelectedMessage = () => {
 
   return (
     <div
-      className={cn("navds-combobox__list-item--max-selected")}
+      className="aksel-combobox__list-item--max-selected"
       id={filteredOptionsUtil.getMaxSelectedOptionsId(id)}
     >
       {translate("maxSelected", {

package/src/form/combobox/FilteredOptions/NoSearchHitsMessage.tsx

@@ -1,12 +1,9 @@
 import React from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 
 const NoSearchHitsMessage = () => {
-  const { cn } = useRenameCSS();
-
   const translate = useI18n("Combobox");
 
   const {
@@ -15,7 +12,7 @@ const NoSearchHitsMessage = () => {
 
   return (
     <div
-      className={cn("navds-combobox__list-item--no-options")}
+      className="aksel-combobox__list-item--no-options"
       id={filteredOptionsUtil.getNoHitsId(id)}
     >
       {translate("noMatches")}

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { SetStateAction, useCallback, useMemo, useState } from "react";
+import { cl } from "../../../util/className";
 import { createStrictContext } from "../../../util/create-strict-context";
 import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/Input.context";

package/src/form/combobox/Input/Input.tsx

@@ -4,8 +4,8 @@ import React, {
   useCallback,
   useRef,
 } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { omit } from "../../../util";
+import { cl } from "../../../util/className";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { useMergeRefs } from "../../../util/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
@@ -38,8 +38,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     { inputClassName, shouldShowSelectedOptions, placeholder, onBlur, ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const internalRef = useRef<HTMLInputElement>(null);
     const mergedRefs = useMergeRefs(ref, internalRef);
     const {
@@ -289,12 +287,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         onKeyDown={handleKeyDown}
         autoComplete="off"
         placeholder={selectedOptions.length ? undefined : placeholder}
-        className={cn(
+        className={cl(
           inputClassName,
-          "navds-combobox__input",
-          "navds-body-short",
-          `navds-body-short--${size}`,
-          { "navds-combobox__input--hide-caret": hideCaret },
+          "aksel-combobox__input",
+          "aksel-body-short",
+          `aksel-body-short--${size}`,
+          { "aksel-combobox__input--hide-caret": hideCaret },
         )}
         aria-controls={filteredOptionsUtil.getFilteredOptionsId(inputProps.id)}
         aria-expanded={!!isListOpen}

package/src/form/combobox/Input/InputController.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef } from "react";
 import { Floating } from "../../../overlays/floating/Floating";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { useMergeRefs } from "../../../util/hooks";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
@@ -40,8 +40,6 @@ export const InputController = forwardRef<
     ...rest
   } = props;
 
-  const { cn } = useRenameCSS();
-
   const {
     focusInput,
     inputProps,
@@ -61,8 +59,8 @@ export const InputController = forwardRef<
     <Floating.Anchor asChild ref={setAnchorRef}>
       {/** biome-ignore lint/a11y/noStaticElementInteractions: Acts as wrapper list-toggle and input */}
       <div
-        className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
-          "navds-combobox__wrapper-inner--virtually-unfocused":
+        className={cl("aksel-combobox__wrapper-inner aksel-text-field__input", {
+          "aksel-combobox__wrapper-inner--virtually-unfocused":
             activeDecendantId !== undefined,
         })}
         onClick={() => {

package/src/form/combobox/Input/ToggleListButton.tsx

@@ -1,11 +1,9 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useInputContext } from "./Input.context";
 
 export const ToggleListButton = forwardRef<HTMLDivElement>((_, ref) => {
-  const { cn } = useRenameCSS();
   const { isListOpen, toggleIsListOpen } = useFilteredOptionsContext();
   const { focusInput } = useInputContext();
 
@@ -17,7 +15,7 @@ export const ToggleListButton = forwardRef<HTMLDivElement>((_, ref) => {
         toggleIsListOpen();
         focusInput();
       }}
-      className={cn("navds-combobox__button-toggle-list")}
+      className="aksel-combobox__button-toggle-list"
       aria-hidden
     >
       {isListOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Chips } from "../../../chips";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useInputContext } from "../Input/Input.context";
 import { ComboboxOption } from "../types";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
@@ -12,14 +11,12 @@ interface SelectedOptionsProps {
 }
 
 const Option = ({ option }: { option: ComboboxOption }) => {
-  const { cn } = useRenameCSS();
-
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
   const { focusInput, readOnly, inputProps } = useInputContext();
 
   if (!isMultiSelect) {
     return (
-      <div className={cn("navds-combobox__selected-options--no-bg")}>
+      <div className="aksel-combobox__selected-options--no-bg">
         {option.label}
       </div>
     );
@@ -51,12 +48,11 @@ const SelectedOptions: React.FC<SelectedOptionsProps> = ({
   size,
   children,
 }) => {
-  const { cn } = useRenameCSS();
   const { value } = useInputContext();
   const { isMultiSelect } = useSelectedOptionsContext();
   return (
     <Chips
-      className={cn("navds-combobox__selected-options")}
+      className="aksel-combobox__selected-options"
       size={size}
       data-type={isMultiSelect ? "multiple" : "single"}
     >

package/src/form/confirmation-panel/ConfirmationPanel.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyLong, ErrorMessage } from "../../typography";
+import { cl } from "../../util/className";
 import { useId } from "../../util/hooks";
 import { Checkbox, CheckboxProps } from "../checkbox";
 import { useFormField } from "../useFormField";
@@ -52,7 +51,6 @@ export const ConfirmationPanel = forwardRef<
   HTMLInputElement,
   ConfirmationPanelProps
 >(({ className, children, label, ...props }, ref) => {
-  const { cn } = useRenameCSS();
   const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(
     props,
     "confirmation-panel",
@@ -68,18 +66,18 @@ export const ConfirmationPanel = forwardRef<
 
   return (
     <div
-      className={cn("navds-confirmation-panel", "navds-form-field", className, {
-        "navds-confirmation-panel--small": size === "small",
-        "navds-confirmation-panel--error": hasError,
-        "navds-confirmation-panel--checked": !!props.checked,
+      className={cl("aksel-confirmation-panel", "aksel-form-field", className, {
+        "aksel-confirmation-panel--small": size === "small",
+        "aksel-confirmation-panel--error": hasError,
+        "aksel-confirmation-panel--checked": !!props.checked,
       })}
       data-color={currentColor}
     >
-      <div className={cn("navds-confirmation-panel__inner")}>
+      <div className="aksel-confirmation-panel__inner">
         {children && (
           <BodyLong
             size={props.size}
-            className={cn("navds-confirmation-panel__content")}
+            className="aksel-confirmation-panel__content"
             id={`confirmation-panel-${id}`}
             as="div"
           >
@@ -100,7 +98,7 @@ export const ConfirmationPanel = forwardRef<
           {label}
         </Checkbox>
       </div>
-      <div className={cn("navds-form-field__error")} id={errorId} role="alert">
+      <div className="aksel-form-field__error" id={errorId} role="alert">
         {showErrorMsg && (
           <ErrorMessage size={size} showIcon>
             {props.error}

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, Heading } from "../../typography";
+import { cl } from "../../util/className";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
 import { useI18n } from "../../util/i18n/i18n.hooks";
@@ -78,8 +78,6 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const translate = useI18n("ErrorSummary");
     const wrapperRef = useRef<HTMLDivElement>(null);
     const headingRef = useRef<HTMLHeadingElement>(null);
@@ -91,10 +89,10 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       <div
         ref={mergedRef}
         {...rest}
-        className={cn(
+        className={cl(
           className,
-          "navds-error-summary",
-          `navds-error-summary--${size}`,
+          "aksel-error-summary",
+          `aksel-error-summary--${size}`,
         )}
         tabIndex={-1}
         onFocus={composeEventHandlers(rest.onFocus, (event) => {
@@ -104,7 +102,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         })}
       >
         <Heading
-          className={cn("navds-error-summary__heading")}
+          className="aksel-error-summary__heading"
           as={headingTag}
           size={size === "medium" ? "small" : "xsmall"}
           ref={headingRef}
@@ -112,11 +110,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
         >
           {heading ?? translate("heading")}
         </Heading>
-        <BodyShort
-          as="ul"
-          size={size}
-          className={cn("navds-error-summary__list")}
-        >
+        <BodyShort as="ul" size={size} className="aksel-error-summary__list">
           {children}
         </BodyShort>
       </div>

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { OverridableComponent } from "../../util/types";
 
 export interface ErrorSummaryItemProps
@@ -21,14 +21,12 @@ type ErrorSummaryItemType = OverridableComponent<
 
 export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <li>
         <Component
           {...rest}
           ref={ref}
-          className={cn(className, "navds-error-summary__item", "navds-link")}
+          className={cl(className, "aksel-error-summary__item", "aksel-link")}
         >
           {children}
         </Component>