@navikt/ds-react 7.40.0 → 8.0.1

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>
     );
@@ -27,12 +24,7 @@ const Option = ({ option }: { option: ComboboxOption }) => {
 
   if (readOnly || inputProps.disabled) {
     return (
-      <Chips.Toggle
-        data-color="neutral"
-        variant="neutral"
-        checkmark={false}
-        as="div"
-      >
+      <Chips.Toggle data-color="neutral" checkmark={false} as="div">
         {option.label}
       </Chips.Toggle>
     );
@@ -56,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>

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 { cl } from "../../util/className";
 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 "../../util/className";
 import {
   type FormFieldProps,
   containsReadMore,

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

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../util/className";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
 import { FileUploadLocaleContextProvider } from "./FileUpload.context";
 import Trigger from "./parts/Trigger";
@@ -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/dropzone/Dropzone.tsx

@@ -1,12 +1,11 @@
 /* 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 { cl } from "../../../../util/className";
 import { composeEventHandlers } from "../../../../util/composeEventHandlers";
 import { useId } from "../../../../util/hooks";
 import { useI18n } from "../../../../util/i18n/i18n.hooks";
@@ -35,10 +34,10 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
       translations,
       onClick,
       id: buttonId,
+      "data-color": color,
       ...rest
     } = props;
 
-    const { cn } = useRenameCSS();
     const context = useFileUploadTranslation(false);
     const translate = useI18n(
       "FileUpload",
@@ -79,23 +78,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}
@@ -103,7 +102,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}
@@ -112,19 +111,20 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
             inputRef.current?.click(),
           )}
           data-disabled={inputProps.disabled}
+          data-color={color}
         >
           {!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>
@@ -142,7 +142,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"
               >
@@ -154,7 +154,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
@@ -176,7 +176,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/item/Item.tsx

@@ -1,15 +1,13 @@
 import React, { MouseEvent, forwardRef } from "react";
-import { Spacer } from "../../../../layout/stack";
-import { useRenameCSS } from "../../../../theme/Theme";
-import { BodyShort, ErrorMessage } from "../../../../typography";
+import { BodyLong, BodyShort, ErrorMessage } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
+import { cl } from "../../../../util/className";
 import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
 import { FileItem } from "./Item.types";
-import ItemButton from "./ItemButton";
-import ItemIcon from "./ItemIcon";
-import ItemName from "./ItemName";
+import { ItemActionField } from "./ItemActionField";
+import { ItemHeader } from "./ItemHeader";
 import { formatFileSize } from "./utils/format-file-size";
 
 export interface FileUploadItemProps
@@ -83,7 +81,6 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
       }: FileUploadItemProps,
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const context = useFileUploadTranslation(false);
       const translate = useI18n(
         "FileUpload",
@@ -103,30 +100,22 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
         return description ?? formatFileSize(file);
       }
 
-      const renderButton = status === "idle" && button;
-      const renderCustomButton = isCustomButton(button);
-
       return (
         <Component
           ref={ref}
           {...rest}
-          className={cn("navds-file-item", className, {
-            "navds-file-item--error": showError,
+          className={cl("aksel-file-item", className, {
+            "aksel-file-item--error": showError,
           })}
         >
-          <div className={cn("navds-file-item__inner")}>
-            <ItemIcon
-              isLoading={status !== "idle"}
-              file={file}
-              showError={showError}
-            />
-            <div className={cn("navds-file-item__file-info")}>
-              <ItemName file={file} href={href} onClick={onFileClick} />
+          <div className="aksel-file-item__inner">
+            <BodyLong as="div" className="aksel-file-item__file-info">
+              <ItemHeader file={file} href={href} onClick={onFileClick} />
               <BodyShort as="div" size="small">
                 {getStatusText()}
               </BodyShort>
               <div
-                className={cn("navds-file-item__error")}
+                className="aksel-file-item__error"
                 aria-relevant="additions removals"
                 aria-live="polite"
               >
@@ -136,30 +125,16 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
                   </ErrorMessage>
                 )}
               </div>
-            </div>
-            {renderButton && <Spacer />}
-
-            {renderButton && !renderCustomButton && (
-              <ItemButton
-                {...button}
-                title={translate(
-                  button.action === "retry"
-                    ? "item.retryButtonTitle"
-                    : "item.deleteButtonTitle",
-                )}
-              />
-            )}
-            {renderButton && renderCustomButton && button}
+            </BodyLong>
+            <ItemActionField
+              isLoading={status !== "idle"}
+              button={button}
+              translate={translate}
+            />
           </div>
         </Component>
       );
     },
   );
 
-function isCustomButton(
-  button: FileUploadItemProps["button"],
-): button is React.ReactNode {
-  return React.isValidElement(button);
-}
-
 export default Item;

package/src/form/file-upload/parts/item/ItemActionField.tsx

@@ -0,0 +1,86 @@
+import React, { MouseEvent } from "react";
+import { ArrowsCirclepathIcon, TrashIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../../button";
+import Spacer from "../../../../layout/stack/Spacer";
+import { Loader } from "../../../../loader";
+import { TFunction } from "../../../../util/i18n/i18n.types";
+
+interface ItemActionFieldProps {
+  isLoading: boolean;
+  button?:
+    | {
+        action: "delete" | "retry";
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        id?: string;
+      }
+    | React.ReactNode;
+  translate: TFunction<"FileUpload">;
+}
+
+function ItemActionField({
+  isLoading,
+  button,
+  translate,
+}: ItemActionFieldProps) {
+  if (isLoading) {
+    return (
+      <>
+        <Spacer />
+        <div className="aksel-file-item__icon--loading">
+          <Loader size="medium" />
+        </div>
+      </>
+    );
+  }
+
+  if (!button) {
+    return null;
+  }
+
+  if (isCustomButton(button)) {
+    return (
+      <>
+        <Spacer />
+        {button}
+      </>
+    );
+  }
+
+  const Icon = button.action === "delete" ? TrashIcon : ArrowsCirclepathIcon;
+
+  return (
+    <>
+      <Spacer />
+      <Button
+        id={button.id}
+        className="aksel-file-item__button"
+        type="button"
+        variant="tertiary-neutral"
+        onClick={button.onClick}
+        icon={
+          <Icon
+            title={translate(
+              button.action === "retry"
+                ? "item.retryButtonTitle"
+                : "item.deleteButtonTitle",
+            )}
+          />
+        }
+      />
+    </>
+  );
+}
+
+function isCustomButton(
+  button:
+    | {
+        action: "delete" | "retry";
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        id?: string;
+      }
+    | React.ReactNode,
+): button is React.ReactNode {
+  return React.isValidElement(button);
+}
+
+export { ItemActionField };

package/src/form/file-upload/parts/item/ItemButton.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ArrowsCirclepathIcon, TrashIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../../button";
-import { useRenameCSS } from "../../../../theme/Theme";
 
 interface Props {
   action: "delete" | "retry";
@@ -11,13 +10,12 @@ interface Props {
 }
 
 const ItemButton = ({ action, onClick, id, title }: Props) => {
-  const { cn } = useRenameCSS();
   const Icon = action === "delete" ? TrashIcon : ArrowsCirclepathIcon;
 
   return (
     <Button
       id={id}
-      className={cn("navds-file-item__button")}
+      className="aksel-file-item__button"
       type="button"
       variant="tertiary-neutral"
       onClick={onClick}