@navikt/ds-react 7.15.0 → 7.16.0

package/src/internal-header/InternalHeader.tsx

@@ -1,6 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { Theme, useThemeInternal } from "../theme/Theme";
+import { Theme, useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -59,7 +58,8 @@ interface InternalHeaderComponent
  * ```jsx
  * <InternalHeader>
  *   <InternalHeader.Title as="h1">Sykepenger</InternalHeader.Title>
- *   <InternalHeader.User name="Ola Normann" className="ml-auto" />
+ *   <Spacer />
+ *   <InternalHeader.User name="Ola Normann"  />
  * </InternalHeader>
  * ```
  * @example
@@ -79,6 +79,7 @@ interface InternalHeaderComponent
  */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
   const themeContext = useThemeInternal(false);
+  const { cn } = useRenameCSS();
 
   /*
    * Component is always in "dark" mode, so we manually override global theme.
@@ -89,7 +90,7 @@ export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
         <header
           {...rest}
           ref={ref}
-          className={cl("navds-internalheader", className)}
+          className={cn("navds-internalheader", className)}
         />
       </Theme>
     );
@@ -100,7 +101,7 @@ export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
       data-theme="dark"
       {...rest}
       ref={ref}
-      className={cl("navds-internalheader", className)}
+      className={cn("navds-internalheader", className)}
     />
   );
 }) as InternalHeaderComponent;

package/src/internal-header/InternalHeaderButton.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface InternalHeaderButtonProps
@@ -12,12 +12,16 @@ export interface InternalHeaderButtonProps
 export const InternalHeaderButton: OverridableComponent<
   InternalHeaderButtonProps,
   HTMLButtonElement
-> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => (
-  <Component
-    {...rest}
-    ref={ref}
-    className={cl("navds-internalheader__button", className)}
-  />
-));
+> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cn("navds-internalheader__button", className)}
+    />
+  );
+});
 
 export default InternalHeaderButton;

package/src/internal-header/InternalHeaderTitle.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface InternalHeaderTitleProps
@@ -13,15 +13,23 @@ export interface InternalHeaderTitleProps
 export const InternalHeaderTitle: OverridableComponent<
   InternalHeaderTitleProps,
   HTMLAnchorElement
-> = forwardRef(({ as: Component = "a", children, className, ...rest }, ref) => (
-  <Component
-    {...rest}
-    ref={ref}
-    size="xsmall"
-    className={cl("navds-internalheader__title", "navds-body-short", className)}
-  >
-    <span>{children}</span>
-  </Component>
-));
+> = forwardRef(({ as: Component = "a", children, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      size="xsmall"
+      className={cn(
+        "navds-internalheader__title",
+        "navds-body-short",
+        className,
+      )}
+    >
+      <span>{children}</span>
+    </Component>
+  );
+});
 
 export default InternalHeaderTitle;

package/src/internal-header/InternalHeaderUser.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyShort, Detail } from "../typography";
 
 export interface InternalHeaderUserProps
@@ -17,19 +17,23 @@ export interface InternalHeaderUserProps
 export const InternalHeaderUser = forwardRef<
   HTMLDivElement,
   InternalHeaderUserProps
->(({ className, name, description, ...rest }, ref) => (
-  <div
-    {...rest}
-    ref={ref}
-    className={cl("navds-internalheader__user", className)}
-  >
-    <span>
-      <BodyShort size="small" as="div">
-        {name}
-      </BodyShort>
-      {description && <Detail as="div">{description}</Detail>}
-    </span>
-  </div>
-));
+>(({ className, name, description, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={cn("navds-internalheader__user", className)}
+    >
+      <span>
+        <BodyShort size="small" as="div">
+          {name}
+        </BodyShort>
+        {description && <Detail as="div">{description}</Detail>}
+      </span>
+    </div>
+  );
+});
 
 export default InternalHeaderUser;

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyShort, Detail } from "../typography";
 import { OverridableComponent } from "../util/types";
 import InternalHeaderButton from "./InternalHeaderButton";
@@ -20,21 +20,25 @@ export interface InternalHeaderUserButtonProps
 export const InternalHeaderUserButton: OverridableComponent<
   InternalHeaderUserButtonProps,
   HTMLButtonElement
-> = forwardRef(({ as, name, description, className, ...rest }, ref) => (
-  <InternalHeaderButton
-    {...rest}
-    as={as}
-    ref={ref}
-    className={cl("navds-internalheader__user-button", className)}
-  >
-    <div>
-      <BodyShort size="small" as="div">
-        {name}
-      </BodyShort>
-      {description && <Detail as="div">{description}</Detail>}
-    </div>
-    <ChevronDownIcon aria-hidden />
-  </InternalHeaderButton>
-));
+> = forwardRef(({ as, name, description, className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <InternalHeaderButton
+      {...rest}
+      as={as}
+      ref={ref}
+      className={cn("navds-internalheader__user-button", className)}
+    >
+      <div>
+        <BodyShort size="small" as="div">
+          {name}
+        </BodyShort>
+        {description && <Detail as="div">{description}</Detail>}
+      </div>
+      <ChevronDownIcon aria-hidden />
+    </InternalHeaderButton>
+  );
+});
 
 export default InternalHeaderUserButton;

package/src/layout/base/BasePrimitive.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React from "react";
 import { Slot } from "../../slot/Slot";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -253,6 +252,7 @@ export const BasePrimitive = ({
   gridColumn,
 }: BasePrimitiveProps) => {
   const themeContext = useThemeInternal(false);
+  const { cn } = useRenameCSS();
   const prefix = themeContext ? "ax" : "a";
 
   const style: React.CSSProperties = {
@@ -292,7 +292,7 @@ export const BasePrimitive = ({
 
   return (
     <Slot
-      className={cl({
+      className={cn({
         className,
         "navds-r-p": padding,
         "navds-r-pi": paddingInline,

package/src/layout/bleed/Bleed.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { getResponsiveProps } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -82,6 +81,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     ref,
   ) => {
     const themeContext = useThemeInternal(false);
+    const { cn } = useRenameCSS();
     const prefix = themeContext ? "ax" : "a";
 
     let style: React.CSSProperties = {
@@ -136,7 +136,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     return (
       <Comp
         {...rest}
-        className={cl("navds-bleed", className, {
+        className={cn("navds-bleed", className, {
           "navds-bleed--padding": reflectivePadding,
         })}
         ref={ref}

package/src/layout/box/Box.darkside.tsx

@@ -1,4 +1,3 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import type {
   BorderColorKeys,
@@ -9,6 +8,7 @@ import type {
   StaticDefaultBgKeys,
 } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
+import { useRenameCSS } from "../../theme/Theme";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
@@ -107,6 +107,7 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
       },
       ref,
     ) => {
+      const { cn } = useRenameCSS();
       const style: React.CSSProperties = {
         ..._style,
         "--__axc-box-background": background
@@ -141,7 +142,7 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cl("navds-box", className, {
+            className={cn("navds-box", className, {
               "navds-box-bg": background,
               "navds-box-border-color": borderColor,
               "navds-box-border-width": borderWidth,

package/src/layout/box/Box.tsx

@@ -1,8 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { type BorderRadiusKeys } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
@@ -110,6 +109,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
       ref,
     ) => {
       const themeContext = useThemeInternal(false);
+      const { cn } = useRenameCSS();
 
       if (
         process.env.NODE_ENV !== "production" &&
@@ -159,7 +159,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cl("navds-box", className, {
+            className={cn("navds-box", className, {
               "navds-box-bg": background,
               "navds-box-border-color": borderColor,
               "navds-box-border-width": borderWidth,

package/src/layout/grid/HGrid.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, omit } from "../../util";
 import BasePrimitive, {
   PRIMITIVE_PROPS,
@@ -80,6 +79,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
     ) => {
       const themeContext = useThemeInternal(false);
       const prefix = themeContext ? "ax" : "a";
+      const { cn } = useRenameCSS();
 
       const styles: React.CSSProperties = {
         ...style,
@@ -95,7 +95,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
           <Comp
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
-            className={cl("navds-hgrid", className, {
+            className={cn("navds-hgrid", className, {
               "navds-hgrid-gap": gap,
               "navds-hgrid-align": align,
             })}

package/src/layout/page/Page.tsx

@@ -1,6 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent } from "../../util";
 import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
@@ -55,6 +54,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       ref,
     ) => {
       const themeContext = useThemeInternal(false);
+      const { cn } = useRenameCSS();
 
       if (process.env.NODE_ENV !== "production" && themeContext && background) {
         console.warn(
@@ -72,12 +72,12 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       return (
         <Component
           {...rest}
-          className={cl("navds-page", className)}
+          className={cn("navds-page", className)}
           ref={ref}
           style={style}
         >
           <div
-            className={cl({
+            className={cn({
               "navds-page__content--fullheight": belowFold,
               "navds-page__content--grow": !belowFold,
               "navds-page__content--padding": contentBlockPadding === "end",

package/src/layout/page/parts/PageBlock.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
 import { OverridableComponent } from "../../../util/types";
 
 export const widths = ["text", "md", "lg", "xl", "2xl"] as const;
@@ -58,10 +58,12 @@ export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
 export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
   forwardRef(
     ({ as: Component = "div", gutters, className, width, ...rest }, ref) => {
+      const { cn } = useRenameCSS();
+
       return (
         <Component
           {...rest}
-          className={cl(
+          className={cn(
             "navds-pageblock",
             width && `navds-pageblock--${width}`,
             className,

package/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
+import { useRenameCSS } from "../../theme/Theme";
 import { BreakpointsAlias } from "../utilities/types";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
@@ -40,6 +40,7 @@ const Responsive = forwardRef<
     },
     ref,
   ) => {
+    const { cn } = useRenameCSS();
     const aboveProp = variant === "show" ? above : below;
     const belowProp = variant === "show" ? below : above;
 
@@ -49,7 +50,7 @@ const Responsive = forwardRef<
       <Comp
         {...rest}
         ref={ref}
-        className={cl("navds-responsive", className, {
+        className={cn("navds-responsive", className, {
           [`navds-responsive__above--${aboveProp}`]: aboveProp,
           [`navds-responsive__below--${belowProp}`]: belowProp,
         })}

package/src/layout/stack/Spacer.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useRenameCSS } from "../../theme/Theme";
 
 /**
  * Layout-primitive for auto-spacing between elements
@@ -12,6 +13,9 @@ import React from "react";
  *  <MyComponent />
  * </HStack>
  */
-export const Spacer = () => <span className="navds-stack__spacer" />;
+export const Spacer = () => {
+  const { cn } = useRenameCSS();
+  return <span className={cn("navds-stack__spacer")} />;
+};
 
 export default Spacer;

package/src/layout/stack/Stack.tsx

@@ -1,7 +1,6 @@
-import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
 import BasePrimitive, {
@@ -86,6 +85,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
     ) => {
       const themeContext = useThemeInternal(false);
       const prefix = themeContext ? "ax" : "a";
+      const { cn } = useRenameCSS();
 
       const style: React.CSSProperties = {
         ..._style,
@@ -103,7 +103,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
             {...omit(rest, PRIMITIVE_PROPS)}
             ref={ref}
             style={style}
-            className={cl("navds-stack", className, {
+            className={cn("navds-stack", className, {
               "navds-vstack": direction === "column",
               "navds-hstack": direction === "row",
               "navds-stack-gap": gap,

package/src/link/Link.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface LinkProps
@@ -61,16 +61,19 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
         ...rest
       },
       ref,
-    ) => (
-      <Component
-        {...rest}
-        ref={ref}
-        className={cl("navds-link", className, `navds-link--${variant}`, {
-          "navds-link--remove-underline": !underline,
-          "navds-link--inline-text": inlineText,
-        })}
-      />
-    ),
+    ) => {
+      const { cn } = useRenameCSS();
+      return (
+        <Component
+          {...rest}
+          ref={ref}
+          className={cn("navds-link", className, `navds-link--${variant}`, {
+            "navds-link--remove-underline": !underline,
+            "navds-link--inline-text": inlineText,
+          })}
+        />
+      );
+    },
   );
 
 export default Link;

package/src/link-panel/LinkPanel.tsx

@@ -1,7 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { Panel } from "../panel";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 import {
   LinkPanelDescription,
@@ -59,16 +59,21 @@ export const LinkPanelComponent: OverridableComponent<
   HTMLAnchorElement
 > = forwardRef(
   ({ children, as = "a", border = true, className, ...rest }, ref) => {
+    const { cn } = useRenameCSS();
+
     return (
       <Panel
         {...rest}
         as={as}
         border={border}
         ref={ref}
-        className={cl("navds-link-panel", className)}
+        className={cn("navds-link-panel", className)}
       >
-        <div className="navds-link-panel__content">{children}</div>
-        <ChevronRightIcon className="navds-link-panel__chevron" aria-hidden />
+        <div className={cn("navds-link-panel__content")}>{children}</div>
+        <ChevronRightIcon
+          className={cn("navds-link-panel__chevron")}
+          aria-hidden
+        />
       </Panel>
     );
   },

package/src/link-panel/LinkPanelDescription.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
 
 export interface LinkPanelDescriptionProps
@@ -10,13 +10,17 @@ export interface LinkPanelDescriptionProps
 export const LinkPanelDescription = forwardRef<
   HTMLDivElement,
   LinkPanelDescriptionProps
->(({ className, ...rest }, ref) => (
-  <BodyLong
-    {...rest}
-    as="div"
-    ref={ref}
-    className={cl("navds-link-panel__description", className)}
-  />
-));
+>(({ className, ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <BodyLong
+      {...rest}
+      as="div"
+      ref={ref}
+      className={cn("navds-link-panel__description", className)}
+    />
+  );
+});
 
 export default LinkPanelDescription;

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface LinkPanelTitleProps
@@ -10,17 +10,21 @@ export interface LinkPanelTitleProps
 export const LinkPanelTitle: OverridableComponent<
   LinkPanelTitleProps,
   HTMLDivElement
-> = forwardRef(({ className, as: Component = "div", ...rest }, ref) => (
-  <Component
-    {...rest}
-    ref={ref}
-    className={cl(
-      "navds-link-panel__title",
-      "navds-heading",
-      "navds-heading--medium",
-      className,
-    )}
-  />
-));
+> = forwardRef(({ className, as: Component = "div", ...rest }, ref) => {
+  const { cn } = useRenameCSS();
+
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cn(
+        "navds-link-panel__title",
+        "navds-heading",
+        "navds-heading--medium",
+        className,
+      )}
+    />
+  );
+});
 
 export default LinkPanelTitle;

package/src/list/List.Item.tsx

@@ -1,5 +1,5 @@
-import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { useRenameCSS } from "../theme/Theme";
 import { BodyLong } from "../typography";
 import { ListContext } from "./List.context";
 import type { ListItemProps } from "./List.types";
@@ -10,6 +10,7 @@ import type { ListItemProps } from "./List.types";
 export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType, size } = useContext(ListContext);
+    const { cn } = useRenameCSS();
 
     if (listType === "ol" && icon) {
       console.warn(
@@ -18,10 +19,10 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
     }
 
     return (
-      <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
+      <li {...rest} ref={ref} className={cn("navds-list__item", className)}>
         {listType === "ul" && (
           <div
-            className={cl("navds-list__item-marker", {
+            className={cn("navds-list__item-marker", {
               "navds-list__item-marker--icon": icon,
               "navds-list__item-marker--bullet": !icon,
             })}