@navikt/ds-react 8.0.0 → 8.1.0

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

@@ -1,7 +1,6 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
-import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { OverridableComponent } from "../../../util/types";
+import type { OverridableComponent } from "../../../utils-external";
+import { cl, composeEventHandlers } from "../../../utils/helpers";
 import { DropdownContext } from "../../context";
 
 export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
@@ -14,20 +13,19 @@ 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={cn("navds-dropdown__list-item")}>
+        <li className="aksel-dropdown__list-item">
           <Component
             {...rest}
             value={rest.children}
             onClick={composeEventHandlers(onClick, context?.onSelect)}
             ref={ref}
-            className={cn(
-              "navds-dropdown__item",
-              "navds-body-short",
-              "navds-body-short--small",
+            className={cl(
+              "aksel-dropdown__item",
+              "aksel-body-short",
+              "aksel-body-short--small",
               className,
             )}
           />

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
-import { OverridableComponent } from "../../../util/types";
+import type { OverridableComponent } from "../../../utils-external";
+import { cl } from "../../../utils/helpers";
 import ListItem, { ListItemProps } from "./Item";
 
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
@@ -22,10 +22,8 @@ export interface ListType
 }
 
 export const List = forwardRef(({ className, children, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <ul {...rest} ref={ref} className={cn("navds-dropdown__list", className)}>
+    <ul {...rest} ref={ref} className={cl("aksel-dropdown__list", className)}>
       {children}
     </ul>
   );

package/src/dropdown/Menu/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import { Popover } from "../../popover";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 import { DropdownContext } from "../context";
 import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
@@ -61,7 +61,6 @@ 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 +75,7 @@ export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
         {...rest}
         placement={placement}
         ref={ref}
-        className={cn("navds-dropdown__menu", className)}
+        className={cl("aksel-dropdown__menu", className)}
         offset={-4}
         anchorEl={anchorEl}
         open={isOpen}

package/src/dropdown/Toggle.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { composeEventHandlers } from "../util/composeEventHandlers";
+import { cl, composeEventHandlers } from "../utils/helpers";
 import { DropdownContext } from "./context";
 
 export interface DropdownToggleProps
@@ -16,7 +15,6 @@ 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 />");
@@ -44,7 +42,7 @@ export const DropdownToggle = forwardRef<
       }}
       onClick={composeEventHandlers(onClick, handleClick)}
       aria-expanded={isOpen}
-      className={cn("navds-dropdown__toggle", className)}
+      className={cl("aksel-dropdown__toggle", className)}
     />
   );
 });

package/src/expansion-card/ExpansionCard.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, useRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { useControllableState } from "../util/hooks";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useControllableState } from "../utils/hooks";
 import ExpansionCardContent, {
   ExpansionCardContentProps,
 } from "./ExpansionCardContent";
@@ -125,7 +125,6 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
 
     const [_open, _setOpen] = useControllableState({
@@ -148,12 +147,12 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
         <section
           data-color={color}
           {...rest}
-          className={cn(
-            "navds-expansioncard",
+          className={cl(
+            "aksel-expansioncard",
             className,
-            `navds-expansioncard--${size}`,
+            `aksel-expansioncard--${size}`,
             {
-              "navds-expansioncard--no-animation": !shouldFade.current,
+              "aksel-expansioncard--no-animation": !shouldFade.current,
             },
           )}
           ref={ref}

package/src/expansion-card/ExpansionCardContent.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { useThemeInternal } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../utils/helpers";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardContentProps
@@ -12,7 +13,6 @@ const ExpansionCardContent = forwardRef<
   HTMLDivElement,
   ExpansionCardContentProps
 >(({ children, className, "data-color": dataColor, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
   const themeContext = useThemeInternal();
 
@@ -28,15 +28,15 @@ const ExpansionCardContent = forwardRef<
       {...rest}
       ref={ref}
       as="div"
-      className={cn("navds-expansioncard__content", className, {
-        "navds-expansioncard__content--closed": !panelContext.open,
+      className={cl("aksel-expansioncard__content", className, {
+        "aksel-expansioncard__content--closed": !panelContext.open,
       })}
       aria-hidden={!panelContext.open}
       size={panelContext.size}
       data-open={panelContext.open}
     >
       <div
-        className={cn("navds-expansioncard__content-inner")}
+        className="aksel-expansioncard__content-inner"
         data-color={dataColor ?? themeContext?.color}
       >
         {children}

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../utils/helpers";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardDescriptionProps
@@ -12,7 +12,6 @@ export const ExpansionCardDescription = forwardRef<
   HTMLParagraphElement,
   ExpansionCardDescriptionProps
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
 
   if (panelContext === null) {
@@ -27,7 +26,7 @@ export const ExpansionCardDescription = forwardRef<
       {...rest}
       as="p"
       ref={ref}
-      className={cn("navds-link-panel__description", className)}
+      className={cl("aksel-link-panel__description", className)}
       size={panelContext.size}
     />
   );

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardHeaderProps
@@ -13,7 +13,6 @@ const ExpansionCardHeader = forwardRef<
   HTMLDivElement,
   ExpansionCardHeaderProps
 >(({ children, className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   const panelContext = useContext(ExpansionCardContext);
   const translate = useI18n("global");
 
@@ -28,19 +27,19 @@ const ExpansionCardHeader = forwardRef<
     <div
       ref={ref}
       {...rest}
-      className={cn("navds-expansioncard__header", className)}
+      className={cl("aksel-expansioncard__header", className)}
       data-open={panelContext.open}
     >
       <div>{children}</div>
 
       <button
-        className={cn("navds-expansioncard__header-button")}
+        className="aksel-expansioncard__header-button"
         onClick={panelContext.toggleOpen}
         type="button"
         aria-expanded={panelContext.open}
       >
         <ChevronDownIcon
-          className={cn("navds-expansioncard__header-chevron")}
+          className="aksel-expansioncard__header-chevron"
           title={translate("showMore")}
         />
       </button>

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 
 export interface ExpansionCardTitleProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -17,17 +17,15 @@ export const ExpansionCardTitle: OverridableComponent<
   HTMLHeadingElement
 > = forwardRef(
   ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-expansioncard__title",
-          `navds-expansioncard__title--${size}`,
-          "navds-heading",
-          `navds-heading--${size}`,
+        className={cl(
+          "aksel-expansioncard__title",
+          `aksel-expansioncard__title--${size}`,
+          "aksel-heading",
+          `aksel-heading--${size}`,
           className,
         )}
       />

package/src/form/ReadOnlyIcon.tsx

@@ -1,24 +1,21 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export const ReadOnlyIcon = () => {
-  const { cn } = useRenameCSS();
   return (
     <PadlockLockedFillIcon
       aria-hidden
-      className={cn("navds-form-field__readonly-icon")}
+      className="aksel-form-field__readonly-icon"
     />
   );
 };
 
 export const ReadOnlyIconWithTitle = () => {
-  const { cn } = useRenameCSS();
   return (
     <PadlockLockedFillIcon
       title={useI18n("global")("readOnly")}
-      className={cn("navds-form-field__readonly-icon")}
+      className="aksel-form-field__readonly-icon"
     />
   );
 };

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 { omit, useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 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 "../../utils/helpers";
 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/checkbox/useCheckbox.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { omit } from "../../util";
+import { omit } from "../../utils-external";
 import { useFormField } from "../useFormField";
 import { CheckboxGroupContext } from "./CheckboxGroup";
 import { CheckboxProps } from "./types";

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 "../../utils/helpers";
 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 "../../utils/helpers";
 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,8 +1,8 @@
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort, Label } from "../../../typography";
-import { useI18n } from "../../../util/i18n/i18n.hooks";
+import { cl } from "../../../utils/helpers";
+import { useI18n } from "../../../utils/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
@@ -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 { useClientLayoutEffect } from "../../../utils-external";
+import { cl } from "../../../utils/helpers";
 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 "../../../utils/helpers";
 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,
         ),