@navikt/ds-react 8.0.0 → 8.1.0

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
-import { useRenameCSS } from "../../../theme/Theme";
-import { useI18n } from "../../../util/i18n/i18n.hooks";
+import { useI18n } from "../../../utils/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 { useI18n } from "../../../utils/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 { useI18n } from "../../../utils/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,7 +1,7 @@
-import cl from "clsx";
 import React, { SetStateAction, useCallback, useMemo, useState } from "react";
-import { createStrictContext } from "../../../util/create-strict-context";
-import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
+import { useClientLayoutEffect } from "../../../utils-external";
+import { cl, createStrictContext } from "../../../utils/helpers";
+import { usePrevious } from "../../../utils/hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { toComboboxOption } from "../combobox-utils";

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { createStrictContext } from "../../../util/create-strict-context";
-import { useClientLayoutEffect } from "../../../util/hooks";
+import { useClientLayoutEffect } from "../../../utils-external";
+import { createStrictContext } from "../../../utils/helpers";
 import { FormFieldType, useFormField } from "../../useFormField";
 import { ComboboxProps } from "../types";
 

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

@@ -4,10 +4,9 @@ import React, {
   useCallback,
   useRef,
 } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
-import { omit } from "../../../util";
-import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { useMergeRefs } from "../../../util/hooks";
+import { omit } from "../../../utils-external";
+import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -38,8 +37,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 +286,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,8 +3,8 @@
 /* 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 { useMergeRefs } from "../../../util/hooks";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import SelectedOptions from "../SelectedOptions/SelectedOptions";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
@@ -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/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { createStrictContext } from "../../../util/create-strict-context";
-import { usePrevious } from "../../../util/hooks";
+import { createStrictContext } from "../../../utils/helpers";
+import { usePrevious } from "../../../utils/hooks";
 import { useInputContext } from "../Input/Input.context";
 import { isInList } from "../combobox-utils";
 import { useComboboxCustomOptions } from "../customOptionsContext";

package/src/form/combobox/__tests__/combobox.test.tsx

@@ -2,8 +2,8 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test, vi } from "vitest";
-import { useId } from "../../../util";
-import nb from "../../../util/i18n/locales/nb";
+import { useId } from "../../../utils-external";
+import nb from "../../../utils/i18n/locales/nb";
 import { ComboboxProps, UNSAFE_Combobox } from "../index";
 
 const options = [

package/src/form/combobox/customOptionsContext.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { createStrictContext } from "../../util/create-strict-context";
+import { createStrictContext } from "../../utils/helpers";
 import { useInputContext } from "./Input/Input.context";
 import { ComboboxOption } from "./types";
 

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

@@ -1,8 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyLong, ErrorMessage } from "../../typography";
-import { useId } from "../../util/hooks";
+import { useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 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,9 +1,8 @@
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, Heading } from "../../typography";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useMergeRefs } from "../../util/hooks";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { cl, composeEventHandlers } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps
@@ -78,8 +77,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 +88,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 +101,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 +109,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,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 ErrorSummaryItemProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -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>

package/src/form/fieldset/Fieldset.tsx

@@ -1,8 +1,7 @@
-import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { omit, useId } from "../../util";
+import { omit, useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 import { ReadOnlyIcon, ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps } from "../useFormField";
 import { FieldsetContext } from "./context";
@@ -44,7 +43,6 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       inputDescriptionId,
     } = useFieldset(props, legendId);
 
-    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const {
@@ -61,7 +59,9 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
     return (
       <FieldsetContext.Provider
         value={{
-          error: errorPropagation ? props.error ?? fieldset?.error : undefined,
+          error: errorPropagation
+            ? (props.error ?? fieldset?.error)
+            : undefined,
           errorId: cl({
             [errorId]: showErrorMsg,
             [fieldset?.errorId ?? ""]: !!fieldset?.error,
@@ -75,13 +75,13 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           {...omit(rest, ["errorId", "error", "size", "readOnly"])}
           {...inputProps}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-fieldset",
-            `navds-fieldset--${size}`,
+            "aksel-fieldset",
+            `aksel-fieldset--${size}`,
             {
-              "navds-fieldset--error": hasError,
-              "navds-fieldset--readonly": readOnly,
+              "aksel-fieldset--error": hasError,
+              "aksel-fieldset--readonly": readOnly,
             },
           )}
         >
@@ -89,8 +89,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             id={legendId}
             size={size}
             as="legend"
-            className={cn("navds-fieldset__legend", {
-              "navds-sr-only": !!hideLegend,
+            className={cl("aksel-fieldset__legend", {
+              "aksel-sr-only": !!hideLegend,
             })}
           >
             {readOnly &&
@@ -99,8 +99,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           </Label>
           {!!description && (
             <BodyShort
-              className={cn("navds-fieldset__description", {
-                "navds-sr-only": !!hideLegend,
+              className={cl("aksel-fieldset__description", {
+                "aksel-sr-only": !!hideLegend,
               })}
               id={inputDescriptionId}
               size={size ?? "medium"}
@@ -114,7 +114,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             id={errorId}
             aria-relevant="additions removals"
             aria-live="polite"
-            className={cn("navds-fieldset__error")}
+            className="aksel-fieldset__error"
           >
             {showErrorMsg && (
               <ErrorMessage size={size} showIcon>

package/src/form/fieldset/useFieldset.ts

@@ -1,4 +1,4 @@
-import cl from "clsx";
+import { cl } from "../../utils/helpers";
 import {
   type FormFieldProps,
   containsReadMore,

package/src/form/file-upload/FileUpload.context.tsx

@@ -1,5 +1,5 @@
-import { createStrictContext } from "../../util/create-strict-context";
-import { ComponentTranslation } from "../../util/i18n/i18n.types";
+import { createStrictContext } from "../../utils/helpers";
+import { ComponentTranslation } from "../../utils/i18n/i18n.types";
 
 export type FileUploadLocaleContextProps = {
   translations?: ComponentTranslation<"FileUpload">;

package/src/form/file-upload/FileUpload.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
-import { ComponentTranslation } from "../../util/i18n/i18n.types";
+import { cl } from "../../utils/helpers";
+import { ComponentTranslation } from "../../utils/i18n/i18n.types";
 import { FileUploadLocaleContextProvider } from "./FileUpload.context";
 import Trigger from "./parts/Trigger";
 import Dropzone from "./parts/dropzone/Dropzone";
@@ -125,10 +125,9 @@ interface FileUploadComponent
  */
 export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
   ({ children, className, translations, ...rest }: FileUploadProps, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <FileUploadLocaleContextProvider translations={translations}>
-        <div ref={ref} {...rest} className={cn("navds-file-upload", className)}>
+        <div ref={ref} {...rest} className={cl("aksel-file-upload", className)}>
           {children}
         </div>
       </FileUploadLocaleContextProvider>

package/src/form/file-upload/parts/Trigger.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../slot/Slot";
+import { Slot } from "../../../utils/components/slot/Slot";
 import { FileUploadBaseProps } from "../FileUpload.types";
 import { useFileUpload } from "../useFileUpload";
 

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -1,16 +1,13 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { CircleSlashIcon, CloudUpIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../../button";
-import { useRenameCSS } from "../../../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../../../typography";
-import { composeEventHandlers } from "../../../../util/composeEventHandlers";
-import { useId } from "../../../../util/hooks";
-import { useI18n } from "../../../../util/i18n/i18n.hooks";
-import { omit } from "../../../../util/omit";
+import { omit, useId } from "../../../../utils-external";
+import { cl, composeEventHandlers } from "../../../../utils/helpers";
+import { useI18n } from "../../../../utils/i18n/i18n.hooks";
 import { useFormField } from "../../../useFormField";
 import { useFileUploadTranslation } from "../../FileUpload.context";
 import { useFileUpload } from "../../useFileUpload";
@@ -39,7 +36,6 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
       ...rest
     } = props;
 
-    const { cn } = useRenameCSS();
     const context = useFileUploadTranslation(false);
     const translate = useI18n(
       "FileUpload",
@@ -80,23 +76,23 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
 
     return (
       <div
-        className={cn("navds-form-field", "navds-dropzone", className, {
-          "navds-dropzone--error": hasError,
-          "navds-dropzone--dragging": dropzoneCtx.isDraggingOver,
-          "navds-dropzone--disabled": inputProps.disabled,
+        className={cl("aksel-form-field", "aksel-dropzone", className, {
+          "aksel-dropzone--error": hasError,
+          "aksel-dropzone--dragging": dropzoneCtx.isDraggingOver,
+          "aksel-dropzone--disabled": inputProps.disabled,
         })}
       >
         <Label
           htmlFor={inputId}
           id={labelId}
-          className={cn("navds-form-field__label")}
+          className="aksel-form-field__label"
         >
           {label}
         </Label>
         {!!description && (
           <BodyShort
             id={inputDescriptionId}
-            className={cn("navds-form-field__description")}
+            className="aksel-form-field__description"
             as="div"
           >
             {description}
@@ -104,7 +100,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
         )}
         {/** biome-ignore lint/a11y/noStaticElementInteractions: Assistive technologies will use the input within.  */}
         <div
-          className={cn("navds-dropzone__area")}
+          className="aksel-dropzone__area"
           onDragEnter={dropzoneCtx.onDragEnter}
           onDragOver={dropzoneCtx.onDragOver}
           onDragLeave={dropzoneCtx.onDragLeave}
@@ -117,16 +113,16 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
         >
           {!inputProps.disabled && (
             <>
-              <div className={cn("navds-dropzone__area-icon")}>
+              <div className="aksel-dropzone__area-icon">
                 <DropzoneIcon fontSize="1.5rem" aria-hidden />
               </div>
-              <div className={cn("navds-dropzone__area-release")}>
-                <div className={cn("navds-dropzone__area-release__icon")}>
+              <div className="aksel-dropzone__area-release">
+                <div className="aksel-dropzone__area-release__icon">
                   <DropzoneIcon aria-hidden />
                 </div>
                 <span
                   aria-hidden={!dropzoneCtx.isDraggingOver}
-                  className={cn("navds-dropzone__area-release__text")}
+                  className="aksel-dropzone__area-release__text"
                 >
                   {translate("dropzone.drop")}
                 </span>
@@ -144,7 +140,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
                 {...inputPropsRest}
                 id={buttonId}
                 aria-describedby={cl(labelId, ariaDescribedby)}
-                className={cn("navds-dropzone__area-button")}
+                className="aksel-dropzone__area-button"
                 type="button"
                 variant="secondary"
               >
@@ -156,7 +152,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
           )}
 
           {inputProps.disabled && (
-            <div className={cn("navds-dropzone__area-disabled")}>
+            <div className="aksel-dropzone__area-disabled">
               <CircleSlashIcon aria-hidden fontSize="1.75rem" />
               <BodyShort as="div">
                 {fileLimitReached
@@ -178,7 +174,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
           />
         </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/file-upload/parts/dropzone/dropzone.types.ts

@@ -1,4 +1,4 @@
-import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
+import type { ComponentTranslation } from "../../../../utils/i18n/i18n.types";
 import { FormFieldProps } from "../../../useFormField";
 import { FileUploadBaseProps } from "../../FileUpload.types";