@navikt/ds-react 7.4.2 → 7.5.0

package/esm/provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/provider/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/provider/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EACL,UAAU,IAAI,iBAAiB,EAC/B,aAAa,IAAI,oBAAoB,GACtC,MAAM,oBAAoB,CAAC"}

package/esm/provider/theme/AkselTheme.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type AkselThemeContext = {
+    theme: "light" | "dark";
+};
+declare const useAkselTheme: <S extends boolean = true>(strict?: S) => S extends true ? AkselThemeContext : AkselThemeContext | undefined;
+declare const AkselTheme: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    className?: string;
+    hasBackground?: boolean;
+} & AkselThemeContext & React.RefAttributes<HTMLDivElement>>;
+export { AkselTheme, useAkselTheme };

package/esm/provider/theme/AkselTheme.js

@@ -0,0 +1,20 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { createContext } from "../../util/create-context.js";
+const [ThemeProvider, useAkselTheme] = createContext({
+    errorMessage: "useAkselTheme must be used within AkselThemeProvider",
+    hookName: "useAkselTheme",
+    name: "AkselThemeProvider",
+    providerName: "AkselThemeProvider",
+});
+const AkselTheme = forwardRef((props, ref) => {
+    var _a;
+    const context = useAkselTheme(false);
+    const { children, className, theme = (_a = context === null || context === void 0 ? void 0 : context.theme) !== null && _a !== void 0 ? _a : "light", hasBackground: hasBackgroundProp = true, } = props;
+    const isRoot = context === undefined;
+    const hasBackground = hasBackgroundProp !== null && hasBackgroundProp !== void 0 ? hasBackgroundProp : (isRoot || props.theme !== undefined);
+    return (React.createElement(ThemeProvider, { theme: theme },
+        React.createElement("div", { ref: ref, className: cl("navds-theme", className, theme), "data-background": hasBackground }, children)));
+});
+export { AkselTheme, useAkselTheme };
+//# sourceMappingURL=AkselTheme.js.map

package/esm/provider/theme/AkselTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AkselTheme.js","sourceRoot":"","sources":["../../../src/provider/theme/AkselTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAM1D,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG,aAAa,CAAoB;IACtE,YAAY,EAAE,sDAAsD;IACpE,QAAQ,EAAE,eAAe;IACzB,IAAI,EAAE,oBAAoB;IAC1B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC;AAQH,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,KAAsB,EAAE,GAAG,EAAE,EAAE;;IAC9B,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,mCAAI,OAAO,EACjC,aAAa,EAAE,iBAAiB,GAAG,IAAI,GACxC,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,OAAO,KAAK,SAAS,CAAC;IAErC,MAAM,aAAa,GACjB,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;IAE7D,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,KAAK;QACzB,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,KAAK,CAAC,qBAC7B,aAAa,IAE7B,QAAQ,CACL,CACQ,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC"}

package/esm/util/i18n/locales/en.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     global: {
         showMore: string;
         showLess: string;
+        readOnly: string;
     };
     FileUpload: {
         dropzone: {

package/esm/util/i18n/locales/en.js

@@ -2,6 +2,7 @@ export default {
     global: {
         showMore: "Show more",
         showLess: "Show less",
+        readOnly: "Read-only",
     },
     FileUpload: {
         dropzone: {

package/esm/util/i18n/locales/en.js.map

@@ -1 +1 @@
-{"version":3,"file":"en.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/en.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,MAAM,EAAE;QACN,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,WAAW;KACtB;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,aAAa;YACrB,cAAc,EAAE,cAAc;YAC9B,WAAW,EAAE,yBAAyB;YACtC,mBAAmB,EAAE,0BAA0B;YAC/C,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,IAAI;YACR,QAAQ,EAAE,sBAAsB;YAChC,iBAAiB,EAAE,8BAA8B;SAClD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,8BAA8B;YAChD,iBAAiB,EAAE,aAAa;YAChC,SAAS,EAAE,YAAY;YACvB,WAAW,EAAE,cAAc;SAC5B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,gBAAgB;QAC9B,YAAY,EAAE,gBAAgB;KAC/B;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;KACnB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,QAAQ;SACtB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gEAAgE;KAC1E;IACD,MAAM,EAAE;QACN,KAAK,EAAE,UAAU;KAClB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,MAAM;KACb;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,2DAA2D;KAC9D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;KACjB;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,+CAA+C;QAC1D,YAAY,EAAE,6BAA6B;QAC3C,SAAS,EAAE,yBAAyB;KACrC;CACqB,CAAC"}
+{"version":3,"file":"en.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/en.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,MAAM,EAAE;QACN,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,WAAW;KACtB;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,aAAa;YACrB,cAAc,EAAE,cAAc;YAC9B,WAAW,EAAE,yBAAyB;YACtC,mBAAmB,EAAE,0BAA0B;YAC/C,IAAI,EAAE,MAAM;YACZ,EAAE,EAAE,IAAI;YACR,QAAQ,EAAE,sBAAsB;YAChC,iBAAiB,EAAE,8BAA8B;SAClD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,8BAA8B;YAChD,iBAAiB,EAAE,aAAa;YAChC,SAAS,EAAE,YAAY;YACvB,WAAW,EAAE,cAAc;SAC5B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,gBAAgB;QAC9B,YAAY,EAAE,gBAAgB;KAC/B;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,eAAe;QAC7B,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;KACnB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,QAAQ;SACtB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gEAAgE;KAC1E;IACD,MAAM,EAAE;QACN,KAAK,EAAE,UAAU;KAClB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;KACf;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,MAAM;KACb;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,2DAA2D;KAC9D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;KACjB;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,+CAA+C;QAC1D,YAAY,EAAE,6BAA6B;QAC3C,SAAS,EAAE,yBAAyB;KACrC;CACqB,CAAC"}

package/esm/util/i18n/locales/nb.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     global: {
         showMore: string;
         showLess: string;
+        readOnly: string;
     };
     FileUpload: {
         dropzone: {

package/esm/util/i18n/locales/nb.js

@@ -2,6 +2,7 @@ export default {
     global: {
         showMore: "Vis mer",
         showLess: "Vis mindre",
+        readOnly: "Skrivebeskyttet",
     },
     FileUpload: {
         dropzone: {

package/esm/util/i18n/locales/nb.js.map

@@ -1 +1 @@
-{"version":3,"file":"nb.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nb.ts"],"names":[],"mappings":"AAQA,eAAe;IACb,MAAM,EAAE;QACN,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,YAAY;KACvB;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,cAAc,EAAE,YAAY;YAC5B,WAAW,EAAE,wBAAwB;YACrC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,mCAAmC;SACvD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,gCAAgC;YAClD,iBAAiB,EAAE,aAAa;YAChC,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,8DAA8D;YAC9D,WAAW,EAAE,OAAO;SACrB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,iDAAiD;KAC3D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,OAAO;KACd;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,0BAA0B;QAC1B,SAAS,EAAE,6CAA6C;QACxD,YAAY,EAAE,sBAAsB;QACpC,SAAS,EAAE,oBAAoB;KAChC;CACuB,CAAC"}
+{"version":3,"file":"nb.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nb.ts"],"names":[],"mappings":"AAQA,eAAe;IACb,MAAM,EAAE;QACN,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,iBAAiB;KAC5B;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,cAAc,EAAE,YAAY;YAC5B,WAAW,EAAE,wBAAwB;YACrC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,mCAAmC;SACvD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,gCAAgC;YAClD,iBAAiB,EAAE,aAAa;YAChC,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,8DAA8D;YAC9D,WAAW,EAAE,OAAO;SACrB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,iDAAiD;KAC3D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,OAAO;KACd;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,0BAA0B;QAC1B,SAAS,EAAE,6CAA6C;QACxD,YAAY,EAAE,sBAAsB;QACpC,SAAS,EAAE,oBAAoB;KAChC;CACuB,CAAC"}

package/esm/util/i18n/locales/nn.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     global: {
         showMore: string;
         showLess: string;
+        readOnly: string;
     };
     FileUpload: {
         dropzone: {

package/esm/util/i18n/locales/nn.js

@@ -2,6 +2,7 @@ export default {
     global: {
         showMore: "Vis meir",
         showLess: "Vis mindre",
+        readOnly: "Skrivebeskytta",
     },
     FileUpload: {
         dropzone: {

package/esm/util/i18n/locales/nn.js.map

@@ -1 +1 @@
-{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,MAAM,EAAE;QACN,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,YAAY;KACvB;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,cAAc,EAAE,WAAW;YAC3B,WAAW,EAAE,uBAAuB;YACpC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,qCAAqC;SACzD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,+BAA+B;YACjD,iBAAiB,EAAE,YAAY;YAC/B,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,OAAO;SACrB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gDAAgD;KAC1D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE,OAAO;KACd;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,8CAA8C;QACzD,YAAY,EAAE,yBAAyB;QACvC,SAAS,EAAE,qBAAqB;KACjC;CACqB,CAAC"}
+{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,MAAM,EAAE;QACN,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,gBAAgB;KAC3B;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,cAAc,EAAE,WAAW;YAC3B,WAAW,EAAE,uBAAuB;YACpC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,qCAAqC;SACzD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,+BAA+B;YACjD,iBAAiB,EAAE,YAAY;YAC/B,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,OAAO;SACrB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gDAAgD;KAC1D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE,OAAO;KACd;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,8CAA8C;QACzD,YAAY,EAAE,yBAAyB;QACvC,SAAS,EAAE,qBAAqB;KACjC;CACqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.4.2",
+  "version": "7.5.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -604,8 +604,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.4.2",
-    "@navikt/ds-tokens": "^7.4.2",
+    "@navikt/aksel-icons": "^7.5.0",
+    "@navikt/ds-tokens": "^7.5.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"
@@ -628,8 +628,8 @@
     "vitest": "^1.2.2"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.30 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "@types/react": ">=17.0.30",
+    "react": ">=17.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/src/accordion/Accordion.tsx

@@ -31,6 +31,7 @@ interface AccordionComponent
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
+   * @deprecated Prop will be removed in future versions. "default" will be the only variant.
    * @default "default"
    */
   variant?: "default" | "neutral";

package/src/accordion/AccordionContent.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -15,6 +16,8 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     if (context === null) {
       console.error(
         "<Accordion.Content> has to be used within an <Accordion.Item>",
@@ -38,7 +41,11 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
           !context.open || undefined
         } /* Added to fix bug with Radio component, where label text inside a span sometimes is ignored by screen readers after hiding/displaying the RadioGroup inside an Accordion */
       >
-        {children}
+        {themeContext ? (
+          <div className="navds-accordion__content-inner">{children}</div>
+        ) : (
+          children
+        )}
       </BodyLong>
     );
   },

package/src/accordion/AccordionHeader.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { AccordionContext } from "./AccordionContext";
@@ -19,6 +20,8 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);
 
+    const themeContext = UNSAFE_useAkselTheme(false);
+
     if (itemContext === null) {
       console.error(
         "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>",
@@ -26,6 +29,13 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
       return null;
     }
 
+    let headingSize = accordionContext?.headingSize ?? "small";
+
+    if (themeContext) {
+      /* Fallback to "medium" Accordion-size if any other sizes are used */
+      headingSize = accordionContext?.size === "small" ? "xsmall" : "small";
+    }
+
     return (
       <button
         ref={ref}
@@ -42,7 +52,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
           />
         </span>
         <Heading
-          size={accordionContext?.headingSize ?? "small"}
+          size={headingSize}
           as="span"
           className="navds-accordion__header-content"
         >

package/src/accordion/AccordionItem.tsx

@@ -65,6 +65,7 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
           "navds-accordion__item--neutral": context?.variant === "neutral",
           "navds-accordion__item--no-animation": !shouldAnimate.current,
         })}
+        data-expanded={_open}
         ref={ref}
         {...omit(rest, ["onClick"])}
       >

package/src/chips/Toggle.tsx

@@ -48,6 +48,7 @@ export const ToggleChips: OverridableComponent<
           { "navds-chips__toggle--with-checkmark": checkmark },
         )}
         aria-pressed={selected}
+        data-pressed={selected}
       >
         {checkmark && (
           <svg
@@ -73,7 +74,7 @@ export const ToggleChips: OverridableComponent<
                 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(--ac-chip-toggle-circle-border, var(--a-border-default))"
+                fill="var(--ax-text-neutral-icon, var(--ac-chip-toggle-circle-border, var(--a-border-default)))"
               />
             )}
           </svg>

package/src/date/datepicker/DatePicker.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import { isWeekend } from "date-fns";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
@@ -88,8 +88,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);
 
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -167,7 +168,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           {children}
           <DateWrapper
             open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
             onClose={() => onClose?.() ?? setOpen(false)}
             locale={locale}
             variant={mode}

package/src/date/monthpicker/MonthPicker.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
@@ -81,8 +81,9 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
 
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(wrapperRef, ref);
+    /* We use state here to insure that anchor is defined if open is true on initial render */
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+    const mergedRef = useMergeRefs(setWrapperRef, ref);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected,
@@ -118,7 +119,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
           {children}
           <DateWrapper
             open={_open ?? open}
-            anchor={wrapperRef.current}
+            anchor={wrapperRef}
             onClose={() => onClose?.() ?? setOpen(false)}
             locale={locale}
             variant="month"

package/src/date/parts/DateInput.tsx

@@ -94,7 +94,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon readOnly={readOnly} />
+        {readOnly && <ReadOnlyIcon />}
         {label}
       </Label>
       {!!description && (

package/src/form/ReadOnlyIcon.tsx

@@ -1,20 +1,17 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import { useI18n } from "../util/i18n/i18n.context";
 
-export const ReadOnlyIcon = ({
-  readOnly,
-  nativeReadOnly = true,
-}: {
-  readOnly?: boolean;
-  nativeReadOnly?: boolean;
-}) => {
-  if (readOnly) {
-    return (
-      <PadlockLockedFillIcon
-        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
-        className="navds-form-field__readonly-icon"
-      />
-    );
-  }
-  return null;
-};
+export const ReadOnlyIcon = () => (
+  <PadlockLockedFillIcon
+    aria-hidden
+    className="navds-form-field__readonly-icon"
+  />
+);
+
+export const ReadOnlyIconWithTitle = () => (
+  <PadlockLockedFillIcon
+    title={useI18n("global")("readOnly")}
+    className="navds-form-field__readonly-icon"
+  />
+);

package/src/form/checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
@@ -90,9 +90,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               className="navds-checkbox__label-text"
               aria-hidden
             >
-              {!nested && (
-                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
-              )}
+              {!nested && readOnly && <ReadOnlyIconWithTitle />}
               {props.children}
             </BodyShort>
             {props.description && (

package/src/form/combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -46,7 +46,7 @@ export const Combobox = forwardRef<
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon nativeReadOnly={false} readOnly={readOnly} />
+        {readOnly && <ReadOnlyIconWithTitle />}
         {label}
       </Label>
       {!!description && (

package/src/form/error-summary/ErrorSummary.tsx

@@ -61,7 +61,7 @@ interface ErrorSummaryComponent
  *     Felt må fylles ut med alder
  *   </ErrorSummary.Item>
  *   <ErrorSummary.Item href="#2">
- *     Tekstfeltet må ha en godkjent e-mail
+ *     Tekstfeltet må ha en godkjent e-post
  *   </ErrorSummary.Item>
  * </ErrorSummary>
  * ```

package/src/form/fieldset/Fieldset.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIcon, ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps } from "../useFormField";
 import { FieldsetContext } from "./context";
 import { useFieldset } from "./useFieldset";
@@ -89,7 +89,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
-            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
+            {readOnly &&
+              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
             {legend}
           </Label>
           {!!description && (

package/src/form/select/Select.tsx

@@ -3,7 +3,7 @@ import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
@@ -112,7 +112,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+          {readOnly && <ReadOnlyIconWithTitle />}
           {label}
         </Label>
         {!!description && (

package/src/form/switch/Switch.tsx

@@ -8,7 +8,7 @@ import React, {
 import { Loader } from "../../loader";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 const SelectedIcon = () => (
@@ -21,7 +21,6 @@ const SelectedIcon = () => (
     focusable={false}
     role="img"
     aria-hidden
-    aria-label="Deaktiver valg"
   >
     <path
       fillRule="evenodd"
@@ -117,19 +116,19 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           defaultChecked={defaultChecked}
           ref={ref}
           type="checkbox"
-          onChange={(e) => {
+          onChange={(event) => {
             if (readOnly) {
               return;
             }
-            setChecked(e.target.checked);
-            props.onChange?.(e);
+            setChecked(event.target.checked);
+            props.onChange?.(event);
           }}
-          onClick={(e) => {
+          onClick={(event) => {
             if (readOnly) {
-              e.preventDefault();
+              event.preventDefault();
               return;
             }
-            props?.onClick?.(e);
+            props.onClick?.(event);
           }}
           className={cl(className, "navds-switch__input")}
         />
@@ -150,11 +149,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <div
             className={cl("navds-switch__content", {
               "navds-sr-only": hideLabel,
-              "navds-switch--with-description": !!description && !hideLabel,
+              "navds-switch--with-description": description && !hideLabel,
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
-              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              {readOnly && <ReadOnlyIconWithTitle />}
               {children}
             </BodyShort>
             {description && (

package/src/form/textarea/Textarea.tsx

@@ -9,9 +9,6 @@ import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";
 
-/**
- * TODO: Mulighet for lokalisering av sr-only/counter text
- */
 export interface TextareaProps
   extends FormFieldProps,
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -144,7 +141,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
         {!!description && (

package/src/form/textfield/TextField.tsx

@@ -91,7 +91,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
 

package/src/overlays/action-menu/ActionMenu.tsx

@@ -621,7 +621,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--a-border-default)"
+                  fill="var(--ax-border-default, var(--a-border-default))"
                 />
                 <rect
                   x="1"
@@ -629,7 +629,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="22"
                   height="22"
                   rx="3"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                   strokeWidth="2"
                 />
               </g>
@@ -638,7 +638,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                 />
                 <rect
                   x="6"
@@ -646,7 +646,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="12"
                   height="4"
                   rx="1"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
               <g className="navds-action-menu__indicator-icon--checked">
@@ -654,11 +654,11 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                 />
                 <path
                   d="M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
             </svg>
@@ -756,7 +756,7 @@ export const ActionMenuRadioItem = forwardRef<
                   width="24"
                   height="24"
                   rx="12"
-                  fill="var(--a-border-default)"
+                  fill="var(--ax-border-default, var(--a-border-default))"
                 />
                 <rect
                   x="1"
@@ -765,7 +765,7 @@ export const ActionMenuRadioItem = forwardRef<
                   height="22"
                   rx="11"
                   strokeWidth="2"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
               <g className="navds-action-menu__indicator-icon--checked">
@@ -775,7 +775,7 @@ export const ActionMenuRadioItem = forwardRef<
                   width="22"
                   height="22"
                   rx="11"
-                  fill="var(--a-surface-default)"
+                  fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
                 <rect
                   x="1"
@@ -783,12 +783,12 @@ export const ActionMenuRadioItem = forwardRef<
                   width="22"
                   height="22"
                   rx="11"
-                  stroke="var(--a-surface-action-selected)"
+                  stroke="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                   strokeWidth="2"
                 />
                 <path
                   d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                  fill="var(--a-surface-action-selected)"
+                  fill="var(--ax-bg-accent-strong-pressed, var(--a-surface-action-selected))"
                 />
               </g>
             </svg>