@navikt/ds-react 7.40.0 → 8.0.1

package/esm/util/className.js

@@ -0,0 +1,43 @@
+function toVal(mix) {
+    let result = "";
+    if (typeof mix === "string" || typeof mix === "number") {
+        result += mix;
+    }
+    else if (typeof mix === "object") {
+        if (Array.isArray(mix)) {
+            for (let i = 0; i < mix.length; i++) {
+                if (mix[i]) {
+                    const parsedValue = toVal(mix[i]);
+                    if (parsedValue) {
+                        result && (result += " ");
+                        result += parsedValue;
+                    }
+                }
+            }
+        }
+        else {
+            for (const key in mix) {
+                if (mix[key]) {
+                    result && (result += " ");
+                    result += key;
+                }
+            }
+        }
+    }
+    return result;
+}
+export function cl(...inputs) {
+    let parsedValue = "";
+    let currentValue;
+    let result = "";
+    for (let i = 0; i < inputs.length; i++) {
+        if ((currentValue = inputs[i])) {
+            if ((parsedValue = toVal(currentValue))) {
+                result && (result += " ");
+                result += parsedValue;
+            }
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=className.js.map

package/esm/util/className.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.js","sourceRoot":"","sources":["../../src/util/className.ts"],"names":[],"mappings":"AAaA,SAAS,KAAK,CAAC,GAAkD;IAC/D,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QACvD,MAAM,IAAI,GAAG,CAAC;IAChB,CAAC;SAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;QACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;YACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACpC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;oBACX,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;oBAClC,IAAI,WAAW,EAAE,CAAC;wBAChB,MAAM,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC;wBAC1B,MAAM,IAAI,WAAW,CAAC;oBACxB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;gBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBACb,MAAM,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC;oBAC1B,MAAM,IAAI,GAAG,CAAC;gBAChB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAwB,CAAC;IAC7B,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC;gBACxC,MAAM,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC;gBAC1B,MAAM,IAAI,WAAW,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/esm/util/hooks/descendants/useDescendant.d.ts

@@ -10,5 +10,5 @@ export declare function createDescendantContext<T extends HTMLElement = HTMLElem
     descendants: DescendantsManager<T, K>;
     index: number;
     enabledIndex: number;
-    register: ((instance: T | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+    register: ((instance: T | null) => void) | null;
 }];

package/esm/util/hooks/useMergeRefs.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+type RefCallback<T> = (instance: T | null) => void;
 type Empty = null | undefined;
 type InputRef<I> = React.Ref<I> | Empty;
-type Result<I> = React.RefCallback<I> | null;
+type Result<I> = RefCallback<I> | null;
 /**
  * Merges refs into a single memoized callback ref or `null`.
  * This makes sure multiple refs are updated together and have the same value.

package/esm/util/hooks/useMergeRefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../../src/util/hooks/useMergeRefs.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../../src/util/hooks/useMergeRefs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkClD,MAAM,UAAU,YAAY,CAC1B,CAAc,EACd,CAAc,EACd,CAAe,EACf,CAAe;IAEf,MAAM,OAAO,GAAG,cAAc,CAAC,CAAA,aAAgB,CAAA,CAAC,CAAC,OAAQ,CAAC;IAC1D,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QACnC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,OAAO,CAAC,QAAQ,CAAC;AAC1B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAI,IAAmB;IAClD,MAAM,OAAO,GAAG,cAAc,CAAC,CAAA,aAAgB,CAAA,CAAC,CAAC,OAAQ,CAAC;IAC1D,IAAI,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;QAC9B,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACxB,CAAC;IACD,OAAO,OAAO,CAAC,QAAQ,CAAC;AAC1B,CAAC;AAED,SAAS,aAAa;IACpB,OAAO;QACL,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAsB;QAC/B,IAAI,EAAE,EAAE;KACT,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAChB,OAAmB,EACnB,CAAc,EACd,CAAc,EACd,CAAc,EACd,CAAc;IAEd,OAAO,CACL,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACrB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACrB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACrB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CACtB,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAI,OAAmB,EAAE,OAAsB;IAChE,OAAO,CACL,OAAO,CAAC,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM;QACtC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC,CAC1D,CAAC;AACJ,CAAC;AAED,SAAS,MAAM,CAAI,OAAmB,EAAE,IAAmB;IACzD,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;IAEpB,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,CAAC;QACrC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;QACxB,OAAO;IACT,CAAC;IAED,OAAO,CAAC,QAAQ,GAAG,CAAC,QAAQ,EAAE,EAAE;QAC9B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,CAAC;QAED,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;YACrB,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAC9C,IAAI,CACiB,CAAC;YAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;gBACxC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;gBACpB,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;oBAChB,SAAS;gBACX,CAAC;gBACD,QAAQ,OAAO,GAAG,EAAE,CAAC;oBACnB,KAAK,UAAU,CAAC,CAAC,CAAC;wBAChB,MAAM,UAAU,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAC;wBACjC,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE,CAAC;4BACrC,gBAAgB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC;wBACnC,CAAC;wBACD,MAAM;oBACR,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACb,GAAwC,CAAC,OAAO,GAAG,QAAQ,CAAC;wBAC7D,MAAM;oBACR,CAAC;oBACD,QAAQ;gBACV,CAAC;YACH,CAAC;YAED,OAAO,CAAC,OAAO,GAAG,GAAG,EAAE;gBACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;oBACxC,MAAM,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;oBACpB,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;wBAChB,SAAS;oBACX,CAAC;oBACD,QAAQ,OAAO,GAAG,EAAE,CAAC;wBACnB,KAAK,UAAU,CAAC,CAAC,CAAC;4BAChB,MAAM,eAAe,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;4BAC5C,IAAI,OAAO,eAAe,KAAK,UAAU,EAAE,CAAC;gCAC1C,eAAe,EAAE,CAAC;4BACpB,CAAC;iCAAM,CAAC;gCACN,GAAG,CAAC,IAAI,CAAC,CAAC;4BACZ,CAAC;4BACD,MAAM;wBACR,CAAC;wBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;4BACb,GAAwC,CAAC,OAAO,GAAG,IAAI,CAAC;4BACzD,MAAM;wBACR,CAAC;wBACD,QAAQ;oBACV,CAAC;gBACH,CAAC;YACH,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"}

package/esm/util/link-anchor/LinkAnchor.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, useRef, } from "react";
 import { ArrowRightIcon } from "@navikt/aksel-icons";
 import { Slot } from "../../slot/Slot.js";
-import { useRenameCSS } from "../../theme/Theme.js";
+import { cl } from "../className.js";
 import { composeEventHandlers } from "../composeEventHandlers.js";
 import { createStrictContext } from "../create-strict-context.js";
 import { useMergeRefs } from "../hooks/useMergeRefs.js";
@@ -22,11 +22,10 @@ const { Provider: LinkAnchorContextProvider, useContext: useLinkAnchorContext, }
 });
 const LinkAnchorOverlay = forwardRef((_a, forwardedRef) => {
     var { children, asChild, className, onClick } = _a, restProps = __rest(_a, ["children", "asChild", "className", "onClick"]);
-    const { cn } = useRenameCSS();
     const anchorRef = useRef(null);
     const Component = asChild ? Slot : "div";
     return (React.createElement(LinkAnchorContextProvider, { anchorRef: anchorRef },
-        React.createElement(Component, Object.assign({ ref: forwardedRef }, restProps, { className: cn("navds-link-anchor__overlay", className), onClick: composeEventHandlers(onClick, (e) => {
+        React.createElement(Component, Object.assign({ ref: forwardedRef }, restProps, { className: cl("aksel-link-anchor__overlay", className), onClick: composeEventHandlers(onClick, (e) => {
                 var _a;
                 if (e.target === anchorRef.current ||
                     isTextSelected(anchorRef.current)) {
@@ -51,16 +50,14 @@ const LinkAnchorOverlay = forwardRef((_a, forwardedRef) => {
 });
 const LinkAnchor = forwardRef((_a, forwardedRef) => {
     var { children, asChild, className } = _a, restProps = __rest(_a, ["children", "asChild", "className"]);
-    const { cn } = useRenameCSS();
     const context = useLinkAnchorContext(false);
     const mergedRefs = useMergeRefs(forwardedRef, context === null || context === void 0 ? void 0 : context.anchorRef);
     const Component = asChild ? Slot : "a";
-    return (React.createElement(Component, Object.assign({ ref: mergedRefs }, restProps, { className: cn("navds-link-anchor", className) }), children));
+    return (React.createElement(Component, Object.assign({ ref: mergedRefs }, restProps, { className: cl("aksel-link-anchor", className) }), children));
 });
 const LinkAnchorArrow = forwardRef((_a, forwardedRef) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const { cn } = useRenameCSS();
-    return (React.createElement(ArrowRightIcon, Object.assign({ ref: forwardedRef, "aria-hidden": true, className: cn("navds-link-anchor__arrow", className) }, restProps)));
+    return (React.createElement(ArrowRightIcon, Object.assign({ ref: forwardedRef, "aria-hidden": true, className: cl("aksel-link-anchor__arrow", className) }, restProps)));
 });
 /* -------------------------- LinkAnchor Utilities -------------------------- */
 function isTextSelected(refElement) {

package/esm/util/link-anchor/LinkAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkAnchor.js","sourceRoot":"","sources":["../../../src/util/link-anchor/LinkAnchor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LinkAnchor.js","sourceRoot":"","sources":["../../../src/util/link-anchor/LinkAnchor.tsx"],"names":[],"mappings":"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"}

package/esm/util/virtualfocus/Context.d.ts

@@ -21,7 +21,7 @@ export declare const VirtualFocusDescendantsProvider: import("react").Provider<i
     }>;
     index: number;
     enabledIndex: number;
-    register: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
+    register: ((instance: HTMLDivElement | null) => void) | null;
 };
 export declare const VirtualFocusInternalContextProvider: import("react").FC<{
     virtualFocusIdx: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.40.0",
+  "version": "8.0.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -705,9 +705,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^7.40.0",
-    "@navikt/ds-tokens": "^7.40.0",
-    "clsx": "^2.1.0",
+    "@navikt/aksel-icons": "^8.0.1",
+    "@navikt/ds-tokens": "^8.0.1",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },

package/src/accordion/Accordion.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
+import type { AkselColor } from "../types";
+import { omit } from "../util";
+import { cl } from "../util/className";
 import AccordionContent, { AccordionContentProps } from "./AccordionContent";
 import { AccordionContext } from "./AccordionContext";
 import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
@@ -31,15 +34,9 @@ interface AccordionComponent
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * @deprecated "default" will be the only variant.
-   * @default "default"
+   * @deprecated Will be removed in a future major version. Use `data-color` instead.
    */
   variant?: "default" | "neutral";
-  /**
-   * @default "small"
-   * @deprecated `size`-prop will be the only prop to control the size of the accordion.
-   */
-  headingSize?: "large" | "medium" | "small" | "xsmall";
   /**
    * @default "medium"
    */
@@ -53,6 +50,18 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    * Instances of `Accordion.Item`.
    */
   children: React.ReactNode;
+  /**
+   * @deprecated No longer has any effect.
+   */
+  headingSize?: "large" | "medium" | "small" | "xsmall";
+  /**
+   * Overrides inherited color.
+   *
+   * We recommend only using `accent` and `neutral`. We have disallowed status-colors.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 /**
@@ -77,34 +86,24 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   (
-    {
-      className,
-      variant = "default",
-      headingSize = "small",
-      size = "medium",
-      indent = true,
-      ...rest
-    },
+    { className, variant = "default", size = "medium", indent = true, ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-
     return (
       <AccordionContext.Provider
         value={{
-          variant,
-          headingSize,
           size,
           mounted: true,
+          variant,
         }}
       >
         <div
-          {...rest}
-          className={cn(
-            "navds-accordion",
+          {...omit(rest, ["headingSize"])}
+          className={cl(
+            "aksel-accordion",
             className,
-            `navds-accordion--${size}`,
-            { "navds-accordion--indent": indent },
+            `aksel-accordion--${size}`,
+            { "aksel-accordion--indent": indent },
           )}
           ref={ref}
         />

package/src/accordion/AccordionContent.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { useThemeInternal } from "../theme/Theme";
 import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps
@@ -16,7 +17,6 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
     const context = useContext(AccordionItemContext);
 
     const themeContext = useThemeInternal();
-    const { cn } = useRenameCSS();
 
     if (context === null) {
       console.error(
@@ -30,17 +30,18 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
         {...rest}
         as="div"
         ref={ref}
-        className={cn(
-          "navds-accordion__content",
-          { "navds-accordion__content--closed": !context.open },
+        className={cl(
+          "aksel-accordion__content",
+          { "aksel-accordion__content--closed": !context.open },
           className,
         )}
       >
-        {themeContext?.isDarkside ? (
-          <div className={cn("navds-accordion__content-inner")}>{children}</div>
-        ) : (
-          children
-        )}
+        <div
+          className="aksel-accordion__content-inner"
+          data-color={themeContext.color}
+        >
+          {children}
+        </div>
       </BodyLong>
     );
   },

package/src/accordion/AccordionContext.tsx

@@ -1,15 +1,13 @@
 import { createContext } from "react";
 
 export type AccordionContextProps = {
-  variant?: "default" | "neutral";
-  headingSize?: "large" | "medium" | "small" | "xsmall";
   size?: "large" | "medium" | "small";
   openItems?: number[];
   mounted: boolean;
+  variant?: "default" | "neutral";
 };
 
 export const AccordionContext = createContext<AccordionContextProps | null>({
-  headingSize: "small",
   size: "medium",
   openItems: [],
   mounted: false,

package/src/accordion/AccordionHeader.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
 import { Heading } from "../typography";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
@@ -19,9 +19,6 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);
 
-    const themeContext = useThemeInternal();
-    const { cn } = useRenameCSS();
-
     if (itemContext === null) {
       console.error(
         "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>",
@@ -29,32 +26,27 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
       return null;
     }
 
-    let headingSize = accordionContext?.headingSize ?? "small";
-
-    if (themeContext?.isDarkside) {
-      /* Fallback to "medium" Accordion-size if any other sizes are used */
-      headingSize = accordionContext?.size === "large" ? "small" : "xsmall";
-    }
-
     return (
       <button
         ref={ref}
+        data-color={
+          accordionContext?.variant === "neutral" ? "neutral" : undefined
+        }
         {...rest}
-        className={cn("navds-accordion__header", className)}
+        className={cl("aksel-accordion__header", className)}
         onClick={composeEventHandlers(onClick, itemContext.toggleOpen)}
         aria-expanded={itemContext.open}
         type="button"
       >
-        <span className={cn("navds-accordion__icon-wrapper")}>
+        <span className="aksel-accordion__icon-wrapper">
           <ChevronDownIcon
-            className={cn("navds-accordion__header-chevron")}
+            className="aksel-accordion__header-chevron"
             aria-hidden
           />
         </span>
         <Heading
-          size={headingSize}
+          size={accordionContext?.size === "large" ? "small" : "xsmall"}
           as="span"
-          className={cn("navds-accordion__header-content")}
         >
           {children}
         </Heading>

package/src/accordion/AccordionItem.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, forwardRef, useContext, useRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { omit } from "../util";
+import { cl } from "../util/className";
 import { useControllableState } from "../util/hooks/useControllableState";
 import { AccordionContext } from "./AccordionContext";
 
@@ -47,7 +47,6 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
     });
 
     const context = useContext(AccordionContext);
-    const { cn } = useRenameCSS();
 
     const shouldAnimate = useRef<boolean>(!(Boolean(open) || defaultOpen));
 
@@ -62,10 +61,9 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
 
     return (
       <div
-        className={cn("navds-accordion__item", className, {
-          "navds-accordion__item--open": _open,
-          "navds-accordion__item--neutral": context?.variant === "neutral",
-          "navds-accordion__item--no-animation": !shouldAnimate.current,
+        className={cl("aksel-accordion__item", className, {
+          "aksel-accordion__item--open": _open,
+          "aksel-accordion__item--no-animation": !shouldAnimate.current,
         })}
         data-expanded={_open}
         ref={ref}

package/src/alert/Alert.tsx

@@ -7,9 +7,9 @@ import {
   XMarkOctagonFillIcon,
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -92,7 +92,6 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translate = useI18n("global");
     const Icon = IconMap[variant];
     return (
@@ -101,33 +100,33 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         data-color={variantToRole(variant)}
         data-variant={variant}
         ref={ref}
-        className={cn(
+        className={cl(
           className,
-          "navds-alert",
-          `navds-alert--${variant}`,
-          `navds-alert--${size}`,
+          "aksel-alert",
+          `aksel-alert--${variant}`,
+          `aksel-alert--${size}`,
           {
-            "navds-alert--full-width": fullWidth,
-            "navds-alert--inline": inline,
-            "navds-alert--close-button": closeButton,
+            "aksel-alert--full-width": fullWidth,
+            "aksel-alert--inline": inline,
+            "aksel-alert--close-button": closeButton,
           },
         )}
       >
-        <Icon title={translate(variant)} className={cn("navds-alert__icon")} />
+        <Icon title={translate(variant)} className="aksel-alert__icon" />
         <BodyLong
           as="div"
           size={size}
-          className={cn(
-            "navds-alert__wrapper",
-            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          className={cl(
+            "aksel-alert__wrapper",
+            contentMaxWidth && "aksel-alert__wrapper--maxwidth",
           )}
         >
           {children}
         </BodyLong>
         {closeButton && !inline && (
-          <div className={cn("navds-alert__button-wrapper")}>
+          <div className="aksel-alert__button-wrapper">
             <Button
-              className={cn("navds-alert__button")}
+              className="aksel-alert__button"
               size="small"
               variant="tertiary-neutral"
               onClick={onClose}

package/src/alert/base-alert/close-button/BaseAlertCloseButton.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
-import { useRenameCSS } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 
 type BaseAlertCloseButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -22,7 +22,6 @@ const BaseAlertCloseButton = forwardRef<
   HTMLButtonElement,
   BaseAlertCloseButtonProps
 >(({ className, ...restProps }: BaseAlertCloseButtonProps, forwardedRef) => {
-  const { cn } = useRenameCSS();
   const translate = useI18n("global");
 
   return (
@@ -32,7 +31,7 @@ const BaseAlertCloseButton = forwardRef<
       {...restProps}
       data-color="neutral"
       variant="tertiary-neutral"
-      className={cn(className, "navds-base-alert__close-button")}
+      className={cl(className, "aksel-base-alert__close-button")}
       size="small"
       title={translate("close")}
       icon={<XMarkIcon aria-hidden />}

package/src/alert/base-alert/content/BaseAlertContent.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
+import { useThemeInternal } from "../../../theme/Theme";
+import { cl } from "../../../util/className";
 
 interface BaseAlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -23,7 +24,6 @@ const BaseAlertContent = forwardRef<HTMLDivElement, BaseAlertContentProps>(
     { children, className, ...restProps }: BaseAlertContentProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const themeContext = useThemeInternal();
 
     return (
@@ -31,7 +31,7 @@ const BaseAlertContent = forwardRef<HTMLDivElement, BaseAlertContentProps>(
         ref={forwardedRef}
         data-color={themeContext?.color}
         {...restProps}
-        className={cn(className, "navds-base-alert__content")}
+        className={cl(className, "aksel-base-alert__content")}
       >
         {children}
       </div>

package/src/alert/base-alert/header/BaseAlertHeader.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useBaseAlert } from "../root/BaseAlertRoot.context";
 import { BaseAlertStatusIcon } from "../root/BaseAlertRoot.utils";
@@ -29,7 +29,6 @@ const BaseAlertHeader = forwardRef<HTMLDivElement, BaseAlertHeaderProps>(
     { children, className, icon, ...restProps }: BaseAlertHeaderProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const { status, color, statusId } = useBaseAlert();
     const translate = useI18n("global");
 
@@ -41,10 +40,10 @@ const BaseAlertHeader = forwardRef<HTMLDivElement, BaseAlertHeaderProps>(
         ref={forwardedRef}
         {...restProps}
         data-color={color}
-        className={cn(className, "navds-base-alert__header")}
+        className={cl(className, "aksel-base-alert__header")}
       >
         {headerIcon && (
-          <div className={cn("navds-base-alert__icon")}>{headerIcon}</div>
+          <div className="aksel-base-alert__icon">{headerIcon}</div>
         )}
         {status && (
           <BodyShort id={statusId} aria-hidden visuallyHidden>

package/src/alert/base-alert/root/BaseAlertRoot.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { AkselColor } from "../../../types";
 import { useId } from "../../../util";
+import { cl } from "../../../util/className";
 import { useI18n } from "../../../util/i18n/i18n.hooks";
 import {
   type BaseAlertContextProps,
@@ -20,7 +20,9 @@ interface BaseAlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   size?: BaseAlertContextProps["size"];
   /**
-   * Overrides color
+   * Overrides inherited color.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
    */
   "data-color"?: AkselColor;
   /**
@@ -64,8 +66,6 @@ const BaseAlert = forwardRef<HTMLDivElement, BaseAlertProps>(
     }: BaseAlertProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const statusId = useId();
     const translate = useI18n("global");
 
@@ -85,7 +85,7 @@ const BaseAlert = forwardRef<HTMLDivElement, BaseAlertProps>(
           }
           ref={forwardedRef}
           {...restProps}
-          className={cn(className, "navds-base-alert")}
+          className={cl(className, "aksel-base-alert")}
           data-size={size}
           data-color={alertColor}
           data-variant={type}

package/src/alert/base-alert/title/BaseAlertTitle.tsx

@@ -1,8 +1,7 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../../theme/Theme";
 import { BodyShort } from "../../../typography";
 import { useId } from "../../../util";
+import { cl } from "../../../util/className";
 import { useBaseAlert } from "../root/BaseAlertRoot.context";
 
 interface BaseAlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -37,7 +36,6 @@ const BaseAlertTitle = forwardRef<HTMLHeadingElement, BaseAlertTitleProps>(
     }: BaseAlertTitleProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
     const { size, statusId } = useBaseAlert();
 
     const titleId = useId(idProp);
@@ -49,7 +47,7 @@ const BaseAlertTitle = forwardRef<HTMLHeadingElement, BaseAlertTitleProps>(
         as={as}
         size={size === "medium" ? "large" : "medium"}
         weight="semibold"
-        className={cn(className, "navds-base-alert__title")}
+        className={cl(className, "aksel-base-alert__title")}
         id={titleId}
         aria-labelledby={statusId ? cl(statusId, titleId) : undefined}
       >

package/src/alert/global-alert/root/GlobalAlertRoot.tsx

@@ -20,6 +20,10 @@ import {
 interface GlobalAlertProps
   extends Omit<BaseAlert.RootProps, "type" | "global" | "data-color"> {
   status: Exclude<BaseAlert.RootProps["status"], undefined>;
+  /**
+   * data-color has no effect on GlobalAlert.
+   */
+  "data-color"?: never;
   /**
    *  Whether title and content are centered or not.
    * @default true

package/src/alert/local-alert/root/LocalAlertRoot.tsx

@@ -20,6 +20,10 @@ import {
 interface LocalAlertProps
   extends Omit<BaseAlert.RootProps, "type" | "global" | "data-color"> {
   status: Exclude<BaseAlert.RootProps["status"], undefined>;
+  /**
+   * data-color has no effect on LocalAlert.
+   */
+  "data-color"?: never;
 }
 
 interface LocalAlertComponent