@navikt/ds-react 8.0.0 → 8.1.0

package/src/table/ColumnHeader.tsx

@@ -4,7 +4,6 @@ import {
   SortDownIcon,
   SortUpIcon,
 } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import { TableContext } from "./context";
 
@@ -25,9 +24,8 @@ export type ColumnHeaderType = React.ForwardRefExoticComponent<
 >;
 
 export const ColumnHeader: ColumnHeaderType = forwardRef(
-  ({ className, children, sortable = false, sortKey, ...rest }, ref) => {
+  ({ children, sortable = false, sortKey, ...rest }, ref) => {
     const context = useContext(TableContext);
-    const { cn } = useRenameCSS();
 
     if (sortable && !sortKey) {
       console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
@@ -37,7 +35,6 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
       <HeaderCell
         scope="col"
         ref={ref}
-        className={cn(className)}
         aria-sort={
           sortable
             ? context?.sort?.orderBy === sortKey
@@ -50,7 +47,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
         {sortable ? (
           <button
             type="button"
-            className={cn("navds-table__sort-button")}
+            className="aksel-table__sort-button"
             onClick={
               sortable && sortKey
                 ? () => context?.onSortChange?.(sortKey)

package/src/table/DataCell.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyShort } from "../typography";
+import { cl } from "../utils/helpers";
 
 export interface DataCellProps
   extends React.TdHTMLAttributes<HTMLTableCellElement> {
@@ -17,13 +17,12 @@ export interface DataCellProps
 
 export const DataCell = forwardRef<HTMLTableCellElement, DataCellProps>(
   ({ className, children = "", align, textSize, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <BodyShort
         as="td"
         ref={ref}
-        className={cn("navds-table__data-cell", className, {
-          [`navds-table__data-cell--align-${align}`]: align,
+        className={cl("aksel-table__data-cell", className, {
+          [`aksel-table__data-cell--align-${align}`]: align,
         })}
         size={textSize}
         {...rest}

package/src/table/ExpandableRow.tsx

@@ -1,10 +1,9 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useId } from "../util/hooks";
-import { useControllableState } from "../util/hooks/useControllableState";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { useId } from "../utils-external";
+import { cl, composeEventHandlers } from "../utils/helpers";
+import { useControllableState } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
@@ -80,7 +79,6 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -107,31 +105,31 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         <Row
           {...rest}
           ref={ref}
-          className={cn("navds-table__expandable-row", className, {
-            "navds-table__expandable-row--open": _open,
-            "navds-table__expandable-row--expansion-disabled":
+          className={cl("aksel-table__expandable-row", className, {
+            "aksel-table__expandable-row--open": _open,
+            "aksel-table__expandable-row--expansion-disabled":
               expansionDisabled,
-            "navds-table__expandable-row--clickable": expandOnRowClick,
+            "aksel-table__expandable-row--clickable": expandOnRowClick,
           })}
           onClick={composeEventHandlers(onClick, handleRowClick)}
         >
           {togglePlacement === "right" && children}
           <DataCell
-            className={cn("navds-table__toggle-expand-cell", {
-              "navds-table__toggle-expand-cell--open": _open,
+            className={cl("aksel-table__toggle-expand-cell", {
+              "aksel-table__toggle-expand-cell--open": _open,
             })}
             onClick={!expansionDisabled ? expansionHandler : () => null}
           >
             {!expansionDisabled && (
               <button
-                className={cn("navds-table__toggle-expand-button")}
+                className="aksel-table__toggle-expand-button"
                 type="button"
                 aria-controls={id}
                 aria-expanded={_open}
                 onClick={expansionHandler}
               >
                 <ChevronDownIcon
-                  className={cn("navds-table__expandable-icon")}
+                  className="aksel-table__expandable-icon"
                   title={_open ? translate("showLess") : translate("showMore")}
                 />
               </button>
@@ -141,21 +139,16 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         </Row>
         <tr
           data-state={_open ? "open" : "closed"}
-          className={cn("navds-table__expanded-row")}
+          className="aksel-table__expanded-row"
           aria-hidden={!_open}
           id={id}
         >
-          <td
-            colSpan={colSpan}
-            className={cn("navds-table__expanded-row-cell")}
-          >
+          <td colSpan={colSpan} className="aksel-table__expanded-row-cell">
             <AnimateHeight
-              className={cn("navds-table__expanded-row-collapse")}
-              innerClassName={cn(
-                `navds-table__expanded-row-content navds-table__expanded-row-content--gutter-${
-                  contentGutter ?? togglePlacement
-                }`,
-              )}
+              className="aksel-table__expanded-row-collapse"
+              innerClassName={`aksel-table__expanded-row-content aksel-table__expanded-row-content--gutter-${
+                contentGutter ?? togglePlacement
+              }`}
               height={_open ? "auto" : 0}
               duration={150}
               easing="cubic-bezier(0.39,0.57,0.56,1)"

package/src/table/Header.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 
 export type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
@@ -8,12 +8,11 @@ export type HeaderType = React.ForwardRefExoticComponent<
 >;
 
 export const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => {
-  const { cn } = useRenameCSS();
   return (
     <thead
       {...rest}
       ref={ref}
-      className={cn("navds-table__header", className)}
+      className={cl("aksel-table__header", className)}
     />
   );
 });

package/src/table/HeaderCell.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 
 export interface HeaderCellProps
   extends React.ThHTMLAttributes<HTMLTableCellElement> {
@@ -21,13 +21,12 @@ export type HeaderCellType = React.ForwardRefExoticComponent<
 
 export const HeaderCell: HeaderCellType = forwardRef(
   ({ className, children, align, textSize, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <th
         ref={ref}
-        className={cn("navds-table__header-cell", "navds-label", className, {
-          [`navds-table__header-cell--align-${align}`]: align,
-          "navds-label--small": textSize === "small",
+        className={cl("aksel-table__header-cell", "aksel-label", className, {
+          [`aksel-table__header-cell--align-${align}`]: align,
+          "aksel-label--small": textSize === "small",
         })}
         {...rest}
       >

package/src/table/Row.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
-import { composeEventHandlers } from "../util/composeEventHandlers";
+import { cl, composeEventHandlers } from "../utils/helpers";
 import { isElementInteractiveTarget } from "./Table.utils";
 
 export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
@@ -39,8 +38,6 @@ export const Row: RowType = forwardRef(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
       if (!onRowClick) {
         return;
@@ -55,9 +52,9 @@ export const Row: RowType = forwardRef(
       <tr
         {...rest}
         ref={ref}
-        className={cn("navds-table__row", className, {
-          "navds-table__row--selected": selected,
-          "navds-table__row--shade-on-hover": shadeOnHover,
+        className={cl("aksel-table__row", className, {
+          "aksel-table__row--selected": selected,
+          "aksel-table__row--shade-on-hover": shadeOnHover,
         })}
         onClick={composeEventHandlers(onClick, handleRowClick)}
         data-interactive={!!onRowClick}

package/src/table/Table.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 import Body from "./Body";
 import ColumnHeader from "./ColumnHeader";
 import DataCell from "./DataCell";
@@ -95,15 +95,14 @@ export const Table = forwardRef(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     return (
       <TableContext.Provider value={{ onSortChange, sort }}>
         <table
           {...rest}
           ref={ref}
-          className={cn("navds-table", `navds-table--${size}`, className, {
-            "navds-table--zebra-stripes": zebraStripes,
-            "navds-table--sticky-header": stickyHeader,
+          className={cl("aksel-table", `aksel-table--${size}`, className, {
+            "aksel-table--zebra-stripes": zebraStripes,
+            "aksel-table--sticky-header": stickyHeader,
           })}
         />
       </TableContext.Provider>

package/src/tabs/Tabs.context.ts

@@ -1,5 +1,5 @@
-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 { TabsProps } from "./Tabs.types";
 import { useTabs } from "./useTabs";
 

package/src/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../utils/helpers";
 import {
   TabsDescendantsProvider,
   TabsProvider,
@@ -74,7 +74,6 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const descendants = useTabsDescendants();
 
     const tabsContext = useTabs({ defaultValue, value, onChange, id });
@@ -98,7 +97,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
             ref={ref}
             {...rest}
             id={id}
-            className={cn("navds-tabs", className, `navds-tabs--${size}`)}
+            className={cl("aksel-tabs", className, `aksel-tabs--${size}`)}
           >
             {children}
           </div>

package/src/tabs/parts/tab/Tab.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
-import { OverridableComponent } from "../../../util";
+import type { OverridableComponent } from "../../../utils-external";
+import { cl } from "../../../utils/helpers";
 import { useTabsContext } from "../../Tabs.context";
 import { useTab } from "./useTab";
 
@@ -45,7 +45,6 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
       },
       ref: React.ForwardedRef<HTMLButtonElement>,
     ) => {
-      const { cn } = useRenameCSS();
       const tabCtx = useTab({ value, onClick, onFocus, disabled }, ref);
       const ctx = useTabsContext();
 
@@ -58,14 +57,14 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
         <Component
           ref={tabCtx.ref}
           {...rest}
-          className={cn(
-            "navds-tabs__tab",
-            `navds-tabs__tab--${ctx?.size ?? "medium"}`,
-            `navds-tabs__tab-icon--${ctx?.iconPosition}`,
+          className={cl(
+            "aksel-tabs__tab",
+            `aksel-tabs__tab--${ctx?.size ?? "medium"}`,
+            `aksel-tabs__tab-icon--${ctx?.iconPosition}`,
             className,
             {
-              "navds-tabs__tab--icon-only": icon && !label,
-              "navds-tabs__tab--fill": ctx.fill,
+              "aksel-tabs__tab--icon-only": icon && !label,
+              "aksel-tabs__tab--fill": ctx.fill,
             },
           )}
           role="tab"
@@ -80,7 +79,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
         >
           <BodyShort
             as="span"
-            className={cn("navds-tabs__tab-inner")}
+            className="aksel-tabs__tab-inner"
             size={ctx?.size}
           >
             <span aria-hidden={!!label}>{icon}</span>

package/src/tabs/parts/tab/useTab.ts

@@ -1,5 +1,5 @@
-import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
+import { composeEventHandlers } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import { useTabsContext, useTabsDescendant } from "../../Tabs.context";
 
 export interface UseTabProps {

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../utils/helpers";
 
 interface ScrollButtonProps {
   hidden: boolean;
@@ -9,12 +9,10 @@ interface ScrollButtonProps {
 }
 
 function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps) {
-  const { cn } = useRenameCSS();
-
   return (
     <div
-      className={cn("navds-tabs__scroll-button", {
-        "navds-tabs__scroll-button--hidden": hidden,
+      className={cl("aksel-tabs__scroll-button", {
+        "aksel-tabs__scroll-button--hidden": hidden,
       })}
       onClick={onClick}
       aria-hidden

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

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

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import { debounce } from "../../../util";
-import { ownerDocument } from "../../../util/owner";
+import { debounce } from "../../../utils-external";
+import { ownerDocument } from "../../../utils/helpers";
 
 export function useScrollButtons(
   listRef: React.RefObject<HTMLDivElement | null>,

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

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../utils/helpers";
 import { useTabPanel } from "./useTabPanel";
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -28,13 +28,12 @@ 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={cn("navds-tabs__tabpanel", className)}
+        className={cl("aksel-tabs__tabpanel", className)}
         role="tabpanel"
         tabIndex={0}
         aria-labelledby={rest["aria-labelledby"] ?? ctx.labelledbyId}

package/src/tabs/useTabs.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { useId } from "../util";
-import { useControllableState } from "../util/hooks/useControllableState";
+import { useId } from "../utils-external";
+import { useControllableState } from "../utils/hooks";
 import { TabsProps } from "./Tabs.types";
 
 export function useTabs({

package/src/tag/Tag.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyShort } from "../typography";
+import { cl } from "../utils/helpers";
 
 type legacyVariants =
   | "warning"
@@ -77,7 +77,6 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const filledVariant = variant?.endsWith("-filled") && "strong";
     const moderateVariant = variant?.endsWith("-moderate") && "moderate";
 
@@ -96,9 +95,9 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         ref={ref}
         as="span"
         size={size === "medium" ? "medium" : "small"}
-        className={cn("navds-tag", className, `navds-tag--${size}`)}
+        className={cl("aksel-tag", className, `aksel-tag--${size}`)}
       >
-        {icon && <span className={cn("navds-tag__icon--left")}>{icon}</span>}
+        {icon && <span className="aksel-tag__icon--left">{icon}</span>}
         {children}
       </BodyShort>
     );

package/src/theme/Theme.tsx

@@ -1,49 +1,9 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { Slot } from "../slot/Slot";
 import { AkselColor } from "../types";
-import { createStrictContext } from "../util/create-strict-context";
-import { AsChildProps } from "../util/types";
+import { Slot } from "../utils/components/slot/Slot";
+import { cl, createStrictContext } from "../utils/helpers";
+import type { AsChildProps } from "../utils/types";
 
-/* -------------------------------------------------------------------------- */
-/*                               CSS Translation                              */
-/* -------------------------------------------------------------------------- */
-type RenameCSSContext = {
-  /**
-   * Extends `clsx` with custom className handler
-   */
-  cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
-};
-
-export const compositeClassFunction = (
-  ...inputs: Parameters<typeof cl>
-): string => {
-  const classes = cl(inputs)
-    /* Replaces only if start of string  "navds- navds-"*/
-    .replace(/^navds-/g, "aksel-")
-    /* Replaces all " navds-" hits */
-    .replace(/\snavds-/g, " aksel-");
-
-  return classes.trim();
-};
-
-const { Provider: RenameCSSProvider, useContext: useRenameCSS } =
-  createStrictContext<RenameCSSContext>({
-    name: "RenameCSS",
-    defaultValue: { cn: compositeClassFunction },
-  });
-
-const RenameCSS = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <RenameCSSProvider cn={compositeClassFunction}>
-      {children}
-    </RenameCSSProvider>
-  );
-};
-
-/* -------------------------------------------------------------------------- */
-/*                               Theme provider                               */
-/* -------------------------------------------------------------------------- */
 const DEFAULT_COLOR: AkselColor = "accent";
 
 type ThemeContext = {
@@ -104,19 +64,17 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
 
     return (
       <ThemeProvider theme={theme} color={color} isRoot={false}>
-        <RenameCSS>
-          <SlotElement
-            ref={ref}
-            className={cl("aksel-theme", className, theme)}
-            data-background={hasBackground}
-            data-color={color ?? DEFAULT_COLOR}
-          >
-            {children}
-          </SlotElement>
-        </RenameCSS>
+        <SlotElement
+          ref={ref}
+          className={cl("aksel-theme", className, theme)}
+          data-background={hasBackground}
+          data-color={color ?? DEFAULT_COLOR}
+        >
+          {children}
+        </SlotElement>
       </ThemeProvider>
     );
   },
 );
 
-export { Theme, useRenameCSS, useThemeInternal };
+export { Theme, useThemeInternal };

package/src/timeline/AxisLabels.tsx

@@ -15,10 +15,9 @@ 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";
+import { useDateLocale, useI18n } from "../utils/i18n/i18n.hooks";
+import { TFunction } from "../utils/i18n/i18n.types";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";
@@ -150,13 +149,11 @@ export const AxisLabels = ({
 
   const labels = getLabels(startDate, endDate, direction, locale, translate);
 
-  const { cn } = useRenameCSS();
-
   return (
-    <div className={cn("navds-timeline__axislabels")} aria-hidden="true">
+    <div className="aksel-timeline__axislabels" aria-hidden="true">
       {labels.filter(isVisible).map((etikett) => (
         <Detail
-          className={cn("navds-timeline__axislabels-label")}
+          className="aksel-timeline__axislabels-label"
           as="div"
           key={etikett.label}
           style={{

package/src/timeline/Timeline.tsx

@@ -1,6 +1,5 @@
 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 TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { RowContext } from "./hooks/useRowContext";
@@ -96,7 +95,6 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const isMultipleRows = Array.isArray(children);
 
     const firstFocusabled = useRef<
@@ -215,7 +213,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
         }}
       >
         <div {...rest} ref={ref}>
-          <div className={cn("navds-timeline")}>
+          <div className="aksel-timeline">
             <AxisLabels templates={axisLabelTemplates} />
 
             {pins.map((PinChild, i) => (