@navikt/ds-react 7.40.0 → 8.0.1

package/cjs/layout/box/Box.darkside.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
+import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselDynamicStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
 import { OverridableComponent } from "../../util/types";
 import { PrimitiveProps } from "../base/BasePrimitive";
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
@@ -7,25 +7,25 @@ import { BorderRadiusScale, ResponsiveProp, SpaceDelimitedAttribute } from "../u
 export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * CSS `background-color` property.
-     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
-     * @see {@link StaticDefaultBgKeys} and {@link StaticBgKeys}
+     * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#backgroundColor).
+     * @see {@link AkselRootBackgroundToken}, {@link AkselColoredStatelessBackgroundToken} and {@link AkselDynamicStatelessBackgroundToken}
      */
-    background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken;
+    background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken | AkselDynamicStatelessBackgroundToken;
     /**
      * CSS `border-color` property.
-     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
-     * @see {@link BorderColorKeys} and {@link BorderColorWithRoleKeys}
+     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#borderColor).
+     * @see {@link AkselColoredBorderToken}
      */
     borderColor?: Exclude<AkselRootBorderToken, "focus"> | AkselColoredBorderToken;
     /**
      * CSS `border-radius` property.
-     * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
+     * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#radius)
      * or an object of radius tokens for different breakpoints.
      * @example
      * borderRadius='full'
      * borderRadius='0 full 12 2'
      * borderRadius={{xs: '2 12', sm: '0', md: '12', lg: 'full'}}
-     * @see {@link BorderRadiusKeys}
+     * @see {@link BorderRadiusScale}
      */
     borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>;
     /**
@@ -43,29 +43,31 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
     shadow?: AkselShadowToken;
 } & PrimitiveProps & PrimitiveAsChildProps;
 /**
- *
  * Foundational Layout-primitive for generic encapsulation & styling.
+ * @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
+ *
+ * **Run `npx @navikt/aksel@latest codemod v8-box-new` to migrate.**
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
  * @see 🏷️ {@link BoxProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <Box padding="4">
+ * <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ * <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <VStack gap="8">
- *  <Box padding="4">
+ * <VStack gap="space-32">
+ *  <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  *  </Box>
- *  <Box padding="4">
+ *  <Box padding="space-16">
  *    <BodyShort>Hei</BodyShort>
  *  </Box>
  * </VStack>

package/cjs/layout/box/Box.darkside.js

@@ -47,41 +47,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BoxNew = void 0;
 const react_1 = __importStar(require("react"));
 const Slot_1 = require("../../slot/Slot");
-const Theme_1 = require("../../theme/Theme");
 const util_1 = require("../../util");
+const className_1 = require("../../util/className");
 const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
 const css_1 = require("../utilities/css");
 /**
- *
  * Foundational Layout-primitive for generic encapsulation & styling.
+ * @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
+ *
+ * **Run `npx @navikt/aksel@latest codemod v8-box-new` to migrate.**
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
  * @see 🏷️ {@link BoxProps}
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <Box padding="4">
+ * <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ * <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <VStack gap="8">
- *  <Box padding="4">
+ * <VStack gap="space-32">
+ *  <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  *  </Box>
- *  <Box padding="4">
+ *  <Box padding="space-16">
  *    <BodyShort>Hei</BodyShort>
  *  </Box>
  * </VStack>
  */
 exports.BoxNew = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, as: Component = "div", background, borderColor, borderWidth, borderRadius, shadow, style: _style, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "background", "borderColor", "borderWidth", "borderRadius", "shadow", "style", "asChild"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__axc-box-background": background
             ? `var(--ax-bg-${background})`
             : undefined, "--__axc-box-shadow": shadow ? `var(--ax-shadow-${shadow})` : undefined, "--__axc-box-border-color": borderColor
@@ -91,15 +92,17 @@ exports.BoxNew = (0, react_1.forwardRef)((_a, ref) => {
                 .split(" ")
                 .map((x) => `${x}px`)
                 .join(" ")
-            : undefined }), (0, css_1.getResponsiveProps)("ax", "box", "radius", "radius", borderRadius, false, ["0"]));
+            : undefined }), (0, css_1.getResponsiveProps)("box", "radius", "radius", borderRadius, false, [
+        "0",
+    ]));
     const Comp = asChild ? Slot_1.Slot : Component;
     return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
-        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: cn("navds-box", className, {
-                "navds-box-bg": background,
-                "navds-box-border-color": borderColor,
-                "navds-box-border-width": borderWidth,
-                "navds-box-radius": borderRadius,
-                "navds-box-shadow": shadow,
+        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, className_1.cl)("aksel-box", className, {
+                "aksel-box-bg": background,
+                "aksel-box-border-color": borderColor,
+                "aksel-box-border-width": borderWidth,
+                "aksel-box-radius": borderRadius,
+                "aksel-box-shadow": shadow,
             }) }), children)));
 });
 exports.default = exports.BoxNew;

package/cjs/layout/box/Box.darkside.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.darkside.js","sourceRoot":"","sources":["../../../src/layout/box/Box.darkside.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAQ1C,0CAAuC;AACvC,6CAAiD;AACjD,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAmDtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACU,QAAA,MAAM,GACjB,IAAA,kBAAU,EACR,CACE,EAY2C,EAC3C,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAEkC,EADtC,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,KAAK,iDACN,MAAM,KACT,wBAAwB,EAAE,UAAU;YAClC,CAAC,CAAC,eAAe,UAAU,GAAG;YAC9B,CAAC,CAAC,SAAS,EACb,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACvE,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,mBAAmB,WAAW,GAAG;YACnC,CAAC,CAAC,SAAS,EACb,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EACnB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,kBAAkB,EAAE,YAAY;gBAChC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,cAAM,CAAC"}
+{"version":3,"file":"Box.darkside.js","sourceRoot":"","sources":["../../../src/layout/box/Box.darkside.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAS1C,0CAAuC;AACvC,qCAAkC;AAClC,oDAA0C;AAE1C,uEAG+B;AAE/B,0CAAsD;AAsDtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACU,QAAA,MAAM,GACjB,IAAA,kBAAU,EACR,CACE,EAY2C,EAC3C,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAEkC,EADtC,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,KAAK,iDACN,MAAM,KACT,wBAAwB,EAAE,UAAU;YAClC,CAAC,CAAC,eAAe,UAAU,GAAG;YAC9B,CAAC,CAAC,SAAS,EACb,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACvE,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,mBAAmB,WAAW,GAAG;YACnC,CAAC,CAAC,SAAS,EACb,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,GAAG;KACJ,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,kBAAkB,EAAE,YAAY;gBAChC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,cAAM,CAAC"}

package/cjs/layout/box/Box.js

@@ -50,8 +50,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = exports.BoxComponent = void 0;
 const react_1 = __importStar(require("react"));
 const Slot_1 = require("../../slot/Slot");
-const Theme_1 = require("../../theme/Theme");
 const util_1 = require("../../util");
+const className_1 = require("../../util/className");
 const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
 const css_1 = require("../utilities/css");
 const Box_darkside_1 = __importDefault(require("./Box.darkside"));
@@ -63,66 +63,47 @@ const Box_darkside_1 = __importDefault(require("./Box.darkside"));
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <Box padding="4">
+ * <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ * <Box padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}>
  *   <BodyShort>Hei</BodyShort>
  * </Box>
  *
  * @example
- * <VStack gap="8">
- *  <Box padding="4">
+ * <VStack gap="space-32">
+ *  <Box padding="space-16">
  *   <BodyShort>Hei</BodyShort>
  *  </Box>
- *  <Box padding="4">
+ *  <Box padding="space-16">
  *    <BodyShort>Hei</BodyShort>
  *  </Box>
  * </VStack>
  */
 exports.BoxComponent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, as: Component = "div", background, borderColor, borderWidth, borderRadius, shadow, style: _style, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "background", "borderColor", "borderWidth", "borderRadius", "shadow", "style", "asChild"]);
-    const themeContext = (0, Theme_1.useThemeInternal)();
-    const { cn } = (0, Theme_1.useRenameCSS)();
-    if (process.env.NODE_ENV !== "production" &&
-        (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) &&
-        (background || borderColor || shadow)) {
-        let errorText = ``;
-        if (background) {
-            errorText += `\n- background: "${background}"`;
-        }
-        if (borderColor) {
-            errorText += `\n- borderColor: "${borderColor}"`;
-        }
-        if (shadow) {
-            errorText += `\n- shadow: "${shadow}"`;
-        }
-        throw new Error(`<Box /> with properties 'background', 'borderColor' or 'shadow' cannot be used with Aksel <Theme /> (darkmode-support). \nTo continue using these properties, migrate to '<Box.New>' (BoxNew for RSC)\nUpdate these props:${errorText}`);
-    }
-    const prefix = (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? "ax" : "a";
-    const style = Object.assign(Object.assign(Object.assign({}, _style), { [`--__${prefix}c-box-background`]: background
-            ? `var(--a-${background})`
-            : undefined, [`--__${prefix}c-box-shadow`]: shadow
-            ? `var(--a-shadow-${shadow})`
-            : undefined, [`--__${prefix}c-box-border-color`]: borderColor
-            ? `var(--a-${borderColor})`
-            : undefined, [`--__${prefix}c-box-border-width`]: borderWidth
+    const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__axc-box-background": background
+            ? `var(--ax-bg-${background})`
+            : undefined, "--__axc-box-shadow": shadow ? `var(--ax-shadow-${shadow})` : undefined, "--__axc-box-border-color": borderColor
+            ? `var(--ax-border-${borderColor})`
+            : undefined, "--__axc-box-border-width": borderWidth
             ? borderWidth
                 .split(" ")
                 .map((x) => `${x}px`)
                 .join(" ")
-            : undefined }), (0, css_1.getResponsiveProps)(prefix, "box", "radius", "radius", borderRadius, false, ["0"]));
+            : undefined }), (0, css_1.getResponsiveProps)("box", "radius", "radius", borderRadius, false, [
+        "0",
+    ]));
     const Comp = asChild ? Slot_1.Slot : Component;
     return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
-        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: cn("navds-box", className, {
-                "navds-box-bg": background,
-                "navds-box-border-color": borderColor,
-                "navds-box-border-width": borderWidth,
-                "navds-box-border-radius": borderRadius && !(themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside),
-                "navds-box-radius": borderRadius && (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside),
-                "navds-box-shadow": shadow,
+        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, className_1.cl)("aksel-box", className, {
+                "aksel-box-bg": background,
+                "aksel-box-border-color": borderColor,
+                "aksel-box-border-width": borderWidth,
+                "aksel-box-radius": borderRadius,
+                "aksel-box-shadow": shadow,
             }) }), children)));
 });
 exports.Box = exports.BoxComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAS1C,0CAAuC;AACvC,qCAAkC;AAClC,oDAA0C;AAE1C,uEAG+B;AAE/B,0CAAsD;AAMtD,kEAAoC;AA2DpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,YAAY,GACvB,IAAA,kBAAU,EACR,CACE,EAYwC,EACxC,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAE+B,EADnC,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,KAAK,iDACN,MAAM,KACT,wBAAwB,EAAE,UAAU;YAClC,CAAC,CAAC,eAAe,UAAU,GAAG;YAC9B,CAAC,CAAC,SAAS,EACb,oBAAoB,EAAE,MAAM,CAAC,CAAC,CAAC,mBAAmB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACvE,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,mBAAmB,WAAW,GAAG;YACnC,CAAC,CAAC,SAAS,EACb,0BAA0B,EAAE,WAAW;YACrC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,GAAG;KACJ,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,kBAAkB,EAAE,YAAY;gBAChC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAES,QAAA,GAAG,GAAG,oBAAgC,CAAC;AAEpD,WAAG,CAAC,GAAG,GAAG,sBAAM,CAAC;AAEjB,kBAAe,WAAG,CAAC"}

package/cjs/layout/grid/HGrid.d.ts

@@ -15,7 +15,7 @@ export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
     columns?: ResponsiveProp<number | string>;
     /**
      * Spacing between columns.
-     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
      * or an object of spacing tokens for different breakpoints.
      * @example
      * gap="space-20"
@@ -35,19 +35,19 @@ export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
  * @see 🏷️ {@link HGridProps}
  *
  * @example
- * <HGrid gap="6" columns={3}>
+ * <HGrid gap="space-24" columns={3}>
  *   <div />
  *   <div />
  *   <div />
  * </HGrid>
  * @example
- * <HGrid gap={{xs: "2", md: "6"}} columns={3}>
+ * <HGrid gap={{xs: "space-8", md: "space-24"}} columns={3}>
  *   <div />
  *   <div />
  *   <div />
  * </HGrid>
  * @example
- * <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
+ * <HGrid gap="space-24" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
  *   <div />
  *   <div />
  *   <div />

package/cjs/layout/grid/HGrid.js

@@ -47,8 +47,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HGrid = void 0;
 const react_1 = __importStar(require("react"));
 const Slot_1 = require("../../slot/Slot");
-const Theme_1 = require("../../theme/Theme");
 const util_1 = require("../../util");
+const className_1 = require("../../util/className");
 const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
 const css_1 = require("../utilities/css");
 /**
@@ -58,19 +58,19 @@ const css_1 = require("../utilities/css");
  * @see 🏷️ {@link HGridProps}
  *
  * @example
- * <HGrid gap="6" columns={3}>
+ * <HGrid gap="space-24" columns={3}>
  *   <div />
  *   <div />
  *   <div />
  * </HGrid>
  * @example
- * <HGrid gap={{xs: "2", md: "6"}} columns={3}>
+ * <HGrid gap={{xs: "space-8", md: "space-24"}} columns={3}>
  *   <div />
  *   <div />
  *   <div />
  * </HGrid>
  * @example
- * <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
+ * <HGrid gap="space-24" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
  *   <div />
  *   <div />
  *   <div />
@@ -78,15 +78,12 @@ const css_1 = require("../utilities/css");
  */
 exports.HGrid = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, as: Component = "div", columns, gap, style, align, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "columns", "gap", "style", "align", "asChild"]);
-    const themeContext = (0, Theme_1.useThemeInternal)();
-    const prefix = (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? "ax" : "a";
-    const { cn } = (0, Theme_1.useRenameCSS)();
-    const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { [`--__${prefix}c-hgrid-align`]: align }), (0, css_1.getResponsiveProps)(prefix, `hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(prefix, `hgrid`, "columns", formatGrid(columns)));
+    const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__axc-hgrid-align": align }), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "space", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
     const Comp = asChild ? Slot_1.Slot : Component;
     return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
-        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, className: cn("navds-hgrid", className, {
-                "navds-hgrid-gap": gap,
-                "navds-hgrid-align": align,
+        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, className: (0, className_1.cl)("aksel-hgrid", className, {
+                "aksel-hgrid-gap": gap,
+                "aksel-hgrid-align": align,
             }), style: styles }), children)));
 });
 function formatGrid(props) {

package/cjs/layout/grid/HGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,6CAAmE;AACnE,qCAAwD;AACxD,uEAG+B;AAE/B,0CAA0E;AA6B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACU,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,EACP,GAAG,EACH,KAAK,EACL,KAAK,EACL,OAAO,OAER,EADI,IAAI,cATT,8EAUC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IACxC,MAAM,MAAM,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IACrD,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,MAAM,MAAM,+DACP,KAAK,KACR,CAAC,OAAO,MAAM,eAAe,CAAC,EAAE,KAAK,KAClC,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAC1D,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CACvE,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;aAC3B,CAAC,EACF,KAAK,EAAE,MAAM,KAEZ,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,UAAU,IAAI,mBAAmB,CAAC;IAC3C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,kBAAe,aAAK,CAAC"}
+{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,qCAAwD;AACxD,oDAA0C;AAC1C,uEAG+B;AAE/B,0CAA0E;AA6B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACU,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,EACP,GAAG,EACH,KAAK,EACL,KAAK,EACL,OAAO,OAER,EADI,IAAI,cATT,8EAUC,CADQ;IAIT,MAAM,MAAM,+DACP,KAAK,KACR,qBAAqB,EAAE,KAAK,KACzB,IAAA,wBAAkB,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,GAChD,IAAA,wBAAkB,EAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;aAC3B,CAAC,EACF,KAAK,EAAE,MAAM,KAEZ,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,UAAU,IAAI,mBAAmB,CAAC;IAC3C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,kBAAe,aAAK,CAAC"}

package/cjs/layout/page/Page.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { OverridableComponent } from "../../util";
-import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
 export interface PageProps extends React.HTMLAttributes<HTMLElement> {
     /**
@@ -8,13 +7,6 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
      * @default "div"
      */
     as?: "div" | "body";
-    /**
-     * Background color.
-     * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
-     * @default "bg-default"
-     * @deprecated Use `<Box asChild background="...">` wrapped around `<Page>`.
-     */
-    background?: BackgroundColorToken;
     /**
      * Allows better positioning of footer
      */
@@ -28,6 +20,10 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
      * @default "end"
      */
     contentBlockPadding?: "end" | "none";
+    /**
+     * @deprecated Deprecated in v8 and no longer has any effect. Use `<Box asChild background="...">` wrapped around `<Page>`.
+     */
+    background?: string;
 }
 interface PageComponentType extends OverridableComponent<PageProps, HTMLElement> {
     Block: typeof PageBlock;

package/cjs/layout/page/Page.js

@@ -46,24 +46,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageComponent = 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 PageBlock_1 = require("./parts/PageBlock");
 exports.PageComponent = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "div", className, style: _style, footer, children, footerPosition, background, contentBlockPadding = "end" } = _a, rest = __rest(_a, ["as", "className", "style", "footer", "children", "footerPosition", "background", "contentBlockPadding"]);
-    const themeContext = (0, Theme_1.useThemeInternal)();
-    const { cn } = (0, Theme_1.useRenameCSS)();
-    if (process.env.NODE_ENV !== "production" &&
-        (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) &&
-        background) {
-        console.warn(`Prop \`background\` is deprecated and cannot be used with theme-support. Instead wrap component with \`<Box asChild background>\``);
-    }
-    const style = Object.assign(Object.assign({}, _style), { "--__ac-page-background": `var(--a-${background !== null && background !== void 0 ? background : "bg-default"})` });
+    var { as: Component = "div", className, footer, children, footerPosition, contentBlockPadding = "end" } = _a, rest = __rest(_a, ["as", "className", "footer", "children", "footerPosition", "contentBlockPadding"]);
     const belowFold = footerPosition === "belowFold";
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { className: cn("navds-page", className), ref: ref, style: style }),
-        react_1.default.createElement("div", { className: cn({
-                "navds-page__content--fullheight": belowFold,
-                "navds-page__content--grow": !belowFold,
-                "navds-page__content--padding": contentBlockPadding === "end",
+    return (react_1.default.createElement(Component, Object.assign({}, (0, util_1.omit)(rest, ["background"]), { className: (0, className_1.cl)("aksel-page", className), ref: ref }),
+        react_1.default.createElement("div", { className: (0, className_1.cl)({
+                "aksel-page__content--fullheight": belowFold,
+                "aksel-page__content--grow": !belowFold,
+                "aksel-page__content--padding": contentBlockPadding === "end",
             }) }, children),
         footer));
 });

package/cjs/layout/page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/layout/page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,6CAAmE;AAGnE,iDAA8C;AAmCjC,QAAA,aAAa,GACxB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EACN,QAAQ,EACR,cAAc,EACd,UAAU,EACV,mBAAmB,GAAG,KAAK,OAE5B,EADI,IAAI,cATT,yGAUC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IACxC,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;SACrC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,CAAA;QACxB,UAAU,EACV,CAAC;QACD,OAAO,CAAC,IAAI,CACV,mIAAmI,CACpI,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,mCACN,MAAM,KACT,wBAAwB,EAAE,WAAW,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,YAAY,GAAG,GACnE,CAAC;IAEF,MAAM,SAAS,GAAG,cAAc,KAAK,WAAW,CAAC;IAEjD,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,EACtC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,uCACE,SAAS,EAAE,EAAE,CAAC;gBACZ,iCAAiC,EAAE,SAAS;gBAC5C,2BAA2B,EAAE,CAAC,SAAS;gBACvC,8BAA8B,EAAE,mBAAmB,KAAK,KAAK;aAC9D,CAAC,IAED,QAAQ,CACL;QACL,MAAM,CACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,IAAI,GAAG,qBAAkC,CAAC;AAEhD,IAAI,CAAC,KAAK,GAAG,qBAAS,CAAC;AAEvB,kBAAe,IAAI,CAAC"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/layout/page/Page.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qCAAwD;AACxD,oDAA0C;AAC1C,iDAA8C;AAgCjC,QAAA,aAAa,GACxB,IAAA,kBAAU,EACR,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,MAAM,EACN,QAAQ,EACR,cAAc,EACd,mBAAmB,GAAG,KAAK,OAE5B,EADI,IAAI,cAPT,kFAQC,CADQ;IAIT,MAAM,SAAS,GAAG,cAAc,KAAK,WAAW,CAAC;IAEjD,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAA,WAAI,EAAC,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC,IAC9B,SAAS,EAAE,IAAA,cAAE,EAAC,YAAY,EAAE,SAAS,CAAC,EACtC,GAAG,EAAE,GAAG;QAER,uCACE,SAAS,EAAE,IAAA,cAAE,EAAC;gBACZ,iCAAiC,EAAE,SAAS;gBAC5C,2BAA2B,EAAE,CAAC,SAAS;gBACvC,8BAA8B,EAAE,mBAAmB,KAAK,KAAK;aAC9D,CAAC,IAED,QAAQ,CACL;QACL,MAAM,CACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,IAAI,GAAG,qBAAkC,CAAC;AAEhD,IAAI,CAAC,KAAK,GAAG,qBAAS,CAAC;AAEvB,kBAAe,IAAI,CAAC"}

package/cjs/layout/page/parts/PageBlock.js

@@ -46,7 +46,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageBlock = exports.widths = void 0;
 const react_1 = __importStar(require("react"));
-const Theme_1 = require("../../../theme/Theme");
+const className_1 = require("../../../util/className");
 exports.widths = ["text", "md", "lg", "xl", "2xl"];
 /**
  * Acts as a top-level container for defining max-width, gutters and horizontal centering
@@ -79,8 +79,7 @@ exports.widths = ["text", "md", "lg", "xl", "2xl"];
  */
 exports.PageBlock = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "div", gutters, className, width } = _a, rest = __rest(_a, ["as", "gutters", "className", "width"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { className: cn("navds-pageblock", width && `navds-pageblock--${width}`, className, { "navds-pageblock--gutters": gutters }), ref: ref })));
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { className: (0, className_1.cl)("aksel-pageblock", width && `aksel-pageblock--${width}`, className, { "aksel-pageblock--gutters": gutters }), ref: ref })));
 });
 exports.default = exports.PageBlock;
 //# sourceMappingURL=PageBlock.js.map

package/cjs/layout/page/parts/PageBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageBlock.js","sourceRoot":"","sources":["../../../../src/layout/page/parts/PageBlock.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAoD;AAGvC,QAAA,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAU,CAAC;AA+BjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACU,QAAA,SAAS,GACpB,IAAA,kBAAU,EACR,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAA3D,uCAA6D,CAAF;IAC1D,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,KAAK,IAAI,oBAAoB,KAAK,EAAE,EACpC,SAAS,EACT,EAAE,0BAA0B,EAAE,OAAO,EAAE,CACxC,EACD,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,iBAAS,CAAC"}
+{"version":3,"file":"PageBlock.js","sourceRoot":"","sources":["../../../../src/layout/page/parts/PageBlock.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,uDAA6C;AAGhC,QAAA,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAU,CAAC;AA+BjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACU,QAAA,SAAS,GACpB,IAAA,kBAAU,EACR,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAA3D,uCAA6D,CAAF;IAC1D,OAAO,CACL,8BAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,IAAA,cAAE,EACX,iBAAiB,EACjB,KAAK,IAAI,oBAAoB,KAAK,EAAE,EACpC,SAAS,EACT,EAAE,0BAA0B,EAAE,OAAO,EAAE,CACxC,EACD,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,iBAAS,CAAC"}

package/cjs/layout/responsive/Responsive.js

@@ -47,16 +47,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Show = exports.Hide = void 0;
 const react_1 = __importStar(require("react"));
 const Slot_1 = require("../../slot/Slot");
-const Theme_1 = require("../../theme/Theme");
+const className_1 = require("../../util/className");
 const Responsive = (0, react_1.forwardRef)((_a, ref) => {
     var { as: Component = "div", className, above, below, variant, asChild } = _a, rest = __rest(_a, ["as", "className", "above", "below", "variant", "asChild"]);
-    const { cn } = (0, Theme_1.useRenameCSS)();
     const aboveProp = variant === "show" ? above : below;
     const belowProp = variant === "show" ? below : above;
     const Comp = asChild ? Slot_1.Slot : Component;
-    return (react_1.default.createElement(Comp, Object.assign({}, rest, { ref: ref, className: cn("navds-responsive", className, {
-            [`navds-responsive__above--${aboveProp}`]: aboveProp,
-            [`navds-responsive__below--${belowProp}`]: belowProp,
+    return (react_1.default.createElement(Comp, Object.assign({}, rest, { ref: ref, className: (0, className_1.cl)("aksel-responsive", className, {
+            [`aksel-responsive__above--${aboveProp}`]: aboveProp,
+            [`aksel-responsive__below--${belowProp}`]: belowProp,
         }) })));
 });
 /**

package/cjs/layout/responsive/Responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../src/layout/responsive/Responsive.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,0CAAuC;AACvC,6CAAiD;AAwBjD,MAAM,UAAU,GAAG,IAAA,kBAAU,EAI3B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,OAER,EADI,IAAI,cAPT,2DAQC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,IAAI,oBACC,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;YACpD,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;SACrD,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACU,QAAA,IAAI,GAAG,IAAA,kBAAU,EAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,8BAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACU,QAAA,IAAI,GAAG,IAAA,kBAAU,EAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,8BAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC"}
+{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../src/layout/responsive/Responsive.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,0CAAuC;AACvC,oDAA0C;AAwB1C,MAAM,UAAU,GAAG,IAAA,kBAAU,EAI3B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,OAER,EADI,IAAI,cAPT,2DAQC,CADQ;IAIT,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,IAAI,oBACC,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;YACpD,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;SACrD,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACU,QAAA,IAAI,GAAG,IAAA,kBAAU,EAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,8BAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACU,QAAA,IAAI,GAAG,IAAA,kBAAU,EAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,8BAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC"}

package/cjs/layout/stack/Spacer.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spacer = void 0;
 const react_1 = __importDefault(require("react"));
-const Theme_1 = require("../../theme/Theme");
 /**
  * Layout-primitive for auto-spacing between elements
  *
@@ -19,8 +18,7 @@ const Theme_1 = require("../../theme/Theme");
  * </HStack>
  */
 const Spacer = () => {
-    const { cn } = (0, Theme_1.useRenameCSS)();
-    return react_1.default.createElement("span", { className: cn("navds-stack__spacer") });
+    return react_1.default.createElement("span", { className: "aksel-stack__spacer" });
 };
 exports.Spacer = Spacer;
 exports.default = exports.Spacer;

package/cjs/layout/stack/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,6CAAiD;AAEjD;;;;;;;;;;;GAWG;AACI,MAAM,MAAM,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAC9B,OAAO,wCAAM,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC,GAAI,CAAC;AACxD,CAAC,CAAC;AAHW,QAAA,MAAM,UAGjB;AAEF,kBAAe,cAAM,CAAC"}
+{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/layout/stack/Spacer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B;;;;;;;;;;;GAWG;AACI,MAAM,MAAM,GAAG,GAAG,EAAE;IACzB,OAAO,wCAAM,SAAS,EAAC,qBAAqB,GAAG,CAAC;AAClD,CAAC,CAAC;AAFW,QAAA,MAAM,UAEjB;AAEF,kBAAe,cAAM,CAAC"}

package/cjs/layout/stack/Stack.d.ts

@@ -27,7 +27,7 @@ export type StackProps = HTMLAttributes<HTMLDivElement> & {
     wrap?: boolean;
     /**
      * CSS `gap` property.
-     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#space)
      * or an object of spacing tokens for different breakpoints.
      *
      * @example

package/cjs/layout/stack/Stack.js

@@ -47,26 +47,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = void 0;
 const react_1 = __importStar(require("react"));
 const Slot_1 = require("../../slot/Slot");
-const Theme_1 = require("../../theme/Theme");
 const util_1 = require("../../util");
+const className_1 = require("../../util/className");
 const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
 const css_1 = require("../utilities/css");
 exports.Stack = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, as: Component = "div", align, justify, wrap = true, gap, style: _style, direction = "row", asChild } = _a, rest = __rest(_a, ["children", "className", "as", "align", "justify", "wrap", "gap", "style", "direction", "asChild"]);
-    const themeContext = (0, Theme_1.useThemeInternal)();
-    const prefix = (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? "ax" : "a";
-    const { cn } = (0, Theme_1.useRenameCSS)();
-    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)(prefix, `stack`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(prefix, `stack`, "direction", direction)), (0, css_1.getResponsiveValue)(prefix, `stack`, "align", align)), (0, css_1.getResponsiveValue)(prefix, `stack`, "justify", justify));
+    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), (0, css_1.getResponsiveProps)(`stack`, "gap", "space", gap)), (0, css_1.getResponsiveValue)(`stack`, "direction", direction)), (0, css_1.getResponsiveValue)(`stack`, "align", align)), (0, css_1.getResponsiveValue)(`stack`, "justify", justify));
     const Comp = asChild ? Slot_1.Slot : Component;
     return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
-        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: cn("navds-stack", className, {
-                "navds-vstack": direction === "column",
-                "navds-hstack": direction === "row",
-                "navds-stack-gap": gap,
-                "navds-stack-align": align,
-                "navds-stack-justify": justify,
-                "navds-stack-direction": direction,
-                "navds-stack-wrap": wrap,
+        react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, className_1.cl)("aksel-stack", className, {
+                "aksel-vstack": direction === "column",
+                "aksel-hstack": direction === "row",
+                "aksel-stack-gap": gap,
+                "aksel-stack-align": align,
+                "aksel-stack-justify": justify,
+                "aksel-stack-direction": direction,
+                "aksel-stack-wrap": wrap,
             }) }), children)));
 });
 exports.default = exports.Stack;

package/cjs/layout/stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,0CAAuC;AACvC,6CAAmE;AACnE,qCAAkC;AAElC,uEAG+B;AAE/B,0CAA0E;AAyD7D,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,EACjB,OAAO,OAER,EADI,IAAI,cAXT,mGAYC,CADQ;IAIT,MAAM,YAAY,GAAG,IAAA,wBAAgB,GAAE,CAAC;IACxC,MAAM,MAAM,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IACrD,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,MAAM,KAAK,6EACN,MAAM,GACN,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAC1D,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GAC3D,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GACnD,IAAA,wBAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAC3D,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;gBACtC,cAAc,EAAE,SAAS,KAAK,KAAK;gBACnC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;gBAC1B,qBAAqB,EAAE,OAAO;gBAC9B,uBAAuB,EAAE,SAAS;gBAClC,kBAAkB,EAAE,IAAI;aACzB,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,aAAK,CAAC"}
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,0CAAuC;AACvC,qCAAkC;AAClC,oDAA0C;AAE1C,uEAG+B;AAE/B,0CAA0E;AAyD7D,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,EACjB,OAAO,OAER,EADI,IAAI,cAXT,mGAYC,CADQ;IAIT,MAAM,KAAK,6EACN,MAAM,GACN,IAAA,wBAAkB,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,GAChD,IAAA,wBAAkB,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,IAAA,wBAAkB,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,IAAA,wBAAkB,EAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;gBACtC,cAAc,EAAE,SAAS,KAAK,KAAK;gBACnC,iBAAiB,EAAE,GAAG;gBACtB,mBAAmB,EAAE,KAAK;gBAC1B,qBAAqB,EAAE,OAAO;gBAC9B,uBAAuB,EAAE,SAAS;gBAClC,kBAAkB,EAAE,IAAI;aACzB,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,aAAK,CAAC"}

package/cjs/layout/utilities/css.d.ts

@@ -1,7 +1,7 @@
 import { ResponsiveProp } from "./types";
-export declare function getResponsiveValue<T = string>(prefix: string, componentName: string, componentProp: string, responsiveProp?: ResponsiveProp<T>): {
+export declare function getResponsiveValue<T = string>(componentName: string, componentProp: string, responsiveProp?: ResponsiveProp<T>): {
     [k: string]: T;
 };
-export declare function getResponsiveProps<T extends string>(prefix: string, componentName: string, componentProp: string, tokenSubgroup: "spacing" | "radius", responsiveProp?: ResponsiveProp<T>, invert?: boolean, tokenExceptions?: string[]): {
+export declare function getResponsiveProps<T extends string>(componentName: string, componentProp: string, tokenSubgroup: "space" | "radius", responsiveProp?: ResponsiveProp<T>, invert?: boolean, tokenExceptions?: string[]): {
     [x: string]: string;
 };