@navikt/ds-react 7.40.0 → 8.0.1

package/cjs/accordion/Accordion.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
+import type { AkselColor } from "../types";
 import { AccordionContentProps } from "./AccordionContent";
 import { AccordionHeaderProps } from "./AccordionHeader";
 import { AccordionItemProps } from "./AccordionItem";
@@ -18,15 +20,9 @@ interface AccordionComponent extends React.ForwardRefExoticComponent<AccordionPr
 }
 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"
      */
@@ -40,6 +36,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>;
 }
 /**
  * A component that displays collapsible content sections.

package/cjs/accordion/Accordion.js

@@ -49,7 +49,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Accordion = void 0;
 const react_1 = __importStar(require("react"));
-const Theme_1 = require("../theme/Theme");
+const util_1 = require("../util");
+const className_1 = require("../util/className");
 const AccordionContent_1 = __importDefault(require("./AccordionContent"));
 const AccordionContext_1 = require("./AccordionContext");
 const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
@@ -75,15 +76,13 @@ const AccordionItem_1 = __importDefault(require("./AccordionItem"));
  * ```
  */
 exports.Accordion = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, variant = "default", headingSize = "small", size = "medium", indent = true } = _a, rest = __rest(_a, ["className", "variant", "headingSize", "size", "indent"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
+    var { className, variant = "default", size = "medium", indent = true } = _a, rest = __rest(_a, ["className", "variant", "size", "indent"]);
     return (react_1.default.createElement(AccordionContext_1.AccordionContext.Provider, { value: {
-            variant,
-            headingSize,
             size,
             mounted: true,
+            variant,
         } },
-        react_1.default.createElement("div", Object.assign({}, rest, { className: cn("navds-accordion", className, `navds-accordion--${size}`, { "navds-accordion--indent": indent }), ref: ref }))));
+        react_1.default.createElement("div", Object.assign({}, (0, util_1.omit)(rest, ["headingSize"]), { className: (0, className_1.cl)("aksel-accordion", className, `aksel-accordion--${size}`, { "aksel-accordion--indent": indent }), ref: ref }))));
 });
 exports.Accordion.Header = AccordionHeader_1.default;
 exports.Accordion.Content = AccordionContent_1.default;

package/cjs/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAA8C;AAC9C,0EAA6E;AAC7E,yDAAsD;AACtD,wEAA0E;AAC1E,oEAAoE;AAoDpE;;;;;;;;;;;;;;;;;;;GAmBG;AACU,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,OAAO,EACrB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,IAAI,OAEd,EADI,IAAI,cANT,yDAOC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,OAAO,CACL,8BAAC,mCAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,OAAO;YACP,WAAW;YACX,IAAI;YACJ,OAAO,EAAE,IAAI;SACd;QAED,uDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,SAAS,EACT,oBAAoB,IAAI,EAAE,EAC1B,EAAE,yBAAyB,EAAE,MAAM,EAAE,CACtC,EACD,GAAG,EAAE,GAAG,IACR,CACwB,CAC7B,CAAC;AACJ,CAAC,CACoB,CAAC;AAExB,iBAAS,CAAC,MAAM,GAAG,yBAAe,CAAC;AACnC,iBAAS,CAAC,OAAO,GAAG,0BAAgB,CAAC;AACrC,iBAAS,CAAC,IAAI,GAAG,uBAAa,CAAC;AAE/B,kBAAe,iBAAS,CAAC"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,kCAA+B;AAC/B,iDAAuC;AACvC,0EAA6E;AAC7E,yDAAsD;AACtD,wEAA0E;AAC1E,oEAAoE;AA0DpE;;;;;;;;;;;;;;;;;;;GAmBG;AACU,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,CACE,EAA2E,EAC3E,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,MAAM,GAAG,IAAI,OAAW,EAAN,IAAI,cAAzE,0CAA2E,CAAF;IAGzE,OAAO,CACL,8BAAC,mCAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,IAAI;YACJ,OAAO,EAAE,IAAI;YACb,OAAO;SACR;QAED,uDACM,IAAA,WAAI,EAAC,IAAI,EAAE,CAAC,aAAa,CAAC,CAAC,IAC/B,SAAS,EAAE,IAAA,cAAE,EACX,iBAAiB,EACjB,SAAS,EACT,oBAAoB,IAAI,EAAE,EAC1B,EAAE,yBAAyB,EAAE,MAAM,EAAE,CACtC,EACD,GAAG,EAAE,GAAG,IACR,CACwB,CAC7B,CAAC;AACJ,CAAC,CACoB,CAAC;AAExB,iBAAS,CAAC,MAAM,GAAG,yBAAe,CAAC;AACnC,iBAAS,CAAC,OAAO,GAAG,0BAAgB,CAAC;AACrC,iBAAS,CAAC,IAAI,GAAG,uBAAa,CAAC;AAE/B,kBAAe,iBAAS,CAAC"}

package/cjs/accordion/AccordionContent.js

@@ -47,17 +47,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const Theme_1 = require("../theme/Theme");
 const typography_1 = require("../typography");
+const className_1 = require("../util/className");
 const AccordionItem_1 = require("./AccordionItem");
 const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
     const context = (0, react_1.useContext)(AccordionItem_1.AccordionItemContext);
     const themeContext = (0, Theme_1.useThemeInternal)();
-    const { cn } = (0, Theme_1.useRenameCSS)();
     if (context === null) {
         console.error("<Accordion.Content> has to be used within an <Accordion.Item>");
         return null;
     }
-    return (react_1.default.createElement(typography_1.BodyLong, Object.assign({}, rest, { as: "div", ref: ref, className: cn("navds-accordion__content", { "navds-accordion__content--closed": !context.open }, className) }), (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? (react_1.default.createElement("div", { className: cn("navds-accordion__content-inner") }, children)) : (children)));
+    return (react_1.default.createElement(typography_1.BodyLong, Object.assign({}, rest, { as: "div", ref: ref, className: (0, className_1.cl)("aksel-accordion__content", { "aksel-accordion__content--closed": !context.open }, className) }),
+        react_1.default.createElement("div", { className: "aksel-accordion__content-inner", "data-color": themeContext.color }, children)));
 });
 exports.default = AccordionContent;
 //# sourceMappingURL=AccordionContent.js.map

package/cjs/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AACtD,0CAAgE;AAChE,8CAAyC;AACzC,mDAAuD;AAUvD,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EACjC,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,oCAAoB,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IACxC,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BAAC,qBAAQ,oBACH,IAAI,IACR,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,0BAA0B,EAC1B,EAAE,kCAAkC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EACrD,SAAS,CACV,KAEA,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAC,CAAC,CAAC,CAC1B,uCAAK,SAAS,EAAE,EAAE,CAAC,gCAAgC,CAAC,IAAG,QAAQ,CAAO,CACvE,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACQ,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AACtD,0CAAkD;AAClD,8CAAyC;AACzC,iDAAuC;AACvC,mDAAuD;AAUvD,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EACjC,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,oCAAoB,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IAExC,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BAAC,qBAAQ,oBACH,IAAI,IACR,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,0BAA0B,EAC1B,EAAE,kCAAkC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EACrD,SAAS,CACV;QAED,uCACE,SAAS,EAAC,gCAAgC,gBAC9B,YAAY,CAAC,KAAK,IAE7B,QAAQ,CACL,CACG,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}

package/cjs/accordion/AccordionContext.d.ts

@@ -1,8 +1,7 @@
 export type AccordionContextProps = {
-    variant?: "default" | "neutral";
-    headingSize?: "large" | "medium" | "small" | "xsmall";
     size?: "large" | "medium" | "small";
     openItems?: number[];
     mounted: boolean;
+    variant?: "default" | "neutral";
 };
 export declare const AccordionContext: import("react").Context<AccordionContextProps | null>;

package/cjs/accordion/AccordionContext.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionContext = void 0;
 const react_1 = require("react");
 exports.AccordionContext = (0, react_1.createContext)({
-    headingSize: "small",
     size: "medium",
     openItems: [],
     mounted: false,

package/cjs/accordion/AccordionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContext.js","sourceRoot":"","sources":["../../src/accordion/AccordionContext.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AAUzB,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAA+B;IAC1E,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,EAAE;IACb,OAAO,EAAE,KAAK;CACf,CAAC,CAAC"}
+{"version":3,"file":"AccordionContext.js","sourceRoot":"","sources":["../../src/accordion/AccordionContext.tsx"],"names":[],"mappings":";;;AAAA,iCAAsC;AASzB,QAAA,gBAAgB,GAAG,IAAA,qBAAa,EAA+B;IAC1E,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,EAAE;IACb,OAAO,EAAE,KAAK;CACf,CAAC,CAAC"}

package/cjs/accordion/AccordionHeader.js

@@ -46,31 +46,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
-const Theme_1 = require("../theme/Theme");
 const typography_1 = require("../typography");
+const className_1 = require("../util/className");
 const composeEventHandlers_1 = require("../util/composeEventHandlers");
 const AccordionContext_1 = require("./AccordionContext");
 const AccordionItem_1 = require("./AccordionItem");
 const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
-    var _b;
     var { children, className, onClick } = _a, rest = __rest(_a, ["children", "className", "onClick"]);
     const itemContext = (0, react_1.useContext)(AccordionItem_1.AccordionItemContext);
     const accordionContext = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
-    const themeContext = (0, Theme_1.useThemeInternal)();
-    const { cn } = (0, Theme_1.useRenameCSS)();
     if (itemContext === null) {
         console.error("<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>");
         return null;
     }
-    let headingSize = (_b = accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.headingSize) !== null && _b !== void 0 ? _b : "small";
-    if (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) {
-        /* Fallback to "medium" Accordion-size if any other sizes are used */
-        headingSize = (accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.size) === "large" ? "small" : "xsmall";
-    }
-    return (react_1.default.createElement("button", Object.assign({ ref: ref }, rest, { className: cn("navds-accordion__header", className), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, itemContext.toggleOpen), "aria-expanded": itemContext.open, type: "button" }),
-        react_1.default.createElement("span", { className: cn("navds-accordion__icon-wrapper") },
-            react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: cn("navds-accordion__header-chevron"), "aria-hidden": true })),
-        react_1.default.createElement(typography_1.Heading, { size: headingSize, as: "span", className: cn("navds-accordion__header-content") }, children)));
+    return (react_1.default.createElement("button", Object.assign({ ref: ref, "data-color": (accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.variant) === "neutral" ? "neutral" : undefined }, rest, { className: (0, className_1.cl)("aksel-accordion__header", className), onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, itemContext.toggleOpen), "aria-expanded": itemContext.open, type: "button" }),
+        react_1.default.createElement("span", { className: "aksel-accordion__icon-wrapper" },
+            react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { className: "aksel-accordion__header-chevron", "aria-hidden": true })),
+        react_1.default.createElement(typography_1.Heading, { size: (accordionContext === null || accordionContext === void 0 ? void 0 : accordionContext.size) === "large" ? "small" : "xsmall", as: "span" }, children)));
 });
 exports.default = AccordionHeader;
 //# sourceMappingURL=AccordionHeader.js.map

package/cjs/accordion/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AACtD,qDAAsD;AACtD,0CAAgE;AAChE,8CAAwC;AACxC,uEAAoE;AACpE,yDAAsD;AACtD,mDAAuD;AAUvD,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CAAC,EAAyC,EAAE,GAAG,EAAE,EAAE;;QAAlD,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,OAAW,EAAN,IAAI,cAAvC,oCAAyC,CAAF;IACtC,MAAM,WAAW,GAAG,IAAA,kBAAU,EAAC,oCAAoB,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,mCAAgB,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IACxC,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;QACzB,OAAO,CAAC,KAAK,CACX,2GAA2G,CAC5G,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,WAAW,GAAG,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,WAAW,mCAAI,OAAO,CAAC;IAE3D,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAE,CAAC;QAC7B,qEAAqE;QACrE,WAAW,GAAG,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;IACxE,CAAC;IAED,OAAO,CACL,wDACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,EACnD,OAAO,EAAE,IAAA,2CAAoB,EAAC,OAAO,EAAE,WAAW,CAAC,UAAU,CAAC,mBAC/C,WAAW,CAAC,IAAI,EAC/B,IAAI,EAAC,QAAQ;QAEb,wCAAM,SAAS,EAAE,EAAE,CAAC,+BAA+B,CAAC;YAClD,8BAAC,6BAAe,IACd,SAAS,EAAE,EAAE,CAAC,iCAAiC,CAAC,wBAEhD,CACG;QACP,8BAAC,oBAAO,IACN,IAAI,EAAE,WAAW,EACjB,EAAE,EAAC,MAAM,EACT,SAAS,EAAE,EAAE,CAAC,iCAAiC,CAAC,IAE/C,QAAQ,CACD,CACH,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,eAAe,CAAC"}
+{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AACtD,qDAAsD;AACtD,8CAAwC;AACxC,iDAAuC;AACvC,uEAAoE;AACpE,yDAAsD;AACtD,mDAAuD;AAUvD,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CAAC,EAAyC,EAAE,GAAG,EAAE,EAAE;QAAlD,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,OAAW,EAAN,IAAI,cAAvC,oCAAyC,CAAF;IACtC,MAAM,WAAW,GAAG,IAAA,kBAAU,EAAC,oCAAoB,CAAC,CAAC;IACrD,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,mCAAgB,CAAC,CAAC;IAEtD,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;QACzB,OAAO,CAAC,KAAK,CACX,2GAA2G,CAC5G,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,wDACE,GAAG,EAAE,GAAG,gBAEN,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,OAAO,MAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAE7D,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,EACnD,OAAO,EAAE,IAAA,2CAAoB,EAAC,OAAO,EAAE,WAAW,CAAC,UAAU,CAAC,mBAC/C,WAAW,CAAC,IAAI,EAC/B,IAAI,EAAC,QAAQ;QAEb,wCAAM,SAAS,EAAC,+BAA+B;YAC7C,8BAAC,6BAAe,IACd,SAAS,EAAC,iCAAiC,wBAE3C,CACG;QACP,8BAAC,oBAAO,IACN,IAAI,EAAE,CAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,MAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC7D,EAAE,EAAC,MAAM,IAER,QAAQ,CACD,CACH,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,eAAe,CAAC"}

package/cjs/accordion/AccordionItem.js

@@ -46,8 +46,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionItemContext = void 0;
 const react_1 = __importStar(require("react"));
-const Theme_1 = require("../theme/Theme");
 const util_1 = require("../util");
+const className_1 = require("../util/className");
 const useControllableState_1 = require("../util/hooks/useControllableState");
 const AccordionContext_1 = require("./AccordionContext");
 exports.AccordionItemContext = (0, react_1.createContext)(null);
@@ -59,7 +59,6 @@ const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
         onChange: onOpenChange,
     });
     const context = (0, react_1.useContext)(AccordionContext_1.AccordionContext);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const shouldAnimate = (0, react_1.useRef)(!(Boolean(open) || defaultOpen));
     const handleOpen = () => {
         _setOpen((x) => !x);
@@ -68,10 +67,9 @@ const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
     if (!(context === null || context === void 0 ? void 0 : context.mounted)) {
         console.error("<Accordion.Item> has to be used within an <Accordion>");
     }
-    return (react_1.default.createElement("div", Object.assign({ className: cn("navds-accordion__item", className, {
-            "navds-accordion__item--open": _open,
-            "navds-accordion__item--neutral": (context === null || context === void 0 ? void 0 : context.variant) === "neutral",
-            "navds-accordion__item--no-animation": !shouldAnimate.current,
+    return (react_1.default.createElement("div", Object.assign({ className: (0, className_1.cl)("aksel-accordion__item", className, {
+            "aksel-accordion__item--open": _open,
+            "aksel-accordion__item--no-animation": !shouldAnimate.current,
         }), "data-expanded": _open, ref: ref }, (0, util_1.omit)(rest, ["onClick"])),
         react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {
                 open: _open,

package/cjs/accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,0CAA8C;AAC9C,kCAA+B;AAC/B,6EAA0E;AAC1E,yDAAsD;AA8BzC,QAAA,oBAAoB,GAC/B,IAAA,qBAAa,EAAmC,IAAI,CAAC,CAAC;AAExD,MAAM,aAAa,GAAG,IAAA,kBAAU,EAC9B,CACE,EAAyE,EACzE,GAAG,EACH,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,OAAW,EAAN,IAAI,cAAvE,gEAAyE,CAAF;IAGvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,2CAAoB,EAAC;QAC7C,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,YAAY;KACvB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,mCAAgB,CAAC,CAAC;IAC7C,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,MAAM,aAAa,GAAG,IAAA,cAAM,EAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC;IAEvE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACpB,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IAC/B,CAAC,CAAC;IAEF,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA,EAAE,CAAC;QACtB,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,CACL,qDACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE;YAChD,6BAA6B,EAAE,KAAK;YACpC,gCAAgC,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,MAAK,SAAS;YAChE,qCAAqC,EAAE,CAAC,aAAa,CAAC,OAAO;SAC9D,CAAC,mBACa,KAAK,EACpB,GAAG,EAAE,GAAG,IACJ,IAAA,WAAI,EAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC;QAE3B,8BAAC,4BAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;gBACL,IAAI,EAAE,KAAK;gBACX,UAAU,EAAE,UAAU;aACvB,IAEA,QAAQ,CACqB,CAC5B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../src/accordion/AccordionItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,kCAA+B;AAC/B,iDAAuC;AACvC,6EAA0E;AAC1E,yDAAsD;AA8BzC,QAAA,oBAAoB,GAC/B,IAAA,qBAAa,EAAmC,IAAI,CAAC,CAAC;AAExD,MAAM,aAAa,GAAG,IAAA,kBAAU,EAC9B,CACE,EAAyE,EACzE,GAAG,EACH,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,OAAW,EAAN,IAAI,cAAvE,gEAAyE,CAAF;IAGvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,2CAAoB,EAAC;QAC7C,YAAY,EAAE,WAAW;QACzB,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,YAAY;KACvB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,mCAAgB,CAAC,CAAC;IAE7C,MAAM,aAAa,GAAG,IAAA,cAAM,EAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC;IAEvE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACpB,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IAC/B,CAAC,CAAC;IAEF,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAA,EAAE,CAAC;QACtB,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,CACL,qDACE,SAAS,EAAE,IAAA,cAAE,EAAC,uBAAuB,EAAE,SAAS,EAAE;YAChD,6BAA6B,EAAE,KAAK;YACpC,qCAAqC,EAAE,CAAC,aAAa,CAAC,OAAO;SAC9D,CAAC,mBACa,KAAK,EACpB,GAAG,EAAE,GAAG,IACJ,IAAA,WAAI,EAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC;QAE3B,8BAAC,4BAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE;gBACL,IAAI,EAAE,KAAK;gBACX,UAAU,EAAE,UAAU;aACvB,IAEA,QAAQ,CACqB,CAC5B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAa,CAAC"}

package/cjs/alert/Alert.js

@@ -48,8 +48,8 @@ exports.Alert = void 0;
 const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../button");
-const Theme_1 = require("../theme/Theme");
 const typography_1 = require("../typography");
+const className_1 = require("../util/className");
 const i18n_hooks_1 = require("../util/i18n/i18n.hooks");
 const IconMap = {
     error: aksel_icons_1.XMarkOctagonFillIcon,
@@ -68,18 +68,17 @@ const IconMap = {
  */
 exports.Alert = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, variant, size = "medium", fullWidth = false, contentMaxWidth = true, inline = false, closeButton = false, onClose } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "contentMaxWidth", "inline", "closeButton", "onClose"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const translate = (0, i18n_hooks_1.useI18n)("global");
     const Icon = IconMap[variant];
-    return (react_1.default.createElement("div", Object.assign({}, rest, { "data-color": variantToRole(variant), "data-variant": variant, ref: ref, className: cn(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, {
-            "navds-alert--full-width": fullWidth,
-            "navds-alert--inline": inline,
-            "navds-alert--close-button": closeButton,
+    return (react_1.default.createElement("div", Object.assign({}, rest, { "data-color": variantToRole(variant), "data-variant": variant, ref: ref, className: (0, className_1.cl)(className, "aksel-alert", `aksel-alert--${variant}`, `aksel-alert--${size}`, {
+            "aksel-alert--full-width": fullWidth,
+            "aksel-alert--inline": inline,
+            "aksel-alert--close-button": closeButton,
         }) }),
-        react_1.default.createElement(Icon, { title: translate(variant), className: cn("navds-alert__icon") }),
-        react_1.default.createElement(typography_1.BodyLong, { as: "div", size: size, className: cn("navds-alert__wrapper", contentMaxWidth && "navds-alert__wrapper--maxwidth") }, children),
-        closeButton && !inline && (react_1.default.createElement("div", { className: cn("navds-alert__button-wrapper") },
-            react_1.default.createElement(button_1.Button, { className: cn("navds-alert__button"), size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: translate("close") }) })))));
+        react_1.default.createElement(Icon, { title: translate(variant), className: "aksel-alert__icon" }),
+        react_1.default.createElement(typography_1.BodyLong, { as: "div", size: size, className: (0, className_1.cl)("aksel-alert__wrapper", contentMaxWidth && "aksel-alert__wrapper--maxwidth") }, children),
+        closeButton && !inline && (react_1.default.createElement("div", { className: "aksel-alert__button-wrapper" },
+            react_1.default.createElement(button_1.Button, { className: "aksel-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: translate("close") }) })))));
 });
 function variantToRole(variant) {
     switch (variant) {

package/cjs/alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAM6B;AAC7B,sCAAmC;AACnC,0CAA8C;AAE9C,8CAAyC;AACzC,wDAAkD;AAkDlD,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,kCAAoB;IAC3B,OAAO,EAAE,6CAA+B;IACxC,IAAI,EAAE,uCAAyB;IAC/B,OAAO,EAAE,qCAAuB;CACjC,CAAC;AAEF;;;;;;;;GAQG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,IAAI,EACtB,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cAVT,gHAWC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,OAAO,CACL,uDACM,IAAI,kBACI,aAAa,CAAC,OAAO,CAAC,kBACpB,OAAO,EACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB;YACE,yBAAyB,EAAE,SAAS;YACpC,qBAAqB,EAAE,MAAM;YAC7B,2BAA2B,EAAE,WAAW;SACzC,CACF;QAED,8BAAC,IAAI,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,mBAAmB,CAAC,GAAI;QACvE,8BAAC,qBAAQ,IACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,gCAAgC,CACpD,IAEA,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,uCAAK,SAAS,EAAE,EAAE,CAAC,6BAA6B,CAAC;YAC/C,8BAAC,eAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC,EACpC,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,8BAAC,uBAAS,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,GAAI,GAC9C,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,aAAa,CAAC,OAA8B;IACnD,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB,KAAK,OAAO;YACV,OAAO,QAAQ,CAAC;QAClB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,MAAM,CAAC;IAClB,CAAC;AACH,CAAC;AAED,kBAAe,aAAK,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAM6B;AAC7B,sCAAmC;AAEnC,8CAAyC;AACzC,iDAAuC;AACvC,wDAAkD;AAkDlD,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,kCAAoB;IAC3B,OAAO,EAAE,6CAA+B;IACxC,IAAI,EAAE,uCAAyB;IAC/B,OAAO,EAAE,qCAAuB;CACjC,CAAC;AAEF;;;;;;;;GAQG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,IAAI,EACtB,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cAVT,gHAWC,CADQ;IAIT,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IACpC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,OAAO,CACL,uDACM,IAAI,kBACI,aAAa,CAAC,OAAO,CAAC,kBACpB,OAAO,EACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB;YACE,yBAAyB,EAAE,SAAS;YACpC,qBAAqB,EAAE,MAAM;YAC7B,2BAA2B,EAAE,WAAW;SACzC,CACF;QAED,8BAAC,IAAI,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACjE,8BAAC,qBAAQ,IACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,cAAE,EACX,sBAAsB,EACtB,eAAe,IAAI,gCAAgC,CACpD,IAEA,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,8BAAC,eAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,8BAAC,uBAAS,IAAC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,GAAI,GAC9C,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,aAAa,CAAC,OAA8B;IACnD,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB,KAAK,OAAO;YACV,OAAO,QAAQ,CAAC;QAClB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,MAAM,CAAC;IAClB,CAAC;AACH,CAAC;AAED,kBAAe,aAAK,CAAC"}

package/cjs/alert/base-alert/close-button/BaseAlertCloseButton.js

@@ -48,7 +48,7 @@ exports.BaseAlertCloseButton = void 0;
 const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
 const button_1 = require("../../../button");
-const Theme_1 = require("../../../theme/Theme");
+const className_1 = require("../../../util/className");
 const i18n_hooks_1 = require("../../../util/i18n/i18n.hooks");
 /**
  * @see 🏷️ {@link BaseAlertCloseButtonProps}
@@ -64,9 +64,8 @@ const i18n_hooks_1 = require("../../../util/i18n/i18n.hooks");
  */
 const BaseAlertCloseButton = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const translate = (0, i18n_hooks_1.useI18n)("global");
-    return (react_1.default.createElement(button_1.Button, Object.assign({ ref: forwardedRef, type: "button" }, restProps, { "data-color": "neutral", variant: "tertiary-neutral", className: cn(className, "navds-base-alert__close-button"), size: "small", title: translate("close"), icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { "aria-hidden": true }) })));
+    return (react_1.default.createElement(button_1.Button, Object.assign({ ref: forwardedRef, type: "button" }, restProps, { "data-color": "neutral", variant: "tertiary-neutral", className: (0, className_1.cl)(className, "aksel-base-alert__close-button"), size: "small", title: translate("close"), icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { "aria-hidden": true }) })));
 });
 exports.BaseAlertCloseButton = BaseAlertCloseButton;
 //# sourceMappingURL=BaseAlertCloseButton.js.map

package/cjs/alert/base-alert/close-button/BaseAlertCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertCloseButton.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/close-button/BaseAlertCloseButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAAgD;AAChD,4CAAyC;AACzC,gDAAoD;AACpD,8DAAwD;AAIxD;;;;;;;;;;;GAWG;AACH,MAAM,oBAAoB,GAAG,IAAA,kBAAU,EAGrC,CAAC,EAAsD,EAAE,YAAY,EAAE,EAAE;QAAxE,EAAE,SAAS,OAA2C,EAAtC,SAAS,cAAzB,aAA2B,CAAF;IAC1B,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAC,eAAM,kBACL,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,IACT,SAAS,kBACF,SAAS,EACpB,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,gCAAgC,CAAC,EAC1D,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EACzB,IAAI,EAAE,8BAAC,uBAAS,0BAAe,IAC/B,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEM,oDAAoB"}
+{"version":3,"file":"BaseAlertCloseButton.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/close-button/BaseAlertCloseButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAAgD;AAChD,4CAAyC;AACzC,uDAA6C;AAC7C,8DAAwD;AAIxD;;;;;;;;;;;GAWG;AACH,MAAM,oBAAoB,GAAG,IAAA,kBAAU,EAGrC,CAAC,EAAsD,EAAE,YAAY,EAAE,EAAE;QAAxE,EAAE,SAAS,OAA2C,EAAtC,SAAS,cAAzB,aAA2B,CAAF;IAC1B,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAC,eAAM,kBACL,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,IACT,SAAS,kBACF,SAAS,EACpB,OAAO,EAAC,kBAAkB,EAC1B,SAAS,EAAE,IAAA,cAAE,EAAC,SAAS,EAAE,gCAAgC,CAAC,EAC1D,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EACzB,IAAI,EAAE,8BAAC,uBAAS,0BAAe,IAC/B,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEM,oDAAoB"}

package/cjs/alert/base-alert/content/BaseAlertContent.js

@@ -47,6 +47,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseAlertContent = void 0;
 const react_1 = __importStar(require("react"));
 const Theme_1 = require("../../../theme/Theme");
+const className_1 = require("../../../util/className");
 /**
  * @see 🏷️ {@link BaseAlertContentProps}
  * @example
@@ -62,9 +63,8 @@ const Theme_1 = require("../../../theme/Theme");
  */
 const BaseAlertContent = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const themeContext = (0, Theme_1.useThemeInternal)();
-    return (react_1.default.createElement("div", Object.assign({ ref: forwardedRef, "data-color": themeContext === null || themeContext === void 0 ? void 0 : themeContext.color }, restProps, { className: cn(className, "navds-base-alert__content") }), children));
+    return (react_1.default.createElement("div", Object.assign({ ref: forwardedRef, "data-color": themeContext === null || themeContext === void 0 ? void 0 : themeContext.color }, restProps, { className: (0, className_1.cl)(className, "aksel-base-alert__content") }), children));
 });
 exports.BaseAlertContent = BaseAlertContent;
 //# sourceMappingURL=BaseAlertContent.js.map

package/cjs/alert/base-alert/content/BaseAlertContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertContent.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/content/BaseAlertContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAsE;AAMtE;;;;;;;;;;;;GAYG;AACH,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EACjC,CACE,EAA4D,EAC5D,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,OAAuC,EAAlC,SAAS,cAAnC,yBAAqC,CAAF;IAGnC,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IAExC,OAAO,CACL,qDACE,GAAG,EAAE,YAAY,gBACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,IAC3B,SAAS,IACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,2BAA2B,CAAC,KAEpD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,4CAAgB"}
+{"version":3,"file":"BaseAlertContent.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/content/BaseAlertContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAwD;AACxD,uDAA6C;AAM7C;;;;;;;;;;;;GAYG;AACH,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EACjC,CACE,EAA4D,EAC5D,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,OAAuC,EAAlC,SAAS,cAAnC,yBAAqC,CAAF;IAGnC,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IAExC,OAAO,CACL,qDACE,GAAG,EAAE,YAAY,gBACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,IAC3B,SAAS,IACb,SAAS,EAAE,IAAA,cAAE,EAAC,SAAS,EAAE,2BAA2B,CAAC,KAEpD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,4CAAgB"}

package/cjs/alert/base-alert/header/BaseAlertHeader.js

@@ -46,8 +46,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseAlertHeader = void 0;
 const react_1 = __importStar(require("react"));
-const Theme_1 = require("../../../theme/Theme");
 const typography_1 = require("../../../typography");
+const className_1 = require("../../../util/className");
 const i18n_hooks_1 = require("../../../util/i18n/i18n.hooks");
 const BaseAlertRoot_context_1 = require("../root/BaseAlertRoot.context");
 const BaseAlertRoot_utils_1 = require("../root/BaseAlertRoot.utils");
@@ -64,12 +64,11 @@ const BaseAlertRoot_utils_1 = require("../root/BaseAlertRoot.utils");
  */
 const BaseAlertHeader = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { children, className, icon } = _a, restProps = __rest(_a, ["children", "className", "icon"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const { status, color, statusId } = (0, BaseAlertRoot_context_1.useBaseAlert)();
     const translate = (0, i18n_hooks_1.useI18n)("global");
     const headerIcon = icon !== null && icon !== void 0 ? icon : (status ? react_1.default.createElement(BaseAlertRoot_utils_1.BaseAlertStatusIcon, { status: status }) : null);
-    return (react_1.default.createElement("div", Object.assign({ ref: forwardedRef }, restProps, { "data-color": color, className: cn(className, "navds-base-alert__header") }),
-        headerIcon && (react_1.default.createElement("div", { className: cn("navds-base-alert__icon") }, headerIcon)),
+    return (react_1.default.createElement("div", Object.assign({ ref: forwardedRef }, restProps, { "data-color": color, className: (0, className_1.cl)(className, "aksel-base-alert__header") }),
+        headerIcon && (react_1.default.createElement("div", { className: "aksel-base-alert__icon" }, headerIcon)),
         status && (react_1.default.createElement(typography_1.BodyShort, { id: statusId, "aria-hidden": true, visuallyHidden: true }, `${translate(status)}: `)),
         children));
 });

package/cjs/alert/base-alert/header/BaseAlertHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertHeader.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/header/BaseAlertHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAoD;AACpD,oDAAgD;AAChD,8DAAwD;AACxD,yEAA6D;AAC7D,qEAAkE;AAUlE;;;;;;;;;;GAUG;AACH,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CACE,EAAiE,EACjE,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,OAAsC,EAAjC,SAAS,cAAzC,iCAA2C,CAAF;IAGzC,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAA,oCAAY,GAAE,CAAC;IACnD,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GACd,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,CAAC,MAAM,CAAC,CAAC,CAAC,8BAAC,yCAAmB,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpE,OAAO,CACL,qDACE,GAAG,EAAE,YAAY,IACb,SAAS,kBACD,KAAK,EACjB,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,0BAA0B,CAAC;QAEnD,UAAU,IAAI,CACb,uCAAK,SAAS,EAAE,EAAE,CAAC,wBAAwB,CAAC,IAAG,UAAU,CAAO,CACjE;QACA,MAAM,IAAI,CACT,8BAAC,sBAAS,IAAC,EAAE,EAAE,QAAQ,uBAAc,cAAc,UAChD,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CACf,CACb;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,0CAAe"}
+{"version":3,"file":"BaseAlertHeader.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/header/BaseAlertHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAAgD;AAChD,uDAA6C;AAC7C,8DAAwD;AACxD,yEAA6D;AAC7D,qEAAkE;AAUlE;;;;;;;;;;GAUG;AACH,MAAM,eAAe,GAAG,IAAA,kBAAU,EAChC,CACE,EAAiE,EACjE,YAAY,EACZ,EAAE;QAFF,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,OAAsC,EAAjC,SAAS,cAAzC,iCAA2C,CAAF;IAGzC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAA,oCAAY,GAAE,CAAC;IACnD,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GACd,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,CAAC,MAAM,CAAC,CAAC,CAAC,8BAAC,yCAAmB,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpE,OAAO,CACL,qDACE,GAAG,EAAE,YAAY,IACb,SAAS,kBACD,KAAK,EACjB,SAAS,EAAE,IAAA,cAAE,EAAC,SAAS,EAAE,0BAA0B,CAAC;QAEnD,UAAU,IAAI,CACb,uCAAK,SAAS,EAAC,wBAAwB,IAAE,UAAU,CAAO,CAC3D;QACA,MAAM,IAAI,CACT,8BAAC,sBAAS,IAAC,EAAE,EAAE,QAAQ,uBAAc,cAAc,UAChD,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CACf,CACb;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,0CAAe"}

package/cjs/alert/base-alert/root/BaseAlertRoot.d.ts

@@ -12,7 +12,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;
     /**

package/cjs/alert/base-alert/root/BaseAlertRoot.js

@@ -46,19 +46,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseAlert = void 0;
 const react_1 = __importStar(require("react"));
-const Theme_1 = require("../../../theme/Theme");
 const util_1 = require("../../../util");
+const className_1 = require("../../../util/className");
 const i18n_hooks_1 = require("../../../util/i18n/i18n.hooks");
 const BaseAlertRoot_context_1 = require("./BaseAlertRoot.context");
 const BaseAlertRoot_utils_1 = require("./BaseAlertRoot.utils");
 const BaseAlert = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { children, className, size = "medium", "data-color": dataColor, type, global = false, status, as: Component = "section", "aria-label": ariaLabel, role } = _a, restProps = __rest(_a, ["children", "className", "size", "data-color", "type", "global", "status", "as", "aria-label", "role"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const statusId = (0, util_1.useId)();
     const translate = (0, i18n_hooks_1.useI18n)("global");
     const alertColor = status ? (0, BaseAlertRoot_utils_1.baseAlertStatusToDataColor)(status) : dataColor;
     return (react_1.default.createElement(BaseAlertRoot_context_1.BaseAlertProvider, { size: size, status: status, color: alertColor, statusId: type === "strong" ? statusId : undefined },
-        react_1.default.createElement(Component, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (!status || Component === "div" ? undefined : translate(status)), ref: forwardedRef }, restProps, { className: cn(className, "navds-base-alert"), "data-size": size, "data-color": alertColor, "data-variant": type, "data-global": global }),
+        react_1.default.createElement(Component, Object.assign({ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (!status || Component === "div" ? undefined : translate(status)), ref: forwardedRef }, restProps, { className: (0, className_1.cl)(className, "aksel-base-alert"), "data-size": size, "data-color": alertColor, "data-variant": type, "data-global": global }),
             react_1.default.createElement("div", { role: role }, children))));
 });
 exports.BaseAlert = BaseAlert;

package/cjs/alert/base-alert/root/BaseAlertRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/root/BaseAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAoD;AAEpD,wCAAsC;AACtC,8DAAwD;AACxD,mEAGiC;AACjC,+DAAmE;AAwCnE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYiB,EACjB,YAAY,EACZ,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,SAAS,EACzB,YAAY,EAAE,SAAS,EACvB,IAAI,OAEW,EADZ,SAAS,cAXd,uGAYC,CADa;IAId,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,MAAM,QAAQ,GAAG,IAAA,YAAK,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,IAAA,gDAA0B,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACL,8BAAC,yCAAiB,IAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAElD,8BAAC,SAAS,gCAEN,SAAS,aAAT,SAAS,cAAT,SAAS,GACT,CAAC,CAAC,MAAM,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAElE,GAAG,EAAE,YAAY,IACb,SAAS,IACb,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,kBAAkB,CAAC,eACjC,IAAI,gBACH,UAAU,kBACR,IAAI,iBACL,MAAM;YAEnB,uCAAK,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAO,CACvB,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,8BAAS"}
+{"version":3,"file":"BaseAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/root/BaseAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,wCAAsC;AACtC,uDAA6C;AAC7C,8DAAwD;AACxD,mEAGiC;AACjC,+DAAmE;AA0CnE,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CACE,EAYiB,EACjB,YAAY,EACZ,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,MAAM,GAAG,KAAK,EACd,MAAM,EACN,EAAE,EAAE,SAAS,GAAG,SAAS,EACzB,YAAY,EAAE,SAAS,EACvB,IAAI,OAEW,EADZ,SAAS,cAXd,uGAYC,CADa;IAId,MAAM,QAAQ,GAAG,IAAA,YAAK,GAAE,CAAC;IACzB,MAAM,SAAS,GAAG,IAAA,oBAAO,EAAC,QAAQ,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAC,IAAA,gDAA0B,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE3E,OAAO,CACL,8BAAC,yCAAiB,IAChB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;QAElD,8BAAC,SAAS,gCAEN,SAAS,aAAT,SAAS,cAAT,SAAS,GACT,CAAC,CAAC,MAAM,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,EAElE,GAAG,EAAE,YAAY,IACb,SAAS,IACb,SAAS,EAAE,IAAA,cAAE,EAAC,SAAS,EAAE,kBAAkB,CAAC,eACjC,IAAI,gBACH,UAAU,kBACR,IAAI,iBACL,MAAM;YAEnB,uCAAK,IAAI,EAAE,IAAI,IAAG,QAAQ,CAAO,CACvB,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,8BAAS"}

package/cjs/alert/base-alert/title/BaseAlertTitle.js

@@ -43,16 +43,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseAlertTitle = void 0;
-const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const Theme_1 = require("../../../theme/Theme");
 const typography_1 = require("../../../typography");
 const util_1 = require("../../../util");
+const className_1 = require("../../../util/className");
 const BaseAlertRoot_context_1 = require("../root/BaseAlertRoot.context");
 /**
  * Title component for BaseAlert. Remember to use correct heading-level with the `as` prop.
@@ -68,10 +64,9 @@ const BaseAlertRoot_context_1 = require("../root/BaseAlertRoot.context");
  */
 const BaseAlertTitle = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { children, className, as = "h2", id: idProp } = _a, restProps = __rest(_a, ["children", "className", "as", "id"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const { size, statusId } = (0, BaseAlertRoot_context_1.useBaseAlert)();
     const titleId = (0, util_1.useId)(idProp);
-    return (react_1.default.createElement(typography_1.BodyShort, Object.assign({ ref: forwardedRef }, restProps, { as: as, size: size === "medium" ? "large" : "medium", weight: "semibold", className: cn(className, "navds-base-alert__title"), id: titleId, "aria-labelledby": statusId ? (0, clsx_1.default)(statusId, titleId) : undefined }), children));
+    return (react_1.default.createElement(typography_1.BodyShort, Object.assign({ ref: forwardedRef }, restProps, { as: as, size: size === "medium" ? "large" : "medium", weight: "semibold", className: (0, className_1.cl)(className, "aksel-base-alert__title"), id: titleId, "aria-labelledby": statusId ? (0, className_1.cl)(statusId, titleId) : undefined }), children));
 });
 exports.BaseAlertTitle = BaseAlertTitle;
 //# sourceMappingURL=BaseAlertTitle.js.map

package/cjs/alert/base-alert/title/BaseAlertTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseAlertTitle.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/title/BaseAlertTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,gDAAoD;AACpD,oDAAgD;AAChD,wCAAsC;AACtC,yEAA6D;AAW7D;;;;;;;;;;;GAWG;AACH,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CACE,EAMsB,EACtB,YAAY,EACZ,EAAE;QARF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,GAAG,IAAI,EACT,EAAE,EAAE,MAAM,OAEU,EADjB,SAAS,cALd,qCAMC,CADa;IAId,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAA,oCAAY,GAAE,CAAC;IAE1C,MAAM,OAAO,GAAG,IAAA,YAAK,EAAC,MAAM,CAAC,CAAC;IAE9B,OAAO,CACL,8BAAC,sBAAS,kBACR,GAAG,EAAE,YAAY,IACb,SAAS,IACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC5C,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,EAAE,EAAE,OAAO,qBACM,QAAQ,CAAC,CAAC,CAAC,IAAA,cAAE,EAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,KAE5D,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}
+{"version":3,"file":"BaseAlertTitle.js","sourceRoot":"","sources":["../../../../src/alert/base-alert/title/BaseAlertTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAAgD;AAChD,wCAAsC;AACtC,uDAA6C;AAC7C,yEAA6D;AAW7D;;;;;;;;;;;GAWG;AACH,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CACE,EAMsB,EACtB,YAAY,EACZ,EAAE;QARF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,GAAG,IAAI,EACT,EAAE,EAAE,MAAM,OAEU,EADjB,SAAS,cALd,qCAMC,CADa;IAId,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAA,oCAAY,GAAE,CAAC;IAE1C,MAAM,OAAO,GAAG,IAAA,YAAK,EAAC,MAAM,CAAC,CAAC;IAE9B,OAAO,CACL,8BAAC,sBAAS,kBACR,GAAG,EAAE,YAAY,IACb,SAAS,IACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC5C,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,IAAA,cAAE,EAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,EAAE,EAAE,OAAO,qBACM,QAAQ,CAAC,CAAC,CAAC,IAAA,cAAE,EAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,KAE5D,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}

package/cjs/alert/global-alert/root/GlobalAlertRoot.d.ts

@@ -6,6 +6,10 @@ import { GlobalAlertHeader, type GlobalAlertHeaderProps } from "../header/Global
 import { GlobalAlertTitle, type GlobalAlertTitleProps } from "../title/GlobalAlertTitle";
 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/cjs/alert/global-alert/root/GlobalAlertRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/global-alert/root/GlobalAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,mFAGgD;AAyH9C,uGA3HA,+CAAsB,OA2HA;AAxHxB,sEAGuC;AAsHrC,mGAxHA,uCAAkB,OAwHA;AArHpB,mEAGqC;AAmHnC,kGArHA,qCAAiB,OAqHA;AAlHnB,gEAGmC;AAgHjC,iGAlHA,mCAAgB,OAkHA;AAvClB;;;;;;;;;;;;;GAaG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CAAC,EAA8C,EAAE,YAAY,EAAE,EAAE;QAAhE,EAAE,QAAQ,GAAG,IAAI,OAA6B,EAAxB,IAAI,cAA1B,YAA4B,CAAF;IACzB,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,OAAO,IACR,IAAI,IACR,IAAI,EAAC,QAAQ,EACb,MAAM,yBACS,QAAQ,IACvB,CACH,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,mBAAW,CAAC,MAAM,GAAG,qCAAiB,CAAC;AACvC,mBAAW,CAAC,KAAK,GAAG,mCAAgB,CAAC;AACrC,mBAAW,CAAC,OAAO,GAAG,uCAAkB,CAAC;AACzC,mBAAW,CAAC,WAAW,GAAG,+CAAsB,CAAC;AAEjD,kBAAe,mBAAW,CAAC"}
+{"version":3,"file":"GlobalAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/global-alert/root/GlobalAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,mFAGgD;AA6H9C,uGA/HA,+CAAsB,OA+HA;AA5HxB,sEAGuC;AA0HrC,mGA5HA,uCAAkB,OA4HA;AAzHpB,mEAGqC;AAuHnC,kGAzHA,qCAAiB,OAyHA;AAtHnB,gEAGmC;AAoHjC,iGAtHA,mCAAgB,OAsHA;AAvClB;;;;;;;;;;;;;GAaG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CAAC,EAA8C,EAAE,YAAY,EAAE,EAAE;QAAhE,EAAE,QAAQ,GAAG,IAAI,OAA6B,EAAxB,IAAI,cAA1B,YAA4B,CAAF;IACzB,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,OAAO,IACR,IAAI,IACR,IAAI,EAAC,QAAQ,EACb,MAAM,yBACS,QAAQ,IACvB,CACH,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,mBAAW,CAAC,MAAM,GAAG,qCAAiB,CAAC;AACvC,mBAAW,CAAC,KAAK,GAAG,mCAAgB,CAAC;AACrC,mBAAW,CAAC,OAAO,GAAG,uCAAkB,CAAC;AACzC,mBAAW,CAAC,WAAW,GAAG,+CAAsB,CAAC;AAEjD,kBAAe,mBAAW,CAAC"}

package/cjs/alert/local-alert/root/LocalAlertRoot.d.ts

@@ -6,6 +6,10 @@ import { LocalAlertHeader, type LocalAlertHeaderProps } from "../header/LocalAle
 import { LocalAlertTitle, type LocalAlertTitleProps } from "../title/LocalAlertTitle";
 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 extends React.ForwardRefExoticComponent<LocalAlertProps & React.RefAttributes<HTMLDivElement>> {
     /**

package/cjs/alert/local-alert/root/LocalAlertRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/local-alert/root/LocalAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,iFAG+C;AAuH7C,sGAzHA,6CAAqB,OAyHA;AAtHvB,oEAGsC;AAgHpC,kGAlHA,qCAAiB,OAkHA;AA/GnB,iEAGoC;AA6GlC,iGA/GA,mCAAgB,OA+GA;AA5GlB,8DAGkC;AA0GhC,gGA5GA,iCAAe,OA4GA;AAtCjB;;;;;;;;;;;;;GAaG;AACU,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CAAC,EAAyC,EAAE,YAAY,EAAE,EAAE;QAA3D,EAAE,MAAM,OAAiC,EAA5B,SAAS,cAAtB,UAAwB,CAAF;IACrB,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,OAAO,IACR,SAAS,IACb,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CACqB,CAAC;AAEzB,kBAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,kBAAU,CAAC,KAAK,GAAG,iCAAe,CAAC;AACnC,kBAAU,CAAC,OAAO,GAAG,qCAAiB,CAAC;AACvC,kBAAU,CAAC,WAAW,GAAG,6CAAqB,CAAC;AAE/C,kBAAe,kBAAU,CAAC"}
+{"version":3,"file":"LocalAlertRoot.js","sourceRoot":"","sources":["../../../../src/alert/local-alert/root/LocalAlertRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,iFAG+C;AA2H7C,sGA7HA,6CAAqB,OA6HA;AA1HvB,oEAGsC;AAoHpC,kGAtHA,qCAAiB,OAsHA;AAnHnB,iEAGoC;AAiHlC,iGAnHA,mCAAgB,OAmHA;AAhHlB,8DAGkC;AA8GhC,gGAhHA,iCAAe,OAgHA;AAtCjB;;;;;;;;;;;;;GAaG;AACU,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CAAC,EAAyC,EAAE,YAAY,EAAE,EAAE;QAA3D,EAAE,MAAM,OAAiC,EAA5B,SAAS,cAAtB,UAAwB,CAAF;IACrB,OAAO,CACL,8BAAC,sBAAS,CAAC,IAAI,kBACb,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,OAAO,IACR,SAAS,IACb,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,KAAK,EACb,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CACqB,CAAC;AAEzB,kBAAU,CAAC,MAAM,GAAG,mCAAgB,CAAC;AACrC,kBAAU,CAAC,KAAK,GAAG,iCAAe,CAAC;AACnC,kBAAU,CAAC,OAAO,GAAG,qCAAiB,CAAC;AACvC,kBAAU,CAAC,WAAW,GAAG,6CAAqB,CAAC;AAE/C,kBAAe,kBAAU,CAAC"}

package/cjs/button/Button.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
+import { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
+type legacyVariants = "primary-neutral" | "secondary-neutral" | "tertiary-neutral" | "danger";
+type HiddenVariant = legacyVariants & {
+    __brand?: never;
+};
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Button content.
@@ -9,7 +14,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * Changes design and interaction-visuals.
      * @default "primary"
      */
-    variant?: "primary" | "primary-neutral" | "secondary" | "secondary-neutral" | "tertiary" | "tertiary-neutral" | "danger";
+    variant?: "primary" | "secondary" | "tertiary" | HiddenVariant;
     /**
      * Changes padding, height, and font-size.
      * @default "medium"
@@ -35,6 +40,14 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * @default "left"
      */
     iconPosition?: "left" | "right";
+    /**
+     * Overrides inherited color.
+     *
+     * We recommend only using `accent`, `neutral` and `danger`.
+     * @see 🏷️ {@link AkselColor}
+     * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+     */
+    "data-color"?: AkselColor;
 }
 /**
  * A button component

package/cjs/button/Button.js

@@ -47,9 +47,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const react_1 = __importStar(require("react"));
 const loader_1 = require("../loader");
-const Theme_1 = require("../theme/Theme");
 const typography_1 = require("../typography");
 const util_1 = require("../util");
+const className_1 = require("../util/className");
 const composeEventHandlers_1 = require("../util/composeEventHandlers");
 /**
  * A button component
@@ -63,22 +63,21 @@ const composeEventHandlers_1 = require("../util/composeEventHandlers");
  */
 exports.Button = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, icon, iconPosition = "left", onKeyUp, "data-color": color } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "icon", "iconPosition", "onKeyUp", "data-color"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const filterProps = disabled || loading ? (0, util_1.omit)(rest, ["href"]) : rest;
     const handleKeyUp = (e) => {
         if (e.key === " " && !disabled && !loading) {
             e.currentTarget.click();
         }
     };
-    return (react_1.default.createElement(Component, Object.assign({}, (Component !== "button" ? { role: "button" } : {}), { "data-color": color !== null && color !== void 0 ? color : variantToColor(variant), "data-variant": variantToSimplifiedVariant(variant) }, filterProps, { ref: ref, onKeyUp: (0, composeEventHandlers_1.composeEventHandlers)(onKeyUp, handleKeyUp), className: cn(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
-            "navds-button--loading": loading,
-            "navds-button--icon-only": !!icon && !children,
-            "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : loading,
+    return (react_1.default.createElement(Component, Object.assign({}, (Component !== "button" ? { role: "button" } : {}), { "data-color": color !== null && color !== void 0 ? color : variantToColor(variant), "data-variant": variantToSimplifiedVariant(variant) }, filterProps, { ref: ref, onKeyUp: (0, composeEventHandlers_1.composeEventHandlers)(onKeyUp, handleKeyUp), className: (0, className_1.cl)(className, "aksel-button", `aksel-button--${size}`, {
+            "aksel-button--loading": loading,
+            "aksel-button--icon-only": !!icon && !children,
+            "aksel-button--disabled": disabled !== null && disabled !== void 0 ? disabled : loading,
         }), disabled: (disabled !== null && disabled !== void 0 ? disabled : loading) ? true : undefined }),
-        icon && iconPosition === "left" && (react_1.default.createElement("span", { className: cn("navds-button__icon") }, icon)),
+        icon && iconPosition === "left" && (react_1.default.createElement("span", { className: "aksel-button__icon" }, icon)),
         loading && react_1.default.createElement(loader_1.Loader, { size: size }),
         children && (react_1.default.createElement(typography_1.Label, { as: "span", size: size === "medium" ? "medium" : "small" }, children)),
-        icon && iconPosition === "right" && (react_1.default.createElement("span", { className: cn("navds-button__icon") }, icon))));
+        icon && iconPosition === "right" && (react_1.default.createElement("span", { className: "aksel-button__icon" }, icon))));
 });
 function variantToColor(variant) {
     switch (variant) {