@navikt/ds-react 8.0.0 → 8.1.0

package/src/timeline/TimelineRow.tsx

@@ -1,8 +1,8 @@
 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 { cl } from "../utils/helpers";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -38,7 +38,6 @@ 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");
@@ -61,7 +60,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           <BodyShort
             as={headingTag}
             id={`timeline-row-${id}`}
-            className={cn("navds-timeline__row-label")}
+            className="aksel-timeline__row-label"
             size="small"
           >
             {icon}
@@ -69,8 +68,8 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
           </BodyShort>
         )}
         <div
-          className={cn("navds-timeline__row", {
-            "navds-timeline__row--active": active,
+          className={cl("aksel-timeline__row", {
+            "aksel-timeline__row--active": active,
           })}
         >
           {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
@@ -86,7 +85,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
                     end: format(latest.end, translate("dateFormat")),
                   })
             }
-            className={cn("navds-timeline__row-periods", className)}
+            className={cl("aksel-timeline__row-periods", className)}
             onKeyDown={(e) => {
               if (e.key === "ArrowDown" || e.key === "ArrowUp") {
                 e.preventDefault();

package/src/timeline/period/ClickablePeriod.tsx

@@ -12,9 +12,9 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import React, { useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { cl } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -51,7 +51,6 @@ const ClickablePeriod = React.memo(
     restProps,
     periodRef,
   }: TimelineClickablePeriodProps) => {
-    const { cn } = useRenameCSS();
     const [open, setOpen] = useState(false);
     const { index } = useRowContext();
     const { firstFocus } = usePeriodContext();
@@ -101,12 +100,12 @@ const ClickablePeriod = React.memo(
             mergedRef?.(r);
           }}
           aria-label={label}
-          className={cn(
-            "navds-timeline__period--clickable",
+          className={cl(
+            "aksel-timeline__period--clickable",
             getConditionalClasses(cropped, direction, status),
             restProps?.className,
             {
-              "navds-timeline__period--selected": isActive,
+              "aksel-timeline__period--selected": isActive,
             },
           )}
           aria-expanded={children ? open : undefined}
@@ -138,7 +137,7 @@ const ClickablePeriod = React.memo(
             },
           })}
         >
-          <span className={cn("navds-timeline__period--inner")}>{icon}</span>
+          <span className="aksel-timeline__period--inner">{icon}</span>
         </button>
         {children && open && (
           <FloatingFocusManager
@@ -148,7 +147,7 @@ const ClickablePeriod = React.memo(
             returnFocus={false}
           >
             <div
-              className={cn("navds-timeline__popover")}
+              className="aksel-timeline__popover"
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"

package/src/timeline/period/NonClickablePeriod.tsx

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

package/src/timeline/pin/PinInternal.tsx

@@ -13,9 +13,8 @@ import {
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useState } from "react";
-import { useRenameCSS } from "../../theme/Theme";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.hooks";
+import { useMergeRefs } from "../../utils/hooks";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 import { position } from "../utils/calc";
 
@@ -33,7 +32,6 @@ export interface TimelinePinProps
 
 export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
   ({ date, children, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     const { startDate, endDate, direction } = useTimelineContext();
     const [open, setOpen] = useState(false);
 
@@ -81,13 +79,13 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
     return (
       <>
         <div
-          className={cn("navds-timeline__pin-wrapper")}
+          className="aksel-timeline__pin-wrapper"
           style={{ [direction]: `${position(date, startDate, endDate)}%` }}
         >
           <button
             {...rest}
             ref={mergedRef}
-            className={cn("navds-timeline__pin-button")}
+            className="aksel-timeline__pin-button"
             aria-label={label}
             type="button"
             aria-expanded={children ? open : undefined}
@@ -111,7 +109,7 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
             returnFocus={false}
           >
             <div
-              className={cn("navds-timeline__popover")}
+              className="aksel-timeline__popover"
               data-placement={placement}
               ref={refs.setFloating}
               role="dialog"

package/src/timeline/utils/period.ts

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import { format } from "date-fns";
-import type { TFunction } from "../../util/i18n/i18n.types";
+import { cl } from "../../utils/helpers";
+import type { TFunction } from "../../utils/i18n/i18n.types";
 import type { PeriodProps } from "../period/types";
 
 export const getConditionalClasses = (
@@ -8,13 +8,12 @@ export const getConditionalClasses = (
   direction: string,
   status: PeriodProps["status"],
 ) => {
-  /* 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":
+  return cl(`aksel-timeline__period aksel-timeline__period--${status}`, {
+    "aksel-timeline__period--connected-both": cropped === "both",
+    "aksel-timeline__period--connected-right":
       (cropped === "right" && direction === "left") ||
       (cropped === "left" && direction === "right"),
-    "navds-timeline__period--connected-left":
+    "aksel-timeline__period--connected-left":
       (cropped === "left" && direction === "left") ||
       (cropped === "right" && direction === "right"),
   });

package/src/timeline/utils/timeline.ts

@@ -1,7 +1,6 @@
 import React, { ReactNode } from "react";
 import type { TimelinePeriod, TimelineRow, TimelineRowProps } from "..";
-import { omit } from "../../util";
-import { getChildRef } from "../../util/getChildRef";
+import { omit } from "../../utils-external";
 import { Period } from "./types.external";
 
 type TimelineRowPropsWithRef = React.ComponentProps<typeof TimelineRow>;
@@ -70,3 +69,11 @@ export const parseRows = (rowChildren: ReactNode[]) => {
 
   return parsedChildren;
 };
+
+function getChildRef<T>(
+  children: React.ReactElement<React.RefAttributes<T>>,
+): React.Ref<T> | undefined {
+  return Object.prototype.propertyIsEnumerable.call(children.props, "ref")
+    ? (children.props as any).ref // React 19 (children.ref still works, but gives a warning)
+    : (children as any).ref; // React <19
+}

package/src/timeline/zoom/ZoomButton.tsx

@@ -7,9 +7,8 @@ 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 { useI18n } from "../../utils/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 
 export interface TimelineZoomButtonProps {
@@ -38,8 +37,6 @@ export const ZoomButton: ZoomButtonType = forwardRef(
     const translate = useI18n("Timeline");
     const dateFormat = translate("dateFormat");
 
-    const { cn } = useRenameCSS();
-
     let startOfRange: Date;
 
     if (interval === "month") {
@@ -73,7 +70,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
           }
           ref={ref}
           {...rest}
-          className={cn("navds-timeline__zoom-button")}
+          className="aksel-timeline__zoom-button"
           onClick={() => {
             setStart(startOfRange);
           }}

package/src/timeline/zoom/index.tsx

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

package/src/toggle-group/ToggleGroup.context.ts

@@ -1,6 +1,6 @@
 import { createContext as ReactCreateContext } from "react";
-import { createStrictContext } from "../util/create-strict-context";
-import { createDescendantContext } from "../util/hooks/descendants/useDescendant";
+import { createStrictContext } from "../utils/helpers";
+import { createDescendantContext } from "../utils/hooks";
 import { ToggleGroupProps } from "./ToggleGroup.types";
 import { useToggleGroup } from "./useToggleGroup";
 

package/src/toggle-group/ToggleGroup.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { Label } from "../typography";
-import { useId } from "../util";
+import { useId } from "../utils-external";
+import { cl } from "../utils/helpers";
 import {
   ToggleGroupDescendantsProvider,
   ToggleGroupProvider,
@@ -54,7 +54,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const descendants = useToggleGroupDescendants();
 
     const toggleGroupContext = useToggleGroup({
@@ -85,8 +84,8 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       <ToggleGroupDescendantsProvider value={descendants}>
         <ToggleGroupProvider {...context}>
           <div
-            className={cn("navds-toggle-group__wrapper", className, {
-              "navds-toggle-group__wrapper--fill": fill,
+            className={cl("aksel-toggle-group__wrapper", className, {
+              "aksel-toggle-group__wrapper--fill": fill,
             })}
             data-color={color ?? variantToColor(variant)}
           >
@@ -94,7 +93,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               <Label
                 as="div"
                 size={size}
-                className={cn("navds-toggle-group__label")}
+                className="aksel-toggle-group__label"
                 id={labelId}
               >
                 {label}
@@ -104,9 +103,9 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               aria-labelledby={label ? labelId : undefined}
               {...rest}
               ref={ref}
-              className={cn(
-                "navds-toggle-group",
-                `navds-toggle-group--${size}`,
+              className={cl(
+                "aksel-toggle-group",
+                `aksel-toggle-group--${size}`,
               )}
               role="radiogroup"
             >

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

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

package/src/toggle-group/parts/useToggleItem.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { composeEventHandlers } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
 import {
   useToggleGroupContext,
   useToggleGroupDescendant,

package/src/toggle-group/useToggleGroup.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { useControllableState } from "../utils/hooks";
 import { ToggleGroupProps } from "./ToggleGroup.types";
 
 export function useToggleGroup({

package/src/tooltip/Tooltip.tsx

@@ -14,12 +14,11 @@ import {
 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";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useId } from "../utils-external";
+import { Slot } from "../utils/components/slot/Slot";
+import { cl } from "../utils/helpers";
+import { useControllableState, useMergeRefs } from "../utils/hooks";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -123,8 +122,6 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -225,9 +222,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 },
                 role: "tooltip",
                 id: ariaId,
-                className: cn(
-                  "navds-tooltip",
-                  "navds-detail navds-detail--small",
+                className: cl(
+                  "aksel-tooltip",
+                  "aksel-detail aksel-detail--small",
                   className,
                 ),
               })}
@@ -236,13 +233,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             >
               {content}
               {keys && (
-                <span className={cn("navds-tooltip__keys")} aria-hidden>
+                <span className="aksel-tooltip__keys" aria-hidden>
                   {keys.map((key) => (
-                    <Detail
-                      as="kbd"
-                      key={key}
-                      className={cn("navds-tooltip__key")}
-                    >
+                    <Detail as="kbd" key={key} className="aksel-tooltip__key">
                       {key}
                     </Detail>
                   ))}
@@ -253,7 +246,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                   ref={(node) => {
                     arrowRef.current = node;
                   }}
-                  className={cn("navds-tooltip__arrow")}
+                  className="aksel-tooltip__arrow"
                   style={{
                     left: arrowX != null ? `${arrowX}px` : "",
                     top: arrowY != null ? `${arrowY}px` : "",

package/src/typography/BodyLong.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -62,16 +62,14 @@ export const BodyLong: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-body-long",
-          `navds-body-long--${size}`,
+          "aksel-body-long",
+          `aksel-body-long--${size}`,
           typoClassNames({
             spacing,
             truncate,

package/src/typography/BodyShort.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -60,16 +60,14 @@ export const BodyShort: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-body-short",
-          `navds-body-short--${size}`,
+          "aksel-body-short",
+          `aksel-body-short--${size}`,
           typoClassNames({
             spacing,
             truncate,

package/src/typography/Detail.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -62,15 +62,13 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
-
       return (
         <Component
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-detail",
+            "aksel-detail",
             typoClassNames({
               spacing,
               truncate,
@@ -81,7 +79,7 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
               uppercase,
             }),
             {
-              "navds-detail--small": size === "small",
+              "aksel-detail--small": size === "small",
             },
           )}
         />

package/src/typography/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -52,22 +52,20 @@ export const ErrorMessage: OverridableComponent<
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-error-message",
-          "navds-label",
+        className={cl(
+          "aksel-error-message",
+          "aksel-label",
           className,
           typoClassNames({
             spacing,
           }),
           {
-            "navds-label--small": size === "small",
-            "navds-error-message--show-icon": showIcon,
+            "aksel-label--small": size === "small",
+            "aksel-error-message--show-icon": showIcon,
           },
         )}
       >

package/src/typography/Heading.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import type { AkselColor } from "../types";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -61,17 +61,16 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
       },
       ref,
     ) => {
-      const { cn } = useRenameCSS();
       const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag
           {...rest}
           ref={ref}
-          className={cn(
+          className={cl(
             className,
-            "navds-heading",
-            `navds-heading--${size}`,
+            "aksel-heading",
+            `aksel-heading--${size}`,
             typoClassNames({
               spacing,
               align,

package/src/typography/Ingress.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { OverridableComponent } from "../util/types";
+import type { OverridableComponent } from "../utils-external";
+import { cl } from "../utils/helpers";
 
 export interface IngressProps
   extends React.HTMLAttributes<HTMLParagraphElement> {
@@ -32,14 +32,12 @@ export interface IngressProps
  */
 export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
   forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => {
-    const { cn } = useRenameCSS();
-
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cn(className, "navds-ingress", {
-          "navds-typo--spacing": !!spacing,
+        className={cl(className, "aksel-ingress", {
+          "aksel-typo--spacing": !!spacing,
         })}
       />
     );