@navikt/ds-react 7.40.0 → 8.0.1

package/esm/layout/base/BasePrimitive.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Slot } from "../../slot/Slot.js";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme.js";
+import { cl } from "../../util/className.js";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css.js";
 export const PRIMITIVE_PROPS = [
     "padding",
@@ -30,37 +30,34 @@ export const PRIMITIVE_PROPS = [
     "gridColumn",
 ];
 export const BasePrimitive = ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, gridColumn, }) => {
-    const themeContext = useThemeInternal();
-    const { cn } = useRenameCSS();
-    const prefix = (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? "ax" : "a";
-    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getResponsiveProps(prefix, "r", "p", "spacing", padding)), getResponsiveProps(prefix, "r", "pi", "spacing", paddingInline)), getResponsiveProps(prefix, "r", "pb", "spacing", paddingBlock)), getResponsiveProps(prefix, "r", "m", "spacing", margin)), getResponsiveProps(prefix, "r", "mi", "spacing", marginInline)), getResponsiveProps(prefix, "r", "mb", "spacing", marginBlock)), getResponsiveValue(prefix, "r", "w", width)), getResponsiveValue(prefix, "r", "minw", minWidth)), getResponsiveValue(prefix, "r", "maxw", maxWidth)), getResponsiveValue(prefix, "r", "h", height)), getResponsiveValue(prefix, "r", "minh", minHeight)), getResponsiveValue(prefix, "r", "maxh", maxHeight)), getResponsiveValue(prefix, "r", "position", position)), getResponsiveProps(prefix, "r", "inset", "spacing", inset)), getResponsiveProps(prefix, "r", "top", "spacing", top)), getResponsiveProps(prefix, "r", "right", "spacing", right)), getResponsiveProps(prefix, "r", "bottom", "spacing", bottom)), getResponsiveProps(prefix, "r", "left", "spacing", left)), getResponsiveValue(prefix, "r", "overflow", overflow)), getResponsiveValue(prefix, "r", "overflowx", overflowX)), getResponsiveValue(prefix, "r", "overflowy", overflowY)), getResponsiveValue(prefix, "r", "flex-basis", flexBasis)), getResponsiveValue(prefix, "r", "flex-grow", flexGrow)), getResponsiveValue(prefix, "r", "flex-shrink", flexShrink)), getResponsiveValue(prefix, "r", "grid-column", gridColumn));
-    return (React.createElement(Slot, { className: cn({
+    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getResponsiveProps("r", "p", "space", padding)), getResponsiveProps("r", "pi", "space", paddingInline)), getResponsiveProps("r", "pb", "space", paddingBlock)), getResponsiveProps("r", "m", "space", margin)), getResponsiveProps("r", "mi", "space", marginInline)), getResponsiveProps("r", "mb", "space", marginBlock)), getResponsiveValue("r", "w", width)), getResponsiveValue("r", "minw", minWidth)), getResponsiveValue("r", "maxw", maxWidth)), getResponsiveValue("r", "h", height)), getResponsiveValue("r", "minh", minHeight)), getResponsiveValue("r", "maxh", maxHeight)), getResponsiveValue("r", "position", position)), getResponsiveProps("r", "inset", "space", inset)), getResponsiveProps("r", "top", "space", top)), getResponsiveProps("r", "right", "space", right)), getResponsiveProps("r", "bottom", "space", bottom)), getResponsiveProps("r", "left", "space", left)), getResponsiveValue("r", "overflow", overflow)), getResponsiveValue("r", "overflowx", overflowX)), getResponsiveValue("r", "overflowy", overflowY)), getResponsiveValue("r", "flex-basis", flexBasis)), getResponsiveValue("r", "flex-grow", flexGrow)), getResponsiveValue("r", "flex-shrink", flexShrink)), getResponsiveValue("r", "grid-column", gridColumn));
+    return (React.createElement(Slot, { className: cl({
             className,
-            "navds-r-p": padding,
-            "navds-r-pi": paddingInline,
-            "navds-r-pb": paddingBlock,
-            "navds-r-m": margin,
-            "navds-r-mi": marginInline,
-            "navds-r-mb": marginBlock,
-            "navds-r-w": width,
-            "navds-r-minw": minWidth,
-            "navds-r-maxw": maxWidth,
-            "navds-r-h": height,
-            "navds-r-minh": minHeight,
-            "navds-r-maxh": maxHeight,
-            "navds-r-position": position,
-            "navds-r-inset": inset,
-            "navds-r-top": top,
-            "navds-r-right": right,
-            "navds-r-bottom": bottom,
-            "navds-r-left": left,
-            "navds-r-overflow": overflow,
-            "navds-r-overflowx": overflowX,
-            "navds-r-overflowy": overflowY,
-            "navds-r-flex-basis": flexBasis,
-            "navds-r-flex-grow": flexGrow,
-            "navds-r-flex-shrink": flexShrink,
-            "navds-r-grid-column": gridColumn,
+            "aksel-r-p": padding,
+            "aksel-r-pi": paddingInline,
+            "aksel-r-pb": paddingBlock,
+            "aksel-r-m": margin,
+            "aksel-r-mi": marginInline,
+            "aksel-r-mb": marginBlock,
+            "aksel-r-w": width,
+            "aksel-r-minw": minWidth,
+            "aksel-r-maxw": maxWidth,
+            "aksel-r-h": height,
+            "aksel-r-minh": minHeight,
+            "aksel-r-maxh": maxHeight,
+            "aksel-r-position": position,
+            "aksel-r-inset": inset,
+            "aksel-r-top": top,
+            "aksel-r-right": right,
+            "aksel-r-bottom": bottom,
+            "aksel-r-left": left,
+            "aksel-r-overflow": overflow,
+            "aksel-r-overflowx": overflowX,
+            "aksel-r-overflowy": overflowY,
+            "aksel-r-flex-basis": flexBasis,
+            "aksel-r-flex-grow": flexGrow,
+            "aksel-r-flex-shrink": flexShrink,
+            "aksel-r-grid-column": gridColumn,
         }), style: style }, children));
 };
 export default BasePrimitive;

package/esm/layout/base/BasePrimitive.js.map

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

package/esm/layout/bleed/Bleed.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
 import { ResponsiveProp, SpacingScale } from "../utilities/types.js";
-export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;
-export type BleedSpacingBlock = "0" | "px" | SpacingScale;
+export type BleedSpacingInline = "full" | SpacingScale;
+export type BleedSpacingBlock = SpacingScale;
 export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * **Negative** horizontal margin around children.
-     * 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.
      *
      * The `px` value is useful to nudge by just 1px.
@@ -14,12 +14,12 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
      * @example
      * marginInline='space-16'
      * marginInline='space-16 space-20'
-     * marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
+     * marginInline={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
      */
     marginInline?: ResponsiveProp<BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`>;
     /**
      * **Negative** vertical margin around children.
-     * 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.
      *
      * The `px` value is useful to nudge by just 1px.
@@ -28,7 +28,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
      * @example
      * marginBlock='space-16'
      * marginBlock='space-16 space-20'
-     * marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
+     * marginBlock={{xs: 'space-0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
      */
     marginBlock?: ResponsiveProp<BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`>;
     /**
@@ -51,7 +51,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * @example
  * <Box padding="4">
- *   <Bleed marginInline="4" marginBlock="4">
+ *   <Bleed marginInline="space-16" marginBlock="space-16">
  *     <BodyLong>Some content</BodyLong>
  *   </Bleed>
  * </Box>

package/esm/layout/bleed/Bleed.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot.js";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme.js";
+import { cl } from "../../util/className.js";
 import { getResponsiveProps } from "../utilities/css.js";
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
@@ -22,23 +22,20 @@ import { getResponsiveProps } from "../utilities/css.js";
  *
  * @example
  * <Box padding="4">
- *   <Bleed marginInline="4" marginBlock="4">
+ *   <Bleed marginInline="space-16" marginBlock="space-16">
  *     <BodyLong>Some content</BodyLong>
  *   </Bleed>
  * </Box>
  */
 export const Bleed = forwardRef((_a, ref) => {
     var { className, marginInline, marginBlock, reflectivePadding, style: _style, asChild } = _a, rest = __rest(_a, ["className", "marginInline", "marginBlock", "reflectivePadding", "style", "asChild"]);
-    const themeContext = useThemeInternal();
-    const { cn } = useRenameCSS();
-    const prefix = (themeContext === null || themeContext === void 0 ? void 0 : themeContext.isDarkside) ? "ax" : "a";
-    let style = Object.assign(Object.assign(Object.assign({}, _style), getResponsiveProps(prefix, "bleed", "margin-inline", "spacing", marginInline, true, ["0", "full", "px"])), getResponsiveProps(prefix, "bleed", "margin-block", "spacing", marginBlock, true, ["0", "px"]));
+    let style = Object.assign(Object.assign(Object.assign({}, _style), getResponsiveProps("bleed", "margin-inline", "space", marginInline, true)), getResponsiveProps("bleed", "margin-block", "space", marginBlock, true));
     if (reflectivePadding) {
-        style = Object.assign(Object.assign(Object.assign({}, style), getResponsiveProps(prefix, "bleed", "padding-inline", "spacing", marginInline, false, ["0", "full", "px"])), getResponsiveProps(prefix, "bleed", "padding-block", "spacing", marginBlock, false, ["0", "px"]));
+        style = Object.assign(Object.assign(Object.assign({}, style), getResponsiveProps("bleed", "padding-inline", "space", marginInline, false)), getResponsiveProps("bleed", "padding-block", "space", marginBlock, false));
     }
     const Comp = asChild ? Slot : "div";
-    return (React.createElement(Comp, Object.assign({}, rest, { className: cn("navds-bleed", className, {
-            "navds-bleed--padding": reflectivePadding,
+    return (React.createElement(Comp, Object.assign({}, rest, { className: cl("aksel-bleed", className, {
+            "aksel-bleed--padding": reflectivePadding,
         }), ref: ref, style: style })));
 });
 export default Bleed;

package/esm/layout/bleed/Bleed.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAoDtD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;IACxC,MAAM,EAAE,EAAE,EAAE,GAAG,YAAY,EAAE,CAAC;IAC9B,MAAM,MAAM,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAErD,IAAI,KAAK,iDACJ,MAAM,GACN,kBAAkB,CACnB,MAAM,EACN,OAAO,EACP,eAAe,EACf,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GAEE,kBAAkB,CACnB,MAAM,EACN,OAAO,EACP,cAAc,EACd,SAAS,EACT,WAAW,EACX,IAAI,EACJ,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;IAEF,IAAI,iBAAiB,EAAE,CAAC;QACtB,KAAK,iDACA,KAAK,GACL,kBAAkB,CACnB,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GACE,kBAAkB,CACnB,MAAM,EACN,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAW,EACX,KAAK,EACL,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;IACJ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,iBAAiB;SAC1C,CAAC,EACF,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAoDtD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,IAAI,KAAK,iDACJ,MAAM,GACN,kBAAkB,CACnB,OAAO,EACP,eAAe,EACf,OAAO,EACP,YAAY,EACZ,IAAI,CACL,GAEE,kBAAkB,CACnB,OAAO,EACP,cAAc,EACd,OAAO,EACP,WAAW,EACX,IAAI,CACL,CACF,CAAC;IAEF,IAAI,iBAAiB,EAAE,CAAC;QACtB,KAAK,iDACA,KAAK,GACL,kBAAkB,CACnB,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,KAAK,CACN,GACE,kBAAkB,CACnB,OAAO,EACP,eAAe,EACf,OAAO,EACP,WAAW,EACX,KAAK,CACN,CACF,CAAC;IACJ,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,iBAAiB;SAC1C,CAAC,EACF,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -1,28 +1,32 @@
 import React from "react";
+import type { AkselColoredBorderToken, AkselColoredStatelessBackgroundToken, AkselDynamicStatelessBackgroundToken, AkselRootBackgroundToken, AkselRootBorderToken, AkselShadowToken } from "@navikt/ds-tokens/types";
 import { OverridableComponent } from "../../util/types/index.js";
 import { PrimitiveProps } from "../base/BasePrimitive.js";
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
-import { BackgroundColorToken, BorderColorToken, BorderRadiusScale, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SurfaceColorToken } from "../utilities/types.js";
+import { BorderRadiusScale, ResponsiveProp, SpaceDelimitedAttribute } from "../utilities/types.js";
 import BoxNew from "./Box.darkside.js";
 export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * CSS `background-color` property.
-     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+     * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#backgroundColor).
+     * @see {@link AkselRootBackgroundToken}, {@link AkselColoredStatelessBackgroundToken} and {@link AkselDynamicStatelessBackgroundToken}
      */
-    background?: BackgroundColorToken | SurfaceColorToken;
+    background?: AkselRootBackgroundToken | AkselColoredStatelessBackgroundToken | AkselDynamicStatelessBackgroundToken;
     /**
      * CSS `border-color` property.
-     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#borderColor).
+     * @see {@link AkselColoredBorderToken}
      */
-    borderColor?: BorderColorToken;
+    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 BorderRadiusScale}
      */
     borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiusScale | "0">>;
     /**
@@ -35,10 +39,16 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Shadow on box. Accepts a shadow token.
      * @example
      * shadow='small'
+     * @see {@link ShadowKeys}
      */
-    shadow?: ShadowToken;
+    shadow?: AkselShadowToken;
 } & PrimitiveProps & PrimitiveAsChildProps;
 interface BoxComponentType extends OverridableComponent<BoxProps, HTMLDivElement> {
+    /**
+     * @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.**
+     */
     New: typeof BoxNew;
 }
 /**
@@ -49,21 +59,21 @@ interface BoxComponentType extends OverridableComponent<BoxProps, HTMLDivElement
  * @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/esm/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/index.js";
 import { PrimitiveProps } from "../base/BasePrimitive.js";
 import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps.js";
@@ -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/esm/layout/box/Box.darkside.js

@@ -11,41 +11,42 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot.js";
-import { useRenameCSS } from "../../theme/Theme.js";
 import { omit } from "../../util/index.js";
+import { cl } from "../../util/className.js";
 import BasePrimitive, { PRIMITIVE_PROPS, } from "../base/BasePrimitive.js";
 import { getResponsiveProps } from "../utilities/css.js";
 /**
- *
  * 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>
  */
 export const BoxNew = 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 } = 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
@@ -55,15 +56,17 @@ export const BoxNew = forwardRef((_a, ref) => {
                 .split(" ")
                 .map((x) => `${x}px`)
                 .join(" ")
-            : undefined }), getResponsiveProps("ax", "box", "radius", "radius", borderRadius, false, ["0"]));
+            : undefined }), getResponsiveProps("box", "radius", "radius", borderRadius, false, [
+        "0",
+    ]));
     const Comp = asChild ? Slot : Component;
     return (React.createElement(BasePrimitive, Object.assign({}, rest),
-        React.createElement(Comp, Object.assign({}, omit(rest, 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.createElement(Comp, Object.assign({}, omit(rest, PRIMITIVE_PROPS), { ref: ref, style: style, className: 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)));
 });
 export default BoxNew;

package/esm/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,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQ1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,aAAa,EAAE,EACpB,eAAe,GAEhB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAmDtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CACR,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,YAAY,EAAE,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,kBAAkB,CACnB,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,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,oBAAC,aAAa,oBAAK,IAAI;QACrB,oBAAC,IAAI,oBACC,IAAI,CAAC,IAAI,EAAE,eAAe,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,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Box.darkside.js","sourceRoot":"","sources":["../../../src/layout/box/Box.darkside.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAE1C,OAAO,aAAa,EAAE,EACpB,eAAe,GAEhB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAsDtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CACR,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,kBAAkB,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,GAAG;KACJ,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,oBAAC,aAAa,oBAAK,IAAI;QACrB,oBAAC,IAAI,oBACC,IAAI,CAAC,IAAI,EAAE,eAAe,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,eAAe,MAAM,CAAC"}

package/esm/layout/box/Box.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { Slot } from "../../slot/Slot.js";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme.js";
 import { omit } from "../../util/index.js";
+import { cl } from "../../util/className.js";
 import BasePrimitive, { PRIMITIVE_PROPS, } from "../base/BasePrimitive.js";
 import { getResponsiveProps } from "../utilities/css.js";
 import BoxNew from "./Box.darkside.js";
@@ -24,66 +24,47 @@ import BoxNew from "./Box.darkside.js";
  * @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>
  */
 export const BoxComponent = 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 = useThemeInternal();
-    const { cn } = 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 }), getResponsiveProps(prefix, "box", "radius", "radius", borderRadius, false, ["0"]));
+            : undefined }), getResponsiveProps("box", "radius", "radius", borderRadius, false, [
+        "0",
+    ]));
     const Comp = asChild ? Slot : Component;
     return (React.createElement(BasePrimitive, Object.assign({}, rest),
-        React.createElement(Comp, Object.assign({}, omit(rest, 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.createElement(Comp, Object.assign({}, omit(rest, PRIMITIVE_PROPS), { ref: ref, style: style, className: 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)));
 });
 export const Box = BoxComponent;

package/esm/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,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AAE1C,OAAO,aAAa,EAAE,EACpB,eAAe,GAEhB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,MAAM,MAAM,gBAAgB,CAAC;AA2DpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,YAAY,GACvB,UAAU,CACR,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,kBAAkB,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE;QACpE,GAAG;KACJ,CAAC,CACH,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,oBAAC,aAAa,oBAAK,IAAI;QACrB,oBAAC,IAAI,oBACC,IAAI,CAAC,IAAI,EAAE,eAAe,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,MAAM,CAAC,MAAM,GAAG,GAAG,YAAgC,CAAC;AAEpD,GAAG,CAAC,GAAG,GAAG,MAAM,CAAC;AAEjB,eAAe,GAAG,CAAC"}

package/esm/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 />