Lerna versionbump [ci skip]

- @navikt/ds-css@0.4.2 - @navikt/ds-react@0.4.3
Vnext: paneler komponent (#1108 )
2026-10-14 09:42:02 +00:00 · 2021-05-28 11:23:29 +00:00 · 2021-05-28 13:08:14 +02:00 · 2021-05-26 13:27:17 +02:00 · 2021-05-25 19:01:21 +00:00 · 2021-05-25 20:47:29 +02:00
137 changed files with 2300 additions and 2292 deletions
@@ -16,7 +16,7 @@ module.exports = (baseConfig) => {
    }
  );
  baseConfig.config.resolve.alias = {
-    ...baseConfig.config.resolve?.alias,
+    ...baseConfig.config.resolve.alias,
    "./normalize.css": path.resolve(
      __dirname,
      "../node_modules/normalize.css/normalize.css"
@@ -13,4 +13,5 @@
@import "modal.css";
@import "popover.css";
@import "tag.css";
+@import "panel.css";
@import "typography.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.3.2",
+  "version": "0.4.2",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.1.3",
+    "@navikt/ds-tokens": "^0.2.1",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -0,0 +1,10 @@
+.navds-panel {
+  background-color: var(--navds-color-white);
+  display: block;
+  padding: 1rem;
+  border-radius: var(--navds-border-radius);
+}
+
+.navds-panel--border {
+  border: var(--navds-border-default);
+}
@@ -2495,6 +2495,22 @@
    "pageName": "Handicap",
    "visible": true
  },
+  {
+    "name": "SignLanguageTwoHands",
+    "description": "",
+    "created_at": "2021-05-20T14:35:02.839Z",
+    "updated_at": "2021-05-20T14:35:02.839Z",
+    "pageName": "Handicap",
+    "visible": true
+  },
+  {
+    "name": "SignLanguageTwoHandsFilled",
+    "description": "",
+    "created_at": "2021-05-20T14:35:02.835Z",
+    "updated_at": "2021-05-21T11:39:15.041Z",
+    "pageName": "Handicap",
+    "visible": true
+  },
  {
    "name": "SingleParent",
    "description": "",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.3.1",
+  "version": "0.3.2",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V13H22C23.1046 13 24 13.8954 24 15V20C24 21.1046 23.1046 22 22 22H20.4649C19.7733 23.1956 18.4806 24 17 24H7C5.51944 24 4.22675 23.1956 3.53513 22H2C0.89543 22 0 21.1046 0 20V15C0 13.8954 0.895431 13 2 13H3V11C3 7.64262 5.06817 4.76829 8 3.58152ZM19 20V13V11C19 7.68629 16.3137 5 13 5H11C7.68629 5 5 7.68629 5 11V13V20C5 21.1046 5.89543 22 7 22H17C18.1046 22 19 21.1046 19 20ZM21 15V20H22V15H21ZM2 15H3V20H2L2 15ZM15 15H9V18H15V15ZM9 13C7.89543 13 7 13.8954 7 15V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V15C17 13.8954 16.1046 13 15 13H9ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2H14V3H13H11H10V2ZM8 3.58152V2C8 0.89543 8.89543 0 10 0H14C15.1046 0 16 0.895431 16 2V3.58152C18.9318 4.76829 21 7.64262 21 11V20C21 22.2091 19.2091 24 17 24H7C4.79086 24 3 22.2091 3 20V11C3 7.64262 5.06817 4.76829 8 3.58152ZM2 22V20V15V13C0.895431 13 0 13.8954 0 15V20C0 21.1046 0.895431 22 2 22ZM22 20V22C23.1046 22 24 21.1046 24 20V15C24 13.8954 23.1046 13 22 13V15V20ZM9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10H15C15.5523 10 16 9.55228 16 9C16 8.44772 15.5523 8 15 8H9ZM9 15H15V18H9V15ZM7 15C7 13.8954 7.89543 13 9 13H15C16.1046 13 17 13.8954 17 15V18C17 19.1046 16.1046 20 15 20H9C7.89543 20 7 19.1046 7 18V15Z" fill="#262626"/>
 </svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2759 0.794191C16.307 -0.244097 14.667 -0.26221 13.6754 0.754417L9.74143 4.78747C9.649 3.25296 8.37333 2 6.77509 2C5.8588 2 5.06149 2.62698 4.84543 3.51743L4.0564 6.76929C4.01893 6.9237 4 7.08201 4 7.24089V12H6V7.24089L6.78636 4.00006C7.36372 4.00658 7.80905 4.51343 7.73931 5.08828L7.50726 7.00087C7.46893 7.31686 7.58332 7.63224 7.81533 7.85018L7.85281 7.88538C8.73673 8.71568 9.02192 10.0026 8.57152 11.1286L10.4285 11.8714C11.0294 10.3691 10.8502 8.69616 10.0063 7.37311C10.0317 7.35181 10.0562 7.32906 10.0798 7.30485L15.1071 2.15093C15.3017 1.9514 15.6236 1.95495 15.8137 2.15873C15.9899 2.34745 15.9887 2.64064 15.8111 2.82797L12.8809 5.91858C12.5009 6.31936 12.5178 6.9523 12.9186 7.33229C13.3194 7.71227 13.9523 7.69541 14.3323 7.29462L14.9911 6.59976L15.009 6.61825L19.1448 2.6177C19.352 2.41722 19.6799 2.41381 19.8912 2.60994C20.1205 2.82265 20.123 3.18461 19.8967 3.40048L15.3097 7.77646C14.9226 8.14579 14.8947 8.75443 15.2465 9.15755L16.3105 10.3767C17.0272 11.1979 16.9544 12.4418 16.1467 13.1737L15.3284 13.9153L16.6715 15.3973L17.4897 14.6557C19.1051 13.1918 19.2508 10.7041 17.8174 9.06162L17.3824 8.56324L21.2773 4.84759C22.3374 3.83619 22.3257 2.1404 21.2516 1.14381C20.2612 0.224952 18.7253 0.24092 17.7543 1.18017L17.6377 1.29292C17.5403 1.11595 17.4197 0.948242 17.2759 0.794191ZM2 17.6C2 16.195 3.18687 15 4.72128 15C5.75299 15 6.65937 15.5443 7.11914 16.3132L7.41022 16.8H12.1638C12.6707 16.8 13.0245 17.1891 13.0245 17.6C13.0245 18.0109 12.6707 18.4 12.1638 18.4H8.44257V20.4H12.1638C13.254 20.4 14.2271 19.794 14.7076 18.8848L21.2144 17.6647C21.4524 17.6201 21.6958 17.7091 21.8489 17.8968C22.1318 18.2435 21.996 18.7652 21.58 18.93L13.9948 21.9361C13.8883 21.9783 13.7747 22 13.6601 22H2V17.6ZM20.8458 15.699L14.9105 16.8119C14.5597 15.6334 13.4423 14.8 12.1638 14.8H8.49893C7.62226 13.6954 6.23291 13 4.72128 13C2.14528 13 0 15.0285 0 17.6V24H13.6601C14.027 24 14.3906 23.9306 14.7317 23.7954L22.3169 20.7893C23.9904 20.1261 24.5366 18.0274 23.3987 16.6325C22.7827 15.8775 21.8035 15.5194 20.8458 15.699Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6641 5.80415L17.8422 2.51184C18.3901 1.94435 18.3975 1.04755 17.8592 0.47103C17.2817 -0.147543 16.3041 -0.158336 15.713 0.447334L10.6778 5.60681L10.6838 5.61275L10.5592 5.73844L10.3805 7.06235C11.7946 8.32246 12.5209 10.1515 12.3976 11.9956H11.3944C11.4081 11.8237 11.4131 11.6519 11.4093 11.4808C11.3789 10.0731 10.7615 8.71373 9.66169 7.76072C9.47276 7.597 9.36744 7.35937 9.3703 7.11283C9.37077 7.07911 9.37325 7.04523 9.37782 7.01135L9.70581 4.58006C9.86396 3.40852 8.95297 2.36629 7.7708 2.36629C7.3203 2.36629 6.9283 2.67454 6.82205 3.11233L6.03079 6.37284C6.01205 6.45005 6.00258 6.52922 6.00258 6.60867V14.166C7.00096 14.4358 7.88069 15.0135 8.50257 15.7969H10.38L10.3809 15.7938H11.4246L11.4237 15.7969H12.1694C13.3803 15.7969 14.4469 16.5442 14.8549 17.6241L14.9727 17.6054L18.0422 14.6519C19.7068 13.0502 19.6718 10.376 17.9657 8.81844L17.2628 8.17671L22.3435 2.88855C22.8886 2.32118 22.895 1.42691 22.3581 0.851822C21.7795 0.23219 20.7997 0.223126 20.2098 0.831949L15.0503 6.15674L14.6641 5.80415Z" fill="#262626"/>
+<path d="M12.1696 16.7973H7.98101C7.33725 15.7209 6.10132 14.9967 4.72321 14.9967C2.66694 14.9967 1 16.609 1 18.5979V23.9999H13.6667C13.9076 23.9999 14.1462 23.9543 14.3701 23.8656L21.9393 20.8664C22.9944 20.4483 23.3388 19.1251 22.6213 18.2457C22.2434 17.7825 21.6476 17.5554 21.0573 17.6494L15.101 18.5979C15.101 20.1656 13.8302 21.4365 12.2625 21.4365H8.44641V20.3986H12.1696C13.1978 20.3986 14.0312 19.5924 14.0312 18.5979C14.0312 17.6035 13.1978 16.7973 12.1696 16.7973Z" fill="#262626"/>
+</svg>
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.3.5",
+  "version": "0.4.3",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
    "watch": "tsc --watch -p tsconfig-esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.3.1",
+    "@navikt/ds-icons": "^0.3.2",
    "@popperjs/core": "^2.5.4",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.3.1",
@@ -34,6 +34,7 @@ export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";
 export { Tag, TagProps } from "./tag/index";
+export { Panel, PanelProps } from "./panel/index";
 export {
  Heading,
  HeadingProps,
@@ -0,0 +1,36 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Adds a border to the panel
+   * @default false
+   */
+  border?: boolean;
+}
+
+const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ children, className, border = false, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-panel", className, {
+          "navds-panel--border": border,
+        })}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Panel;
@@ -0,0 +1,2 @@
+export { default as Panel } from "./Panel";
+export * from "./Panel";
@@ -0,0 +1,38 @@
+import React from "react";
+import { Panel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/panel",
+  component: Panel,
+} as Meta;
+
+export const All = () => {
+  return (
+    <div>
+      <h1>Panel</h1>
+      <Panel>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+      <h2>With border</h2>
+      <Panel border>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+    </div>
+  );
+};
@@ -38,6 +38,10 @@
        {
          "destination": "tokens.js",
          "format": "javascript/es6"
+        },
+        {
+          "destination": "tokens-cjs.js",
+          "format": "javascript/module"
        }
      ]
    }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.1.3",
+  "version": "0.2.1",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -1,5 +1,20 @@
 const Color = require("color");

+// https://github.com/hihayk/scale/blob/69b766bba2db046d3e8cb4026ae32a32c897f9ff/src/utils.js#L44
+const mixColors = (color, step, amount, mixColor) => {
+  const saturation = Math.round(Color(color).hsl().color[1]);
+  // Setting directly to hex returns different result...
+  return Color(
+    Color(color)
+      .saturate(((step + 1) / 5) * (saturation / 100))
+      .mix(Color(mixColor), ((amount / 100) * (step + 1)) / 5)
+      .string()
+  ).hex();
+};
+
+const lightColor = (color, step) => mixColors(color, step, 100, "white");
+const darkColor = (color, step) => mixColors(color, step, 85, "black");
+
 const baseColors = {
  blue: "#0067c5",
  deepblue: "#005B82",
@@ -7,17 +22,15 @@ const baseColors = {
  orange: "#FF9100",
  green: "#06893A",
  red: "#BA3A26",
+  purple: "#634689",
+  limegreen: "#a2ad00",
 };
+
 const white = "#ffffff";
-const darkgray = "#3e3832";
+const darkgray = "#262626";
+const lightgray = "#F1F1F1";

-const mix = (a, b, percentage) =>
-  Color(a)
-    .mix(Color(b), percentage / 100)
-    .hex();
-
-const darken = (color, percentage) => mix(color, darkgray, percentage);
-const lighten = (color, percentage) => mix(color, white, percentage);
+const gray = (n) => Color(lightgray).mix(Color(darkgray), n).hex();

 module.exports = {
  navds: {
@@ -25,26 +38,26 @@ module.exports = {
      white: { value: white },
      darkgray: { value: darkgray },
      gray: {
-        90: { value: "#262626" },
-        80: { value: "#4F4F4F" },
-        60: { value: "#6A6A6A" },
-        40: { value: "#A0A0A0" },
-        20: { value: "#C9C9C9" },
-        10: { value: "#F1F1F1" },
+        90: { value: gray(1) },
+        80: { value: gray(0.8) },
+        60: { value: gray(0.6667) },
+        40: { value: gray(0.4) },
+        20: { value: gray(0.196) },
+        10: { value: gray(0) },
      },
      ...Object.entries(baseColors).reduce(
        (colors, [name, color]) => ({
          ...colors,
          [name]: {
-            90: { value: darken(color, 80) },
-            80: { value: darken(color, 60) },
-            70: { value: darken(color, 40) },
-            60: { value: darken(color, 20) },
+            90: { value: darkColor(color, 3) },
+            80: { value: darkColor(color, 2) },
+            70: { value: darkColor(color, 1) },
+            60: { value: darkColor(color, 0) },
            50: { value: color },
-            40: { value: lighten(color, 20) },
-            30: { value: lighten(color, 40) },
-            20: { value: lighten(color, 60) },
-            10: { value: lighten(color, 80) },
+            40: { value: lightColor(color, 0) },
+            30: { value: lightColor(color, 1) },
+            20: { value: lightColor(color, 2) },
+            10: { value: lightColor(color, 3) },
          },
        }),
        {}
@@ -52,12 +65,12 @@ module.exports = {
      disabled: { value: "{navds.color.gray.40.value}" },
      action: {
        default: { value: "{navds.color.blue.50.value}" },
-        hover: { value: lighten(baseColors.blue, 5) },
+        hover: { value: Color(baseColors.blue).lighten(0.1) },
        active: { value: "{navds.color.deepblue.50.value}" },
      },
      danger: {
        default: { value: "{navds.color.red.50.value}" },
-        hover: { value: lighten(baseColors.red, 5) },
+        hover: { value: Color(baseColors.red).lighten(0.1) },
        active: { value: "{navds.color.red.70.value}" },
      },
      error: {
@@ -89,24 +102,24 @@ module.exports = {
      tag: {
        error: {
          border: { value: "{navds.color.red.50.value}" },
-          background: { value: "{navds.color.red.20.value}" },
+          background: { value: "{navds.color.red.10.value}" },
        },
        warning: {
          border: { value: "{navds.color.orange.60.value}" },
-          background: { value: "{navds.color.orange.20.value}" },
+          background: { value: "{navds.color.orange.10.value}" },
        },
        info: {
          border: { value: "{navds.color.lightblue.70.value}" },
-          background: { value: "{navds.color.lightblue.20.value}" },
+          background: { value: "{navds.color.lightblue.10.value}" },
        },
        success: {
          border: { value: "{navds.color.green.50.value}" },
-          background: { value: "{navds.color.green.20.value}" },
+          background: { value: "{navds.color.green.10.value}" },
        },
      },
      modal: {
        overlay: {
-          value: "rgba(61, 56, 49, 0.7)",
+          value: "rgba(38, 38, 38, 0.7)",
        },
      },
    },
@@ -175,8 +188,8 @@ module.exports = {
    },
    layout: {
      background: {
-        white: { value: "#FFFFFF" },
-        gray: { value: "#F1F1F1" },
+        white: { value: white },
+        gray: { value: "{navds.color.gray.10.value}" },
      },
      padding: {
        small: { value: "1rem" },
@@ -1,5 +1,131 @@
 # Endringslogg

+## 21. Mai 2021
+
+### Popover-position oppdateres nå onMount
+
+[#1104](https://github.com/navikt/nav-frontend-moduler/pull/1104)
+
+- Hvis popover mountes med `ankerEl` så vil posisjon oppdateres riktig nå.
+- OPS! Tilfeller ved bruk av useRef som `ankerEl` kan føre til feil i posisjonering da Popover mountes med `ankerEl == null`, og da oppdatering av ref ikke fører til props oppdatering siden det er en ref. Anbefales å ta i bruk state for `ankerEl`
+
+## 19. Mai 2021
+
+### Oppdatert fargepalett
+
+[#1092](https://github.com/navikt/nav-frontend-moduler/pull/1092)
+
+- Alle nav-frontend pakker som `nav-frontend-core` berører vil major bumpes, inkludert `na v-frontend-core`.
+- `@navikt/ds-tokens`, `@navikt/ds-css` og `@navikt/ds-react` vil minor bumpes
+
+- `orangeFocus` og alle variantene av denne fargen er fjernet fra `nav-frontend-core`
+- `navRod`sine lighten/darken varianter er fjernet fra `nav-frontend-core`. Bruk `redError` som erstattning.
+- `@navikt/ds-tokens` har nå `purple` og `limegreen` farger tilgjengelige
+
+### Prop for hvit bakgrunn på veileder sin snakkeboble
+
+[#1099](https://github.com/navikt/nav-frontend-moduler/pull/1099)
+
+- Kan nå bruke prop `hvitSnakkeboble` for å setteakgrunnen på snakkeboble til hvit.
+
+## 18. Mai 2021
+
+### Oppdatert bakgrunnsfarge på Tag/Etikett for å synke med figma
+
+[#1097](https://github.com/navikt/nav-frontend-moduler/pull/1097)
+[#1094](https://github.com/navikt/nav-frontend-moduler/pull/1094)
+
+- Bakgrunnene til de fire komponent-variasjonenen er nå endret til `Lighten80` istedenfor `Lighten60`
+
+### Oppdatert textareaRef prop for textarea-controlled
+
+[#1098](https://github.com/navikt/nav-frontend-moduler/pull/1098)
+
+- Legger på optional argument i textareaRef-propen på samme måte som i Textarea-componenten.
+
+### BekreftCheckboksPanel label har nå underline onHover
+
+[#1095](https://github.com/navikt/nav-frontend-moduler/pull/1095)
+
+- Fikser en uu-feil hvor forskjellen på default og hover stil ikke var stor nok.
+
+## 14. Mai 2021
+
+### @navikt/ds-tokens eksporteres nå også i CommonJs format
+
+## 13. Mai 2021
+
+### Typeguard for children i Tekstomrade-komponenten
+
+[#1089](https://github.com/navikt/nav-frontend-moduler/pull/1089)
+
+- Sjekker at children == string, hvis ikke return null
+
+## 04. Mai 2021
+
+### Forbedret scroll-behavior for sticky-panel
+
+[#1084](https://github.com/navikt/nav-frontend-moduler/pull/1084)
+
+- Oppførselen til menyen scrollet separat på mobil-skjermer (< 648px), noe som førte til en litt rar interaksjon. Menyen og innholdet under flyter nå naturlig uten noen overflow og max-height.
+
+## 30. April 2021
+
+### xxxl -> 3xl etc
+
+[#1086](https://github.com/navikt/nav-frontend-moduler/pull/1086)
+
+### AnchorMenu history-state fiks
+
+[#1085](https://github.com/navikt/nav-frontend-moduler/pull/1085)
+
+- Beholder state-objektet når history oppdateres ved scrolling med anchor-menu. Dette benyttes ved async navigering mellom sider i bl.a. next.js, og denne vil brekke dersom state'en overskrives.
+
+- Bruker replaceState istedenfor pushState slik at frem/tilbake-knapper i browser oppfører seg mer som forventet
+
+## 27. April 2021
+
+### Kan nå bruke className på `Popover`-komponent
+
+[#1082](https://github.com/navikt/nav-frontend-moduler/pull/1082)
+
+- Bruker kan nå bruke className som en prop på `<Popover />` uten at den overskriver komponentens styling
+
+### Fikser Checkbokspanel focus+feil markering
+
+[#1081](https://github.com/navikt/nav-frontend-moduler/pull/1081)
+
+- Fokusmarkering vises nå når man har focus + feil
+
+## 21. April 2021
+
+## Active stil for secondary/normal-knapp er endret for å skille seg fra hover
+
+[#1062](https://github.com/navikt/nav-frontend-moduler/pull/1062)
+
+## 19. April 2021
+
+### Modal-overlay klasse for @navikt/ds-css er nå `fixed
+
+[#1074](https://github.com/navikt/nav-frontend-moduler/pull/1074)
+
+- `absolute -> fixed`
+
+## 16. April 2021
+
+### Fokusmarkering forsvinner ikke nå onHover
+
+[#1072](https://github.com/navikt/nav-frontend-moduler/pull/1072)
+
+### Scroll er nå bare "smooth" onFocus
+
+[#1071](https://github.com/navikt/nav-frontend-moduler/pull/1071)
+
+Smooth-scroll bare satt i html:focus-within
+Slipper da at det er smooth-scroll når man gjør eks ctrl + f søk på siden.
+
+Takk for tips @winsvold !
+
 ## 08. April 2021

 ### Gråskala er endret i `nav-frontend-core`
@@ -584,7 +584,7 @@ export const Edit = (props) => {
        fillRule="evenodd"
        clipRule="evenodd"
        d="M22.835 1.165a3.976 3.976 0 010 5.623L8.073 21.549.682 24 0 23.318l2.45-7.392L17.21 1.165a3.977 3.977 0 015.624 0zm-4.218 7.029l-2.811-2.812L4.188 17l-1.393 4.205 4.207-1.395L18.618 8.194zM21.43 2.57a1.989 1.989 0 00-2.703-.1l-.108.1-1.406 1.406 2.811 2.812 1.406-1.406a1.988 1.988 0 00.101-2.703l-.1-.109z"
-        fill="#3E3832"
+        fill="#262626"
        focusable="false"
      />
    </svg>
@@ -13,7 +13,6 @@ const ColorPalette = ({ onClick }: PaletteProps) => (
    {[
      "redError",
      "navOransje",
-      "orangeFocus",
      "navLimeGronn",
      "navGronn",
      "navLilla",
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-alertstriper-style",
-  "version": "2.1.1",
+  "version": "3.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,15 +15,15 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-paneler-style": "^1.1.1",
-    "nav-frontend-typografi-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-ikoner-assets": "^3.0.1",
+    "nav-frontend-paneler-style": "^2.0.1",
+    "nav-frontend-typografi-style": "^2.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-ikoner-assets": "^2.0.9",
-    "nav-frontend-paneler-style": "^1.0.2",
-    "nav-frontend-typografi-style": "^1.0.33"
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-ikoner-assets": "^3.0.0",
+    "nav-frontend-paneler-style": "^2.0.0",
+    "nav-frontend-typografi-style": "^2.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-alertstriper",
-  "version": "3.1.1",
+  "version": "4.0.1",
  "main": "lib/alertstripe.js",
  "types": "lib/alertstripe.d.ts",
  "license": "MIT",
@@ -18,18 +18,18 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-alertstriper-style": "^2.0.35",
-    "nav-frontend-ikoner-assets": "^2.0.9",
-    "nav-frontend-typografi": "^3.0.2",
+    "nav-frontend-alertstriper-style": "^3.0.0",
+    "nav-frontend-ikoner-assets": "^3.0.0",
+    "nav-frontend-typografi": "^4.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
-    "nav-frontend-alertstriper-style": "^2.1.1",
-    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-typografi": "^3.1.1",
+    "nav-frontend-alertstriper-style": "^3.0.1",
+    "nav-frontend-ikoner-assets": "^3.0.1",
+    "nav-frontend-typografi": "^4.0.1",
    "react": "^16.8.0 || ^17.0.0"
  },
  "defaultExport": "AlertStripe"
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { Normaltekst } from "nav-frontend-typografi";
 import Ikon from "nav-frontend-ikoner-assets";

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-chevron",
-  "version": "1.0.28",
+  "version": "1.0.30",
  "main": "lib/chevron.js",
  "types": "lib/chevron.d.ts",
  "license": "MIT",
@@ -18,7 +18,7 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-chevron-style": "^1.0.3",
+    "nav-frontend-chevron-style": "^1.0.4",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import "nav-frontend-chevron-style";

 // export type ChevronType = 'høyre' | 'venstre' | 'ned' | 'opp';
@@ -33,7 +33,6 @@ FARGER
@fokusFarge: @navBlaDarken60;

 // kvarliggande farger for skjerm
-@orangeFocus: #ffbd66;
@redError: #ba3a26;
@white: #fff;
@grayBackground: @navLysGra; // Deprecated
@@ -43,106 +42,87 @@ FARGER
@pinkErrorBg: #f3e3e3;

 // Tilleggsfarger
-// Går mot +#FFF respektive +#3E3832 i inkrement av 20%
-@navGronnLighten20: mix(@navGronn, #fff, 80%);
-@navGronnLighten40: mix(@navGronn, #fff, 60%);
-@navGronnLighten60: mix(@navGronn, #fff, 40%);
-@navGronnLighten80: mix(@navGronn, #fff, 20%);
+// Kalkulering finnes i @navikt/ds-tokens/src/index.js

-@navGronnDarken20: mix(@navGronn, #3e3832, 80%);
-@navGronnDarken40: mix(@navGronn, #3e3832, 60%);
-@navGronnDarken60: mix(@navGronn, #3e3832, 40%);
-@navGronnDarken80: mix(@navGronn, #3e3832, 20%);
+@navGronnLighten80: #ccf1d6;
+@navGronnLighten60: #99dead;
+@navGronnLighten40: #66c786;
+@navGronnLighten20: #33aa5f;

-@navLimeGronnLighten20: mix(@navLimeGronn, #fff, 80%);
-@navLimeGronnLighten40: mix(@navLimeGronn, #fff, 60%);
-@navLimeGronnLighten60: mix(@navLimeGronn, #fff, 40%);
-@navLimeGronnLighten80: mix(@navLimeGronn, #fff, 20%);
+@navGronnDarken20: #007c2e;
+@navGronnDarken40: #006a23;
+@navGronnDarken60: #005519;
+@navGronnDarken80: #003b0f;

-@navLimeGronnDarken20: mix(@navLimeGronn, #3e3832, 80%);
-@navLimeGronnDarken40: mix(@navLimeGronn, #3e3832, 60%);
-@navLimeGronnDarken60: mix(@navLimeGronn, #3e3832, 40%);
-@navLimeGronnDarken80: mix(@navLimeGronn, #3e3832, 20%);
+@navLimeGronnLighten80: #f9fccc;
+@navLimeGronnLighten60: #ecf399;
+@navLimeGronnLighten40: #d9e366;
+@navLimeGronnLighten20: #c1cb33;

-@navLysBlaLighten20: mix(@navLysBla, #fff, 80%);
-@navLysBlaLighten40: mix(@navLysBla, #fff, 60%);
-@navLysBlaLighten60: mix(@navLysBla, #fff, 40%);
-@navLysBlaLighten80: mix(@navLysBla, #fff, 20%);
+@navLimeGronnDarken20: #939e00;
+@navLimeGronnDarken40: #7f8900;
+@navLimeGronnDarken60: #666e00;
+@navLimeGronnDarken80: #474e00;

-@navLysBlaDarken20: mix(@navLysBla, #3e3832, 80%);
-@navLysBlaDarken40: mix(@navLysBla, #3e3832, 60%);
-@navLysBlaDarken60: mix(@navLysBla, #3e3832, 40%);
-@navLysBlaDarken80: mix(@navLysBla, #3e3832, 20%);
+@navLysBlaLighten80: #d8f9ff;
+@navLysBlaLighten60: #b5f1ff;
+@navLysBlaLighten40: #97e6ff;
+@navLysBlaLighten20: #7cdaf8;

-@navBlaLighten20: mix(@navBla, #fff, 80%);
-@navBlaLighten40: mix(@navBla, #fff, 60%);
-@navBlaLighten60: mix(@navBla, #fff, 40%);
-@navBlaLighten80: mix(@navBla, #fff, 20%);
+@navLysBlaDarken20: #4cadcd;
+@navLysBlaDarken40: #368da8;
+@navLysBlaDarken60: #236b7d;
+@navLysBlaDarken80: #134852;

-@navBlaDarken20: mix(@navBla, #3e3832, 80%);
-@navBlaDarken40: mix(@navBla, #3e3832, 60%);
-@navBlaDarken60: mix(@navBla, #3e3832, 40%);
-@navBlaDarken80: mix(@navBla, #3e3832, 20%);
+@navBlaLighten80: #cce1ff;
+@navBlaLighten60: #99c3ff;
+@navBlaLighten40: #66a5f4;
+@navBlaLighten20: #3386e0;

-@navDypBlaLighten20: mix(@navDypBla, #fff, 80%);
-@navDypBlaLighten40: mix(@navDypBla, #fff, 60%);
-@navDypBlaLighten60: mix(@navDypBla, #fff, 40%);
-@navDypBlaLighten80: mix(@navDypBla, #fff, 20%);
+@navBlaDarken20: #0056b4;
+@navBlaDarken40: #00459c;
+@navBlaDarken60: #00347d;
+@navBlaDarken80: #002252;

-@navDypBlaDarken20: mix(@navDypBla, #3e3832, 80%);
-@navDypBlaDarken40: mix(@navDypBla, #3e3832, 60%);
-@navDypBlaDarken60: mix(@navDypBla, #3e3832, 40%);
-@navDypBlaDarken80: mix(@navDypBla, #3e3832, 20%);
+@navDypBlaLighten80: #cce2f0;
+@navDypBlaLighten60: #99c4dd;
+@navDypBlaLighten40: #66a3c4;
+@navDypBlaLighten20: #3380a5;

-@navLillaLighten20: mix(@navLilla, #fff, 80%);
-@navLillaLighten40: mix(@navLilla, #fff, 60%);
-@navLillaLighten60: mix(@navLilla, #fff, 40%);
-@navLillaLighten80: mix(@navLilla, #fff, 20%);
+@navDypBlaDarken20: #005077;
+@navDypBlaDarken40: #004367;
+@navDypBlaDarken60: #003453;
+@navDypBlaDarken80: #00243a;

-@navLillaDarken20: mix(@navLilla, #3e3832, 80%);
-@navLillaDarken40: mix(@navLilla, #3e3832, 60%);
-@navLillaDarken60: mix(@navLilla, #3e3832, 40%);
-@navLillaDarken80: mix(@navLilla, #3e3832, 20%);
+@navLillaLighten80: #e0d8e9;
+@navLillaLighten60: #c0b2d2;
+@navLillaLighten40: #a18dbb;
+@navLillaLighten20: #8269a2;

-@navRodLighten20: mix(@navRod, #fff, 80%);
-@navRodLighten40: mix(@navRod, #fff, 60%);
-@navRodLighten60: mix(@navRod, #fff, 40%);
-@navRodLighten80: mix(@navRod, #fff, 20%);
+@navLillaDarken20: #523874;
+@navLillaDarken40: #412b5d;
+@navLillaDarken60: #301f46;
+@navLillaDarken80: #1f142f;

-@navRodDarken20: mix(@navRod, #3e3832, 80%);
-@navRodDarken40: mix(@navRod, #3e3832, 60%);
-@navRodDarken60: mix(@navRod, #3e3832, 40%);
-@navRodDarken80: mix(@navRod, #3e3832, 20%);
+@redErrorLighten80: #f9d2cc;
+@redErrorLighten60: #efa89d;
+@redErrorLighten40: #e18071;
+@redErrorLighten20: #d05c4a;

-@navOransjeLighten20: mix(@navOransje, #fff, 80%);
-@navOransjeLighten40: mix(@navOransje, #fff, 60%);
-@navOransjeLighten60: mix(@navOransje, #fff, 40%);
-@navOransjeLighten80: mix(@navOransje, #fff, 20%);
+@redErrorDarken20: #a32a17;
+@redErrorDarken40: #881d0c;
+@redErrorDarken60: #6a1204;
+@redErrorDarken80: #480900;

-@navOransjeDarken20: mix(@navOransje, #3e3832, 80%);
-@navOransjeDarken40: mix(@navOransje, #3e3832, 60%);
-@navOransjeDarken60: mix(@navOransje, #3e3832, 40%);
-@navOransjeDarken80: mix(@navOransje, #3e3832, 20%);
+@navOransjeLighten80: #ffeccc;
+@navOransjeLighten60: #ffd799;
+@navOransjeLighten40: #ffc166;
+@navOransjeLighten20: #ffaa33;

-@orangeFocusLighten20: mix(@orangeFocus, #fff, 80%);
-@orangeFocusLighten40: mix(@orangeFocus, #fff, 60%);
-@orangeFocusLighten60: mix(@orangeFocus, #fff, 40%);
-@orangeFocusLighten80: mix(@orangeFocus, #fff, 20%);
-
-@orangeFocusDarken20: mix(@orangeFocus, #3e3832, 80%);
-@orangeFocusDarken40: mix(@orangeFocus, #3e3832, 60%);
-@orangeFocusDarken60: mix(@orangeFocus, #3e3832, 40%);
-@orangeFocusDarken80: mix(@orangeFocus, #3e3832, 20%);
-
-@redErrorLighten20: mix(@redError, #fff, 80%);
-@redErrorLighten40: mix(@redError, #fff, 60%);
-@redErrorLighten60: mix(@redError, #fff, 40%);
-@redErrorLighten80: mix(@redError, #fff, 20%);
-
-@redErrorDarken20: mix(@redError, #3e3832, 80%);
-@redErrorDarken40: mix(@redError, #3e3832, 60%);
-@redErrorDarken60: mix(@redError, #3e3832, 40%);
-@redErrorDarken80: mix(@redError, #3e3832, 20%);
+@navOransjeDarken20: #d47b00;
+@navOransjeDarken40: #a86400;
+@navOransjeDarken60: #7d4c00;
+@navOransjeDarken80: #523300;

 /*
 ---------------
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-core",
-  "version": "5.1.1",
+  "version": "6.0.1",
  "description": "",
  "main": "less/core.less",
  "author": "NAV",
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ekspanderbartpanel-style",
-  "version": "1.1.2",
+  "version": "2.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,15 +15,15 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "peerDependencies": {
-    "nav-frontend-chevron-style": "^1.0.3",
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-paneler-style": "^1.0.0",
-    "nav-frontend-typografi-style": "^1.0.33"
+    "nav-frontend-chevron-style": "^1.0.4",
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-paneler-style": "^2.0.0",
+    "nav-frontend-typografi-style": "^2.0.0"
  },
  "devDependencies": {
    "nav-frontend-chevron-style": "^1.0.4",
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-paneler-style": "^1.1.1",
-    "nav-frontend-typografi-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-paneler-style": "^2.0.1",
+    "nav-frontend-typografi-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ekspanderbartpanel",
-  "version": "3.1.3",
+  "version": "4.0.1",
  "main": "lib/index.js",
  "license": "MIT",
  "types": "lib/index.d.ts",
@@ -19,8 +19,8 @@
  "peerDependencies": {
    "@types/react-collapse": "^5.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-ekspanderbartpanel-style": "^1.0.38",
-    "nav-frontend-js-utils": "^1.0.16",
+    "nav-frontend-ekspanderbartpanel-style": "^2.0.0",
+    "nav-frontend-js-utils": "^1.0.19",
    "react": "^16.8.0 || ^17.0.0",
    "react-collapse": "^5.0.0"
  },
@@ -29,8 +29,8 @@
    "@types/react": "15.0.23 || ^16.0.0",
    "@types/react-collapse": "^5.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-ekspanderbartpanel-style": "^1.1.2",
-    "nav-frontend-js-utils": "^1.0.18",
+    "nav-frontend-ekspanderbartpanel-style": "^2.0.1",
+    "nav-frontend-js-utils": "^1.0.19",
    "react": "^16.8.0 || ^17.0.0",
    "react-collapse": "^5.0.0"
  },
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classnames from "classnames";
+import classnames from "classnames";
 import {
  UnmountClosed,
  Collapse,
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-etiketter-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -14,9 +14,9 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1"
+    "nav-frontend-core": "^6.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11"
+    "nav-frontend-core": "^6.0.0"
  }
 }
@@ -5,22 +5,22 @@
  .etikett();

  &--advarsel {
-    background-color: @redErrorLighten60;
+    background-color: @redErrorLighten80;
    border: 1px solid @redError;
  }

  &--suksess {
-    background-color: @navGronnLighten60;
+    background-color: @navGronnLighten80;
    border: 1px solid @navGronn;
  }

  &--fokus {
-    background-color: @navOransjeLighten60;
+    background-color: @navOransjeLighten80;
    border: 1px solid @navOransjeDarken20;
  }

  &--info {
-    background-color: @navLysBlaLighten60;
+    background-color: @navLysBlaLighten80;
    border: 1px solid @navLysBlaDarken40;
  }

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-etiketter",
-  "version": "2.1.1",
+  "version": "3.0.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -18,17 +18,17 @@
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-etiketter-style": "^1.1.1",
-    "nav-frontend-typografi": "^3.1.1",
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-etiketter-style": "^2.0.1",
+    "nav-frontend-typografi": "^4.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-etiketter-style": "^1.0.18",
-    "nav-frontend-typografi": "^3.0.2",
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-etiketter-style": "^2.0.0",
+    "nav-frontend-typografi": "^4.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import TypografiBase from "nav-frontend-typografi";
 import "nav-frontend-etiketter-style";

@@ -13,41 +13,19 @@ export default {
 } as Meta;

 export const All = () => (
-  <div
-    style={{
-      display: "grid",
-      gridAutoRows: "auto",
-      rowGap: "2rem",
-      gridAutoColumns: "fit-content",
-      maxWidth: "50vw",
-    }}
-  >
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-evenly",
-      }}
-    >
-      <EtikettInfo> Info</EtikettInfo>
-
+  <div>
+    <h1>Etikett</h1>
+    <div style={{ display: "flex", gap: 8 }}>
+      <EtikettInfo>Info</EtikettInfo>
      <EtikettSuksess>Suksess</EtikettSuksess>
-
      <EtikettFokus>Fokus</EtikettFokus>
-
      <EtikettAdvarsel>Advarsel</EtikettAdvarsel>
    </div>
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "space-evenly",
-      }}
-    >
-      <EtikettInfo mini> Info</EtikettInfo>
-
+    <h2>mini</h2>
+    <div style={{ display: "flex", gap: 8 }}>
+      <EtikettInfo mini>Info</EtikettInfo>
      <EtikettSuksess mini>Suksess</EtikettSuksess>
-
      <EtikettFokus mini>Fokus</EtikettFokus>
-
      <EtikettAdvarsel mini>Advarsel</EtikettAdvarsel>
    </div>
  </div>
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-grid",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "lib/grid.js",
  "types": "lib/grid.d.ts",
  "license": "MIT",
@@ -18,14 +18,14 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-grid-style": "^1.0.0",
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-grid-style": "^1.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-core": "^5.1.1",
+    "nav-frontend-core": "^6.0.1",
    "nav-frontend-grid-style": "^1.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import "nav-frontend-grid-style";

 const cls = (className, xs, sm, md, lg) =>
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import "nav-frontend-grid-style";

 const cls = (fluid, className) =>
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import "nav-frontend-grid-style";

 const cls = (className) => classNames("row", className, {});
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-hjelpetekst-style",
-  "version": "2.1.1",
+  "version": "3.0.1",
  "main": "src/hjelpetekst-style.less",
  "license": "MIT",
  "files": [
@@ -15,11 +15,11 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-typografi-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-typografi-style": "^2.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-typografi-style": "^1.0.33"
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-typografi-style": "^2.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-hjelpetekst",
-  "version": "2.1.3",
+  "version": "3.0.2",
  "main": "lib/hjelpetekst.js",
  "types": "lib/hjelpetekst.d.ts",
  "license": "MIT",
@@ -18,10 +18,10 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-hjelpetekst-style": "^2.0.40",
-    "nav-frontend-ikoner-assets": "^2.0.9",
-    "nav-frontend-js-utils": "^1.0.16",
-    "nav-frontend-popover": "^1.0.2",
+    "nav-frontend-hjelpetekst-style": "^3.0.0",
+    "nav-frontend-ikoner-assets": "^3.0.0",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-popover": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -29,10 +29,10 @@
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-hjelpetekst-style": "^2.1.1",
-    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-js-utils": "^1.0.18",
-    "nav-frontend-popover": "^1.1.3",
+    "nav-frontend-hjelpetekst-style": "^3.0.1",
+    "nav-frontend-ikoner-assets": "^3.0.1",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-popover": "^2.0.2",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classnames from "classnames";
+import classnames from "classnames";
 import { guid, keyCodes } from "nav-frontend-js-utils";
 import Ikon from "nav-frontend-ikoner-assets";
 import Popover, {
@@ -3,8 +3,8 @@
        <g transform="translate(-16.000000, -20.000000)">
            <g transform="translate(16.000000, 20.000000)">
                <path d="M12.2047909,-0.004 L11.990873,-0.00191299528 C8.77688569,0.054436132 5.75177235,1.35359657 3.47380671,3.65660627 C1.17914502,5.97631201 -0.0532312621,9.01290387 0.00207436285,12.2081081 C0.116859622,18.8207825 5.29784883,24.0007282 11.7967815,24.0007282 L12.0086125,23.9986412 C18.7350287,23.8828125 24.1142833,18.4044251 23.9984546,11.7896636 C23.8836693,5.17698921 18.7026801,-0.004 12.2047909,-0.004 Z" fill="#FFA733" fill-rule="nonzero"></path>
-                <path d="M12.0271658,18.9998332 C12.0181663,18.9998332 12.0091668,18.9998332 12.0001673,18.9998332 C11.1827127,18.9998332 10.5137499,18.3458695 10.5002507,17.5269151 C10.4852515,16.6989611 11.1452148,16.0149992 11.9731688,16.0014999 C11.9821683,16.0014999 11.9911678,16 12.0001673,16 C12.8176218,16 13.4850847,16.6554636 13.5000839,17.474418 C13.515083,18.302372 12.8536198,18.984834 12.0271658,18.9998332 Z" fill="#3E3832" fill-rule="evenodd"></path>
-                <path d="M12,5 C12.5522847,5 13,5.44771525 13,6 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,6 C11,5.44771525 11.4477153,5 12,5 Z" fill="#3E3832" fill-rule="nonzero"></path>
+                <path d="M12.0271658,18.9998332 C12.0181663,18.9998332 12.0091668,18.9998332 12.0001673,18.9998332 C11.1827127,18.9998332 10.5137499,18.3458695 10.5002507,17.5269151 C10.4852515,16.6989611 11.1452148,16.0149992 11.9731688,16.0014999 C11.9821683,16.0014999 11.9911678,16 12.0001673,16 C12.8176218,16 13.4850847,16.6554636 13.5000839,17.474418 C13.515083,18.302372 12.8536198,18.984834 12.0271658,18.9998332 Z" fill="#262626" fill-rule="evenodd"></path>
+                <path d="M12,5 C12.5522847,5 13,5.44771525 13,6 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,6 C11,5.44771525 11.4477153,5 12,5 Z" fill="#262626" fill-rule="nonzero"></path>
            </g>
        </g>
    </g>
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ikoner-assets",
-  "version": "2.0.10",
+  "version": "3.0.1",
  "license": "SEE LICENSE IN LICENSE",
  "files": [
    "/src",
@@ -101,11 +101,11 @@ export default class Icon extends React.Component {
              />
              <path
                d="M12.027 19H12A1.499 1.499 0 0 1 11.973 16L12 16a1.501 1.501 0 0 1 .027 3z"
-                fill="#3E3832"
+                fill="#262626"
              />
              <path
                d="M12 5a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"
-                fill="#3E3832"
+                fill="#262626"
                fillRule="nonzero"
              />
            </g>
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-ikonknapper",
-  "version": "1.1.3",
+  "version": "2.0.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -17,15 +17,15 @@
    "watch": "tsc --watch -p tsconfig.json"
  },
  "peerDependencies": {
-    "nav-frontend-chevron": "^1.0.27",
-    "nav-frontend-ikoner-assets": "^2.0.9",
-    "nav-frontend-knapper": "^2.0.29",
+    "nav-frontend-chevron": "^1.0.29",
+    "nav-frontend-ikoner-assets": "^3.0.0",
+    "nav-frontend-knapper": "^3.0.0",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
-    "nav-frontend-chevron": "^1.0.28",
-    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-knapper": "^2.1.3",
+    "nav-frontend-chevron": "^1.0.30",
+    "nav-frontend-ikoner-assets": "^3.0.1",
+    "nav-frontend-knapper": "^3.0.1",
    "react": "^16.8.0 || ^17.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-js-utils",
-  "version": "1.0.18",
+  "version": "1.0.19",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as _throttle from "lodash.throttle";
+import throttle from "lodash.throttle";

 export interface EventThrottlerProps {
  children: React.ReactNode | React.ReactChild | React.ReactChildren;
@@ -13,7 +13,7 @@ export class EventThrottler extends React.Component<EventThrottlerProps> {
  private throttled!: () => void;

  componentDidMount() {
-    this.throttled = _throttle(this.props.callback, this.props.delay, {
+    this.throttled = throttle(this.props.callback, this.props.delay, {
      leading: false,
    });
    window.addEventListener(this.props.event, this.throttled);
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper-style",
-  "version": "1.1.2",
+  "version": "2.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,11 +15,11 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-typografi-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-typografi-style": "^2.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-typografi-style": "^1.0.33"
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-typografi-style": "^2.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-knapper",
-  "version": "2.1.3",
+  "version": "3.0.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -18,8 +18,8 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.16",
-    "nav-frontend-knapper-style": "^1.0.15",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-knapper-style": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -27,8 +27,8 @@
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.18",
-    "nav-frontend-knapper-style": "^1.1.2",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-knapper-style": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { omit } from "nav-frontend-js-utils";
 import "nav-frontend-knapper-style";

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lenkepanel-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,13 +15,13 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "peerDependencies": {
-    "nav-frontend-chevron-style": "^1.0.3",
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-paneler-style": "^1.0.0"
+    "nav-frontend-chevron-style": "^1.0.4",
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-paneler-style": "^2.0.0"
  },
  "devDependencies": {
    "nav-frontend-chevron-style": "^1.0.4",
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-paneler-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-paneler-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lenkepanel",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -18,8 +18,8 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-lenkepanel-style": "^1.0.0",
-    "nav-frontend-typografi": "^3.0.2",
+    "nav-frontend-lenkepanel-style": "^2.0.0",
+    "nav-frontend-typografi": "^4.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -27,8 +27,8 @@
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-lenkepanel-style": "^1.1.1",
-    "nav-frontend-typografi": "^3.1.1",
+    "nav-frontend-lenkepanel-style": "^2.0.1",
+    "nav-frontend-typografi": "^4.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import "nav-frontend-lenkepanel-style";

 const cls = (className, border) =>
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lenker-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/lenker-style.less",
  "license": "MIT",
  "files": [
@@ -15,9 +15,9 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1"
+    "nav-frontend-core": "^6.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11"
+    "nav-frontend-core": "^6.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lenker",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "lib/lenke.js",
  "types": "lib/lenke.d.ts",
  "license": "MIT",
@@ -18,13 +18,13 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-lenker-style": "^1.0.0",
+    "nav-frontend-lenker-style": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-lenker-style": "^1.1.1",
+    "nav-frontend-lenker-style": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classnames from "classnames";
+import classnames from "classnames";
 import "nav-frontend-lenker-style";

 export interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lesmerpanel-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/lesmerpanel-style.less",
  "license": "MIT",
  "files": [
@@ -15,11 +15,11 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-paneler-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-paneler-style": "^2.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-paneler-style": "^1.0.0"
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-paneler-style": "^2.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lesmerpanel",
-  "version": "1.1.2",
+  "version": "2.0.1",
  "main": "lib/lesmerpanel.js",
  "types": "lib/lesmerpanel.d.ts",
  "license": "MIT",
@@ -18,9 +18,9 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-chevron": "^1.0.27",
-    "nav-frontend-js-utils": "^1.0.16",
-    "nav-frontend-lesmerpanel-style": "^1.0.0",
+    "nav-frontend-chevron": "^1.0.29",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-lesmerpanel-style": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
    "react-collapse": "^5.0.0"
@@ -28,9 +28,9 @@
  "devDependencies": {
    "@types/react-collapse": "^5.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-chevron": "^1.0.28",
-    "nav-frontend-js-utils": "^1.0.18",
-    "nav-frontend-lesmerpanel-style": "^1.1.1",
+    "nav-frontend-chevron": "^1.0.30",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-lesmerpanel-style": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
    "react-collapse": "^5.0.0"
@@ -3,7 +3,7 @@ import * as PT from "prop-types";
 import "nav-frontend-lesmerpanel-style";
 import { UnmountClosed } from "react-collapse";
 import { guid, omit } from "nav-frontend-js-utils";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import LesmerpanelToggle from "./lesmerpanelToggle";

 export interface LesMerPanelBaseProps
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as cn from "classnames";
+import cn from "classnames";
 import Chevron from "nav-frontend-chevron";

 export interface LesMerToggleProps {
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lukknapp-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/lukknapp-style.less",
  "license": "MIT",
  "files": [
@@ -15,9 +15,9 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1"
+    "nav-frontend-core": "^6.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11"
+    "nav-frontend-core": "^6.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-lukknapp",
-  "version": "1.2.1",
+  "version": "2.0.1",
  "main": "lib/lukknapp.js",
  "types": "lib/lukknapp.d.ts",
  "license": "MIT",
@@ -18,13 +18,13 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-lukknapp-style": "^1.0.0",
+    "nav-frontend-lukknapp-style": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-lukknapp-style": "^1.1.1",
+    "nav-frontend-lukknapp-style": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";

 import "nav-frontend-lukknapp-style";

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-modal-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,13 +15,13 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-lukknapp-style": "^1.0.0",
-    "nav-frontend-paneler-style": "^1.0.0"
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-lukknapp-style": "^2.0.0",
+    "nav-frontend-paneler-style": "^2.0.0"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-lukknapp-style": "^1.1.1",
-    "nav-frontend-paneler-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-lukknapp-style": "^2.0.1",
+    "nav-frontend-paneler-style": "^2.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-modal",
-  "version": "1.2.1",
+  "version": "2.0.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -19,8 +19,8 @@
  "peerDependencies": {
    "@types/react-modal": "^3.1.2",
    "classnames": "^2.2.5",
-    "nav-frontend-lukknapp": "^1.2.0",
-    "nav-frontend-modal-style": "^1.0.0",
+    "nav-frontend-lukknapp": "^2.0.0",
+    "nav-frontend-modal-style": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
    "react-modal": "^2.2.4 || ^3.3.1"
@@ -28,8 +28,8 @@
  "devDependencies": {
    "@types/react-modal": "^3.1.2",
    "classnames": "^2.2.5",
-    "nav-frontend-lukknapp": "^1.2.1",
-    "nav-frontend-modal-style": "^1.1.1",
+    "nav-frontend-lukknapp": "^2.0.1",
+    "nav-frontend-modal-style": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
    "react-modal": "^2.2.4 || ^3.3.1"
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as PT from "prop-types";
-import * as classnames from "classnames";
-import * as Modal from "react-modal";
+import classnames from "classnames";
+import Modal from "react-modal";
 import { Props } from "react-modal";
 import Lukknapp from "nav-frontend-lukknapp";

@@ -7,6 +7,8 @@ export default {
  component: Modal,
 } as Meta;

+Modal.setAppElement("#root");
+
 export const All = () => {
  const [open, setOpen] = useState(true);

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-paneler-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,9 +15,9 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11"
+    "nav-frontend-core": "^6.0.0"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1"
+    "nav-frontend-core": "^6.0.1"
  }
 }
@@ -3,7 +3,7 @@ import Panel from "./../";
 ## Normal

 Paneler brukes til å ramme inn innhold. På hvit bakgrunn bør paneler få en 1px tykk border med farge
-[@navGra20](/resources/colors) (#C6C2BF). Intern avstand fra panelkant til innhold skal være
+[@navGra20](/resources/colors) (#C9C9C9). Intern avstand fra panelkant til innhold skal være
 minimum `16px` (`1rem`).

 <Example>
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-paneler",
-  "version": "2.1.1",
+  "version": "3.0.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -18,17 +18,17 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-paneler-style": "^1.0.0",
-    "nav-frontend-typografi": "^3.0.2",
-    "nav-frontend-typografi-style": "^1.0.33",
+    "nav-frontend-paneler-style": "^2.0.0",
+    "nav-frontend-typografi": "^4.0.0",
+    "nav-frontend-typografi-style": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-paneler-style": "^1.1.1",
-    "nav-frontend-typografi": "^3.1.1",
-    "nav-frontend-typografi-style": "^1.1.1",
+    "nav-frontend-paneler-style": "^2.0.1",
+    "nav-frontend-typografi": "^4.0.1",
+    "nav-frontend-typografi-style": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import "nav-frontend-paneler-style";

 const cls = (className, border) =>
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-popover-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/popover-style.less",
  "license": "MIT",
  "files": [
@@ -14,7 +14,10 @@
    "type": "git",
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
+  "peerDependencies": {
+    "nav-frontend-core": "^6.0.0"
+  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1"
+    "nav-frontend-core": "^6.0.1"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-popover",
-  "version": "1.1.3",
+  "version": "2.0.2",
  "main": "lib/popover.js",
  "types": "lib/popover.d.ts",
  "license": "MIT",
@@ -18,8 +18,8 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.16",
-    "nav-frontend-popover-style": "^1.0.2",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-popover-style": "^2.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0"
@@ -28,8 +28,8 @@
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.18",
-    "nav-frontend-popover-style": "^1.1.1",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-popover-style": "^2.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import * as React from "react";
-import * as classnames from "classnames";
+import classnames from "classnames";

 import "nav-frontend-popover-style";

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import * as classnames from "classnames";
+import classnames from "classnames";

 import {
  EventThrottler,
@@ -83,6 +83,7 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
    this.scrollParents.forEach((scrollParent) =>
      scrollParent.addEventListener("scroll", this.handleScroll)
    );
+    this.props.ankerEl && this.updatePosition(this.props);
  }

  componentDidUpdate(prevProps, prevState) {
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-skjema-style",
-  "version": "2.2.2",
+  "version": "3.0.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,13 +15,13 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-paneler-style": "^1.1.1",
-    "nav-frontend-typografi-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-paneler-style": "^2.0.1",
+    "nav-frontend-typografi-style": "^2.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-paneler-style": "^1.0.0",
-    "nav-frontend-typografi-style": "^1.0.33"
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-paneler-style": "^2.0.0",
+    "nav-frontend-typografi-style": "^2.0.0"
  }
 }
@@ -6,8 +6,8 @@
  .panel-mixin();
  .panel-focus-mixin();

-  background-color: @orangeFocusLighten80;
-  border-color: @orangeFocusLighten80;
+  background-color: @navOransjeLighten80;
+  border-color: @navOransjeLighten80;
  cursor: unset;
  transition: background-color linear 100ms;

@@ -22,6 +22,10 @@
    margin-bottom: 0;
  }

+  .checkboks:hover + .skjemaelement__label {
+    text-decoration: underline;
+  }
+
  &--checked {
    background-color: @navGronnLighten80;
    border-color: @navGronnLighten80;
@@ -45,7 +49,6 @@

        &:hover {
          color: @navMorkGra;
-          text-decoration: underline;

          &::before {
            background-color: @navGronnDarken40;
@@ -47,5 +47,5 @@
 .toggle__input:focus + label {
  position: relative;
  z-index: 999;
-  box-shadow: 0 0 0 3px @orangeFocus;
+  box-shadow: 0 0 0 3px @navOransjeLighten40;
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-skjema",
-  "version": "3.2.3",
+  "version": "4.0.1",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "license": "MIT",
@@ -19,20 +19,20 @@
  "peerDependencies": {
    "@navikt/fnrvalidator": "^1.1.0",
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.16",
-    "nav-frontend-lenker": "^1.0.58",
-    "nav-frontend-skjema-style": "^2.1.0",
-    "nav-frontend-typografi": "^3.0.2",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-lenker": "^2.0.0",
+    "nav-frontend-skjema-style": "^3.0.0",
+    "nav-frontend-typografi": "^4.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "@navikt/fnrvalidator": "^1.1.0",
    "classnames": "^2.2.5",
-    "nav-frontend-js-utils": "^1.0.18",
-    "nav-frontend-lenker": "^1.1.1",
-    "nav-frontend-skjema-style": "^2.2.2",
-    "nav-frontend-typografi": "^3.1.1",
+    "nav-frontend-js-utils": "^1.0.19",
+    "nav-frontend-lenker": "^2.0.1",
+    "nav-frontend-skjema-style": "^3.0.1",
+    "nav-frontend-typografi": "^4.0.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  }
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import * as PT from "prop-types";
 import { guid } from "nav-frontend-js-utils";
 import SkjemaelementFeilmelding from "./skjemaelement-feilmelding";
@@ -37,9 +37,7 @@ export interface BekreftCheckboksPanelProps {
  feil?: React.ReactNode | boolean;
 }

-export class BekreftCheckboksPanel extends React.Component<
-  BekreftCheckboksPanelProps
-> {
+export class BekreftCheckboksPanel extends React.Component<BekreftCheckboksPanelProps> {
  render() {
    const {
      checked,
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import "nav-frontend-skjema-style";
 import { SkjemaGruppeFeilContext, SkjemaGruppeFeilContextProps } from ".";
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { SkjemaGruppe, SkjemaGruppeProps } from ".";
 import "nav-frontend-skjema-style";

@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import SkjemaelementFeilmelding from "./skjemaelement-feilmelding";
 import { SkjemaGruppeFeilContext, SkjemaGruppeFeilContextProps } from ".";
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classnames from "classnames";
+import classnames from "classnames";
 import { Undertittel } from "nav-frontend-typografi";
 import Lenke from "nav-frontend-lenker";
 import "nav-frontend-skjema-style";
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as PT from "prop-types";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import SkjemaelementFeilmelding from "./skjemaelement-feilmelding";
 import {
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HTMLAttributes } from "react";
-import * as classnames from "classnames";
+import classnames from "classnames";
 import "nav-frontend-skjema-style";

 export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { SkjemaGruppe, SkjemaGruppeProps } from ".";
 import "nav-frontend-skjema-style";
 class RadioGruppe extends React.Component<SkjemaGruppeProps> {
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as PT from "prop-types";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import { RadioPanel, RadioPanelProps, SkjemaGruppe } from ".";

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import { SkjemaGruppeFeilContext, SkjemaGruppeFeilContextProps } from ".";
 import "nav-frontend-skjema-style";
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import "nav-frontend-skjema-style";
 import { SkjemaGruppeFeilContext, SkjemaGruppeFeilContextProps } from ".";
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import SkjemaelementFeilmelding from "./skjemaelement-feilmelding";
 import {
@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import { guid } from "nav-frontend-js-utils";
 import SkjemaelementFeilmelding from "./skjemaelement-feilmelding";
 import "nav-frontend-skjema-style";
@@ -14,7 +14,7 @@ export interface TextareaControlledProps
  name?: string;
  feil?: React.ReactNode | boolean;
  tellerTekst?: (antallTegn: number, maxLength: number) => React.ReactNode;
-  textareaRef?: () => any;
+  textareaRef?: (textarea: HTMLTextAreaElement | null) => any;
  defaultValue: string;
 }

@@ -1,6 +1,6 @@
 import * as PT from "prop-types";
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import {
  EventThrottler,
  guid,
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as PT from "prop-types";
 import "nav-frontend-skjema-style";
-import * as classNames from "classnames";
+import classNames from "classnames";

 export interface ToggleGruppeProps {
  /**
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as PT from "prop-types";
 import { guid } from "nav-frontend-js-utils";
 import "nav-frontend-skjema-style";
-import * as classNames from "classnames";
+import classNames from "classnames";

 export interface ToggleKnappProps {
  children: React.ReactNode;
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-snakkeboble-style",
-  "version": "1.1.1",
+  "version": "2.0.1",
  "main": "src/snakkeboble-style.less",
  "license": "MIT",
  "files": [
@@ -15,11 +15,11 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.1.1",
-    "nav-frontend-typografi-style": "^1.1.1"
+    "nav-frontend-core": "^6.0.1",
+    "nav-frontend-typografi-style": "^2.0.1"
  },
  "peerDependencies": {
-    "nav-frontend-core": "^5.0.11",
-    "nav-frontend-typografi-style": "^1.0.33"
+    "nav-frontend-core": "^6.0.0",
+    "nav-frontend-typografi-style": "^2.0.0"
  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-snakkeboble",
-  "version": "2.1.1",
+  "version": "3.0.1",
  "main": "lib/snakkeboble.js",
  "types": "lib/snakkeboble.d.ts",
  "license": "MIT",
@@ -18,18 +18,18 @@
  },
  "peerDependencies": {
    "classnames": "^2.2.5",
-    "nav-frontend-paneler": "^2.0.29",
-    "nav-frontend-paneler-style": "^1.0.2",
-    "nav-frontend-snakkeboble-style": "^1.0.0",
-    "nav-frontend-typografi": "^3.0.2",
+    "nav-frontend-paneler": "^3.0.0",
+    "nav-frontend-paneler-style": "^2.0.0",
+    "nav-frontend-snakkeboble-style": "^2.0.0",
+    "nav-frontend-typografi": "^4.0.0",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
-    "nav-frontend-paneler": "^2.1.1",
-    "nav-frontend-paneler-style": "^1.1.1",
-    "nav-frontend-snakkeboble-style": "^1.1.1",
-    "nav-frontend-typografi": "^3.1.1",
+    "nav-frontend-paneler": "^3.0.1",
+    "nav-frontend-paneler-style": "^2.0.1",
+    "nav-frontend-snakkeboble-style": "^2.0.1",
+    "nav-frontend-typografi": "^4.0.1",
    "react": "^16.8.0 || ^17.0.0"
  },
  "defaultExport": "Snakkeboble"
@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as classNames from "classnames";
+import classNames from "classnames";
 import * as PT from "prop-types";
 import "nav-frontend-snakkeboble-style";
 import Panel from "nav-frontend-paneler";
Author	SHA1	Message	Date
github-actions[bot]	8ee6ce93e4	Lerna versionbump [ci skip] - @navikt/ds-css@0.4.2 - @navikt/ds-react@0.4.3	2021-05-28 11:23:29 +00:00
KenandAndreas Nordahl	a086727d19	Vnext: paneler komponent (#1108 ) * laget panel komponent * default panel border to false Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-05-28 13:08:14 +02:00
Ken	2e9099c1a9	Update Panel.overview.mdx	2021-05-26 13:27:17 +02:00
github-actions[bot]	7d4e866a7c	Lerna versionbump [ci skip] - @navikt/ds-icons@0.3.2 - @navikt/ds-react@0.4.2	2021-05-25 19:01:21 +00:00
Ken	b01c67f2a6	Oppdatert ikoner (#1105 )	2021-05-25 20:47:29 +02:00
Ken	a583f69c83	Oppdatert changelog for April + Mai	2021-05-25 10:45:14 +02:00
github-actions[bot]	d2675e0767	Lerna versionbump [ci skip] - nav-frontend-hjelpetekst@3.0.2 - nav-frontend-popover@2.0.2	2021-05-21 09:40:52 +00:00
Ken	1464aca19e	popover-position updates nå onMount (#1104 )	2021-05-21 11:27:08 +02:00
Ken	39fdcadabe	Oppdatert lenker til Figma på design.nav.no (#1103 )	2021-05-21 09:28:01 +02:00
github-actions[bot]	efc45667b0	Lerna versionbump [ci skip] - @navikt/ds-css@0.4.1 - @navikt/ds-react@0.4.1 - @navikt/ds-tokens@0.2.1 - nav-frontend-alertstriper-style@3.0.1 - nav-frontend-alertstriper@4.0.1 - nav-frontend-chevron@1.0.30 - nav-frontend-core@6.0.1 - nav-frontend-ekspanderbartpanel-style@2.0.1 - nav-frontend-ekspanderbartpanel@4.0.1 - nav-frontend-etiketter-style@2.0.1 - nav-frontend-etiketter@3.0.1 - nav-frontend-grid@2.0.1 - nav-frontend-hjelpetekst-style@3.0.1 - nav-frontend-hjelpetekst@3.0.1 - nav-frontend-ikoner-assets@3.0.1 - nav-frontend-ikonknapper@2.0.1 - nav-frontend-knapper-style@2.0.1 - nav-frontend-knapper@3.0.1 - nav-frontend-lenkepanel-style@2.0.1 - nav-frontend-lenkepanel@2.0.1 - nav-frontend-lenker-style@2.0.1 - nav-frontend-lenker@2.0.1 - nav-frontend-lesmerpanel-style@2.0.1 - nav-frontend-lesmerpanel@2.0.1 - nav-frontend-lukknapp-style@2.0.1 - nav-frontend-lukknapp@2.0.1 - nav-frontend-modal-style@2.0.1 - nav-frontend-modal@2.0.1 - nav-frontend-paneler-style@2.0.1 - nav-frontend-paneler@3.0.1 - nav-frontend-popover-style@2.0.1 - nav-frontend-popover@2.0.1 - nav-frontend-skjema-style@3.0.1 - nav-frontend-skjema@4.0.1 - nav-frontend-snakkeboble-style@2.0.1 - nav-frontend-snakkeboble@3.0.1 - nav-frontend-spinner@3.0.1 - nav-frontend-stegindikator-style@2.0.1 - nav-frontend-stegindikator@2.0.1 - nav-frontend-tabell-style@2.0.1 - nav-frontend-tabs-style@2.0.1 - nav-frontend-tabs@2.0.1 - nav-frontend-tekstomrade@3.0.1 - nav-frontend-toggle-style@2.0.1 - nav-frontend-toggle@2.0.1 - nav-frontend-typografi-style@2.0.1 - nav-frontend-typografi@4.0.1 - nav-frontend-veileder-style@3.0.1 - nav-frontend-veileder@3.0.1 - nav-frontend-veilederpanel-style@2.0.1 - nav-frontend-veilederpanel@2.0.1	2021-05-20 08:10:18 +00:00
KenandAndreas Nordahl	c04db248fb	Oppdatert fargepalett for nav-frontend-core + ds-tokens (#1092 ) Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-05-20 09:55:47 +02:00
github-actions[bot]	c4f279accd	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.4 - @navikt/ds-tokens@0.1.5 - nav-frontend-alertstriper@3.1.2 - nav-frontend-chevron@1.0.29 - nav-frontend-ekspanderbartpanel@3.1.4 - nav-frontend-etiketter@2.1.3 - nav-frontend-grid@1.1.2 - nav-frontend-hjelpetekst@2.1.4 - nav-frontend-ikonknapper@1.1.4 - nav-frontend-js-utils@1.0.19 - nav-frontend-knapper@2.1.4 - nav-frontend-lenkepanel@1.1.2 - nav-frontend-lenker@1.1.2 - nav-frontend-lesmerpanel@1.1.3 - nav-frontend-lukknapp@1.2.2 - nav-frontend-modal@1.2.2 - nav-frontend-paneler@2.1.2 - nav-frontend-popover@1.1.4 - nav-frontend-skjema@3.2.6 - nav-frontend-snakkeboble@2.1.2 - nav-frontend-spinner@2.0.17 - nav-frontend-stegindikator@1.1.3 - nav-frontend-tabs@1.1.3 - nav-frontend-tekstomrade@2.1.3 - nav-frontend-toggle@1.1.4 - nav-frontend-typografi@3.1.2 - nav-frontend-veileder-style@2.1.2 - nav-frontend-veileder@2.1.4 - nav-frontend-veilederpanel@1.1.4	2021-05-19 13:10:13 +00:00
Ken	b7b567a040	Prop for hvit bakgrunn på veileder sin snakkeboble (#1099 )	2021-05-19 14:53:43 +02:00
Ken	cd80c11deb	Fikset problem med build (#1100 ) * fikset problem med build * fikset eventhrottle error for chromatic	2021-05-19 14:53:19 +02:00
Ken	9169c87c62	Oppdatert bakgrunnsfarger tag for å synce med etikett og figma (#1097 )	2021-05-18 12:25:35 +02:00
github-actions[bot]	f735ae608b	Lerna versionbump [ci skip] - nav-frontend-skjema@3.2.5	2021-05-18 09:16:53 +00:00
Ida	22e1f0bf98	Update textarea-controlled.tsx (#1098 )	2021-05-18 10:19:03 +02:00
github-actions[bot]	ed87b47750	Lerna versionbump [ci skip] - @navikt/ds-css@0.3.3 - @navikt/ds-tokens@0.1.4 - nav-frontend-etiketter-style@1.1.2 - nav-frontend-etiketter@2.1.2 - nav-frontend-skjema-style@2.2.3 - nav-frontend-skjema@3.2.4	2021-05-18 07:58:06 +00:00
Andreas Nordahl	983c2c1def	Bakgrunnsfarger på etiketter stemmer nå overens med Figma (#1094 )	2021-05-18 09:19:39 +02:00
Andreas Nordahl	436c1d559c	always underline bekreftCheckboksPanel label on hover (#1095 )	2021-05-18 09:19:14 +02:00
Andreas Nordahl	be2905ba02	cjs tokens (#1096 )	2021-05-14 16:11:10 +02:00