@navikt/ds-react 5.7.5 → 5.8.0

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

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { ResponsiveProp, SpacingScale } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**

package/esm/layout/grid/HGrid.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *

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

@@ -1 +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;AA0B1B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAkD,EAAE,GAAG,EAAE,EAAE;QAA3D,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhD,iDAAkD,CAAF;IAC/C,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,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"}
+{"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,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA2B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,EAAkD,EAAE,GAAG,EAAE,EAAE;QAA3D,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhD,iDAAkD,CAAF;IAC/C,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,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/responsive/Responsive.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from "react";
-import { BreakpointsAlias } from "../utilities/css";
+import { BreakpointsAlias } from "../utilities/types";
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**

package/esm/layout/sidemal-test/Sidebar.js

@@ -1,8 +1,8 @@
 import React from "react";
+import { Link } from "../../link";
 import { Heading, Label } from "../../typography";
 import { Box } from "../box";
 import { VStack } from "../stack";
-import { Link } from "../../link";
 const LinkElement = ({ children }) => {
     return (React.createElement(Label, { as: "li", className: "sidebarlink" }, children));
 };

package/esm/layout/sidemal-test/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnC,OAAO,CACL,oBAAC,KAAK,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,aAAa,IACnC,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,OAAO;IACrB,OAAO,CACL,oBAAC,MAAM,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS;QACjC,oBAAC,YAAY,OAAG;QAChB,oBAAC,SAAS,OAAG,CACN,CACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,oBAAC,GAAG,IACF,EAAE,EAAC,KAAK,gBACG,SAAS,EACpB,aAAa,EAAC,GAAG,EACjB,YAAY,EAAC,KAAK,EAClB,UAAU,EAAC,iBAAiB,EAC5B,YAAY,EAAC,QAAQ;QAErB,oBAAC,GAAG,IAAC,YAAY,EAAC,KAAK,EAAC,aAAa,EAAC,KAAK;YACzC,oBAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,cAAkB,CACpC;QACN,4BAAI,SAAS,EAAC,YAAY;YACxB,oBAAC,WAAW,4BAAgC;YAC5C,oBAAC,WAAW,4BAA2B;YACvC,oBAAC,WAAW,mCAAkC;YAC9C,oBAAC,WAAW,sCAAqC;YACjD,oBAAC,WAAW,qCAAoC;YAChD,oBAAC,WAAW,6BAA4B;YACxC,oBAAC,WAAW,kEAAkD;YAC9D,oBAAC,WAAW,kCAAsC;YAClD,oBAAC,WAAW,2CAA+C;YAC3D,oBAAC,WAAW,sCAAqC;YACjD,oBAAC,WAAW,oCAAwC;YACpD,oBAAC,WAAW,yBAA6B,CACtC,CACD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,oBAAC,GAAG,IACF,YAAY,EAAC,GAAG,EAChB,aAAa,EAAC,GAAG,EACjB,UAAU,EAAC,iBAAiB,gBACjB,oBAAe,EAC1B,EAAE,EAAC,SAAS,EACZ,YAAY,EAAC,QAAQ;QAErB,oBAAC,GAAG,IAAC,YAAY,EAAC,KAAK,EAAC,aAAa,EAAC,GAAG;YACvC,oBAAC,OAAO,IAAC,IAAI,EAAC,OAAO,yBAAwB,CACzC;QACN,2CAAgB,SAAS;YACvB,4BAAI,SAAS,EAAC,YAAY;gBACxB,oBAAC,GAAG,IAAC,YAAY,EAAC,GAAG,EAAC,aAAa,EAAC,GAAG;oBACrC,oBAAC,IAAI,0BAAuB,CACxB,CACH,CACD,CACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Sidebar.js","sourceRoot":"","sources":["../../../src/layout/sidemal-test/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnC,OAAO,CACL,oBAAC,KAAK,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,aAAa,IACnC,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,OAAO;IACrB,OAAO,CACL,oBAAC,MAAM,IAAC,GAAG,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS;QACjC,oBAAC,YAAY,OAAG;QAChB,oBAAC,SAAS,OAAG,CACN,CACV,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,oBAAC,GAAG,IACF,EAAE,EAAC,KAAK,gBACG,SAAS,EACpB,aAAa,EAAC,GAAG,EACjB,YAAY,EAAC,KAAK,EAClB,UAAU,EAAC,iBAAiB,EAC5B,YAAY,EAAC,QAAQ;QAErB,oBAAC,GAAG,IAAC,YAAY,EAAC,KAAK,EAAC,aAAa,EAAC,KAAK;YACzC,oBAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,cAAkB,CACpC;QACN,4BAAI,SAAS,EAAC,YAAY;YACxB,oBAAC,WAAW,4BAAgC;YAC5C,oBAAC,WAAW,4BAA2B;YACvC,oBAAC,WAAW,mCAAkC;YAC9C,oBAAC,WAAW,sCAAqC;YACjD,oBAAC,WAAW,qCAAoC;YAChD,oBAAC,WAAW,6BAA4B;YACxC,oBAAC,WAAW,kEAAkD;YAC9D,oBAAC,WAAW,kCAAsC;YAClD,oBAAC,WAAW,2CAA+C;YAC3D,oBAAC,WAAW,sCAAqC;YACjD,oBAAC,WAAW,oCAAwC;YACpD,oBAAC,WAAW,yBAA6B,CACtC,CACD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,oBAAC,GAAG,IACF,YAAY,EAAC,GAAG,EAChB,aAAa,EAAC,GAAG,EACjB,UAAU,EAAC,iBAAiB,gBACjB,oBAAe,EAC1B,EAAE,EAAC,SAAS,EACZ,YAAY,EAAC,QAAQ;QAErB,oBAAC,GAAG,IAAC,YAAY,EAAC,KAAK,EAAC,aAAa,EAAC,GAAG;YACvC,oBAAC,OAAO,IAAC,IAAI,EAAC,OAAO,yBAAwB,CACzC;QACN,2CAAgB,SAAS;YACvB,4BAAI,SAAS,EAAC,YAAY;gBACxB,oBAAC,GAAG,IAAC,YAAY,EAAC,GAAG,EAAC,aAAa,EAAC,GAAG;oBACrC,oBAAC,IAAI,0BAAuB,CACxB,CACH,CACD,CACF,CACP,CAAC;AACJ,CAAC"}

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

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import { ResponsiveProp, SpacingScale } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**

package/esm/layout/stack/Stack.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 export const Stack = forwardRef((_a, ref) => {
     var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction = "row" } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
     const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-stack-wrap": wrap ? "wrap" : "nowrap" }), getResponsiveProps(`stack`, "gap", "spacing", gap)), getResponsiveValue(`stack`, "direction", direction)), getResponsiveValue(`stack`, "align", align)), getResponsiveValue(`stack`, "justify", justify));

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,EAClB,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AAoC1B,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,GAAG,KAAK,OAElB,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,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,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAqC1E,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,GAAG,KAAK,OAElB,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,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,14 +1,7 @@
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
-export type SpacingScale = "0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32";
-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 | FixedResponsiveT<T>;
+import { ResponsiveProp } from "./types";
 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>, invert?: boolean, tokenExceptions?: string[]): {
     [x: string]: string;
 };
-export {};

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

@@ -1 +1 @@
-{"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,uBAAuB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACpD,QAAQ,SAAS,EAAE;QACjB,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;KAChB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,aAAqB,EACrB,WAAmB,EACnB,aAAqB,EACrB,eAAyB,EACzB,MAAe,EACf,EAAE;IACF,OAAO,WAAW;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;QACjB,IAAI,aAAa,KAAK,eAAe,IAAI,CAAC,KAAK,MAAM,EAAE;YACrD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,QAAQ,CAAC;SACvC;QAED,IAAI,MAAM,GAAG,WAAW,aAAa,IAAI,CAAC,GAAG,CAAC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC/B,MAAM,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAC;SACrC;QACD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,EAAE;gBACb,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,aAAa,MAAM,GAAG,CAAC;SAC/B;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,MAAM,GAAG,KAAK,EACd,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,EAC7C,yBAAyB,CACvB,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,CACP;SACJ,CAAC;KACH;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACzE,UAAU,CAAC,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE,CAAC;YACvE,yBAAyB,CACvB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,MAAM,CACP,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AAEA,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,uBAAuB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACpD,QAAQ,SAAS,EAAE;QACjB,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;KAChB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,aAAqB,EACrB,WAAmB,EACnB,aAAqB,EACrB,eAAyB,EACzB,MAAe,EACf,EAAE;IACF,OAAO,WAAW;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;QACjB,IAAI,aAAa,KAAK,eAAe,IAAI,CAAC,KAAK,MAAM,EAAE;YACrD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,QAAQ,CAAC;SACvC;QAED,IAAI,MAAM,GAAG,WAAW,aAAa,IAAI,CAAC,GAAG,CAAC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC/B,MAAM,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAC;SACrC;QACD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,EAAE;gBACb,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,aAAa,MAAM,GAAG,CAAC;SAC/B;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,MAAM,GAAG,KAAK,EACd,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,EAC7C,yBAAyB,CACvB,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,CACP;SACJ,CAAC;KACH;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACzE,UAAU,CAAC,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE,CAAC;YACvE,yBAAyB,CACvB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,MAAM,CACP,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC"}

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

@@ -3,7 +3,16 @@ 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";
+import Spacing from "@navikt/ds-tokens/src/spacing.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;
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
+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 | FixedResponsiveT<T>;
+export {};

package/esm/loader/Loader.d.ts

@@ -37,7 +37,7 @@ export type LoaderType = React.ForwardRefExoticComponent<LoaderProps & React.Ref
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 export declare const Loader: LoaderType;

package/esm/loader/Loader.js

@@ -20,7 +20,7 @@ import { omit, useId } from "../util";
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 export const Loader = forwardRef((_a, ref) => {

package/esm/modal/Modal.js

@@ -70,7 +70,7 @@ import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
  */
 export const Modal = forwardRef((_a, ref) => {
     var _b, _c;
-    var { header, children, open, onBeforeClose, onCancel, width, portal, className, "aria-labelledby": ariaLabelledby, style } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "width", "portal", "className", "aria-labelledby", "style"]);
+    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick"]);
     const modalRef = useRef(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const ariaLabelId = useId();
@@ -86,6 +86,12 @@ export const Modal = forwardRef((_a, ref) => {
         if (needPolyfill && modalRef.current && portalNode) {
             dialogPolyfill.registerDialog(modalRef.current);
         }
+        // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
+        // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
+        // We have to use JS because it doesn't work to set it with a prop (React bug?)
+        // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
+        if (modalRef.current && portalNode)
+            modalRef.current.autofocus = true;
     }, [modalRef, portalNode]);
     useEffect(() => {
         // We need to have this in a useEffect so that the content renders before the modal is displayed,
@@ -102,22 +108,37 @@ export const Modal = forwardRef((_a, ref) => {
     }, [modalRef, portalNode, open]);
     useBodyScrollLock(modalRef, portalNode);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    const component = (React.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: cl("navds-modal", className, {
-            "navds-modal--polyfilled": needPolyfill,
-            "navds-modal--autowidth": !width,
-            [`navds-modal--${width}`]: isWidthPreset,
-        }), style: Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {})), onCancel: (event) => {
-            // FYI: onCancel fires when you press Esc
-            if (onBeforeClose && onBeforeClose() === false) {
-                event.preventDefault();
+    const mergedClassName = cl("navds-modal", className, {
+        "navds-modal--polyfilled": needPolyfill,
+        "navds-modal--autowidth": !width,
+        [`navds-modal--${width}`]: isWidthPreset,
+    });
+    const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
+    const mergedOnCancel = (event) => {
+        if (onBeforeClose && onBeforeClose() === false) {
+            event.preventDefault();
+        }
+        else if (onCancel)
+            onCancel(event);
+    };
+    const mergedOnClick = closeOnBackdropClick && !needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
+        ? (event) => {
+            onClick && onClick(event);
+            if (event.target === modalRef.current &&
+                (!onBeforeClose || onBeforeClose() !== false)) {
+                modalRef.current.close();
             }
-            else if (onCancel)
-                onCancel(event);
-        }, "aria-labelledby": !ariaLabelledby && !rest["aria-label"] && header
-            ? ariaLabelId
-            : ariaLabelledby }),
+        }
+        : onClick;
+    const mergedAriaLabelledBy = !ariaLabelledby && !rest["aria-label"] && header
+        ? ariaLabelId
+        : ariaLabelledby;
+    const component = (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    React.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: mergedOnCancel, onClick: mergedOnClick, "aria-labelledby": mergedAriaLabelledBy }),
         React.createElement(ModalContext.Provider, { value: {
                 closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
+                ref: modalRef,
             } },
             header && (React.createElement(ModalHeader, null,
                 header.label && (React.createElement(Detail, { className: "navds-modal__label" }, header.label)),

package/esm/modal/Modal.js.map

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

package/esm/modal/ModalContext.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 interface ModalContextProps {
     closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+    ref: React.RefObject<HTMLDialogElement>;
 }
 export declare const ModalContext: React.Context<ModalContextProps | null>;
 export {};

package/esm/modal/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../src/modal/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA2B,IAAI,CAAC,CAAC"}
+{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../src/modal/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA2B,IAAI,CAAC,CAAC"}

package/esm/modal/types.d.ts

@@ -42,6 +42,13 @@ export interface ModalProps extends React.DialogHTMLAttributes<HTMLDialogElement
      * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
      */
     onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+    /**
+     * Whether to close when clicking on the backdrop.
+     *
+     * **WARNING:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+     * @default false
+     */
+    closeOnBackdropClick?: boolean;
     /**
      * @default fit-content (up to 700px)
      * */

package/esm/tooltip/Tooltip.js

@@ -9,12 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { arrow as flArrow, autoUpdate, flip, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
+import { FloatingPortal, autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
 import cl from "clsx";
-import React, { cloneElement, forwardRef, useMemo, useRef, useState, } from "react";
+import React, { cloneElement, forwardRef, useContext, useMemo, useRef, useState, } from "react";
+import { ModalContext } from "../modal/ModalContext";
+import { useProvider } from "../provider";
 import { Detail } from "../typography";
 import { mergeRefs, useId } from "../util";
-import { useProvider } from "../provider";
 /**
  * A component that displays a tooltip when the user hovers over its child element.
  *
@@ -33,7 +34,11 @@ export const Tooltip = forwardRef((_a, ref) => {
     var { children, className, arrow: _arrow = true, placement: _placement = "top", open: userOpen, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
     const [open, setOpen] = useState(defaultOpen);
     const arrowRef = useRef(null);
-    const rootElement = (_b = useProvider()) === null || _b === void 0 ? void 0 : _b.rootElement;
+    const modalContext = useContext(ModalContext);
+    const providerRootElement = (_b = useProvider()) === null || _b === void 0 ? void 0 : _b.rootElement;
+    const rootElement = modalContext
+        ? modalContext.ref.current
+        : providerRootElement;
     const { x, y, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, refs, } = useFloating({
         placement: _placement,
         open: userOpen !== null && userOpen !== void 0 ? userOpen : open,
@@ -44,7 +49,13 @@ export const Tooltip = forwardRef((_a, ref) => {
             flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
             flArrow({ element: arrowRef, padding: 5 }),
         ],
-        whileElementsMounted: autoUpdate,
+        whileElementsMounted: modalContext
+            ? (reference, floating, update) => 
+            // Reduces jumping in Chrome when used in a Modal and it's the first focusable element.
+            // Can be removed when autofocus starts working on <dialog> in Chrome. See also Modal.tsx
+            autoUpdate(reference, floating, update, { animationFrame: true })
+            : autoUpdate,
+        strategy: modalContext ? "fixed" : undefined,
     });
     const { getReferenceProps, getFloatingProps } = useInteractions([
         useHover(context, { handleClose: safePolygon(), restMs: delay }),

package/esm/tooltip/Tooltip.js.map

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

package/package.json

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

package/src/accordion/AccordionHeader.tsx

@@ -1,9 +1,9 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Heading } from "../typography";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -37,13 +37,13 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         aria-expanded={itemContext.open}
         type="button"
       >
-        <div className="navds-accordion__icon-wrapper">
+        <span className="navds-accordion__icon-wrapper">
           <ChevronDownIcon
             className="navds-accordion__header-chevron"
             title="Vis mer"
             aria-hidden
           />
-        </div>
+        </span>
         <Heading
           size={accordionContext?.headingSize ?? "small"}
           as="span"

package/src/chips/Toggle.tsx

@@ -6,7 +6,7 @@ export interface ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
-   * Toggles aria-pressed and visual-changes
+   * Toggles aria-pressed and visual changes
    */
   selected?: boolean;
   /**
@@ -44,28 +44,38 @@ export const ToggleChips: OverridableComponent<
         className={cl(
           "navds-chips__chip navds-chips__toggle",
           className,
-          `navds-chips__toggle--${variant}`
+          `navds-chips__toggle--${variant}`,
+          { "navds-chips__toggle--with-checkmark": checkmark }
         )}
         aria-pressed={selected}
       >
-        {selected && checkmark && (
+        {checkmark && (
           <svg
             aria-hidden
             className="navds-chips__toggle-icon"
-            width="10"
-            height="8"
-            viewBox="0 0 10 8"
+            width="1.25em"
+            height="1.25em"
+            viewBox="0 0 20 20"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             focusable={false}
             role="img"
           >
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
-              fill="currentColor"
-            />
+            {selected ? (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z"
+                fill="currentColor"
+              />
+            ) : (
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
+                fill="var(--a-border-default)"
+              />
+            )}
           </svg>
         )}
         <span className="navds-chips__chip-text">{children}</span>

package/src/chips/chips.stories.tsx

@@ -60,11 +60,11 @@ Default.argTypes = {
   },
 };
 
-export const Toggle = () => {
+export const Toggle = ({ size }) => {
   const [selected, setSelected] = useState<number[]>([2, 4]);
   return (
     <div className="colgap">
-      <Chips>
+      <Chips size={size}>
         {options.map((c, y) => (
           <Chips.Toggle
             selected={selected.includes(y)}
@@ -81,7 +81,7 @@ export const Toggle = () => {
           </Chips.Toggle>
         ))}
       </Chips>
-      <Chips>
+      <Chips size={size}>
         {options.map((c, y) => (
           <Chips.Toggle
             variant="neutral"
@@ -102,6 +102,12 @@ export const Toggle = () => {
     </div>
   );
 };
+Toggle.argTypes = {
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+};
 
 export const ToggleNoCheckmark = () => {
   const [selected, setSelected] = useState<number>(2);

package/src/date/datepicker/datepicker.stories.tsx

@@ -4,7 +4,6 @@ import isSameDay from "date-fns/isSameDay";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
 import { BodyLong, Button, HGrid, HStack, Modal, VStack } from "../..";
-
 import DatePicker, { DatePickerProps } from "./DatePicker";
 
 const disabledDays = [

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -1,8 +1,10 @@
 import { Meta, StoryFn } from "@storybook/react";
+import setYear from "date-fns/setYear";
 import React, { useId, useState } from "react";
 import { Button, DateInputProps } from "../..";
 import { useMonthpicker } from "../hooks";
-import MonthPicker, { MonthPickerProps } from "./MonthPicker";
+import MonthPicker from "./MonthPicker";
+import { MonthPickerProps } from "./types";
 
 export default {
   title: "ds-react/Monthpicker",
@@ -147,3 +149,28 @@ export const UserControlled = () => {
     </div>
   );
 };
+
+export const FollowYear = () => {
+  const { monthpickerProps, inputProps, selectedMonth, setSelected } =
+    useMonthpicker({
+      fromDate: new Date("Aug 23 2019"),
+      toDate: new Date("Aug 23 2025"),
+      onMonthChange: console.log,
+    });
+
+  const customYearChange = (yearDate?: Date) => {
+    monthpickerProps.onYearChange?.(yearDate);
+    if (selectedMonth && yearDate) {
+      setSelected(setYear(selectedMonth, yearDate.getFullYear()));
+    }
+  };
+
+  return (
+    <div className="min-h-96">
+      <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
+        <MonthPicker.Input {...inputProps} label="Velg månede" />
+      </MonthPicker>
+      {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
+    </div>
+  );
+};

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -95,8 +95,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
       shouldAutocomplete &&
       normalizeText(searchTerm) !== "" &&
       (previousSearchTerm?.length || 0) < searchTerm.length &&
-      filteredOptions.length > 0 &&
-      !isValueInList(searchTerm, filteredOptions)
+      filteredOptions.length > 0
     ) {
       setValue(
         `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`

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

@@ -31,6 +31,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       allowNewValues,
       currentOption,
       filteredOptions,
+      isValueNew,
       toggleIsListOpen,
       isListOpen,
       filteredOptionsIndex,
@@ -46,29 +47,43 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const onEnter = useCallback(
       (event: React.KeyboardEvent) => {
+        const isTextInSelectedOptions = (text: string) => {
+          return selectedOptions.find(
+            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase()
+          );
+        };
+
         if (currentOption) {
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          if (!isMultiSelect && !selectedOptions.includes(currentOption))
+          if (!isMultiSelect && !isTextInSelectedOptions(currentOption))
             toggleIsListOpen(false);
-        } else if (shouldAutocomplete && selectedOptions.includes(value)) {
+        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
         } else if ((allowNewValues || shouldAutocomplete) && value !== "") {
           event.preventDefault();
           // Autocompleting or adding a new value
-          toggleOption(value, event);
-          if (!isMultiSelect && !selectedOptions.includes(value))
+          const selectedValue =
+            allowNewValues && isValueNew ? value : filteredOptions[0];
+          toggleOption(selectedValue, event);
+          if (
+            !isMultiSelect &&
+            !isTextInSelectedOptions(filteredOptions[0] || selectedValue)
+          ) {
             toggleIsListOpen(false);
+          }
         }
       },
       [
         allowNewValues,
         clearInput,
         currentOption,
+        filteredOptions,
         isMultiSelect,
+        isValueNew,
         selectedOptions,
         shouldAutocomplete,
         toggleIsListOpen,