@navikt/ds-react 8.0.0 → 8.0.1

package/esm/util/link-anchor/LinkAnchor.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useRef, } from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
 import { Slot } from "../../slot/Slot.js";
-import { useRenameCSS } from "../../theme/Theme.js";
+import { cl } from "../className.js";
 import { composeEventHandlers } from "../composeEventHandlers.js";
 import { createStrictContext } from "../create-strict-context.js";
 import { useMergeRefs } from "../hooks/useMergeRefs.js";
@@ -22,11 +22,10 @@ const { Provider: LinkAnchorContextProvider, useContext: useLinkAnchorContext, }
 });
 const LinkAnchorOverlay = forwardRef((_a, forwardedRef) => {
     var { children, asChild, className, onClick } = _a, restProps = __rest(_a, ["children", "asChild", "className", "onClick"]);
-    const { cn } = useRenameCSS();
     const anchorRef = useRef(null);
     const Component = asChild ? Slot : "div";
     return (React.createElement(LinkAnchorContextProvider, { anchorRef: anchorRef },
-        React.createElement(Component, Object.assign({ ref: forwardedRef }, restProps, { className: cn("navds-link-anchor__overlay", className), onClick: composeEventHandlers(onClick, (e) => {
+        React.createElement(Component, Object.assign({ ref: forwardedRef }, restProps, { className: cl("aksel-link-anchor__overlay", className), onClick: composeEventHandlers(onClick, (e) => {
                 var _a;
                 if (e.target === anchorRef.current ||
                     isTextSelected(anchorRef.current)) {
@@ -51,16 +50,14 @@ const LinkAnchorOverlay = forwardRef((_a, forwardedRef) => {
 });
 const LinkAnchor = forwardRef((_a, forwardedRef) => {
     var { children, asChild, className } = _a, restProps = __rest(_a, ["children", "asChild", "className"]);
-    const { cn } = useRenameCSS();
     const context = useLinkAnchorContext(false);
     const mergedRefs = useMergeRefs(forwardedRef, context === null || context === void 0 ? void 0 : context.anchorRef);
     const Component = asChild ? Slot : "a";
-    return (React.createElement(Component, Object.assign({ ref: mergedRefs }, restProps, { className: cn("navds-link-anchor", className) }), children));
+    return (React.createElement(Component, Object.assign({ ref: mergedRefs }, restProps, { className: cl("aksel-link-anchor", className) }), children));
 });
 const LinkAnchorArrow = forwardRef((_a, forwardedRef) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const { cn } = useRenameCSS();
-    return (React.createElement(ArrowRightIcon, Object.assign({ ref: forwardedRef, "aria-hidden": true, className: cn("navds-link-anchor__arrow", className) }, restProps)));
+    return (React.createElement(ArrowRightIcon, Object.assign({ ref: forwardedRef, "aria-hidden": true, className: cl("aksel-link-anchor__arrow", className) }, restProps)));
 });
 /* -------------------------- LinkAnchor Utilities -------------------------- */
 function isTextSelected(refElement) {

package/esm/util/link-anchor/LinkAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkAnchor.js","sourceRoot":"","sources":["../../../src/util/link-anchor/LinkAnchor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LinkAnchor.js","sourceRoot":"","sources":["../../../src/util/link-anchor/LinkAnchor.tsx"],"names":[],"mappings":"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"}

package/esm/util/virtualfocus/Context.d.ts

@@ -21,7 +21,7 @@ export declare const VirtualFocusDescendantsProvider: import("react").Provider<i
     }>;
     index: number;
     enabledIndex: number;
-    register: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+    register: ((instance: HTMLDivElement | null) => void) | null;
 };
 export declare const VirtualFocusInternalContextProvider: import("react").FC<{
     virtualFocusIdx: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -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.0.1",
+    "@navikt/ds-tokens": "^8.0.1",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },

package/src/accordion/Accordion.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } 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 { cl } from "../util/className";
 import AccordionContent, { AccordionContentProps } from "./AccordionContent";
 import { AccordionContext } from "./AccordionContext";
 import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
@@ -89,8 +89,6 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
     { className, variant = "default", size = "medium", indent = true, ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <AccordionContext.Provider
         value={{
@@ -101,11 +99,11 @@ 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}
         />

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 "../util/className";
 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,7 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
 import { Heading } from "../typography";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
@@ -19,8 +19,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 +33,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,6 +1,6 @@
 import React, { createContext, forwardRef, useContext, useRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { omit } from "../util";
+import { cl } from "../util/className";
 import { useControllableState } from "../util/hooks/useControllableState";
 import { AccordionContext } from "./AccordionContext";
 
@@ -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,9 +7,9 @@ import {
   XMarkOctagonFillIcon,
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 import { useI18n } from "../util/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,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/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 "../../../util/className";
 
 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,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/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.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { AkselColor } from "../../../types";
 import { useId } from "../../../util";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import {
   type BaseAlertContextProps,
@@ -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 { cl } from "../../../util/className";
 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,9 +1,9 @@
 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 { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { OverridableComponent } from "../util/types";
 
@@ -90,8 +90,6 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       const filterProps: React.ButtonHTMLAttributes<HTMLButtonElement> =
         disabled || loading ? omit(rest, ["href"]) : rest;
 
@@ -109,15 +107,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 +124,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 "../util/className";
 
 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 "../util/className";
 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,5 +1,5 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 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) => {

package/src/chips/Removable.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
@@ -42,7 +42,6 @@ export const RemovableChips = forwardRef<
     ref,
   ) => {
     const translate = useI18n("Chips");
-    const { cn } = useRenameCSS();
 
     return (
       <button
@@ -50,15 +49,15 @@ export const RemovableChips = forwardRef<
         {...rest}
         ref={ref}
         type={type}
-        className={cn(
-          "navds-chips__chip navds-chips__removable navds-chips--icon-right",
+        className={cl(
+          "aksel-chips__chip aksel-chips__removable aksel-chips--icon-right",
           className,
         )}
         aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
-        <span className={cn("navds-chips__chip-text")}>{children}</span>
-        <span className={cn("navds-chips__removable-icon")}>
+        <span className="aksel-chips__chip-text">{children}</span>
+        <span className="aksel-chips__removable-icon">
           <XMarkIcon aria-hidden />
         </span>
       </button>