@navikt/ds-react 8.0.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -51,12 +51,12 @@
     },
     "./locales": {
       "import": {
-        "types": "./esm/util/i18n/locales/index.d.ts",
-        "default": "./esm/util/i18n/locales/index.js"
+        "types": "./esm/utils/i18n/locales/index.d.ts",
+        "default": "./esm/utils/i18n/locales/index.js"
       },
       "require": {
-        "types": "./cjs/util/i18n/locales/index.d.ts",
-        "default": "./cjs/util/i18n/locales/index.js"
+        "types": "./cjs/utils/i18n/locales/index.d.ts",
+        "default": "./cjs/utils/i18n/locales/index.js"
       }
     },
     "./Accordion": {
@@ -481,12 +481,12 @@
     },
     "./Utils": {
       "import": {
-        "types": "./esm/util/index.d.ts",
-        "default": "./esm/util/index.js"
+        "types": "./esm/utils-external/index.d.ts",
+        "default": "./esm/utils-external/index.js"
       },
       "require": {
-        "types": "./cjs/util/index.d.ts",
-        "default": "./cjs/util/index.js"
+        "types": "./cjs/utils-external/index.d.ts",
+        "default": "./cjs/utils-external/index.js"
       }
     },
     "./Checkbox": {
@@ -696,7 +696,7 @@
     "i18n-jsdoc": "tsx ./scripts/addJsdocToLocales.ts",
     "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
     "clean": "rimraf cjs esm",
-    "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup && yarn copy-types",
+    "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup && yarn copy-types",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
     "test:watch": "TZ=UTC vitest watch -c tests/vitest.config.ts",
@@ -705,9 +705,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^8.0.0",
-    "@navikt/ds-tokens": "^8.0.0",
-    "clsx": "^2.1.0",
+    "@navikt/aksel-icons": "^8.1.0",
+    "@navikt/ds-tokens": "^8.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },
@@ -717,20 +716,23 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jscodeshift": "^0.11.11",
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3",
     "aksel": "workspace:^",
     "concurrently": "9.2.1",
     "copyfiles": "^2.4.1",
     "fast-glob": "3.2.11",
     "jscodeshift": "0.15.2",
     "jsdom": "27.1.0",
-    "react-dom": "^18.0.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-router": "^7.12.0",
     "rimraf": "6.0.1",
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "4.0.17"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18 || ^19",

package/src/accordion/Accordion.tsx

@@ -1,8 +1,10 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useEffect, useRef } from "react";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { omit } from "../util";
+import { omit } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { consoleWarning } from "../utils/helpers/consoleWarning";
+import { useMergeRefs } from "../utils/hooks";
 import AccordionContent, { AccordionContentProps } from "./AccordionContent";
 import { AccordionContext } from "./AccordionContext";
 import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
@@ -89,7 +91,30 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
     { className, variant = "default", size = "medium", indent = true, ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
+    const localRef = useRef<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(localRef, ref);
+
+    useEffect(() => {
+      if (process.env.NODE_ENV === "production" || !localRef.current) {
+        return;
+      }
+      if (
+        localRef.current.nextElementSibling?.classList.contains(
+          "aksel-accordion",
+        )
+      ) {
+        consoleWarning(
+          "Do not put multiple accordions directly after each other. Use one <Accordion> with multiple <Accordion.Item> instead.",
+          localRef.current,
+        );
+      }
+      if (localRef.current.children.length === 1) {
+        consoleWarning(
+          "Accordions should have more than one item. Consider using ExpansionPanel instead.",
+          localRef.current,
+        );
+      }
+    }, []);
 
     return (
       <AccordionContext.Provider
@@ -101,13 +126,13 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       >
         <div
           {...omit(rest, ["headingSize"])}
-          className={cn(
-            "navds-accordion",
+          className={cl(
+            "aksel-accordion",
             className,
-            `navds-accordion--${size}`,
-            { "navds-accordion--indent": indent },
+            `aksel-accordion--${size}`,
+            { "aksel-accordion--indent": indent },
           )}
-          ref={ref}
+          ref={mergedRef}
         />
       </AccordionContext.Provider>
     );

package/src/accordion/AccordionContent.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { useThemeInternal } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../utils/helpers";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps
@@ -15,7 +16,6 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
-    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal();
 
     if (context === null) {
@@ -27,17 +27,21 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
 
     return (
       <BodyLong
-        data-color={themeContext.color}
         {...rest}
         as="div"
         ref={ref}
-        className={cn(
-          "navds-accordion__content",
-          { "navds-accordion__content--closed": !context.open },
+        className={cl(
+          "aksel-accordion__content",
+          { "aksel-accordion__content--closed": !context.open },
           className,
         )}
       >
-        <div className={cn("navds-accordion__content-inner")}>{children}</div>
+        <div
+          className="aksel-accordion__content-inner"
+          data-color={themeContext.color}
+        >
+          {children}
+        </div>
       </BodyLong>
     );
   },

package/src/accordion/AccordionHeader.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
 import { Heading } from "../typography";
-import { composeEventHandlers } from "../util/composeEventHandlers";
+import { cl, composeEventHandlers } from "../utils/helpers";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -19,8 +18,6 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);
 
-    const { cn } = useRenameCSS();
-
     if (itemContext === null) {
       console.error(
         "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>",
@@ -35,14 +32,14 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
           accordionContext?.variant === "neutral" ? "neutral" : undefined
         }
         {...rest}
-        className={cn("navds-accordion__header", className)}
+        className={cl("aksel-accordion__header", className)}
         onClick={composeEventHandlers(onClick, itemContext.toggleOpen)}
         aria-expanded={itemContext.open}
         type="button"
       >
-        <span className={cn("navds-accordion__icon-wrapper")}>
+        <span className="aksel-accordion__icon-wrapper">
           <ChevronDownIcon
-            className={cn("navds-accordion__header-chevron")}
+            className="aksel-accordion__header-chevron"
             aria-hidden
           />
         </span>

package/src/accordion/AccordionItem.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, forwardRef, useContext, useRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { omit } from "../util";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { omit } from "../utils-external";
+import { cl } from "../utils/helpers";
+import { useControllableState } from "../utils/hooks";
 import { AccordionContext } from "./AccordionContext";
 
 export interface AccordionItemProps
@@ -47,7 +47,6 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
     });
 
     const context = useContext(AccordionContext);
-    const { cn } = useRenameCSS();
 
     const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
 
@@ -62,9 +61,9 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
 
     return (
       <div
-        className={cn("navds-accordion__item", className, {
-          "navds-accordion__item--open": _open,
-          "navds-accordion__item--no-animation": !shouldAnimate.current,
+        className={cl("aksel-accordion__item", className, {
+          "aksel-accordion__item--open": _open,
+          "aksel-accordion__item--no-animation": !shouldAnimate.current,
         })}
         data-expanded={_open}
         ref={ref}

package/src/alert/Alert.tsx

@@ -7,10 +7,10 @@ import {
   XMarkOctagonFillIcon,
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyLong } from "../typography";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -92,7 +92,6 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n("global");
     const Icon = IconMap[variant];
     return (
@@ -101,33 +100,33 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         data-color={variantToRole(variant)}
         data-variant={variant}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-alert",
-          `navds-alert--${variant}`,
-          `navds-alert--${size}`,
+          "aksel-alert",
+          `aksel-alert--${variant}`,
+          `aksel-alert--${size}`,
           {
-            "navds-alert--full-width": fullWidth,
-            "navds-alert--inline": inline,
-            "navds-alert--close-button": closeButton,
+            "aksel-alert--full-width": fullWidth,
+            "aksel-alert--inline": inline,
+            "aksel-alert--close-button": closeButton,
           },
         )}
       >
-        <Icon title={translate(variant)} className={cn("navds-alert__icon")} />
+        <Icon title={translate(variant)} className="aksel-alert__icon" />
         <BodyLong
           as="div"
           size={size}
-          className={cn(
-            "navds-alert__wrapper",
-            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          className={cl(
+            "aksel-alert__wrapper",
+            contentMaxWidth && "aksel-alert__wrapper--maxwidth",
           )}
         >
           {children}
         </BodyLong>
         {closeButton && !inline && (
-          <div className={cn("navds-alert__button-wrapper")}>
+          <div className="aksel-alert__button-wrapper">
             <Button
-              className={cn("navds-alert__button")}
+              className="aksel-alert__button"
               size="small"
               variant="tertiary-neutral"
               onClick={onClose}

package/src/alert/base-alert/close-button/BaseAlertCloseButton.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";
 
 type BaseAlertCloseButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
@@ -22,7 +22,6 @@ const BaseAlertCloseButton = forwardRef<
   HTMLButtonElement,
   BaseAlertCloseButtonProps
 >(({ className, ...restProps }: BaseAlertCloseButtonProps, forwardedRef) => {
-  const { cn } = useRenameCSS();
   const translate = useI18n("global");
 
   return (
@@ -32,7 +31,7 @@ const BaseAlertCloseButton = forwardRef<
       {...restProps}
       data-color="neutral"
       variant="tertiary-neutral"
-      className={cn(className, "navds-base-alert__close-button")}
+      className={cl(className, "aksel-base-alert__close-button")}
       size="small"
       title={translate("close")}
       icon={<XMarkIcon aria-hidden />}

package/src/alert/base-alert/content/BaseAlertContent.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
+import { useThemeInternal } from "../../../theme/Theme";
+import { cl } from "../../../utils/helpers";
 
 interface BaseAlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -23,7 +24,6 @@ const BaseAlertContent = forwardRef<HTMLDivElement, BaseAlertContentProps>(
     { children, className, ...restProps }: BaseAlertContentProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal();
 
     return (
@@ -31,7 +31,7 @@ const BaseAlertContent = forwardRef<HTMLDivElement, BaseAlertContentProps>(
         ref={forwardedRef}
         data-color={themeContext?.color}
         {...restProps}
-        className={cn(className, "navds-base-alert__content")}
+        className={cl(className, "aksel-base-alert__content")}
       >
         {children}
       </div>

package/src/alert/base-alert/header/BaseAlertHeader.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
-import { useI18n } from "../../../util/i18n/i18n.hooks";
+import { cl } from "../../../utils/helpers";
+import { useI18n } from "../../../utils/i18n/i18n.hooks";
 import { useBaseAlert } from "../root/BaseAlertRoot.context";
 import { BaseAlertStatusIcon } from "../root/BaseAlertRoot.utils";
 
@@ -29,7 +29,6 @@ const BaseAlertHeader = forwardRef<HTMLDivElement, BaseAlertHeaderProps>(
     { children, className, icon, ...restProps }: BaseAlertHeaderProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const { status, color, statusId } = useBaseAlert();
     const translate = useI18n("global");
 
@@ -41,10 +40,10 @@ const BaseAlertHeader = forwardRef<HTMLDivElement, BaseAlertHeaderProps>(
         ref={forwardedRef}
         {...restProps}
         data-color={color}
-        className={cn(className, "navds-base-alert__header")}
+        className={cl(className, "aksel-base-alert__header")}
       >
         {headerIcon && (
-          <div className={cn("navds-base-alert__icon")}>{headerIcon}</div>
+          <div className="aksel-base-alert__icon">{headerIcon}</div>
         )}
         {status && (
           <BodyShort id={statusId} aria-hidden visuallyHidden>

package/src/alert/base-alert/root/BaseAlertRoot.context.tsx

@@ -1,5 +1,5 @@
 import { AkselColor } from "../../../types";
-import { createStrictContext } from "../../../util/create-strict-context";
+import { createStrictContext } from "../../../utils/helpers";
 
 type BaseAlertContextProps = {
   size: "medium" | "small";

package/src/alert/base-alert/root/BaseAlertRoot.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { AkselColor } from "../../../types";
-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 {
   type BaseAlertContextProps,
   BaseAlertProvider,
@@ -66,8 +66,6 @@ const BaseAlert = forwardRef<HTMLDivElement, BaseAlertProps>(
     }: BaseAlertProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const statusId = useId();
     const translate = useI18n("global");
 
@@ -87,7 +85,7 @@ const BaseAlert = forwardRef<HTMLDivElement, BaseAlertProps>(
           }
           ref={forwardedRef}
           {...restProps}
-          className={cn(className, "navds-base-alert")}
+          className={cl(className, "aksel-base-alert")}
           data-size={size}
           data-color={alertColor}
           data-variant={type}

package/src/alert/base-alert/title/BaseAlertTitle.tsx

@@ -1,8 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
-import { useId } from "../../../util";
+import { useId } from "../../../utils-external";
+import { cl } from "../../../utils/helpers";
 import { useBaseAlert } from "../root/BaseAlertRoot.context";
 
 interface BaseAlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -37,7 +36,6 @@ const BaseAlertTitle = forwardRef<HTMLHeadingElement, BaseAlertTitleProps>(
     }: BaseAlertTitleProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const { size, statusId } = useBaseAlert();
 
     const titleId = useId(idProp);
@@ -49,7 +47,7 @@ const BaseAlertTitle = forwardRef<HTMLHeadingElement, BaseAlertTitleProps>(
         as={as}
         size={size === "medium" ? "large" : "medium"}
         weight="semibold"
-        className={cn(className, "navds-base-alert__title")}
+        className={cl(className, "aksel-base-alert__title")}
         id={titleId}
         aria-labelledby={statusId ? cl(statusId, titleId) : undefined}
       >

package/src/button/Button.tsx

@@ -1,11 +1,10 @@
 import React, { forwardRef } from "react";
 import { Loader } from "../loader";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { Label } from "../typography";
-import { omit } from "../util";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { omit } from "../utils-external";
+import { cl, composeEventHandlers } from "../utils/helpers";
 
 type legacyVariants =
   | "primary-neutral"
@@ -90,8 +89,6 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled || loading ? omit(rest, ["href"]) : rest;
 
@@ -109,15 +106,15 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           {...filterProps}
           ref={ref}
           onKeyUp={composeEventHandlers(onKeyUp, handleKeyUp)}
-          className={cn(className, "navds-button", `navds-button--${size}`, {
-            "navds-button--loading": loading,
-            "navds-button--icon-only": !!icon && !children,
-            "navds-button--disabled": disabled ?? loading,
+          className={cl(className, "aksel-button", `aksel-button--${size}`, {
+            "aksel-button--loading": loading,
+            "aksel-button--icon-only": !!icon && !children,
+            "aksel-button--disabled": disabled ?? loading,
           })}
           disabled={(disabled ?? loading) ? true : undefined}
         >
           {icon && iconPosition === "left" && (
-            <span className={cn("navds-button__icon")}>{icon}</span>
+            <span className="aksel-button__icon">{icon}</span>
           )}
           {loading && <Loader size={size} />}
           {children && (
@@ -126,7 +123,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
             </Label>
           )}
           {icon && iconPosition === "right" && (
-            <span className={cn("navds-button__icon")}>{icon}</span>
+            <span className="aksel-button__icon">{icon}</span>
           )}
         </Component>
       );

package/src/chat/Bubble.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { Detail, Heading, HeadingProps } from "../typography";
+import { cl } from "../utils/helpers";
 
 export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -39,17 +39,15 @@ const Bubble = forwardRef<HTMLDivElement, ChatBubbleProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
-      <div ref={ref} className={cn("navds-chat__bubble", className)} {...rest}>
+      <div ref={ref} className={cl("aksel-chat__bubble", className)} {...rest}>
         {(timestamp || name) && (
           <Heading
             size="xsmall"
             level={toptextHeadingLevel}
-            className={cn(
-              `navds-chat__top-text`,
-              toptextPosition && `navds-chat__top-text--${toptextPosition}`,
+            className={cl(
+              "aksel-chat__top-text",
+              toptextPosition && `aksel-chat__top-text--${toptextPosition}`,
             )}
           >
             {name && <Detail as="span">{name}</Detail>}

package/src/chat/Chat.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyLong, HeadingProps } from "../typography";
+import { cl } from "../utils/helpers";
 import Bubble, { type ChatBubbleProps } from "./Bubble";
 
 export const VARIANTS = ["subtle", "info", "neutral"] as const;
@@ -107,33 +107,27 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
     }: ChatProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <div
         ref={ref}
-        className={cn(
-          "navds-chat",
+        className={cl(
+          "aksel-chat",
           className,
-          `navds-chat--${position}`,
-          `navds-chat--top-text-${toptextPosition ?? position}`,
-          `navds-chat--${size}`,
-          `navds-chat--${variant}`,
+          `aksel-chat--${position}`,
+          `aksel-chat--top-text-${toptextPosition ?? position}`,
+          `aksel-chat--${size}`,
+          `aksel-chat--${variant}`,
         )}
         data-color={color ?? variantToColor(variant)}
         {...rest}
         data-variant={variant}
       >
         {avatar && (
-          <div className={cn("navds-chat__avatar")} aria-hidden>
+          <div className="aksel-chat__avatar" aria-hidden>
             {avatar}
           </div>
         )}
-        <BodyLong
-          as="div"
-          size={size}
-          className={cn("navds-chat__bubble-wrapper")}
-        >
+        <BodyLong as="div" size={size} className="aksel-chat__bubble-wrapper">
           {React.Children.map(children, (child, i) => {
             if (!React.isValidElement<ChatBubbleProps>(child)) {
               return null;

package/src/chips/Chips.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, 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 RemovableChips, { ChipsRemovableProps } from "./Removable";
 import ToggleChips, { ChipsToggleProps } from "./Toggle";
 
@@ -60,14 +60,13 @@ interface ChipsComponent
  */
 export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
   ({ className, size = "medium", children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <ul
         {...rest}
         ref={ref}
-        className={cn("navds-chips", className, `navds-chips--${size}`, {
-          "navds-body-short navds-body-short--small": size === "medium",
-          "navds-detail navds-detail--small": size === "small",
+        className={cl("aksel-chips", className, `aksel-chips--${size}`, {
+          "aksel-body-short aksel-body-short--small": size === "medium",
+          "aksel-detail aksel-detail--small": size === "small",
         })}
       >
         {React.Children.map(children, (chip, index) => {