@navikt/ds-react 8.0.0 → 8.1.0

package/src/pagination/Pagination.tsx

@@ -1,12 +1,11 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyShort, Heading } from "../typography";
-import { useId } from "../util";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useId } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,
@@ -161,7 +160,6 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const headingId = useId();
     const translate = useI18n("Pagination");
 
@@ -190,9 +188,9 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         aria-labelledby={
           srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
         }
-        className={cn(
-          "navds-pagination",
-          `navds-pagination--${size}`,
+        className={cl(
+          "aksel-pagination",
+          `aksel-pagination--${size}`,
           className,
         )}
       >
@@ -206,12 +204,12 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             {srHeading.text}
           </Heading>
         )}
-        <ul className={cn("navds-pagination__list")}>
+        <ul className="aksel-pagination__list">
           <li>
             <Item
               data-color={color}
-              className={cn({
-                "navds-pagination--invisible": page === 1,
+              className={cl({
+                "aksel-pagination--invisible": page === 1,
               })}
               disabled={page === 1}
               onClick={() => onPageChange?.(page - 1)}
@@ -232,10 +230,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             (step, i) => {
               const n = Number(step);
               return Number.isNaN(n) ? (
-                <li
-                  className={cn("navds-pagination__ellipsis")}
-                  key={`${step}${i}`}
-                >
+                <li className="aksel-pagination__ellipsis" key={`${step}${i}`}>
                   <BodyShort
                     size={size === "xsmall" ? "small" : size}
                     as="span"
@@ -262,8 +257,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           <li>
             <Item
               data-color={color}
-              className={cn({
-                "navds-pagination--invisible": page === count,
+              className={cl({
+                "aksel-pagination--invisible": page === count,
               })}
               disabled={page === count}
               onClick={() => onPageChange?.(page + 1)}

package/src/pagination/PaginationItem.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { useRenameCSS } from "../theme/Theme";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 
 export interface PaginationItemProps extends ButtonProps {
   children: React.ReactNode;
@@ -40,8 +40,6 @@ export const Item: PaginationItemType = forwardRef(
     }: PaginationItemProps & { as?: React.ElementType },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Button
         as={Component}
@@ -50,8 +48,8 @@ export const Item: PaginationItemType = forwardRef(
         aria-current={selected}
         data-pressed={selected}
         ref={ref}
-        className={cn("navds-pagination__item", className, {
-          "navds-pagination__item--selected": selected,
+        className={cl("aksel-pagination__item", className, {
+          "aksel-pagination__item--selected": selected,
         })}
         data-page={page}
         /* TODO: Breaking change to remove since it's in use by some applications. Add to future major version. */

package/src/panel/Panel.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";
 
 /**
  * @deprecated Use Box with padding and border instead
@@ -33,12 +33,11 @@ export const Panel: PanelType = forwardRef(
     { children, className, border = false, as: Component = "div", ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     return (
       <Component
         ref={ref}
-        className={cn("navds-panel", className, {
-          "navds-panel--border": border,
+        className={cl("aksel-panel", className, {
+          "aksel-panel--border": border,
         })}
         {...rest}
       >

package/src/popover/Popover.tsx

@@ -11,10 +11,9 @@ import {
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
-import { useRenameCSS } from "../theme/Theme";
-import { omit } from "../util";
-import { useClientLayoutEffect } from "../util/hooks";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { omit, useClientLayoutEffect } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useMergeRefs } from "../utils/hooks";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
@@ -118,8 +117,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const isInModal = useModalContext(false) !== undefined;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
 
@@ -171,8 +168,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         <div
           ref={floatingRef}
           {...omit(restProps, ["arrow"])}
-          className={cn("navds-popover", className, {
-            "navds-popover--hidden": !open || !anchorEl,
+          className={cl("aksel-popover", className, {
+            "aksel-popover--hidden": !open || !anchorEl,
           })}
           style={{ ...restProps.style, ...floatingStyles }}
           data-placement={flPlacement}

package/src/popover/PopoverContent.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 
 export interface PopoverContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,12 +12,11 @@ export type PopoverContentType = React.ForwardRefExoticComponent<
 
 const PopoverContent: PopoverContentType = forwardRef(
   ({ className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <div
         {...rest}
         ref={ref}
-        className={cn("navds-popover__content", className)}
+        className={cl("aksel-popover__content", className)}
       />
     );
   },

package/src/portal/Portal.tsx

@@ -7,7 +7,8 @@ import React, {
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider";
 import { Theme, useThemeInternal } from "../theme/Theme";
-import { useClientLayoutEffect, useMergeRefs } from "../util/hooks";
+import { useClientLayoutEffect } from "../utils-external";
+import { useMergeRefs } from "../utils/hooks";
 
 export interface PortalProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/process/Process.tsx

@@ -5,12 +5,11 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong, BodyShort, Heading } from "../typography";
-import { useId } from "../util";
-import { createStrictContext } from "../util/create-strict-context";
-import { useMergeRefs } from "../util/hooks";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useId } from "../utils-external";
+import { cl, createStrictContext } from "../utils/helpers";
+import { useMergeRefs } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
@@ -108,8 +107,6 @@ export const Process: ProcessComponent = forwardRef<
     }: ProcessProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const rootId = useId(id);
 
     const rootRef = useRef<HTMLOListElement>(null);
@@ -158,7 +155,7 @@ export const Process: ProcessComponent = forwardRef<
         // biome-ignore lint/a11y/noRedundantRoles: See comment above
         role="list"
         {...restProps}
-        className={cn("navds-process", className)}
+        className={cl("aksel-process", className)}
         id={rootId}
         aria-controls={activeChildId}
         data-truncated={isTruncated}
@@ -220,7 +217,6 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
     forwardedRef,
   ) => {
     const translate = useI18n("Process");
-    const { cn } = useRenameCSS();
     const eventId = useId();
     const { syncAriaControls, hideStatusText, rootId } = useProcessContext();
 
@@ -237,22 +233,19 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
         id={id ?? eventId}
         {...restProps}
         aria-controls={isActive ? rootId : undefined}
-        className={cn("navds-process__event", className)}
+        className={cl("aksel-process__event", className)}
         data-dot={bullet === undefined}
         data-process-event=""
         data-status={status}
       >
         <ProcessLine position="start" />
-        <div className={cn("navds-process__item")}>
+        <div className="aksel-process__item">
           <ProcessBullet>{bullet}</ProcessBullet>
 
-          <div className={cn("navds-process__body")}>
+          <div className="aksel-process__body">
             {title && <ProcessTitle>{title}</ProcessTitle>}
             {isActive && !hideStatusText && (
-              <BodyShort
-                size="small"
-                className={cn("navds-process__active-label")}
-              >
+              <BodyShort size="small" className="aksel-process__active-label">
                 {translate("active")}
               </BodyShort>
             )}
@@ -277,10 +270,8 @@ interface ProcessTitleProps {
 }
 
 const ProcessTitle = ({ children }: ProcessTitleProps) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <Heading size="small" as="div" className={cn("navds-process__title")}>
+    <Heading size="small" as="div" className="aksel-process__title">
       {children}
     </Heading>
   );
@@ -295,15 +286,13 @@ interface ProcessTimestampProps {
 }
 
 const ProcessTimestamp = ({ children }: ProcessTimestampProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyShort
       spacing
       as="div"
       size="small"
       textColor="subtle"
-      className={cn("navds-process__timestamp")}
+      className="aksel-process__timestamp"
     >
       {children}
     </BodyShort>
@@ -319,10 +308,8 @@ interface ProcessContentProps {
 }
 
 const ProcessContent = ({ children }: ProcessContentProps) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <BodyLong as="div" className={cn("navds-process__content")}>
+    <BodyLong as="div" className="aksel-process__content">
       {children}
     </BodyLong>
   );
@@ -337,13 +324,11 @@ interface ProcessBulletProps {
 }
 
 const ProcessBullet = ({ children }: ProcessBulletProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyShort
       as="span"
       weight="semibold"
-      className={cn("navds-process__bullet")}
+      className="aksel-process__bullet"
       aria-hidden
     >
       {children}
@@ -357,11 +342,7 @@ type ProcessLineProps = {
   position?: "start" | "end";
 };
 const ProcessLine = ({ position }: ProcessLineProps) => {
-  const { cn } = useRenameCSS();
-
-  return (
-    <span className={cn("navds-process__line")} data-position={position} />
-  );
+  return <span className="aksel-process__line" data-position={position} />;
 };
 
 /* -------------------------- Process exports ------------------------- */

package/src/progress-bar/ProgressBar.tsx

@@ -1,9 +1,8 @@
 import React, { HTMLAttributes, forwardRef, useEffect } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { useTimeout } from "../util/hooks/useTimeout";
-import { useValueAsRef } from "../util/hooks/useValueAsRef";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { cl } from "../utils/helpers";
+import { useTimeout, useValueAsRef } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 interface ProgressBarPropsBase
   extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
@@ -102,7 +101,6 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
     const onTimeoutRef = useValueAsRef(simulated?.onTimeout);
 
@@ -121,9 +119,9 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     return (
       <div
         ref={ref}
-        className={cn(
-          "navds-progress-bar",
-          `navds-progress-bar--${size}`,
+        className={cl(
+          "aksel-progress-bar",
+          `aksel-progress-bar--${size}`,
           className,
         )}
         aria-valuemax={simulated?.seconds ? 0 : Math.round(valueMax)}
@@ -144,8 +142,8 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         {...rest}
       >
         <div
-          className={cn("navds-progress-bar__foreground", {
-            "navds-progress-bar__foreground--indeterminate":
+          className={cl("aksel-progress-bar__foreground", {
+            "aksel-progress-bar__foreground--indeterminate":
               simulated?.seconds !== undefined,
           })}
           style={{

package/src/provider/Provider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from "react";
-import { PartialTranslations, Translations } from "../util/i18n/i18n.types";
-import nb from "../util/i18n/locales/nb";
+import { PartialTranslations, Translations } from "../utils/i18n/i18n.types";
+import nb from "../utils/i18n/locales/nb";
 
 type ProviderContextType = {
   rootElement?: HTMLElement;

package/src/read-more/ReadMore.tsx

@@ -1,11 +1,10 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
 import { BodyLong } from "../typography";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { cl, composeEventHandlers } from "../utils/helpers";
+import { useControllableState } from "../utils/hooks";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -72,7 +71,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     }: ReadMoreProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -83,11 +81,11 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
     return (
       <div
-        className={cn(
-          "navds-read-more",
-          `navds-read-more--${size}`,
+        className={cl(
+          "aksel-read-more",
+          `aksel-read-more--${size}`,
           className,
-          { "navds-read-more--open": _open },
+          { "aksel-read-more--open": _open },
         )}
         data-volume="low"
       >
@@ -95,15 +93,15 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           {...rest}
           ref={ref}
           type="button"
-          className={cn("navds-read-more__button", "navds-body-short", {
-            "navds-body-short--small": size === "small",
+          className={cl("aksel-read-more__button", "aksel-body-short", {
+            "aksel-body-short--small": size === "small",
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
           data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
-            className={cn("navds-read-more__expand-icon")}
+            className="aksel-read-more__expand-icon"
             aria-hidden
           />
           <span>{header}</span>
@@ -111,8 +109,8 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
         <BodyLong
           as="div"
-          className={cn("navds-read-more__content", {
-            "navds-read-more__content--closed": !_open,
+          className={cl("aksel-read-more__content", {
+            "aksel-read-more__content--closed": !_open,
           })}
           size={typoSize}
           data-state={_open ? "open" : "closed"}

package/src/skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -45,20 +45,19 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     return (
       <As
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-skeleton",
+        className={cl(
+          "aksel-skeleton",
           className,
-          `navds-skeleton--${variant}`,
+          `aksel-skeleton--${variant}`,
           {
-            "navds-skeleton--has-children": Boolean(children),
-            "navds-skeleton--no-height": !height,
-            "navds-skeleton--no-width": !width,
-            "navds-skeleton--inline": As === "span",
+            "aksel-skeleton--has-children": Boolean(children),
+            "aksel-skeleton--no-height": !height,
+            "aksel-skeleton--no-width": !width,
+            "aksel-skeleton--inline": As === "span",
           },
         )}
         style={{ ...style, width, height }}

package/src/stepper/Step.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { Label } from "../typography";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl, composeEventHandlers } from "../utils/helpers";
 import { useStepperContext } from "./context";
 
 export interface StepperStepProps
@@ -37,7 +36,6 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const context = useStepperContext();
 
       const { activeStep } = context;
@@ -55,11 +53,11 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
           {...rest}
           aria-current={activeStep === context.index ? "step" : undefined}
           ref={ref}
-          className={cn("navds-stepper__step", className, {
-            "navds-stepper__step--active": activeStep === context.index,
-            "navds-stepper__step--behind": activeStep > context.index,
-            "navds-stepper__step--non-interactive": !isInteractive,
-            "navds-stepper__step--completed": completed,
+          className={cl("aksel-stepper__step", className, {
+            "aksel-stepper__step--active": activeStep === context.index,
+            "aksel-stepper__step--behind": activeStep > context.index,
+            "aksel-stepper__step--non-interactive": !isInteractive,
+            "aksel-stepper__step--completed": completed,
           })}
           data-active={activeStep === context.index}
           data-completed={completed}
@@ -67,11 +65,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
           onClick={composeEventHandlers(onClick, handleStepClick)}
         >
           {completed ? (
-            <span
-              className={cn(
-                "navds-stepper__circle navds-stepper__circle--success",
-              )}
-            >
+            <span className="aksel-stepper__circle aksel-stepper__circle--success">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="1em"
@@ -90,14 +84,14 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
             </span>
           ) : (
             <Label
-              className={cn("navds-stepper__circle")}
+              className="aksel-stepper__circle"
               as="span"
               aria-hidden="true"
             >
               {context.index + 1}
             </Label>
           )}
-          <Label as="span" className={cn("navds-stepper__content")}>
+          <Label as="span" className="aksel-stepper__content">
             {children}
           </Label>
         </Comp>

package/src/stepper/Stepper.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 import Step, { StepperStepProps } from "./Step";
 import { StepperContextProvider } from "./context";
 
@@ -84,13 +84,12 @@ export const Stepper: StepperComponent = forwardRef<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     activeStep = activeStep - 1;
     return (
       <ol
         {...rest}
         ref={ref}
-        className={cn("navds-stepper", className)}
+        className={cl("aksel-stepper", className)}
         data-orientation={orientation}
       >
         {React.Children.map(children, (step, index) => {
@@ -101,14 +100,12 @@ export const Stepper: StepperComponent = forwardRef<
 
           return (
             <li
-              className={cn("navds-stepper__item")}
+              className="aksel-stepper__item"
               data-interactive={isInteractive}
               data-color={isInteractive ? undefined : "neutral"}
               key={index + (children?.toString?.() ?? "")}
             >
-              <span
-                className={cn("navds-stepper__line navds-stepper__line--1")}
-              />
+              <span className="aksel-stepper__line aksel-stepper__line--1" />
               <StepperContextProvider
                 interactive={interactive}
                 activeStep={activeStep}
@@ -119,9 +116,7 @@ export const Stepper: StepperComponent = forwardRef<
               >
                 {step}
               </StepperContextProvider>
-              <span
-                className={cn("navds-stepper__line navds-stepper__line--2")}
-              />
+              <span className="aksel-stepper__line aksel-stepper__line--2" />
             </li>
           );
         })}

package/src/stepper/context.ts

@@ -1,4 +1,4 @@
-import { createStrictContext } from "../util/create-strict-context";
+import { createStrictContext } from "../utils/helpers";
 
 interface StepperContextValue {
   onStepChange: (step: number) => void;

package/src/table/AnimateHeight.tsx

@@ -1,7 +1,6 @@
 /* https://github.com/Stanko/react-animate-height/blob/v3/src/index.tsx */
 import React, { CSSProperties, useEffect, useRef, useState } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { useTimeout } from "../util/hooks/useTimeout";
+import { useTimeout } from "../utils/hooks";
 
 // ------------------ Types
 
@@ -68,7 +67,6 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   height,
   ...props
 }) => {
-  const { cn } = useRenameCSS();
   // ------------------ Initialization
   const prevHeight = useRef<Height>(height);
   const contentElement = useRef<HTMLDivElement>(null);
@@ -226,10 +224,10 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const ariaHidden = hasAriaHiddenProp ? props["aria-hidden"] : height === 0;
 
   return (
-    <div {...props} className={cn(className)} style={componentStyle}>
+    <div {...props} className={className} style={componentStyle}>
       <div
         aria-hidden={ariaHidden}
-        className={cn(innerClassName)}
+        className={innerClassName}
         ref={contentElement}
       >
         {children}

package/src/table/Body.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 
 export type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
@@ -8,9 +8,8 @@ export type BodyType = React.ForwardRefExoticComponent<
 >;
 
 export const Body: BodyType = forwardRef(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   return (
-    <tbody {...rest} ref={ref} className={cn("navds-table__body", className)} />
+    <tbody {...rest} ref={ref} className={cl("aksel-table__body", className)} />
   );
 });