@navikt/ds-react 5.4.1 → 5.5.0

package/cjs/index.js

@@ -48,6 +48,7 @@ __exportStar(require("./toggle-group"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);
+__exportStar(require("./layout/box"), exports);
 __exportStar(require("./layout/stack"), exports);
 __exportStar(require("./layout/grid"), exports);
 __exportStar(require("./layout/content-container"), exports);

package/cjs/layout/box/Box.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const css_1 = require("../utilities/css");
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @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">
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <VStack gap="8">
+ *  <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ *  </Box>
+ *  <Box padding="4">
+ *    <BodyShort>Hei</BodyShort>
+ *  </Box>
+ * </VStack>
+ */
+exports.Box = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "div", background, borderColor, borderWidth, borderRadius, className, padding, paddingInline, paddingBlock, shadow, style: _style } = _a, rest = __rest(_a, ["as", "background", "borderColor", "borderWidth", "borderRadius", "className", "padding", "paddingInline", "paddingBlock", "shadow", "style"]);
+    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-box-background": background
+            ? `var(--a-${background})`
+            : undefined, "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined, "--__ac-box-border-color": borderColor
+            ? `var(--a-${borderColor})`
+            : undefined, "--__ac-box-border-width": borderWidth
+            ? borderWidth
+                .split(" ")
+                .map((x) => `${x}px`)
+                .join(" ")
+            : undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, ["0"])), (0, css_1.getResponsiveProps)("box", "padding", "spacing", padding)), (0, css_1.getResponsiveProps)("box", "padding-inline", "spacing", paddingInline)), (0, css_1.getResponsiveProps)("box", "padding-block", "spacing", paddingBlock));
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { className: (0, clsx_1.default)("navds-box", className), ref: ref, style: style })));
+});

package/cjs/layout/box/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+var Box_1 = require("./Box");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });

package/cjs/layout/box/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/layout/box/index.js",
+  "types": "../../../esm/layout/box/index.d.ts"
+}

package/cjs/layout/utilities/css.js

@@ -1,33 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getResponsiveValue = exports.getResponsiveProps = void 0;
-function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp) {
+exports.getResponsiveProps = exports.getResponsiveValue = void 0;
+function getResponsiveValue(componentName, componentProp, responsiveProp) {
     if (!responsiveProp) {
         return {};
     }
     if (typeof responsiveProp === "string") {
         return {
-            [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
         };
     }
-    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
         `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-        `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+        responsiveValue,
     ]));
 }
-exports.getResponsiveProps = getResponsiveProps;
-function getResponsiveValue(componentName, componentProp, responsiveProp) {
+exports.getResponsiveValue = getResponsiveValue;
+function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, tokenExceptions = []) {
     if (!responsiveProp) {
         return {};
     }
     if (typeof responsiveProp === "string") {
         return {
-            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
+                .split(" ")
+                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
+                .join(" "),
         };
     }
-    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
-        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-        responsiveValue,
-    ]));
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
+        return [
+            `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+            aliasOrScale
+                .split(" ")
+                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
+                .join(" "),
+        ];
+    }));
 }
-exports.getResponsiveValue = getResponsiveValue;
+exports.getResponsiveProps = getResponsiveProps;

package/cjs/layout/utilities/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/skeleton/Skeleton.js

@@ -55,6 +55,7 @@ exports.Skeleton = (0, react_1.forwardRef)((_a, ref) => {
             "navds-skeleton--has-children": Boolean(children),
             "navds-skeleton--no-height": !height,
             "navds-skeleton--no-width": !width,
+            "navds-skeleton--inline": As === "span",
         }), style: Object.assign(Object.assign({}, style), { width, height }), "aria-hidden": true }), children));
 });
 exports.default = exports.Skeleton;

package/esm/index.d.ts

@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";

package/esm/index.js

@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { BorderRadiiToken } from "../utilities/types";
+import { SpaceDelimitedAttribute, ResponsiveProp, SpacingScale } from "../utilities/css";
+import { BackgroundToken, BorderColorToken, ShadowToken } from "../utilities/types";
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background color. Accepts a color token. */
+    background?: BackgroundToken;
+    /** Border color. Accepts a color token. */
+    borderColor?: BorderColorToken;
+    /** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
+     * @example
+     * borderRadius='full'
+     * borderRadius='0 full large small'
+     * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+     */
+    borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+    /**
+     * Border-width. If this is not set there will be no border.
+     * @example
+     * borderWidth='2'
+     * borderWidth='1 2 3 4'
+     */
+    borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
+    /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+     * @example
+     * padding='4'
+     * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    padding?: ResponsiveProp<SpacingScale>;
+    /** Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+     * @example
+     * paddingInline='4'
+     * paddingInline='4 5'
+     * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+     */
+    paddingInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /** Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+     * @example
+     * paddingBlock='4'
+     * paddingBlock='4 5'
+     * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    paddingBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+    /** Shadow on box. Accepts a shadow token.
+     * @example
+     * shadow='small'
+     */
+    shadow?: ShadowToken;
+}
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @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">
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <VStack gap="8">
+ *  <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ *  </Box>
+ *  <Box padding="4">
+ *    <BodyShort>Hei</BodyShort>
+ *  </Box>
+ * </VStack>
+ */
+export declare const Box: OverridableComponent<BoxProps, HTMLDivElement>;

package/esm/layout/box/Box.js

@@ -0,0 +1,56 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { getResponsiveProps, } from "../utilities/css";
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @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">
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <VStack gap="8">
+ *  <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ *  </Box>
+ *  <Box padding="4">
+ *    <BodyShort>Hei</BodyShort>
+ *  </Box>
+ * </VStack>
+ */
+export const Box = forwardRef((_a, ref) => {
+    var { as: Component = "div", background, borderColor, borderWidth, borderRadius, className, padding, paddingInline, paddingBlock, shadow, style: _style } = _a, rest = __rest(_a, ["as", "background", "borderColor", "borderWidth", "borderRadius", "className", "padding", "paddingInline", "paddingBlock", "shadow", "style"]);
+    const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-box-background": background
+            ? `var(--a-${background})`
+            : undefined, "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined, "--__ac-box-border-color": borderColor
+            ? `var(--a-${borderColor})`
+            : undefined, "--__ac-box-border-width": borderWidth
+            ? borderWidth
+                .split(" ")
+                .map((x) => `${x}px`)
+                .join(" ")
+            : undefined }), getResponsiveProps("box", "border-radius", "border-radius", borderRadius, ["0"])), getResponsiveProps("box", "padding", "spacing", padding)), getResponsiveProps("box", "padding-inline", "spacing", paddingInline)), getResponsiveProps("box", "padding-block", "spacing", paddingBlock));
+    return (React.createElement(Component, Object.assign({}, rest, { className: cl("navds-box", className), ref: ref, style: style })));
+});
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAIL,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAyD1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,GAAG,GAAmD,UAAU,CAC3E,CACE,EAaC,EACD,GAAG,EACH,EAAE;QAfF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,OAEd,EADI,IAAI,cAZT,8IAaC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,uBAAuB,EAAE,UAAU;YACjC,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACrE,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,yBAAyB,EAAE,WAAW;YACpC,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,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,CAAC,GAAG,CAAC,CACN,GACE,kBAAkB,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,GACxD,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,CAAC,GACrE,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,CAAC,CACvE,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";

package/esm/layout/box/index.js

@@ -0,0 +1,2 @@
+export { Box } from "./Box";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1,14 +1,14 @@
 export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
 export type SpacingScale = "0" | "05" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32";
-type ResponsivePropConfig<T = string> = {
+export type SpaceDelimitedAttribute<T extends string> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
+type FixedResponsiveT<T> = {
     [Breakpoint in BreakpointsAlias]?: T;
 };
-export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
-export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
-export declare function getResponsiveProps<T = string>(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<T>): {
-    [x: string]: string;
-};
-export declare function getResponsiveValue<T = string>(componentName: string, componentProp: string, responsiveProp?: ResponsiveValue<T>): {
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+export declare function getResponsiveValue<T = string>(componentName: string, componentProp: string, responsiveProp?: ResponsiveProp<T>): {
     [k: string]: T;
 };
+export declare function getResponsiveProps<T extends string>(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<T>, tokenExceptions?: string[]): {
+    [x: string]: string;
+};
 export {};

package/esm/layout/utilities/css.js

@@ -1,29 +1,37 @@
-export function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp) {
+export function getResponsiveValue(componentName, componentProp, responsiveProp) {
     if (!responsiveProp) {
         return {};
     }
     if (typeof responsiveProp === "string") {
         return {
-            [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
         };
     }
-    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
         `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-        `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+        responsiveValue,
     ]));
 }
-export function getResponsiveValue(componentName, componentProp, responsiveProp) {
+export function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, tokenExceptions = []) {
     if (!responsiveProp) {
         return {};
     }
     if (typeof responsiveProp === "string") {
         return {
-            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
+                .split(" ")
+                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
+                .join(" "),
         };
     }
-    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
-        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-        responsiveValue,
-    ]));
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
+        return [
+            `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+            aliasOrScale
+                .split(" ")
+                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
+                .join(" "),
+        ];
+    }));
 }
 //# sourceMappingURL=css.js.map

package/esm/layout/utilities/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AAgCA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,WAAW,aAAa,IAAI,cAAc,GAAG;SAC/F,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE,CAAC;QACtE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,WAAW,aAAa,IAAI,YAAY,GAAG;KAC5C,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAmC;IAEnC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AAqCA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,kBAA4B,EAAE;IAE9B,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;iBAC5D,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACT,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,aAAa,IAAI,CAAC,GAAG,CACnE;iBACA,IAAI,CAAC,GAAG,CAAC;SACb,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACrE,OAAO;YACL,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;YAC7D,YAAY;iBACT,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACT,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,aAAa,IAAI,CAAC,GAAG,CACnE;iBACA,IAAI,CAAC,GAAG,CAAC;SACb,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;AACJ,CAAC"}

package/esm/layout/utilities/types.d.ts

@@ -0,0 +1,9 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
+import borderColors from "@navikt/ds-tokens/src/colors-border.json";
+import borderRadii from "@navikt/ds-tokens/src/border.json";
+import shadows from "@navikt/ds-tokens/src/shadow.json";
+export type BackgroundToken = keyof typeof bgColors.a | keyof typeof surfaceColors.a;
+export type BorderColorToken = keyof typeof borderColors.a;
+export type BorderRadiiToken = keyof (typeof borderRadii.a)["border-radius"] | "0";
+export type ShadowToken = keyof typeof shadows.a.shadow;

package/esm/layout/utilities/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/layout/utilities/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/utilities/types.ts"],"names":[],"mappings":""}

package/esm/skeleton/Skeleton.js

@@ -26,6 +26,7 @@ export const Skeleton = forwardRef((_a, ref) => {
             "navds-skeleton--has-children": Boolean(children),
             "navds-skeleton--no-height": !height,
             "navds-skeleton--no-width": !width,
+            "navds-skeleton--inline": As === "span",
         }), style: Object.assign(Object.assign({}, style), { width, height }), "aria-hidden": true }), children));
 });
 export default Skeleton;

package/esm/skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAuBtB;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,OAAO,GAAG,MAAM,EAChB,EAAE,EAAE,EAAE,GAAG,KAAK,OAEf,EADI,IAAI,cART,sEASC,CADQ;IAIT,OAAO,CACL,oBAAC,EAAE,oBACG,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB,SAAS,EACT,mBAAmB,OAAO,EAAE,EAC5B;YACE,8BAA8B,EAAE,OAAO,CAAC,QAAQ,CAAC;YACjD,2BAA2B,EAAE,CAAC,MAAM;YACpC,0BAA0B,EAAE,CAAC,KAAK;SACnC,CACF,EACD,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,6BAG/B,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAuBtB;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,OAAO,GAAG,MAAM,EAChB,EAAE,EAAE,EAAE,GAAG,KAAK,OAEf,EADI,IAAI,cART,sEASC,CADQ;IAIT,OAAO,CACL,oBAAC,EAAE,oBACG,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB,SAAS,EACT,mBAAmB,OAAO,EAAE,EAC5B;YACE,8BAA8B,EAAE,OAAO,CAAC,QAAQ,CAAC;YACjD,2BAA2B,EAAE,CAAC,MAAM;YACpC,0BAA0B,EAAE,CAAC,KAAK;YAClC,wBAAwB,EAAE,EAAE,KAAK,MAAM;SACxC,CACF,EACD,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,6BAG/B,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.4.1",
+  "version": "5.5.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^5.4.1",
+    "@navikt/aksel-icons": "^5.5.0",
+    "@navikt/ds-tokens": "^5.5.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/grid/grid.stories.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { BodyLong, Grid, Cell, ContentContainer } from "../index";
 
 export default {
-  title: "ds-react/Grid",
+  title: "ds-react/Primitives/Grid",
   component: { Grid, Cell },
   parameters: {
     layout: "fullscreen",

package/src/index.ts

@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";