@navikt/ds-react 7.14.3 → 7.16.0

package/src/form/radio/Radio.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
@@ -7,6 +8,7 @@ import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const { cn } = useRenameCSS();
   const { inputProps, size, hasError, readOnly } = useRadio(props);
 
   const labelId = useId();
@@ -14,7 +16,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
 
   return (
     <div
-      className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
+      className={cn(props.className, "navds-radio", `navds-radio--${size}`, {
         "navds-radio--error": hasError,
         "navds-radio--disabled": inputProps.disabled,
         "navds-radio--readonly": readOnly,
@@ -30,11 +32,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
             [descriptionId]: props.description,
           },
         )}
-        className="navds-radio__input"
+        className={cn("navds-radio__input")}
         ref={ref}
       />
-      <label htmlFor={inputProps.id} className="navds-radio__label">
-        <span className="navds-radio__content">
+      <label htmlFor={inputProps.id} className={cn("navds-radio__label")}>
+        <span className={cn("navds-radio__content")}>
           <BodyShort as="span" id={labelId} size={size} aria-hidden>
             {props.children}
           </BodyShort>
@@ -43,7 +45,9 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
               as="span"
               id={descriptionId}
               size={size}
-              className="navds-form-field__subdescription navds-radio__description"
+              className={cn(
+                "navds-form-field__subdescription navds-radio__description",
+              )}
               aria-hidden
             >
               {props.description}

package/src/form/radio/RadioGroup.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { useId } from "../../util/hooks";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
@@ -71,6 +71,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const fieldset = useContext(FieldsetContext);
 
     const nameId = useId();
@@ -80,7 +81,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
         {...rest}
         readOnly={readOnly}
         ref={ref}
-        className={cl(
+        className={cn(
           className,
           "navds-radio-group",
           `navds-radio-group--${rest.size ?? fieldset?.size ?? "medium"}`,
@@ -96,7 +97,7 @@ export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(
             required,
           }}
         >
-          <div className="navds-radio-buttons">{children}</div>
+          <div className={cn("navds-radio-buttons")}>{children}</div>
         </RadioGroupContext.Provider>
       </Fieldset>
     );

package/src/form/search/Search.tsx

@@ -1,4 +1,3 @@
-import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
@@ -7,7 +6,7 @@ import React, {
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -125,6 +124,8 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const themeContext = useThemeInternal(false);
 
     const searchRef = useRef<HTMLInputElement | null>(null);
@@ -153,7 +154,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     const ClearButton = () =>
       themeContext ? (
         <Button
-          className="navds-search__button-clear"
+          className={cn("navds-search__button-clear")}
           variant="tertiary-neutral"
           size={size === "medium" ? "small" : "xsmall"}
           icon={<XMarkIcon aria-hidden />}
@@ -165,10 +166,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <button
           type="button"
           onClick={(event) => handleClear({ trigger: "Click", event })}
-          className="navds-search__button-clear"
+          className={cn("navds-search__button-clear")}
           hidden={!showClearButton}
         >
-          <span className="navds-sr-only">
+          <span className={cn("navds-sr-only")}>
             {clearButtonLabel || translate("clear")}
           </span>
           <XMarkIcon aria-hidden />
@@ -185,7 +186,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           searchRef.current?.value && event.preventDefault();
           handleClear({ trigger: "Escape", event });
         }}
-        className={cl(
+        className={cn(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
@@ -200,7 +201,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cl("navds-form-field__label", {
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -208,7 +209,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
         </Label>
         {!!description && (
           <BodyShort
-            className={cl("navds-form-field__description", {
+            className={cn("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -218,12 +219,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {description}
           </BodyShort>
         )}
-        <div className="navds-search__wrapper">
-          <div className="navds-search__wrapper-inner">
+        <div className={cn("navds-search__wrapper")}>
+          <div className={cn("navds-search__wrapper-inner")}>
             {variant === "simple" && (
               <MagnifyingGlassIcon
                 aria-hidden
-                className="navds-search__search-icon"
+                className={cn("navds-search__search-icon")}
               />
             )}
             <input
@@ -233,7 +234,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              className={cl(
+              className={cn(
                 className,
                 "navds-search__input",
                 `navds-search__input--${variant}`,
@@ -257,7 +258,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           </SearchContext.Provider>
         </div>
         <div
-          className="navds-form-field__error"
+          className={cn("navds-form-field__error")}
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/search/SearchButton.tsx

@@ -1,7 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
+import { useRenameCSS } from "../../theme/Theme";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { SearchContext } from "./context";
@@ -20,6 +20,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 
 const SearchButton: SearchButtonType = forwardRef(
   ({ className, children, disabled, onClick, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const translate = useI18n("Search");
     const context = useContext(SearchContext);
 
@@ -37,7 +38,7 @@ const SearchButton: SearchButtonType = forwardRef(
         ref={ref}
         size={size}
         variant={variant === "secondary" ? "secondary" : "primary"}
-        className={cl("navds-search__button-search", className)}
+        className={cn("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
         onClick={composeEventHandlers(onClick, handleClick)}
         icon={

package/src/form/select/Select.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -70,6 +70,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const readOnlyEventHandlers = {
       onMouseDown: (evt) => {
         // NOTE: does not prevent click
@@ -93,7 +95,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
@@ -108,7 +110,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cl("navds-form-field__label", {
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -117,7 +119,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         </Label>
         {!!description && (
           <BodyShort
-            className={cl("navds-form-field__description", {
+            className={cn("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -127,13 +129,13 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             {description}
           </BodyShort>
         )}
-        <div className="navds-select__container" style={style}>
+        <div className={cn("navds-select__container")} style={style}>
           <select
             {...omit(rest, ["error", "errorId", "size", "readOnly"])}
             {...inputProps}
             {...readOnlyEventHandlers}
             ref={ref}
-            className={cl(
+            className={cn(
               "navds-select__input",
               "navds-body-short",
               `navds-body-short--${size ?? "medium"}`,
@@ -142,10 +144,13 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           >
             {children}
           </select>
-          <ChevronDownIcon className="navds-select__chevron" aria-hidden />
+          <ChevronDownIcon
+            className={cn("navds-select__chevron")}
+            aria-hidden
+          />
         </div>
         <div
-          className="navds-form-field__error"
+          className={cn("navds-form-field__error")}
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/switch/Switch.tsx

@@ -1,4 +1,3 @@
-import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
@@ -6,6 +5,7 @@ import React, {
   useState,
 } from "react";
 import { Loader } from "../../loader";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -64,6 +64,8 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const [_checked, setChecked] = useState(
       defaultChecked ?? checkedProp ?? false,
     );
@@ -76,7 +78,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           "navds-switch",
           props.className,
           `navds-switch--${size}`,
@@ -111,10 +113,10 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             }
             props.onClick?.(event);
           }}
-          className={cl(className, "navds-switch__input")}
+          className={cn(className, "navds-switch__input")}
         />
-        <span className="navds-switch__track">
-          <span className="navds-switch__thumb">
+        <span className={cn("navds-switch__track")}>
+          <span className={cn("navds-switch__thumb")}>
             {loading ? (
               <Loader
                 size="xsmall"
@@ -131,7 +133,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
                 focusable={false}
                 role="img"
                 aria-hidden
-                className="navds-switch__checkmark"
+                className={cn("navds-switch__checkmark")}
               >
                 <path
                   fillRule="evenodd"
@@ -143,14 +145,21 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             )}
           </span>
         </span>
-        <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+        <label
+          htmlFor={inputProps.id}
+          className={cn("navds-switch__label-wrapper")}
+        >
           <div
-            className={cl("navds-switch__content", {
+            className={cn("navds-switch__content", {
               "navds-sr-only": hideLabel,
               "navds-switch--with-description": description && !hideLabel,
             })}
           >
-            <BodyShort as="div" size={size} className="navds-switch__label">
+            <BodyShort
+              as="div"
+              size={size}
+              className={cn("navds-switch__label")}
+            >
               {readOnly && <ReadOnlyIconWithTitle />}
               {children}
             </BodyShort>
@@ -158,7 +167,9 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
               <BodyShort
                 size={size}
                 as="div"
-                className="navds-form-field__subdescription navds-switch__description"
+                className={cn(
+                  "navds-form-field__subdescription navds-switch__description",
+                )}
               >
                 {description}
               </BodyShort>

package/src/form/textarea/Textarea.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import TextareaAutosize from "../../util/TextareaAutoSize";
@@ -99,6 +100,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       ...rest
     } = props;
 
+    const { cn } = useRenameCSS();
+
     const maxLengthId = useId();
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
@@ -120,7 +123,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
@@ -138,7 +141,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cl("navds-form-field__label", {
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -147,7 +150,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         </Label>
         {!!description && (
           <BodyShort
-            className={cl("navds-form-field__description", {
+            className={cn("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -170,7 +173,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           autoScrollbar={UNSAFE_autoScrollbar}
           ref={ref}
           readOnly={readOnly}
-          className={cl(
+          className={cn(
             "navds-textarea__input",
             "navds-body-short",
             `navds-body-short--${size ?? "medium"}`,
@@ -187,7 +190,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           />
         )}
         <div
-          className="navds-form-field__error"
+          className={cn("navds-form-field__error")}
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/form/textarea/TextareaCounter.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { useEffect, useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
 import debounce from "../../util/debounce";
 import { useI18n } from "../../util/i18n/i18n.hooks";
@@ -20,6 +20,7 @@ const TextareaCounter = ({
   size,
   i18n,
 }: Props) => {
+  const { cn } = useRenameCSS();
   const translate = useI18n("Textarea", {
     charsLeft: i18n?.counterLeft ? `{chars} ${i18n.counterLeft}` : undefined,
     charsTooMany: i18n?.counterTooMuch
@@ -43,21 +44,21 @@ const TextareaCounter = ({
 
   return (
     <>
-      <span id={maxLengthId} className="navds-sr-only">
+      <span id={maxLengthId} className={cn("navds-sr-only")}>
         {translate("maxLength", { maxLength })}
       </span>
 
       {difference < 20 && (
         <span
           role="status"
-          className="navds-textarea__sr-counter navds-sr-only"
+          className={cn("navds-textarea__sr-counter navds-sr-only")}
         >
           {getCounterText(debouncedDiff, translate)}
         </span>
       )}
 
       <BodyShort
-        className={cl("navds-textarea__counter", {
+        className={cn("navds-textarea__counter", {
           "navds-textarea__counter--error": difference < 0,
         })}
         size={size}

package/src/form/textfield/TextField.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { InputHTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
@@ -48,6 +48,8 @@ export interface TextFieldProps
  */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (props, ref) => {
+    const { cn } = useRenameCSS();
+
     const {
       inputProps,
       errorId,
@@ -70,7 +72,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
     return (
       <div
-        className={cl(
+        className={cn(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
@@ -87,7 +89,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         <Label
           htmlFor={inputProps.id}
           size={size}
-          className={cl("navds-form-field__label", {
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
         >
@@ -97,7 +99,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 
         {!!description && (
           <BodyShort
-            className={cl("navds-form-field__description", {
+            className={cn("navds-form-field__description", {
               "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
@@ -113,7 +115,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           ref={ref}
           type={type}
           readOnly={readOnly}
-          className={cl(
+          className={cn(
             "navds-text-field__input",
             "navds-body-short",
             `navds-body-short--${size ?? "medium"}`,
@@ -121,7 +123,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           size={htmlSize}
         />
         <div
-          className="navds-form-field__error"
+          className={cn("navds-form-field__error")}
           id={errorId}
           aria-relevant="additions removals"
           aria-live="polite"

package/src/guide-panel/GuidePanel.tsx

@@ -1,6 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { DefaultIllustration } from "./Illustration";
 import { DarksideGudiepanelIllustration } from "./Illustration.darkside";
 
@@ -37,13 +36,14 @@ export interface GuidePanelProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
   ({ children, className, illustration, poster, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal(false);
 
     return (
       <div
         {...rest}
         ref={ref}
-        className={cl("navds-guide-panel", className, {
+        className={cn("navds-guide-panel", className, {
           "navds-guide-panel--poster": poster === true,
           "navds-guide-panel--not-poster": poster === false,
           "navds-guide-panel--responsive-poster": poster === undefined,
@@ -51,7 +51,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
         data-responsive={poster === undefined}
         data-poster={poster}
       >
-        <div className="navds-guide">
+        <div className={cn("navds-guide")}>
           {illustration ??
             (themeContext ? (
               <DarksideGudiepanelIllustration />
@@ -59,7 +59,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
               <DefaultIllustration />
             ))}
         </div>
-        <div className="navds-guide-panel__content">
+        <div className={cn("navds-guide-panel__content")}>
           {themeContext && (
             <svg
               viewBox="0 0 33 22"
@@ -67,7 +67,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
               height="22"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              className="navds-guide-panel__tail"
+              className={cn("navds-guide-panel__tail")}
             >
               <path
                 d="M8.74229e-08 22L0 20L33 20V22L8.74229e-08 22Z"
@@ -86,7 +86,9 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
             </svg>
           )}
           {themeContext ? (
-            <div className="navds-guide-panel__content-inner">{children}</div>
+            <div className={cn("navds-guide-panel__content-inner")}>
+              {children}
+            </div>
           ) : (
             children
           )}

package/src/help-text/HelpText.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -49,6 +48,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = useMergeRefs(buttonRef, ref);
     const [open, setOpen] = useState(false);
@@ -58,12 +58,12 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const titleWithFallback = title || translate("title");
 
     return (
-      <div className={cl("navds-help-text", wrapperClassName)}>
+      <div className={cn("navds-help-text", wrapperClassName)}>
         <button
           {...rest}
           ref={mergedRef}
           onClick={composeEventHandlers(onClick, () => setOpen((x) => !x))}
-          className={cl(className, "navds-help-text__button")}
+          className={cn(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
         >
@@ -72,7 +72,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
         </button>
         <Popover
           onClose={() => setOpen(false)}
-          className="navds-help-text__popover"
+          className={cn("navds-help-text__popover")}
           open={open}
           anchorEl={buttonRef.current}
           placement={placement}
@@ -80,7 +80,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           offset={themeContext ? 8 : 12}
           arrow={!themeContext}
         >
-          <Popover.Content className="navds-body-short">
+          <Popover.Content className={cn("navds-body-short")}>
             {children}
           </Popover.Content>
         </Popover>

package/src/help-text/HelpTextIcon.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { useId } from "../util/hooks";
 
 export const HelpTextIcon = ({
@@ -9,6 +9,8 @@ export const HelpTextIcon = ({
   title: string;
   filled?: boolean;
 }) => {
+  const { cn } = useRenameCSS();
+
   let titleId: string | undefined = useId();
   titleId = title ? `title-${titleId}` : undefined;
   return (
@@ -21,7 +23,7 @@ export const HelpTextIcon = ({
       focusable={false}
       role="img"
       aria-labelledby={titleId}
-      className={cl("navds-help-text__icon", {
+      className={cn("navds-help-text__icon", {
         "navds-help-text__icon--filled": filled,
       })}
     >