@navikt/ds-react 7.12.1 → 7.13.0

package/cjs/form/confirmation-panel/ConfirmationPanel.js

@@ -66,11 +66,16 @@ exports.ConfirmationPanel = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
     const { errorId, showErrorMsg, hasError, size, inputProps } = (0, useFormField_1.useFormField)(props, "confirmation-panel");
     const id = (0, hooks_1.useId)();
+    const currentRole = hasError
+        ? "danger"
+        : props.checked
+            ? "success"
+            : "warning";
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-confirmation-panel", "navds-form-field", className, {
             "navds-confirmation-panel--small": size === "small",
             "navds-confirmation-panel--error": hasError,
             "navds-confirmation-panel--checked": !!props.checked,
-        }) },
+        }), "data-color-role": currentRole },
         react_1.default.createElement("div", { className: "navds-confirmation-panel__inner" },
             children && (react_1.default.createElement(typography_1.BodyLong, { size: props.size, className: "navds-confirmation-panel__content", id: `confirmation-panel-${id}`, as: "div" }, children)),
             react_1.default.createElement(checkbox_1.Checkbox, Object.assign({ ref: ref }, props, inputProps, { "aria-describedby": (0, clsx_1.default)(inputProps["aria-describedby"], children && `confirmation-panel-${id}`), error: hasError, size: size }), label)),

package/cjs/form/confirmation-panel/ConfirmationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationPanel.js","sourceRoot":"","sources":["../../../src/form/confirmation-panel/ConfirmationPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,iDAA0D;AAC1D,4CAAyC;AACzC,0CAAsD;AACtD,kDAA+C;AAyB/C;;;;;;;;;;;;;;;;;GAiBG;AACU,QAAA,iBAAiB,GAAG,IAAA,kBAAU,EAGzC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAY,EAAP,KAAK,cAAtC,kCAAwC,CAAF;IACvC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,IAAA,2BAAY,EACxE,KAAK,EACL,oBAAoB,CACrB,CAAC;IAEF,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IAEnB,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC,0BAA0B,EAAE,kBAAkB,EAAE,SAAS,EAAE;YACvE,iCAAiC,EAAE,IAAI,KAAK,OAAO;YACnD,iCAAiC,EAAE,QAAQ;YAC3C,mCAAmC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO;SACrD,CAAC;QAEF,uCAAK,SAAS,EAAC,iCAAiC;YAC7C,QAAQ,IAAI,CACX,8BAAC,qBAAQ,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,mCAAmC,EAC7C,EAAE,EAAE,sBAAsB,EAAE,EAAE,EAC9B,EAAE,EAAC,KAAK,IAEP,QAAQ,CACA,CACZ;YACD,8BAAC,mBAAQ,kBACP,GAAG,EAAE,GAAG,IACJ,KAAK,EACL,UAAU,wBACI,IAAA,cAAE,EAClB,UAAU,CAAC,kBAAkB,CAAC,EAC9B,QAAQ,IAAI,sBAAsB,EAAE,EAAE,CACvC,EACD,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,KAET,KAAK,CACG,CACP;QACN,uCAAK,SAAS,EAAC,yBAAyB,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IAC/D,YAAY,IAAI,CACf,8BAAC,yBAAY,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,UAC/B,KAAK,CAAC,KAAK,CACC,CAChB,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,yBAAiB,CAAC"}
+{"version":3,"file":"ConfirmationPanel.js","sourceRoot":"","sources":["../../../src/form/confirmation-panel/ConfirmationPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,iDAA0D;AAC1D,4CAAyC;AACzC,0CAAsD;AACtD,kDAA+C;AAyB/C;;;;;;;;;;;;;;;;;GAiBG;AACU,QAAA,iBAAiB,GAAG,IAAA,kBAAU,EAGzC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAY,EAAP,KAAK,cAAtC,kCAAwC,CAAF;IACvC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,IAAA,2BAAY,EACxE,KAAK,EACL,oBAAoB,CACrB,CAAC;IAEF,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IAEnB,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,CAAC,OAAO;YACb,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC,0BAA0B,EAAE,kBAAkB,EAAE,SAAS,EAAE;YACvE,iCAAiC,EAAE,IAAI,KAAK,OAAO;YACnD,iCAAiC,EAAE,QAAQ;YAC3C,mCAAmC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO;SACrD,CAAC,qBACe,WAAW;QAE5B,uCAAK,SAAS,EAAC,iCAAiC;YAC7C,QAAQ,IAAI,CACX,8BAAC,qBAAQ,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,mCAAmC,EAC7C,EAAE,EAAE,sBAAsB,EAAE,EAAE,EAC9B,EAAE,EAAC,KAAK,IAEP,QAAQ,CACA,CACZ;YACD,8BAAC,mBAAQ,kBACP,GAAG,EAAE,GAAG,IACJ,KAAK,EACL,UAAU,wBACI,IAAA,cAAE,EAClB,UAAU,CAAC,kBAAkB,CAAC,EAC9B,QAAQ,IAAI,sBAAsB,EAAE,EAAE,CACvC,EACD,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,KAET,KAAK,CACG,CACP;QACN,uCAAK,SAAS,EAAC,yBAAyB,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IAC/D,YAAY,IAAI,CACf,8BAAC,yBAAY,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,UAC/B,KAAK,CAAC,KAAK,CACC,CAChB,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,yBAAiB,CAAC"}

package/cjs/index.d.ts

@@ -13,7 +13,7 @@ export { GuidePanel, type GuidePanelProps } from "./guide-panel";
 export { HelpText, type HelpTextProps } from "./help-text";
 export { InternalHeader, type InternalHeaderButtonProps, type InternalHeaderProps, type InternalHeaderTitleProps, type InternalHeaderUserButtonProps, type InternalHeaderUserProps, } from "./internal-header";
 export { Bleed, type BleedProps } from "./layout/bleed";
-export { Box, type BoxProps } from "./layout/box";
+export { Box, type BoxProps, BoxNew, type BoxNewProps } from "./layout/box";
 export { HGrid, type HGridProps } from "./layout/grid";
 export { Page, type PageBlockProps, type PageProps } from "./layout/page";
 export { Hide, Show, type ResponsiveProps } from "./layout/responsive";

package/cjs/index.js

@@ -1,8 +1,8 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Heading = exports.ErrorMessage = exports.Detail = exports.BodyShort = exports.BodyLong = exports.Tooltip = exports.ToggleGroup = exports.Timeline = exports.Tag = exports.Tabs = exports.Table = exports.Stepper = exports.Skeleton = exports.ReadMore = exports.Provider = exports.ProgressBar = exports.Portal = exports.Popover = exports.Pagination = exports.Modal = exports.Loader = exports.List = exports.Link = exports.VStack = exports.Stack = exports.Spacer = exports.HStack = exports.Show = exports.Hide = exports.Page = exports.HGrid = exports.Box = exports.Bleed = exports.InternalHeader = exports.HelpText = exports.GuidePanel = exports.ExpansionCard = exports.Dropdown = exports.useMonthpicker = exports.MonthPicker = exports.useRangeDatepicker = exports.useDatepicker = exports.DatePicker = exports.CopyButton = exports.Chips = exports.Chat = exports.Button = exports.Alert = exports.ActionMenu = exports.Accordion = void 0;
-exports.Panel = exports.LinkPanel = exports.Theme = exports.TextField = exports.Textarea = exports.Switch = exports.Select = exports.Search = exports.RadioGroup = exports.Radio = exports.FormProgress = exports.FormSummary = exports.FileUpload = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.UNSAFE_Combobox = exports.CheckboxGroup = exports.Checkbox = exports.useId = exports.useEventListener = exports.useClientLayoutEffect = exports.omit = exports.debounce = exports.Label = exports.Ingress = void 0;
+exports.ErrorMessage = exports.Detail = exports.BodyShort = exports.BodyLong = exports.Tooltip = exports.ToggleGroup = exports.Timeline = exports.Tag = exports.Tabs = exports.Table = exports.Stepper = exports.Skeleton = exports.ReadMore = exports.Provider = exports.ProgressBar = exports.Portal = exports.Popover = exports.Pagination = exports.Modal = exports.Loader = exports.List = exports.Link = exports.VStack = exports.Stack = exports.Spacer = exports.HStack = exports.Show = exports.Hide = exports.Page = exports.HGrid = exports.BoxNew = exports.Box = exports.Bleed = exports.InternalHeader = exports.HelpText = exports.GuidePanel = exports.ExpansionCard = exports.Dropdown = exports.useMonthpicker = exports.MonthPicker = exports.useRangeDatepicker = exports.useDatepicker = exports.DatePicker = exports.CopyButton = exports.Chips = exports.Chat = exports.Button = exports.Alert = exports.ActionMenu = exports.Accordion = void 0;
+exports.Panel = exports.LinkPanel = exports.Theme = exports.TextField = exports.Textarea = exports.Switch = exports.Select = exports.Search = exports.RadioGroup = exports.Radio = exports.FormProgress = exports.FormSummary = exports.FileUpload = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.UNSAFE_Combobox = exports.CheckboxGroup = exports.Checkbox = exports.useId = exports.useEventListener = exports.useClientLayoutEffect = exports.omit = exports.debounce = exports.Label = exports.Ingress = exports.Heading = void 0;
 var accordion_1 = require("./accordion");
 Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
 var action_menu_1 = require("./overlays/action-menu");
@@ -38,6 +38,7 @@ var bleed_1 = require("./layout/bleed");
 Object.defineProperty(exports, "Bleed", { enumerable: true, get: function () { return bleed_1.Bleed; } });
 var box_1 = require("./layout/box");
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return box_1.Box; } });
+Object.defineProperty(exports, "BoxNew", { enumerable: true, get: function () { return box_1.BoxNew; } });
 var grid_1 = require("./layout/grid");
 Object.defineProperty(exports, "HGrid", { enumerable: true, get: function () { return grid_1.HGrid; } });
 var page_1 = require("./layout/page");

package/cjs/index.js.map

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

package/cjs/layout/box/index.d.ts

@@ -1 +1,2 @@
 export { default as Box, type BoxProps } from "./Box";
+export { default as BoxNew, type BoxNewProps } from "./Box.darkside";

package/cjs/layout/box/index.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Box = void 0;
+exports.BoxNew = exports.Box = void 0;
 var Box_1 = require("./Box");
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return __importDefault(Box_1).default; } });
-/* TODO: Uncomment this when ready to expose darkmode-support. Remember to update top-level `index.ts` at the same time. */
-/* export { default as BoxNew, type BoxNewProps } from "./Box.darkside"; */
+var Box_darkside_1 = require("./Box.darkside");
+Object.defineProperty(exports, "BoxNew", { enumerable: true, get: function () { return __importDefault(Box_darkside_1).default; } });
 //# sourceMappingURL=index.js.map

package/cjs/layout/box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6BAAsD;AAA7C,2GAAA,OAAO,OAAO;AAEvB,2HAA2H;AAC3H,2EAA2E"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;AACb,6BAAsD;AAA7C,2GAAA,OAAO,OAAO;AACvB,+CAAqE;AAA5D,uHAAA,OAAO,OAAU"}

package/cjs/theme/Theme.d.ts

@@ -1,5 +1,11 @@
+import cl from "clsx";
 import React from "react";
 import { AsChildProps } from "../util/types";
+type RenameCSSContext = {
+    cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
+};
+declare const useRenameCSS: <S extends boolean = true>(strict?: S) => S extends true ? RenameCSSContext : RenameCSSContext | undefined;
+export declare const compositeClassFunction: (...inputs: Parameters<typeof cl>) => string;
 type ThemeContext = {
     /**
      * Color theme
@@ -13,4 +19,4 @@ export type ThemeProps = {
     hasBackground?: boolean;
 } & ThemeContext & AsChildProps;
 declare const Theme: React.ForwardRefExoticComponent<ThemeProps & React.RefAttributes<HTMLDivElement>>;
-export { Theme, useThemeInternal };
+export { Theme, useRenameCSS, useThemeInternal };

package/cjs/theme/Theme.js

@@ -26,11 +26,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeInternal = exports.Theme = void 0;
+exports.useThemeInternal = exports.useRenameCSS = exports.Theme = exports.compositeClassFunction = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const Slot_1 = require("../slot/Slot");
 const create_context_1 = require("../util/create-context");
+const [RenameCSSProvider, useRenameCSS] = (0, create_context_1.createContext)({
+    hookName: "useRenameCSS",
+    name: "RenameCSS",
+    providerName: "RenameCSSProvider",
+    defaultValue: { cn: clsx_1.default },
+});
+exports.useRenameCSS = useRenameCSS;
+const compositeClassFunction = (...inputs) => {
+    const classes = (0, clsx_1.default)(inputs)
+        /* Replaces only if start of string  "navds- navds-"*/
+        .replace(/^navds-/g, "aksel-")
+        /* Replaces all " navds-" hits */
+        .replace(/\snavds-/g, " aksel-");
+    return classes.trim();
+};
+exports.compositeClassFunction = compositeClassFunction;
+const RenameCSS = ({ children }) => {
+    /* Replace function with this when implementation is complete and CSS is updated */
+    /* <RenameCSSProvider cn={compositeClassFunction}> */
+    return react_1.default.createElement(RenameCSSProvider, { cn: clsx_1.default }, children);
+};
 const [ThemeProvider, useThemeInternal] = (0, create_context_1.createContext)({
     hookName: "useTheme",
     name: "ThemeProvider",
@@ -45,7 +66,8 @@ const Theme = (0, react_1.forwardRef)((props, ref) => {
     const hasBackground = hasBackgroundProp !== null && hasBackgroundProp !== void 0 ? hasBackgroundProp : (isRoot && props.theme !== undefined);
     const SlotElement = asChild ? Slot_1.Slot : "div";
     return (react_1.default.createElement(ThemeProvider, { theme: theme },
-        react_1.default.createElement(SlotElement, { ref: ref, className: (0, clsx_1.default)("navds-theme", className, theme), "data-background": hasBackground }, children)));
+        react_1.default.createElement(RenameCSS, null,
+            react_1.default.createElement(SlotElement, { ref: ref, className: (0, clsx_1.default)("navds-theme", className, theme), "data-background": hasBackground }, children))));
 });
 exports.Theme = Theme;
 //# sourceMappingURL=Theme.js.map

package/cjs/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,uCAAoC;AACpC,2DAAuD;AAWvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,8BAAa,EAAe;IACpE,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,eAAe;CAC9B,CAAC,CAAC;AAyCa,4CAAgB;AAjChC,MAAM,KAAK,GAAG,IAAA,kBAAU,EACtB,CAAC,KAAiB,EAAE,GAAG,EAAE,EAAE;;IACzB,MAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,8BAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,8BAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,IAE7B,QAAQ,CACG,CACA,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,sBAAK"}
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,uCAAoC;AACpC,2DAAuD;AAUvD,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,GAAG,IAAA,8BAAa,EAAmB;IACxE,QAAQ,EAAE,cAAc;IACxB,IAAI,EAAE,WAAW;IACjB,YAAY,EAAE,mBAAmB;IACjC,YAAY,EAAE,EAAE,EAAE,EAAE,cAAE,EAAE;CACzB,CAAC,CAAC;AA8Ea,oCAAY;AA5ErB,MAAM,sBAAsB,GAAG,CACpC,GAAG,MAA6B,EACxB,EAAE;IACV,MAAM,OAAO,GAAG,IAAA,cAAE,EAAC,MAAM,CAAC;QACxB,sDAAsD;SACrD,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC;QAC9B,iCAAiC;SAChC,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAEnC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC;AACxB,CAAC,CAAC;AAVW,QAAA,sBAAsB,0BAUjC;AAEF,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAChE,mFAAmF;IACnF,qDAAqD;IACrD,OAAO,8BAAC,iBAAiB,IAAC,EAAE,EAAE,cAAE,IAAG,QAAQ,CAAqB,CAAC;AACnE,CAAC,CAAC;AAaF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,8BAAa,EAAe;IACpE,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,eAAe;CAC9B,CAAC,CAAC;AA2C2B,4CAAgB;AAnC9C,MAAM,KAAK,GAAG,IAAA,kBAAU,EACtB,CAAC,KAAiB,EAAE,GAAG,EAAE,EAAE;;IACzB,MAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,8BAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,8BAAC,SAAS;YACR,8BAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,IAE7B,QAAQ,CACG,CACJ,CACE,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,sBAAK"}

package/cjs/theme/index.d.ts

@@ -1 +1 @@
-export { Theme, ThemeProps } from "./Theme";
+export { Theme, type ThemeProps } from "./Theme";

package/cjs/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,iCAA4C;AAAnC,8FAAA,KAAK,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AACb,iCAAiD;AAAxC,8FAAA,KAAK,OAAA"}

package/esm/form/confirmation-panel/ConfirmationPanel.js

@@ -37,11 +37,16 @@ export const ConfirmationPanel = forwardRef((_a, ref) => {
     var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
     const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(props, "confirmation-panel");
     const id = useId();
+    const currentRole = hasError
+        ? "danger"
+        : props.checked
+            ? "success"
+            : "warning";
     return (React.createElement("div", { className: cl("navds-confirmation-panel", "navds-form-field", className, {
             "navds-confirmation-panel--small": size === "small",
             "navds-confirmation-panel--error": hasError,
             "navds-confirmation-panel--checked": !!props.checked,
-        }) },
+        }), "data-color-role": currentRole },
         React.createElement("div", { className: "navds-confirmation-panel__inner" },
             children && (React.createElement(BodyLong, { size: props.size, className: "navds-confirmation-panel__content", id: `confirmation-panel-${id}`, as: "div" }, children)),
             React.createElement(Checkbox, Object.assign({ ref: ref }, props, inputProps, { "aria-describedby": cl(inputProps["aria-describedby"], children && `confirmation-panel-${id}`), error: hasError, size: size }), label)),

package/esm/form/confirmation-panel/ConfirmationPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationPanel.js","sourceRoot":"","sources":["../../../src/form/confirmation-panel/ConfirmationPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAiB,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAyB/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAGzC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAY,EAAP,KAAK,cAAtC,kCAAwC,CAAF;IACvC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CACxE,KAAK,EACL,oBAAoB,CACrB,CAAC;IAEF,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,kBAAkB,EAAE,SAAS,EAAE;YACvE,iCAAiC,EAAE,IAAI,KAAK,OAAO;YACnD,iCAAiC,EAAE,QAAQ;YAC3C,mCAAmC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO;SACrD,CAAC;QAEF,6BAAK,SAAS,EAAC,iCAAiC;YAC7C,QAAQ,IAAI,CACX,oBAAC,QAAQ,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,mCAAmC,EAC7C,EAAE,EAAE,sBAAsB,EAAE,EAAE,EAC9B,EAAE,EAAC,KAAK,IAEP,QAAQ,CACA,CACZ;YACD,oBAAC,QAAQ,kBACP,GAAG,EAAE,GAAG,IACJ,KAAK,EACL,UAAU,wBACI,EAAE,CAClB,UAAU,CAAC,kBAAkB,CAAC,EAC9B,QAAQ,IAAI,sBAAsB,EAAE,EAAE,CACvC,EACD,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,KAET,KAAK,CACG,CACP;QACN,6BAAK,SAAS,EAAC,yBAAyB,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IAC/D,YAAY,IAAI,CACf,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,UAC/B,KAAK,CAAC,KAAK,CACC,CAChB,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ConfirmationPanel.js","sourceRoot":"","sources":["../../../src/form/confirmation-panel/ConfirmationPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAiB,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAyB/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CAGzC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAY,EAAP,KAAK,cAAtC,kCAAwC,CAAF;IACvC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CACxE,KAAK,EACL,oBAAoB,CACrB,CAAC;IAEF,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,CAAC,OAAO;YACb,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,kBAAkB,EAAE,SAAS,EAAE;YACvE,iCAAiC,EAAE,IAAI,KAAK,OAAO;YACnD,iCAAiC,EAAE,QAAQ;YAC3C,mCAAmC,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO;SACrD,CAAC,qBACe,WAAW;QAE5B,6BAAK,SAAS,EAAC,iCAAiC;YAC7C,QAAQ,IAAI,CACX,oBAAC,QAAQ,IACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,mCAAmC,EAC7C,EAAE,EAAE,sBAAsB,EAAE,EAAE,EAC9B,EAAE,EAAC,KAAK,IAEP,QAAQ,CACA,CACZ;YACD,oBAAC,QAAQ,kBACP,GAAG,EAAE,GAAG,IACJ,KAAK,EACL,UAAU,wBACI,EAAE,CAClB,UAAU,CAAC,kBAAkB,CAAC,EAC9B,QAAQ,IAAI,sBAAsB,EAAE,EAAE,CACvC,EACD,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,IAAI,KAET,KAAK,CACG,CACP;QACN,6BAAK,SAAS,EAAC,yBAAyB,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IAC/D,YAAY,IAAI,CACf,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,UAC/B,KAAK,CAAC,KAAK,CACC,CAChB,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/esm/index.d.ts

@@ -13,7 +13,7 @@ export { GuidePanel, type GuidePanelProps } from "./guide-panel/index.js";
 export { HelpText, type HelpTextProps } from "./help-text/index.js";
 export { InternalHeader, type InternalHeaderButtonProps, type InternalHeaderProps, type InternalHeaderTitleProps, type InternalHeaderUserButtonProps, type InternalHeaderUserProps, } from "./internal-header/index.js";
 export { Bleed, type BleedProps } from "./layout/bleed/index.js";
-export { Box, type BoxProps } from "./layout/box/index.js";
+export { Box, type BoxProps, BoxNew, type BoxNewProps } from "./layout/box/index.js";
 export { HGrid, type HGridProps } from "./layout/grid/index.js";
 export { Page, type PageBlockProps, type PageProps } from "./layout/page/index.js";
 export { Hide, Show, type ResponsiveProps } from "./layout/responsive/index.js";

package/esm/index.js

@@ -14,7 +14,7 @@ export { GuidePanel } from "./guide-panel/index.js";
 export { HelpText } from "./help-text/index.js";
 export { InternalHeader, } from "./internal-header/index.js";
 export { Bleed } from "./layout/bleed/index.js";
-export { Box } from "./layout/box/index.js";
+export { Box, BoxNew } from "./layout/box/index.js";
 export { HGrid } from "./layout/grid/index.js";
 export { Page } from "./layout/page/index.js";
 export { Hide, Show } from "./layout/responsive/index.js";

package/esm/index.js.map

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

package/esm/layout/box/index.d.ts

@@ -1 +1,2 @@
 export { default as Box, type BoxProps } from "./Box.js";
+export { default as BoxNew, type BoxNewProps } from "./Box.darkside.js";

package/esm/layout/box/index.js

@@ -1,3 +1,4 @@
 "use client";
 export { default as Box } from "./Box.js";
+export { default as BoxNew } from "./Box.darkside.js";
 //# sourceMappingURL=index.js.map

package/esm/layout/box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,GAAG,EAAiB,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/box/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,GAAG,EAAiB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,gBAAgB,CAAC"}

package/esm/theme/Theme.d.ts

@@ -1,5 +1,11 @@
+import cl from "clsx";
 import React from "react";
 import { AsChildProps } from "../util/types/index.js";
+type RenameCSSContext = {
+    cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
+};
+declare const useRenameCSS: <S extends boolean = true>(strict?: S) => S extends true ? RenameCSSContext : RenameCSSContext | undefined;
+export declare const compositeClassFunction: (...inputs: Parameters<typeof cl>) => string;
 type ThemeContext = {
     /**
      * Color theme
@@ -13,4 +19,4 @@ export type ThemeProps = {
     hasBackground?: boolean;
 } & ThemeContext & AsChildProps;
 declare const Theme: React.ForwardRefExoticComponent<ThemeProps & React.RefAttributes<HTMLDivElement>>;
-export { Theme, useThemeInternal };
+export { Theme, useRenameCSS, useThemeInternal };

package/esm/theme/Theme.js

@@ -2,6 +2,25 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Slot } from "../slot/Slot.js";
 import { createContext } from "../util/create-context.js";
+const [RenameCSSProvider, useRenameCSS] = createContext({
+    hookName: "useRenameCSS",
+    name: "RenameCSS",
+    providerName: "RenameCSSProvider",
+    defaultValue: { cn: cl },
+});
+export const compositeClassFunction = (...inputs) => {
+    const classes = cl(inputs)
+        /* Replaces only if start of string  "navds- navds-"*/
+        .replace(/^navds-/g, "aksel-")
+        /* Replaces all " navds-" hits */
+        .replace(/\snavds-/g, " aksel-");
+    return classes.trim();
+};
+const RenameCSS = ({ children }) => {
+    /* Replace function with this when implementation is complete and CSS is updated */
+    /* <RenameCSSProvider cn={compositeClassFunction}> */
+    return React.createElement(RenameCSSProvider, { cn: cl }, children);
+};
 const [ThemeProvider, useThemeInternal] = createContext({
     hookName: "useTheme",
     name: "ThemeProvider",
@@ -15,7 +34,8 @@ const Theme = forwardRef((props, ref) => {
     const hasBackground = hasBackgroundProp !== null && hasBackgroundProp !== void 0 ? hasBackgroundProp : (isRoot && props.theme !== undefined);
     const SlotElement = asChild ? Slot : "div";
     return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(SlotElement, { ref: ref, className: cl("navds-theme", className, theme), "data-background": hasBackground }, children)));
+        React.createElement(RenameCSS, null,
+            React.createElement(SlotElement, { ref: ref, className: cl("navds-theme", className, theme), "data-background": hasBackground }, children))));
 });
-export { Theme, useThemeInternal };
+export { Theme, useRenameCSS, useThemeInternal };
 //# sourceMappingURL=Theme.js.map

package/esm/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAWvD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,aAAa,CAAe;IACpE,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,eAAe;CAC9B,CAAC,CAAC;AAQH,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,KAAiB,EAAE,GAAG,EAAE,EAAE;;IACzB,MAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,IAE7B,QAAQ,CACG,CACA,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"Theme.js","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAUvD,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,GAAG,aAAa,CAAmB;IACxE,QAAQ,EAAE,cAAc;IACxB,IAAI,EAAE,WAAW;IACjB,YAAY,EAAE,mBAAmB;IACjC,YAAY,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;CACzB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,GAAG,MAA6B,EACxB,EAAE;IACV,MAAM,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC;QACxB,sDAAsD;SACrD,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC;QAC9B,iCAAiC;SAChC,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAEnC,OAAO,OAAO,CAAC,IAAI,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAChE,mFAAmF;IACnF,qDAAqD;IACrD,OAAO,oBAAC,iBAAiB,IAAC,EAAE,EAAE,EAAE,IAAG,QAAQ,CAAqB,CAAC;AACnE,CAAC,CAAC;AAaF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,aAAa,CAAe;IACpE,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,eAAe;IACrB,YAAY,EAAE,eAAe;CAC9B,CAAC,CAAC;AAQH,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,KAAiB,EAAE,GAAG,EAAE,EAAE;;IACzB,MAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAE3C,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,oBAAC,SAAS;YACR,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,IAE7B,QAAQ,CACG,CACJ,CACE,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/theme/index.d.ts

@@ -1 +1 @@
-export { Theme, ThemeProps } from "./Theme.js";
+export { Theme, type ThemeProps } from "./Theme.js";

package/esm/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.12.1",
+  "version": "7.13.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -620,13 +620,13 @@
     "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
-    "test:watch": "vitest watch"
+    "test:watch": "TZ=UTC vitest watch -c tests/vitest.config.ts"
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.12.1",
-    "@navikt/ds-tokens": "^7.12.1",
+    "@navikt/aksel-icons": "^7.13.0",
+    "@navikt/ds-tokens": "^7.13.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"

package/src/form/confirmation-panel/ConfirmationPanel.tsx

@@ -57,6 +57,12 @@ export const ConfirmationPanel = forwardRef<
 
   const id = useId();
 
+  const currentRole = hasError
+    ? "danger"
+    : props.checked
+      ? "success"
+      : "warning";
+
   return (
     <div
       className={cl("navds-confirmation-panel", "navds-form-field", className, {
@@ -64,6 +70,7 @@ export const ConfirmationPanel = forwardRef<
         "navds-confirmation-panel--error": hasError,
         "navds-confirmation-panel--checked": !!props.checked,
       })}
+      data-color-role={currentRole}
     >
       <div className="navds-confirmation-panel__inner">
         {children && (

package/src/index.ts

@@ -36,7 +36,7 @@ export {
   type InternalHeaderUserProps,
 } from "./internal-header";
 export { Bleed, type BleedProps } from "./layout/bleed";
-export { Box, type BoxProps } from "./layout/box";
+export { Box, type BoxProps, BoxNew, type BoxNewProps } from "./layout/box";
 export { HGrid, type HGridProps } from "./layout/grid";
 export { Page, type PageBlockProps, type PageProps } from "./layout/page";
 export { Hide, Show, type ResponsiveProps } from "./layout/responsive";

package/src/layout/box/index.ts

@@ -1,5 +1,3 @@
 "use client";
 export { default as Box, type BoxProps } from "./Box";
-
-/* TODO: Uncomment this when ready to expose darkmode-support. Remember to update top-level `index.ts` at the same time. */
-/* export { default as BoxNew, type BoxNewProps } from "./Box.darkside"; */
+export { default as BoxNew, type BoxNewProps } from "./Box.darkside";

package/src/react-css.d.ts

@@ -1,4 +1,5 @@
 import "react";
+import type { GlobalColorRoles } from "@navikt/ds-tokens/types";
 
 declare module "react" {
   interface CSSProperties {
@@ -7,4 +8,7 @@ declare module "react" {
     [key: `--axc-${string}`]: string | number | undefined;
     [key: `--__axc-${string}`]: string | number | undefined;
   }
+  interface HTMLAttributes {
+    "data-color-role"?: GlobalColorRoles;
+  }
 }

package/src/theme/RenameCSS.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, test } from "vitest";
+import { compositeClassFunction } from "./Theme";
+
+const start = "navds-accordion testclass navds-heading endclass";
+const end =
+  "startclass navds-accordion navds-heading endclass navds-accordion__header";
+
+const both = start + " " + end;
+
+describe("RenameCSS", () => {
+  test("String starts with navds", () => {
+    expect(compositeClassFunction(start)).toBe(
+      "aksel-accordion testclass aksel-heading endclass",
+    );
+  });
+
+  test("String ends with navds", () => {
+    expect(compositeClassFunction(end)).toBe(
+      "startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
+    );
+  });
+
+  test("String starts and ends with navds", () => {
+    expect(compositeClassFunction(both)).toBe(
+      "aksel-accordion testclass aksel-heading endclass startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
+    );
+  });
+
+  test("String does not contain navds", () => {
+    expect(compositeClassFunction("startclass endclass")).toBe(
+      "startclass endclass",
+    );
+  });
+
+  test("String is empty", () => {
+    expect(compositeClassFunction("")).toBe("");
+  });
+
+  test("String contains navds as a substring", () => {
+    expect(compositeClassFunction("startclass test-navds-class endclass")).toBe(
+      "startclass test-navds-class endclass",
+    );
+  });
+
+  test("String contains multiple navds occurrences", () => {
+    const input = "navds-button navds-icon navds-label";
+    const expected = "aksel-button aksel-icon aksel-label";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains navds with special characters", () => {
+    const input = "navds-button! navds-icon@ navds-#label navds#-label";
+    const expected = "aksel-button! aksel-icon@ aksel-#label navds#-label";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains mixed navds and non-navds classes", () => {
+    const input = "navds-button custom-class navds-icon";
+    const expected = "aksel-button custom-class aksel-icon";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains only navds", () => {
+    const input = "navds";
+    const expected = "navds";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains navds with numbers", () => {
+    const input = "navds-1 navds-2 navds-3";
+    const expected = "aksel-1 aksel-2 aksel-3";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+
+  test("String contains different casings", () => {
+    const input = "Navds-button NAVds-icon NAVDS-label navDS-component";
+    const expected = "Navds-button NAVds-icon NAVDS-label navDS-component";
+    expect(compositeClassFunction(input)).toBe(expected);
+  });
+});

package/src/theme/Theme.tsx

@@ -4,6 +4,41 @@ import { Slot } from "../slot/Slot";
 import { createContext } from "../util/create-context";
 import { AsChildProps } from "../util/types";
 
+/* -------------------------------------------------------------------------- */
+/*                               CSS Trsnalation                              */
+/* -------------------------------------------------------------------------- */
+type RenameCSSContext = {
+  cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
+};
+
+const [RenameCSSProvider, useRenameCSS] = createContext<RenameCSSContext>({
+  hookName: "useRenameCSS",
+  name: "RenameCSS",
+  providerName: "RenameCSSProvider",
+  defaultValue: { cn: cl },
+});
+
+export const compositeClassFunction = (
+  ...inputs: Parameters<typeof cl>
+): string => {
+  const classes = cl(inputs)
+    /* Replaces only if start of string  "navds- navds-"*/
+    .replace(/^navds-/g, "aksel-")
+    /* Replaces all " navds-" hits */
+    .replace(/\snavds-/g, " aksel-");
+
+  return classes.trim();
+};
+
+const RenameCSS = ({ children }: { children: React.ReactNode }) => {
+  /* Replace function with this when implementation is complete and CSS is updated */
+  /* <RenameCSSProvider cn={compositeClassFunction}> */
+  return <RenameCSSProvider cn={cl}>{children}</RenameCSSProvider>;
+};
+
+/* -------------------------------------------------------------------------- */
+/*                               Theme provider                               */
+/* -------------------------------------------------------------------------- */
 type ThemeContext = {
   /**
    * Color theme
@@ -45,16 +80,18 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
 
     return (
       <ThemeProvider theme={theme}>
-        <SlotElement
-          ref={ref}
-          className={cl("navds-theme", className, theme)}
-          data-background={hasBackground}
-        >
-          {children}
-        </SlotElement>
+        <RenameCSS>
+          <SlotElement
+            ref={ref}
+            className={cl("navds-theme", className, theme)}
+            data-background={hasBackground}
+          >
+            {children}
+          </SlotElement>
+        </RenameCSS>
       </ThemeProvider>
     );
   },
 );
 
-export { Theme, useThemeInternal };
+export { Theme, useRenameCSS, useThemeInternal };

package/src/theme/index.ts

@@ -1,2 +1,2 @@
 "use client";
-export { Theme, ThemeProps } from "./Theme";
+export { Theme, type ThemeProps } from "./Theme";