@navikt/ds-react 4.10.2 → 4.11.1

package/esm/index.js

@@ -33,4 +33,6 @@ export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 export * from "./layout/stack";
+export * from "./layout/grid";
+export * from "./layout/content-container";
 //# sourceMappingURL=index.js.map

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"}
+{"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"}

package/esm/layout/content-container/ContentContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainer.js","sourceRoot":"","sources":["../../../src/layout/content-container/ContentContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AAStB,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CAGxC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CACjC,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,IAC/C,IAAI,EACR,CACH,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/esm/layout/content-container/index.d.ts

@@ -0,0 +1 @@
+export { default as ContentContainer, type ContentContainerProps, } from "./ContentContainer";

package/esm/layout/content-container/index.js

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

package/esm/layout/content-container/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/content-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,gBAAgB,GAE5B,MAAM,oBAAoB,CAAC"}

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

@@ -0,0 +1,49 @@
+import React, { HTMLAttributes } from "react";
+import { ResponsiveProp, SpacingScale } from "../utilities/css";
+export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+     * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+     * @example
+     * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+     * @example
+     * columns={3}
+     * @example
+     * columns="repeat(3, minmax(0, 1fr))"
+     */
+    columns?: ResponsiveProp<number | string>;
+    /** Spacing between columns. Based on spacing-tokens.
+     * @example
+     * gap="6"
+     * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+     */
+    gap?: ResponsiveProp<SpacingScale>;
+}
+/**
+ * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see 🏷️ {@link HGridProps}
+ *
+ * @example
+ * <HGrid gap="6" columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap={{xs: "2", md: "6"}} columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ */
+export declare const HGrid: React.ForwardRefExoticComponent<HGridProps & React.RefAttributes<HTMLDivElement>>;
+export default HGrid;

package/esm/layout/grid/HGrid.js

@@ -0,0 +1,64 @@
+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 React, { forwardRef } from "react";
+import cl from "clsx";
+import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
+/**
+ * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see 🏷️ {@link HGridProps}
+ *
+ * @example
+ * <HGrid gap="6" columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap={{xs: "2", md: "6"}} columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ */
+export const HGrid = forwardRef((_a, ref) => {
+    var { className, columns, gap, style } = _a, rest = __rest(_a, ["className", "columns", "gap", "style"]);
+    const styles = Object.assign(Object.assign(Object.assign({}, style), getResponsiveProps(`hgrid`, "gap", "spacing", gap)), getResponsiveValue(`hgrid`, "columns", formatGrid(columns)));
+    return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-hgrid", className), style: styles })));
+});
+function formatGrid(props) {
+    if (!props) {
+        return {};
+    }
+    if (typeof props === "string" || typeof props === "number") {
+        return getColumnValue(props);
+    }
+    return Object.fromEntries(Object.entries(props).map(([breakpointToken, columnValue]) => [
+        breakpointToken,
+        getColumnValue(columnValue),
+    ]));
+}
+const getColumnValue = (prop) => {
+    if (typeof prop === "number") {
+        return `repeat(${prop}, minmax(0, 1fr))`;
+    }
+    return prop;
+};
+export default HGrid;
+//# sourceMappingURL=HGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AAsB1B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,OAAW,EAAN,IAAI,cAAzC,wCAA2C,CAAF;IACxC,MAAM,MAAM,iDACP,KAAK,GACL,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,IACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC1D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;KAC9B;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;QAC5B,OAAO,UAAU,IAAI,mBAAmB,CAAC;KAC1C;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1 @@
+export { default as HGrid, type HGridProps } from "./HGrid";

package/esm/layout/grid/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC"}

package/esm/layout/stack/Stack.js

@@ -14,7 +14,7 @@ import React, { forwardRef } from "react";
 import { getResponsiveProps, } from "../utilities/css";
 export const Stack = forwardRef((_a, ref) => {
     var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
-    const style = Object.assign(Object.assign({ "--ac-stack-direction": direction, "--ac-stack-align": align, "--ac-stack-justify": justify, "--ac-stack-wrap": wrap ? "wrap" : "nowrap" }, getResponsiveProps(`stack`, "gap", "spacing", gap)), _style);
+    const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-stack-direction": direction, "--__ac-stack-align": align, "--__ac-stack-justify": justify, "--__ac-stack-wrap": wrap ? "wrap" : "nowrap" }), getResponsiveProps(`stack`, "gap", "spacing", gap));
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, style: style, className: cl("navds-stack", className, {
             "navds-vstack": direction === "column",
             "navds-hstack": direction === "row",

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EACL,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AA+B1B,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,OAEV,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,GAAG,8BACZ,sBAAsB,EAAE,SAAS,EACjC,kBAAkB,EAAE,KAAK,EACzB,oBAAoB,EAAE,OAAO,EAC7B,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,IACxC,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,MAAM,CACa,CAAC;IAEzB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;YACtC,cAAc,EAAE,SAAS,KAAK,KAAK;SACpC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EACL,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AA+B1B,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,OAEV,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,GAAG,8CACT,MAAM,KACT,wBAAwB,EAAE,SAAS,EACnC,oBAAoB,EAAE,KAAK,EAC3B,sBAAsB,EAAE,OAAO,EAC/B,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,CAC/B,CAAC;IAEzB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;YACtC,cAAc,EAAE,SAAS,KAAK,KAAK;SACpC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -1,10 +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";
-export type ResponsiveProp<T> = T | {
+type ResponsivePropConfig<T = string> = {
     [Breakpoint in BreakpointsAlias]?: T;
 };
-export declare function getResponsiveProps(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: string | {
-    [Breakpoint in BreakpointsAlias]?: string;
-}): {
+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>): {
+    [k: string]: T;
+};
+export {};

package/esm/layout/utilities/css.js

@@ -1,14 +1,29 @@
 export function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp) {
-    if (!responsiveProp)
+    if (!responsiveProp) {
         return {};
+    }
     if (typeof responsiveProp === "string") {
         return {
-            [`--ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+            [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
         };
     }
     return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
-        `--ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
         `var(--a-${tokenSubgroup}-${aliasOrScale})`,
     ]));
 }
+export function getResponsiveValue(componentName, componentProp, responsiveProp) {
+    if (!responsiveProp) {
+        return {};
+    }
+    if (typeof responsiveProp === "string") {
+        return {
+            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+        };
+    }
+    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
+        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        responsiveValue,
+    ]));
+}
 //# 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":"AA8BA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAKK;IAEL,IAAI,CAAC,cAAc;QAAE,OAAO,EAAE,CAAC;IAE/B,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,QAAQ,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,WAAW,aAAa,IAAI,cAAc,GAAG;SAC7F,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,QAAQ,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC3D,WAAW,aAAa,IAAI,YAAY,GAAG;KAC5C,CAAC,CACH,CAAC;AACJ,CAAC"}
+{"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"}

package/package.json

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

package/src/form/combobox/Input/Input.tsx

@@ -37,6 +37,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       ariaDescribedBy,
       moveFocusToInput,
       moveFocusToEnd,
+      setFilteredOptionsIndex,
       shouldAutocomplete,
     } = useFilteredOptionsContext();
 
@@ -139,6 +140,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       [filteredOptions.length, onChange, toggleIsListOpen]
     );
 
+    const onBlur = () => {
+      setFilteredOptionsIndex(-1);
+    };
+
     return (
       <input
         {...rest}
@@ -148,6 +153,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         onChange={onChangeHandler}
         type="text"
         role="combobox"
+        onBlur={onBlur}
         onKeyUp={handleKeyUp}
         onKeyDown={handleKeyDown}
         aria-controls={`${inputProps.id}-filtered-options`}

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Chips } from "../../..";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
+import { useInputContext } from "../Input/inputContext";
 
 interface SelectedOptionsProps {
   selectedOptions?: string[];
@@ -10,10 +11,12 @@ interface SelectedOptionsProps {
 
 const Option = ({ option }: { option: string }) => {
   const { isMultiSelect, removeSelectedOption } = useSelectedOptionsContext();
+  const { focusInput } = useInputContext();
 
   const onClick = (e) => {
     e.stopPropagation();
     removeSelectedOption(option);
+    focusInput();
   };
 
   if (!isMultiSelect) {

package/src/form/combobox/combobox.stories.tsx

@@ -365,12 +365,20 @@ export const RemoveSelectedMultiSelectTest = {
     await sleep(250);
     userEvent.keyboard("{Enter}");
     await sleep(250);
-    userEvent.keyboard("{Escape}");
-    await sleep(250);
 
     const appleSlett = canvas.getByLabelText("apple slett");
+    appleSlett.focus();
+    await sleep(250);
     userEvent.click(appleSlett);
     await sleep(250);
+    const appleOption = canvas.getByRole("option", {
+      name: "apple",
+      selected: false,
+    });
+    expect(appleOption).toBeVisible();
+    userEvent.keyboard("{Escape}");
+    await sleep(250);
+    expect(appleOption).not.toBeVisible();
 
     const bananaSlett = canvas.getByLabelText("banana slett");
     expect(bananaSlett).toBeInTheDocument();

package/src/grid/Cell.tsx

@@ -25,6 +25,10 @@ export interface CellProps extends HTMLAttributes<HTMLDivElement> {
   lg?: Column;
 }
 
+/**
+ * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ */
 export const Cell = forwardRef<HTMLDivElement, CellProps>(
   ({ children, xs, sm, md, lg, className, ...rest }, ref) => {
     return (

package/src/grid/Grid.tsx

@@ -8,6 +8,10 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
+/**
+ * @deprecated Use <HGrid /> instead. <Grid /> will be removed in the future.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ */
 export const Grid = forwardRef<HTMLDivElement, GridProps>(
   ({ children, className, ...rest }, ref) => (
     <div ref={ref} className={cl("navds-grid", className)} {...rest}>

package/src/grid/index.ts

@@ -1,6 +1,2 @@
 export { default as Cell, type CellProps } from "./Cell";
 export { default as Grid, type GridProps } from "./Grid";
-export {
-  default as ContentContainer,
-  type ContentContainerProps,
-} from "./ContentContainer";

package/src/index.ts

@@ -33,3 +33,5 @@ export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 export * from "./layout/stack";
+export * from "./layout/grid";
+export * from "./layout/content-container";

package/src/layout/content-container/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as ContentContainer,
+  type ContentContainerProps,
+} from "./ContentContainer";

package/src/layout/grid/HGrid.tsx

@@ -0,0 +1,101 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "clsx";
+import {
+  getResponsiveProps,
+  getResponsiveValue,
+  ResponsiveProp,
+  SpacingScale,
+} from "../utilities/css";
+
+export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+   * @example
+   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+   * @example
+   * columns={3}
+   * @example
+   * columns="repeat(3, minmax(0, 1fr))"
+   */
+  columns?: ResponsiveProp<number | string>;
+  /** Spacing between columns. Based on spacing-tokens.
+   * @example
+   * gap="6"
+   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+   */
+  gap?: ResponsiveProp<SpacingScale>;
+}
+/**
+ * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/hgrid)
+ * @see 🏷️ {@link HGridProps}
+ *
+ * @example
+ * <HGrid gap="6" columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap={{xs: "2", md: "6"}} columns={3}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ * @example
+ * <HGrid gap="6" columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </HGrid>
+ */
+export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
+  ({ className, columns, gap, style, ...rest }, ref) => {
+    const styles: React.CSSProperties = {
+      ...style,
+      ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
+      ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+    };
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={cl("navds-hgrid", className)}
+        style={styles}
+      />
+    );
+  }
+);
+
+function formatGrid(
+  props?: ResponsiveProp<number | string>
+): ResponsiveProp<number | string> {
+  if (!props) {
+    return {};
+  }
+
+  if (typeof props === "string" || typeof props === "number") {
+    return getColumnValue(props);
+  }
+
+  return Object.fromEntries(
+    Object.entries(props).map(([breakpointToken, columnValue]) => [
+      breakpointToken,
+      getColumnValue(columnValue),
+    ])
+  );
+}
+
+const getColumnValue = (prop: number | string) => {
+  if (typeof prop === "number") {
+    return `repeat(${prop}, minmax(0, 1fr))`;
+  }
+
+  return prop;
+};
+
+export default HGrid;

package/src/layout/grid/h-grid.stories.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { HGrid } from ".";
+
+const columnsVariants = {
+  Number: "columnNumber",
+  String: "columnString",
+  Object: "columnObject",
+};
+
+export default {
+  title: "ds-react/HGrid",
+  component: HGrid,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    columnsType: {
+      defaultValue: Object.keys(columnsVariants)[0],
+      options: Object.keys(columnsVariants),
+      control: { type: "radio" },
+    },
+  },
+};
+
+/* const getColumnsProp = () */
+
+export const Default = {
+  render: (props) => (
+    <HGrid
+      gap={props?.gap ?? 4}
+      columns={props[columnsVariants[props.columnsType]]}
+    >
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+  args: {
+    columnNumber: 4,
+    columnObject: { xs: 1, md: 4 },
+    columnString: "repeat(3, minmax(0, 1fr))",
+    gap: "4",
+  },
+};
+
+export const Gap = {
+  render: () => (
+    <HGrid gap="6">
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const DynamicGap = {
+  render: () => (
+    <HGrid gap={{ xs: "2", md: "8" }}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const Columns = {
+  render: () => (
+    <HGrid gap="4" columns={2}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+      <Placeholder text="3" />
+      <Placeholder text="4" />
+    </HGrid>
+  ),
+};
+
+export const DynamicColumns = {
+  render: () => (
+    <HGrid gap="4" columns={{ sm: "1fr 5fr", md: "2fr 2fr" }}>
+      <Placeholder text="1" />
+      <Placeholder text="2" />
+    </HGrid>
+  ),
+};
+
+function Placeholder({ text }) {
+  return (
+    <div
+      style={{
+        background: "var(--a-deepblue-900)",
+        height: "5rem",
+        width: "auto",
+        color: "white",
+      }}
+    >
+      {text}
+    </div>
+  );
+}

package/src/layout/grid/index.ts

@@ -0,0 +1 @@
+export { default as HGrid, type HGridProps } from "./HGrid";

package/src/layout/stack/Stack.tsx

@@ -53,12 +53,12 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       ref
     ) => {
       const style = {
-        "--ac-stack-direction": direction,
-        "--ac-stack-align": align,
-        "--ac-stack-justify": justify,
-        "--ac-stack-wrap": wrap ? "wrap" : "nowrap",
-        ...getResponsiveProps(`stack`, "gap", "spacing", gap),
         ..._style,
+        "--__ac-stack-direction": direction,
+        "--__ac-stack-align": align,
+        "--__ac-stack-justify": justify,
+        "--__ac-stack-wrap": wrap ? "wrap" : "nowrap",
+        ...getResponsiveProps(`stack`, "gap", "spacing", gap),
       } as React.CSSProperties;
 
       return (