@navikt/ds-react 7.14.3 → 7.16.0

package/src/tabs/parts/tablist/TabList.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
-import cl from "clsx";
 import React, { forwardRef, useRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
 import ScrollButton from "./ScrollButtons";
@@ -16,6 +16,7 @@ export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, onKeyDown, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const { onKeyDown: _onKeyDown } = useTabList();
 
     const listRef = useRef<HTMLDivElement>(null);
@@ -24,7 +25,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
     const scrollCtx = useScrollButtons(listRef);
 
     return (
-      <div className="navds-tabs__tablist-wrapper">
+      <div className={cn("navds-tabs__tablist-wrapper")}>
         {scrollCtx.show && (
           <ScrollButton
             dir="left"
@@ -36,7 +37,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
           ref={mergedRef}
           {...rest}
           onScroll={scrollCtx.update}
-          className={cl("navds-tabs__tablist", className)}
+          className={cn("navds-tabs__tablist", className)}
           role="tablist"
           aria-orientation="horizontal"
           onKeyDown={composeEventHandlers(onKeyDown, _onKeyDown)}

package/src/tabs/parts/tabpanel/TabPanel.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { useTabPanel } from "./useTabPanel";
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -28,12 +28,13 @@ export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
 const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
   ({ className, value, children, lazy = true, id, ...rest }, ref) => {
     const ctx = useTabPanel({ value });
+    const { cn } = useRenameCSS();
 
     return (
       <div
         ref={ref}
         {...rest}
-        className={cl("navds-tabs__tabpanel", className)}
+        className={cn("navds-tabs__tabpanel", className)}
         role="tabpanel"
         tabIndex={0}
         aria-labelledby={rest["aria-labelledby"] ?? ctx.labelledbyId}

package/src/tag/Tag.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyShort } from "../typography";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
@@ -63,6 +63,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
   ({ children, className, variant, size = "medium", icon, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const filledVariant = variant?.endsWith("-filled") && "strong";
     const moderateVariant = variant?.endsWith("-moderate") && "moderate";
     const color = variant?.replace("-filled", "").replace("-moderate", "");
@@ -73,7 +74,7 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         ref={ref}
         as="span"
         size={size === "medium" ? "medium" : "small"}
-        className={cl(
+        className={cn(
           "navds-tag",
           className,
           `navds-tag--${variant}`,
@@ -82,7 +83,7 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
           `navds-tag--${color}`,
         )}
       >
-        {icon && <span className="navds-tag__icon--left">{icon}</span>}
+        {icon && <span className={cn("navds-tag__icon--left")}>{icon}</span>}
         {children}
       </BodyShort>
     );

package/src/theme/Theme.tsx

@@ -5,9 +5,12 @@ import { createContext } from "../util/create-context";
 import { AsChildProps } from "../util/types";
 
 /* -------------------------------------------------------------------------- */
-/*                               CSS Trsnalation                              */
+/*                               CSS Translation                              */
 /* -------------------------------------------------------------------------- */
 type RenameCSSContext = {
+  /**
+   * Extends `clsx` with custom className handler
+   */
   cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
 };
 
@@ -31,9 +34,11 @@ export const compositeClassFunction = (
 };
 
 const RenameCSS = ({ children }: { children: React.ReactNode }) => {
-  /* Replace function with this when implementation is complete and CSS is updated */
-  /* <RenameCSSProvider cn={compositeClassFunction}> */
-  return <RenameCSSProvider cn={cl}>{children}</RenameCSSProvider>;
+  return (
+    <RenameCSSProvider cn={compositeClassFunction}>
+      {children}
+    </RenameCSSProvider>
+  );
 };
 
 /* -------------------------------------------------------------------------- */
@@ -42,7 +47,7 @@ const RenameCSS = ({ children }: { children: React.ReactNode }) => {
 type ThemeContext = {
   /**
    * Color theme
-   * @default "light"
+   * @default Inherits parent theme, or "light" if root
    */
   theme?: "light" | "dark";
 };
@@ -83,7 +88,7 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
         <RenameCSS>
           <SlotElement
             ref={ref}
-            className={cl("navds-theme", className, theme)}
+            className={cl("aksel-theme", className, theme)}
             data-background={hasBackground}
           >
             {children}

package/src/timeline/AxisLabels.tsx

@@ -15,6 +15,7 @@ import {
   subDays,
 } from "date-fns";
 import React from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { Detail } from "../typography/Detail";
 import { useDateLocale, useI18n } from "../util/i18n/i18n.hooks";
 import { TFunction } from "../util/i18n/i18n.types";
@@ -149,11 +150,13 @@ export const AxisLabels = ({
 
   const labels = getLabels(startDate, endDate, direction, locale, translate);
 
+  const { cn } = useRenameCSS();
+
   return (
-    <div className="navds-timeline__axislabels" aria-hidden="true">
+    <div className={cn("navds-timeline__axislabels")} aria-hidden="true">
       {labels.filter(isVisible).map((etikett) => (
         <Detail
-          className="navds-timeline__axislabels-label"
+          className={cn("navds-timeline__axislabels-label")}
           as="div"
           key={etikett.label}
           style={{

package/src/timeline/Pin.tsx

@@ -15,7 +15,7 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
-import { useThemeInternal } from "../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -43,6 +43,7 @@ export interface PinType
 
 export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
   ({ date, children, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const { startDate, endDate, direction } = useTimelineContext();
     const [open, setOpen] = useState(false);
     const arrowRef = useRef<HTMLDivElement | null>(null);
@@ -99,13 +100,13 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     return (
       <>
         <div
-          className="navds-timeline__pin-wrapper"
+          className={cn("navds-timeline__pin-wrapper")}
           style={{ [direction]: `${position(date, startDate, endDate)}%` }}
         >
           <button
             {...rest}
             ref={mergedRef}
-            className="navds-timeline__pin-button"
+            className={cn("navds-timeline__pin-button")}
             aria-label={translate("Pin.pin", {
               date: format(date, translate("dateFormat")),
             })}
@@ -131,7 +132,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             returnFocus={false}
           >
             <div
-              className="navds-timeline__popover"
+              className={cn("navds-timeline__popover")}
               data-placement={placement}
               ref={refs.setFloating}
               {...getFloatingProps()}
@@ -147,7 +148,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
                     ...(arrowY != null ? { top: arrowY } : {}),
                     ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
                   }}
-                  className="navds-timeline__popover-arrow"
+                  className={cn("navds-timeline__popover-arrow")}
                 />
               )}
             </div>

package/src/timeline/Timeline.tsx

@@ -1,5 +1,6 @@
 import { endOfDay, isSameDay, startOfDay } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { AxisLabels } from "./AxisLabels";
 import Pin, { PinType } from "./Pin";
 import TimelineRow, { TimelineRowType } from "./TimelineRow";
@@ -95,6 +96,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const isMultipleRows = Array.isArray(children);
 
     const firstFocusabled = useRef<
@@ -213,7 +215,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
         }}
       >
         <div {...rest} ref={ref}>
-          <div className="navds-timeline">
+          <div className={cn("navds-timeline")}>
             <AxisLabels templates={axisLabelTemplates} />
 
             {pins.map((PinChild, i) => (

package/src/timeline/TimelineRow.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyShort } from "../typography/BodyShort";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import { PeriodContext } from "./hooks/usePeriodContext";
@@ -38,6 +38,7 @@ export interface TimelineRowType
 
 export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
   ({ label, className, headingTag = "h3", icon, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
     const { periods, id, active } = useRowContext();
     const { setActiveRow } = useTimelineContext();
     const translate = useI18n("Timeline");
@@ -60,7 +61,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           <BodyShort
             as={headingTag}
             id={`timeline-row-${id}`}
-            className="navds-timeline__row-label"
+            className={cn("navds-timeline__row-label")}
             size="small"
           >
             {icon}
@@ -68,7 +69,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           </BodyShort>
         )}
         <div
-          className={cl("navds-timeline__row", {
+          className={cn("navds-timeline__row", {
             "navds-timeline__row--active": active,
           })}
         >
@@ -85,7 +86,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
                     end: format(latest.end, translate("dateFormat")),
                   })
             }
-            className={cl("navds-timeline__row-periods", className)}
+            className={cn("navds-timeline__row-periods", className)}
             onKeyDown={(e) => {
               if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                 e.preventDefault();

package/src/timeline/period/ClickablePeriod.tsx

@@ -13,9 +13,8 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
-import cl from "clsx";
 import React, { useRef, useState } from "react";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -49,6 +48,7 @@ const ClickablePeriod = React.memo(
     restProps,
     periodRef,
   }: TimelineClickablePeriodProps) => {
+    const { cn } = useRenameCSS();
     const [open, setOpen] = useState(false);
     const { index } = useRowContext();
     const { firstFocus } = usePeriodContext();
@@ -114,7 +114,7 @@ const ClickablePeriod = React.memo(
             mergedRef(r);
           }}
           aria-label={ariaLabel(start, end, status, statusLabel, translate)}
-          className={cl(
+          className={cn(
             "navds-timeline__period--clickable",
             getConditionalClasses(cropped, direction, status),
             restProps?.className,
@@ -151,7 +151,7 @@ const ClickablePeriod = React.memo(
             },
           })}
         >
-          <span className="navds-timeline__period--inner">{icon}</span>
+          <span className={cn("navds-timeline__period--inner")}>{icon}</span>
         </button>
         {children && open && (
           <FloatingFocusManager
@@ -161,7 +161,7 @@ const ClickablePeriod = React.memo(
             returnFocus={false}
           >
             <div
-              className="navds-timeline__popover"
+              className={cn("navds-timeline__popover")}
               data-placement={placement}
               ref={refs.setFloating}
               {...getFloatingProps()}
@@ -176,7 +176,7 @@ const ClickablePeriod = React.memo(
                     ...(arrowY != null ? { top: arrowY } : {}),
                     ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
                   }}
-                  className="navds-timeline__popover-arrow"
+                  className={cn("navds-timeline__popover-arrow")}
                 />
               )}
             </div>

package/src/timeline/period/NonClickablePeriod.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
 import type { PeriodProps } from "./types";
@@ -23,11 +23,12 @@ const NonClickablePeriod = ({
 }: TimelineNonClickablePeriodProps) => {
   const translate = useI18n("Timeline");
 
+  const { cn } = useRenameCSS();
   return (
     <div
       ref={periodRef}
       {...restProps}
-      className={cl(
+      className={cn(
         getConditionalClasses(cropped, direction, status),
         restProps?.className,
       )}
@@ -36,9 +37,9 @@ const NonClickablePeriod = ({
         [direction]: `${left}%`,
       }}
     >
-      <span className="navds-timeline__period--inner">
+      <span className={cn("navds-timeline__period--inner")}>
         {icon}
-        <span className="sr-only">
+        <span className={cn("navds-sr-only")}>
           {ariaLabel(start, end, status, statusLabel, translate)}
         </span>
       </span>

package/src/timeline/utils/period.ts

@@ -8,6 +8,7 @@ export const getConditionalClasses = (
   direction: string,
   status: string,
 ) => {
+  /* Renaming to aksel-* happends where these are used, so no need to rename here */
   return cl(`navds-timeline__period navds-timeline__period--${status}`, {
     "navds-timeline__period--connected-both": cropped === "both",
     "navds-timeline__period--connected-right":

package/src/timeline/zoom/ZoomButton.tsx

@@ -7,6 +7,7 @@ import {
   subYears,
 } from "date-fns";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { Detail } from "../../typography/Detail";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -37,6 +38,8 @@ export const ZoomButton: ZoomButtonType = forwardRef(
     const translate = useI18n("Timeline");
     const dateFormat = translate("dateFormat");
 
+    const { cn } = useRenameCSS();
+
     let startOfRange: Date;
 
     if (interval === "month") {
@@ -70,7 +73,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
           }
           ref={ref}
           {...rest}
-          className="navds-timeline__zoom-button"
+          className={cn("navds-timeline__zoom-button")}
           onClick={() => {
             setStart(startOfRange);
           }}

package/src/timeline/zoom/index.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import ZoomButton, { ZoomButtonType } from "./ZoomButton";
 
 interface ZoomProps extends React.HTMLAttributes<HTMLUListElement> {
@@ -16,8 +16,10 @@ export interface ZoomType<Props = ZoomProps>
 
 export const Zoom = forwardRef<HTMLUListElement, ZoomProps>(
   ({ className, children, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+
     return (
-      <ul ref={ref} className={cl(className, "navds-timeline__zoom")} {...rest}>
+      <ul ref={ref} className={cn(className, "navds-timeline__zoom")} {...rest}>
         {children}
       </ul>
     );

package/src/toggle-group/ToggleGroup.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { Label } from "../typography";
 import { useId } from "../util";
 import {
@@ -53,6 +54,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const descendants = useToggleGroupDescendants();
 
     const toggleGroupContext = useToggleGroup({
@@ -83,14 +85,14 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       <ToggleGroupDescendantsProvider value={descendants}>
         <ToggleGroupProvider {...context}>
           <div
-            className={cl("navds-toggle-group__wrapper", className, {
+            className={cn("navds-toggle-group__wrapper", className, {
               "navds-toggle-group__wrapper--fill": fill,
             })}
           >
             {label && (
               <Label
                 size={size}
-                className="navds-toggle-group__label"
+                className={cn("navds-toggle-group__label")}
                 id={labelId}
               >
                 {label}
@@ -99,7 +101,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             <div
               {...rest}
               ref={ref}
-              className={cl(
+              className={cn(
                 "navds-toggle-group",
                 `navds-toggle-group--${size}`,
                 `navds-toggle-group--${variant}`,

package/src/toggle-group/parts/ToggleItem.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort } from "../../typography/BodyShort";
 import { useToggleGroupContext } from "../ToggleGroup.context";
 import { useToggleItem } from "./useToggleItem";
@@ -62,6 +62,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
     },
     forwardedRef,
   ) => {
+    const { cn } = useRenameCSS();
     const itemCtx = useToggleItem(
       { value, onClick, onFocus, disabled: false, onKeyDown },
       forwardedRef,
@@ -72,7 +73,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
       <button
         {...rest}
         ref={itemCtx.ref}
-        className={cl("navds-toggle-group__button", className)}
+        className={cn("navds-toggle-group__button", className)}
         type="button"
         role="radio"
         aria-checked={itemCtx.isSelected}
@@ -84,7 +85,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
       >
         <BodyShort
           as="span"
-          className="navds-toggle-group__button-inner"
+          className={cn("navds-toggle-group__button-inner")}
           size={ctx?.size}
         >
           {children ?? (

package/src/tooltip/Tooltip.tsx

@@ -11,11 +11,11 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
 import { Slot } from "../slot/Slot";
+import { useRenameCSS } from "../theme/Theme";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
@@ -123,6 +123,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
+
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -221,7 +223,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 },
                 role: "tooltip",
                 id: ariaId,
-                className: cl(
+                className: cn(
                   "navds-tooltip",
                   "navds-detail navds-detail--small",
                   className,
@@ -232,9 +234,13 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             >
               {content}
               {keys && (
-                <span className="navds-tooltip__keys" aria-hidden>
+                <span className={cn("navds-tooltip__keys")} aria-hidden>
                   {keys.map((key) => (
-                    <Detail as="kbd" key={key} className="navds-tooltip__key">
+                    <Detail
+                      as="kbd"
+                      key={key}
+                      className={cn("navds-tooltip__key")}
+                    >
                       {key}
                     </Detail>
                   ))}
@@ -245,7 +251,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                   ref={(node) => {
                     arrowRef.current = node;
                   }}
-                  className="navds-tooltip__arrow"
+                  className={cn("navds-tooltip__arrow")}
                   style={{
                     left: arrowX != null ? `${arrowX}px` : "",
                     top: arrowY != null ? `${arrowY}px` : "",

package/src/typography/BodyLong.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -52,25 +52,29 @@ export const BodyLong: OverridableComponent<
       ...rest
     },
     ref,
-  ) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(
-        className,
-        "navds-body-long",
-        `navds-body-long--${size}`,
-        typoClassNames({
-          spacing,
-          truncate,
-          weight,
-          align,
-          visuallyHidden,
-          textColor,
-        }),
-      )}
-    />
-  ),
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cn(
+          className,
+          "navds-body-long",
+          `navds-body-long--${size}`,
+          typoClassNames({
+            spacing,
+            truncate,
+            weight,
+            align,
+            visuallyHidden,
+            textColor,
+          }),
+        )}
+      />
+    );
+  },
 );
 
 export default BodyLong;

package/src/typography/BodyShort.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -50,25 +50,29 @@ export const BodyShort: OverridableComponent<
       ...rest
     },
     ref,
-  ) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(
-        className,
-        "navds-body-short",
-        `navds-body-short--${size}`,
-        typoClassNames({
-          spacing,
-          truncate,
-          weight,
-          align,
-          visuallyHidden,
-          textColor,
-        }),
-      )}
-    />
-  ),
+  ) => {
+    const { cn } = useRenameCSS();
+
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cn(
+          className,
+          "navds-body-short",
+          `navds-body-short--${size}`,
+          typoClassNames({
+            spacing,
+            truncate,
+            weight,
+            align,
+            visuallyHidden,
+            textColor,
+          }),
+        )}
+      />
+    );
+  },
 );
 
 export default BodyShort;