@navikt/ds-react 8.0.0 → 8.1.0

package/src/date/datepicker/parts/DatePicker.WeekNumber.tsx

@@ -2,8 +2,8 @@ import React, { useMemo } from "react";
 import { CalendarWeek, useDayPicker } from "react-day-picker";
 import { Button } from "../../../button";
 import { Hide, Show } from "../../../layout/responsive";
-import { useRenameCSS } from "../../../theme/Theme";
 import { Detail } from "../../../typography";
+import { cl } from "../../../utils/helpers";
 import { useDateTranslationContext } from "../../Date.locale";
 import { MultipleMode } from "../DatePicker.types";
 
@@ -19,7 +19,6 @@ const DatePickerWeekNumber = ({
   showOnDesktop: boolean;
 } & React.ThHTMLAttributes<HTMLTableCellElement>) => {
   const translate = useDateTranslationContext().translate;
-  const { cn } = useRenameCSS();
 
   const { getModifiers } = useDayPicker();
 
@@ -58,8 +57,8 @@ const DatePickerWeekNumber = ({
   return (
     <DisplayMode above="sm" asChild>
       <td
-        className={cn("rdp-cell", {
-          "navds-date__week-wrapper": !showOnDesktop,
+        className={cl("rdp-cell", {
+          "aksel-date__week-wrapper": !showOnDesktop,
         })}
       >
         <Button
@@ -68,7 +67,7 @@ const DatePickerWeekNumber = ({
           name="week-number"
           aria-label={translate("selectWeekNumber", { week: weekNumber })}
           style={style}
-          className={cn("navds-date__weeknumber", "rdp-weeknumber")}
+          className="aksel-date__weeknumber rdp-weeknumber"
           onClick={() => {
             onWeekNumberClick(
               weekNumber,
@@ -76,9 +75,7 @@ const DatePickerWeekNumber = ({
             );
           }}
           icon={
-            <span className={cn("navds-date__weeknumber-number")}>
-              {weekNumber}
-            </span>
+            <span className="aksel-date__weeknumber-number">{weekNumber}</span>
           }
         />
       </td>

package/src/date/datepicker/parts/DatePicker.WeekRow.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { CalendarWeek } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
-import { useRenameCSS } from "../../../theme/Theme";
 import { Detail } from "../../../typography";
-import { useId } from "../../../util/hooks";
+import { useId } from "../../../utils-external";
 import { useDateTranslationContext } from "../../Date.locale";
 import { MultipleMode } from "../DatePicker.types";
 import { DatePickerWeekNumber } from "./DatePicker.WeekNumber";
@@ -16,7 +15,6 @@ const DatePickerWeekRow = ({
   weeks?: CalendarWeek[];
 }) => {
   const translate = useDateTranslationContext().translate;
-  const { cn } = useRenameCSS();
   const labelId = useId();
 
   if (!onWeekNumberClick) {
@@ -27,13 +25,13 @@ const DatePickerWeekRow = ({
     <Show below="sm" asChild>
       <table className="rdp-table" role="grid">
         <tbody className="rdp-tbody">
-          <tr className={cn("rdp-row navds-date__week-row")}>
+          <tr className="rdp-row aksel-date__week-row">
             <Detail
               as="th"
               weight="semibold"
-              className={cn("rdp-cell navds-date__week-cell")}
+              className="rdp-cell aksel-date__week-cell"
             >
-              <span className={cn("navds-date__week-wrapper")} id={labelId}>
+              <span className="aksel-date__week-wrapper" id={labelId}>
                 {translate("week")}
               </span>
             </Detail>
@@ -44,7 +42,7 @@ const DatePickerWeekRow = ({
                 week={week}
                 onWeekNumberClick={onWeekNumberClick}
                 showOnDesktop={false}
-                className={cn("navds-date__week-wrapper")}
+                className="aksel-date__week-wrapper"
               />
             ))}
           </tr>

package/src/date/monthpicker/MonthPicker.context.tsx

@@ -1,7 +1,7 @@
 import { Locale, isSameYear } from "date-fns";
 import React from "react";
-import { createStrictContext } from "../../util/create-strict-context";
-import { useControllableState } from "../../util/hooks";
+import { createStrictContext } from "../../utils/helpers";
+import { useControllableState } from "../../utils/hooks";
 import { clampDisplayYear } from "../date-utils";
 import { MonthPickerProps } from "./MonthPicker.types";
 

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
-import { useControllableState, useId, useMergeRefs } from "../../util/hooks";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
+import { useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
+import { useControllableState, useMergeRefs } from "../../utils/hooks";
+import { useDateLocale, useI18n } from "../../utils/i18n/i18n.hooks";
 import { DateDialog } from "../Date.Dialog";
 import { DateInputContextProvider, MonthPickerInput } from "../Date.Input";
 import {
@@ -87,7 +88,6 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
       translations,
       getTranslations(locale),
     );
-    const { cn } = useRenameCSS();
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
 
@@ -139,7 +139,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
           >
             <div
               ref={mergedRef}
-              className={cn("navds-date__wrapper", wrapperClassName)}
+              className={cl("aksel-date__wrapper", wrapperClassName)}
             >
               {children}
               <DateDialog
@@ -157,7 +157,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
                   strategy,
                 }}
               >
-                <div className={cn("rdp-month", className)}>
+                <div className={cl("rdp-month", className)}>
                   <MonthPickerCaption />
                   <MonthPickerTable />
                 </div>

package/src/date/monthpicker/MonthPicker.types.ts

@@ -1,4 +1,4 @@
-import { ComponentTranslation } from "../../util/i18n/i18n.types";
+import { ComponentTranslation } from "../../utils/i18n/i18n.types";
 import { Matcher } from "../Date.typeutils";
 
 export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/date/monthpicker/hooks/useMonthPicker.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { dateMatchModifiers } from "react-day-picker";
-import { useDateLocale } from "../../../util/i18n/i18n.hooks";
+import { useDateLocale } from "../../../utils/i18n/i18n.hooks";
 import { DateInputProps } from "../../Date.Input";
 import { getLocaleFromString } from "../../Date.locale";
 import { formatDateForInput, isValidDate, parseDate } from "../../date-utils";

package/src/date/monthpicker/parts/MonthPicker.Button.tsx

@@ -6,7 +6,7 @@ import {
   setYear,
 } from "date-fns";
 import React, { useEffect, useRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../utils/helpers";
 import { dateIsInCurrentMonth, isMatch } from "../../date-utils";
 import { useMonthPickerContext } from "../MonthPicker.context";
 import { nextEnabled } from "../MonthPicker.util";
@@ -48,7 +48,6 @@ export const MonthButton = ({
 }: MonthType) => {
   const ref = useRef<HTMLButtonElement>(null);
 
-  const { cn } = useRenameCSS();
   const {
     fromDate,
     toDate,
@@ -83,7 +82,7 @@ export const MonthButton = ({
       disabled={isDisabled}
       aria-pressed={!!isSelected}
       data-current-month={isThisMonth}
-      className={cn("navds-date__month-button", {
+      className={cl("aksel-date__month-button", {
         "rdp-day_today": isThisMonth,
         "rdp-day_selected": isSelected,
         "rdp-day_disabled": isDisabled,
@@ -117,7 +116,7 @@ export const MonthButton = ({
           .replace(".", "")
           .substring(0, 3)}
       </span>
-      <span className={cn("navds-sr-only")}>
+      <span className="aksel-sr-only">
         {format(new Date(month), "LLLL", { locale })}
       </span>
     </button>

package/src/date/monthpicker/parts/MonthPicker.Caption.tsx

@@ -10,7 +10,6 @@ import React from "react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Select } from "../../../form/select";
-import { useRenameCSS } from "../../../theme/Theme";
 import { useDateTranslationContext } from "../../Date.locale";
 import { useMonthPickerContext } from "../MonthPicker.context";
 
@@ -19,7 +18,6 @@ const MonthPickerCaption = () => {
     useMonthPickerContext();
 
   const translate = useDateTranslationContext().translate;
-  const { cn } = useRenameCSS();
 
   const years: Date[] = [];
 
@@ -59,9 +57,9 @@ const MonthPickerCaption = () => {
   };
 
   return (
-    <div className={cn("navds-date__caption")}>
+    <div className="aksel-date__caption">
       <Button
-        className={cn("navds-date__caption-button")}
+        className="aksel-date__caption-button"
         disabled={disablePreviousYear()}
         onClick={() => handleButtonClick(-1)}
         icon={<ArrowLeftIcon title={translate("goToPreviousYear")} />}
@@ -75,7 +73,7 @@ const MonthPickerCaption = () => {
           hideLabel
           value={year.getFullYear()}
           onChange={handleYearChange}
-          className={cn("navds-date__caption__year")}
+          className="aksel-date__caption__year"
         >
           {years.map((yearOpt) => (
             <option key={yearOpt.getFullYear()} value={yearOpt.getFullYear()}>
@@ -84,12 +82,12 @@ const MonthPickerCaption = () => {
           ))}
         </Select>
       ) : (
-        <span className={cn("navds-date__year-label")} aria-live="polite">
+        <span className="aksel-date__year-label" aria-live="polite">
           {year.getFullYear()}
         </span>
       )}
       <Button
-        className={cn("navds-date__caption-button")}
+        className="aksel-date__caption-button"
         disabled={disableNextYear()}
         onClick={() => handleButtonClick(1)}
         icon={<ArrowRightIcon title={translate("goToNextYear")} />}

package/src/date/monthpicker/parts/MonthPicker.Standalone.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
-import { useDateLocale, useI18n } from "../../../util/i18n/i18n.hooks";
+import { cl } from "../../../utils/helpers";
+import { useDateLocale, useI18n } from "../../../utils/i18n/i18n.hooks";
 import {
   DateTranslationContextProvider,
   getLocaleFromString,
@@ -47,7 +47,6 @@ export const MonthPickerStandalone = forwardRef<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n(
       "DatePicker",
       translations,
@@ -61,7 +60,7 @@ export const MonthPickerStandalone = forwardRef<
     }
 
     return (
-      <div ref={ref} className={cn("navds-date__wrapper", className)}>
+      <div ref={ref} className={cl("aksel-date__wrapper", className)}>
         <DateTranslationContextProvider translate={translate}>
           <MonthPickerProvider
             dropdownCaption={dropdownCaption}
@@ -75,7 +74,7 @@ export const MonthPickerStandalone = forwardRef<
             onMonthSelect={onMonthSelect}
             locale={locale ? getLocaleFromString(locale) : langProviderLocale}
           >
-            <div className={cn("navds-date rdp-month")}>
+            <div className="aksel-date rdp-month">
               <MonthPickerCaption />
               <MonthPickerTable />
             </div>

package/src/dialog/backdrop/DialogBackdropInternal.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
-import { createTransitionStatusAttribute } from "../../util/hooks/useTransitionStatus";
+import { cl } from "../../utils/helpers";
+import { createTransitionStatusAttribute } from "../../utils/hooks";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogBackdropInternalProps = Omit<
@@ -12,14 +12,13 @@ const DialogBackdropInternal = forwardRef<
   HTMLDivElement,
   DialogBackdropInternalProps
 >(({ className, ...restProps }, forwardedRef) => {
-  const { cn } = useRenameCSS();
   const { transitionStatus } = useDialogContext();
 
   return (
     <div
       {...restProps}
       ref={forwardedRef}
-      className={cn("navds-dialog__backdrop", className)}
+      className={cl("aksel-dialog__backdrop", className)}
       {...createTransitionStatusAttribute(transitionStatus)}
     />
   );

package/src/dialog/body/DialogBody.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 
 type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -18,13 +18,11 @@ type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
  */
 const DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(
   ({ className, children, ...restProps }, forwardedRef) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         {...restProps}
         ref={forwardedRef}
-        className={cn("navds-dialog__body", className)}
+        className={cl("aksel-dialog__body", className)}
       >
         {children}
       </div>

package/src/dialog/close-trigger/DialogCloseTrigger.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { Slot } from "../../utils/components/slot/Slot";
+import { composeEventHandlers } from "../../utils/helpers";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 interface DialogCloseTriggerProps

package/src/dialog/description/DialogDescription.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
+import { cl } from "../../utils/helpers";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
@@ -23,14 +23,13 @@ const DialogDescription = forwardRef<
   HTMLParagraphElement,
   DialogDescriptionProps
 >(({ className, children, ...restProps }, forwardedRef) => {
-  const { cn } = useRenameCSS();
   const { size } = useDialogContext();
 
   return (
     <BodyShort
       {...restProps}
       ref={forwardedRef}
-      className={cn("navds-dialog__description", className)}
+      className={cl("aksel-dialog__description", className)}
       size={size}
       data-color="neutral"
       textColor="subtle"

package/src/dialog/footer/DialogFooter.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 
 type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -20,13 +20,11 @@ type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
  */
 const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
   ({ className, children, ...restProps }, forwardedRef) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         {...restProps}
         ref={forwardedRef}
-        className={cn("navds-dialog__footer", className)}
+        className={cl("aksel-dialog__footer", className)}
       >
         {children}
       </div>

package/src/dialog/header/DialogHeader.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
-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 { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
 
 interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -32,20 +32,19 @@ const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
     { className, children, withClosebutton = true, ...restProps },
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n("global");
 
     return (
       <div
         {...restProps}
         ref={forwardedRef}
-        className={cn("navds-dialog__header", className)}
+        className={cl("aksel-dialog__header", className)}
       >
         {withClosebutton && (
           <DialogCloseTrigger>
             <Button
               type="button"
-              className={cn("navds-dialog__close-button")}
+              className="aksel-dialog__close-button"
               size="small"
               variant="tertiary-neutral"
               icon={<XMarkIcon title={translate("close")} />}

package/src/dialog/popup/DialogPopupInternal.tsx

@@ -1,13 +1,15 @@
 import React, { forwardRef } from "react";
 import { BoxNew, type BoxNewProps } from "../../layout/box";
 import { DismissableLayer } from "../../overlays/dismissablelayer/DismissableLayer";
-import { useRenameCSS } from "../../theme/Theme";
-import { FocusBoundary } from "../../util/focus-boundary/FocusBoundary";
-import { FocusGuards } from "../../util/focus-guards/FocusGuards";
-import { useMergeRefs } from "../../util/hooks";
-import { useOpenChangeAnimationComplete } from "../../util/hooks/useOpenChangeAnimationComplete";
-import { useScrollLock } from "../../util/hooks/useScrollLock";
-import { createTransitionStatusAttribute } from "../../util/hooks/useTransitionStatus";
+import { FocusBoundary } from "../../utils/components/focus-boundary/FocusBoundary";
+import { FocusGuards } from "../../utils/components/focus-guards/FocusGuards";
+import { cl } from "../../utils/helpers";
+import {
+  createTransitionStatusAttribute,
+  useMergeRefs,
+  useOpenChangeAnimationComplete,
+  useScrollLock,
+} from "../../utils/hooks";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogPosition = "center" | "bottom" | "left" | "right" | "fullscreen";
@@ -98,7 +100,6 @@ const DialogPopupInternal = forwardRef<
     },
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const {
       mounted,
       popupRef,
@@ -208,7 +209,7 @@ const DialogPopupInternal = forwardRef<
               id={id ?? popupId}
               {...restProps}
               ref={mergedRefs}
-              className={cn("navds-dialog__popup", className)}
+              className={cl("aksel-dialog__popup", className)}
               role={role}
               aria-modal="true"
               {...createTransitionStatusAttribute(transitionStatus)}

package/src/dialog/root/DialogRoot.context.ts

@@ -1,5 +1,5 @@
-import { createStrictContext } from "../../util/create-strict-context";
-import type { TransitionStatus } from "../../util/hooks/useTransitionStatus";
+import { createStrictContext } from "../../utils/helpers";
+import type { TransitionStatus } from "../../utils/hooks";
 
 interface DialogContextProps {
   /**

package/src/dialog/root/DialogRoot.tsx

@@ -1,8 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useId } from "../../util";
-import { useControllableState } from "../../util/hooks/useControllableState";
-import { useEventCallback } from "../../util/hooks/useEventCallback";
-import { useTransitionStatus } from "../../util/hooks/useTransitionStatus";
+import { useId } from "../../utils-external";
+import {
+  useControllableState,
+  useEventCallback,
+  useTransitionStatus,
+} from "../../utils/hooks";
 import { DialogBody } from "../body/DialogBody";
 import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
 import { DialogDescription } from "../description/DialogDescription";

package/src/dialog/title/DialogTitle.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
 import { Heading } from "../../typography";
-import { useClientLayoutEffect, useId } from "../../util";
+import { useClientLayoutEffect, useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
@@ -21,7 +21,6 @@ type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
  */
 const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ className, children, id, ...restProps }, forwardedRef) => {
-    const { cn } = useRenameCSS();
     const { size, setTitleId } = useDialogContext();
 
     const titleId = useId(id);
@@ -38,7 +37,7 @@ const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
         {...restProps}
         id={titleId}
         ref={forwardedRef}
-        className={cn("navds-dialog__title", className)}
+        className={cl("aksel-dialog__title", className)}
         size={size}
         level="1"
       >

package/src/dialog/trigger/DialogTrigger.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../slot/Slot";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useMergeRefs } from "../../util/hooks";
+import { Slot } from "../../utils/components/slot/Slot";
+import { composeEventHandlers } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
 import { useDialogContext } from "../root/DialogRoot.context";
 
 type DialogTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {

package/src/dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { useControllableState } from "../utils/hooks";
 import Menu, { MenuType } from "./Menu";
 import Toggle from "./Toggle";
 import { DropdownContext } from "./context";

package/src/dropdown/Menu/Divider.tsx

@@ -1,17 +1,15 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { cl } from "../../utils/helpers";
 
 export const Divider = forwardRef<
   HTMLHRElement,
   React.HTMLAttributes<HTMLHRElement>
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
-
   return (
     <hr
       {...rest}
       ref={ref}
-      className={cn("navds-dropdown__divider", className)}
+      className={cl("aksel-dropdown__divider", className)}
     />
   );
 });

package/src/dropdown/Menu/GroupedList/GroupedHeading.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../utils/helpers";
 
 export interface GroupedHeadingProps
   extends React.HTMLAttributes<HTMLDetailsElement> {
@@ -13,15 +13,14 @@ export const GroupedHeading = forwardRef<
   HTMLDetailsElement,
   GroupedHeadingProps
 >(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   return (
     <dt
       {...rest}
       ref={ref}
-      className={cn(
-        "navds-dropdown__list-heading",
-        "navds-heading",
-        "navds-heading--xsmall",
+      className={cl(
+        "aksel-dropdown__list-heading",
+        "aksel-heading",
+        "aksel-heading--xsmall",
         className,
       )}
     />

package/src/dropdown/Menu/GroupedList/GroupedItem.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 GroupedItemProps
@@ -17,20 +16,19 @@ export const GroupedItem: OverridableComponent<
   HTMLButtonElement
 > = forwardRef(
   ({ as: Component = "button", className, onClick, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const context = useContext(DropdownContext);
 
     return (
-      <dd className={cn("navds-dropdown__list-item")}>
+      <dd 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/GroupedList/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 GroupedHeading, { GroupedHeadingProps } from "./GroupedHeading";
 import GroupedItem, { GroupedItemProps } from "./GroupedItem";
 
@@ -31,9 +31,8 @@ export interface GroupedListType
 
 export const DescriptionList = forwardRef(
   ({ className, children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
-      <dl {...rest} ref={ref} className={cn("navds-dropdown__list", className)}>
+      <dl {...rest} ref={ref} className={cl("aksel-dropdown__list", className)}>
         {children}
       </dl>
     );