Lerna versionbump [ci skip]

- nav-frontend-alertstriper-style@2.1.1 - nav-frontend-alertstriper@3.1.1 - nav-frontend-core@5.1.1 - nav-frontend-ekspanderbartpanel-style@1.1.1 - nav-frontend-ekspanderbartpanel@3.1.1 - nav-frontend-etiketter-style@1.1.1 - nav-frontend-etiketter@2.1.1 - nav-frontend-grid@1.1.1 - nav-frontend-hjelpetekst-style@2.1.1 - nav-frontend-hjelpetekst@2.1.1 - nav-frontend-ikonknapper@1.1.1 - nav-frontend-knapper-style@1.1.1 - nav-frontend-knapper@2.1.1 - nav-frontend-lenkepanel-style@1.1.1 - nav-frontend-lenkepanel@1.1.1 - nav-frontend-lenker-style@1.1.1 - nav-frontend-lenker@1.1.1 - nav-frontend-lesmerpanel-style@1.1.1 - nav-frontend-lesmerpanel@1.1.1 - nav-frontend-lukknapp-style@1.1.1 - nav-frontend-lukknapp@1.1.1 - nav-frontend-modal-style@1.1.1 - nav-frontend-modal@1.1.1 - nav-frontend-paneler-style@1.1.1 - nav-frontend-paneler@2.1.1 - nav-frontend-popover-style@1.1.1 - nav-frontend-popover@1.1.1 - nav-frontend-skjema-style@2.2.1 - nav-frontend-skjema@3.2.1 - nav-frontend-snakkeboble-style@1.1.1 - nav-frontend-snakkeboble@2.1.1 - nav-frontend-stegindikator-style@1.1.1 - nav-frontend-stegindikator@1.1.1 - nav-frontend-tabell-style@1.1.1 - nav-frontend-tabs-style@1.1.1 - nav-frontend-tabs@1.1.1 - nav-frontend-tekstomrade@2.1.1 - nav-frontend-toggle-style@1.1.1 - nav-frontend-toggle@1.1.1 - nav-frontend-typografi-style@1.1.1 - nav-frontend-typografi@3.1.1 - nav-frontend-veileder-style@2.1.1 - nav-frontend-veileder@2.1.1 - nav-frontend-veilederpanel-style@1.1.1 - nav-frontend-veilederpanel@1.1.1
Update CHANGELOG.md
2026-10-15 18:22:02 +00:00 · 2021-04-08 14:27:09 +00:00 · 2021-04-08 16:13:20 +02:00 · 2021-04-08 15:50:57 +02:00 · 2021-04-08 12:19:11 +00:00 · 2021-04-08 14:05:10 +02:00
334 changed files with 9638 additions and 4668 deletions
@@ -13,30 +13,6 @@ jobs:
  build:
    if: "!contains(github.event.head_commit.message, '[ci skip]')"
    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v2
-        id: node-cache
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: Install deps
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-      - name: Gulp-build
-        run: yarn boot
-      - name: Eslint and Stylelint
-        run: yarn lint
-      - name: Test gatsby-build
-        run: yarn build:gatsby
-
-  chromatic:
-    needs: build
-    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
@@ -55,14 +31,19 @@ jobs:
        run: yarn install --frozen-lockfile
      - name: Gulp-build
        run: yarn boot
-      - uses: chromaui/action@v1
+      - name: Eslint and Stylelint
+        run: yarn lint
+      - name: Test gatsby-build
+        run: yarn build:gatsby
+      - name: Test chromatic
+        uses: chromaui/action@v1
        with:
          token: ${{ secrets.GIT_REPO }}
          projectToken: ${{ secrets.CHROMATIC }}
          exitZeroOnChanges: true

  publish-npm:
-    needs: chromatic
+    needs: build
    runs-on: ubuntu-latest
    if: github.event_name == 'push'
    steps:
@@ -85,12 +66,12 @@ jobs:
        run: yarn install --frozen-lockfile
      - name: Gulp-build
        run: yarn boot
-      - run: git config --global user.email "ken.aleksander.johansen@nav.no"
-      - run: git config --global user.name "navikt"
-      - run: git remote set-url origin https://KenAJoh:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
+      - run: git config --global user.email "github-actions[bot]@users.noreply.github.com"
+      - run: git config --global user.name "github-actions[bot]"
+      - run: git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
        env:
          NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-      - run: yarn lerna version patch --include-merged-tags --no-private --yes
+      - run: yarn lerna version patch --include-merged-tags --yes
      - run: yarn lerna publish from-package --yes
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION}}
@@ -120,8 +101,10 @@ jobs:
        run: yarn boot
      - name: Building Gatsby
        run: yarn build:gatsby
+      - name: Building Storybook
+        run: yarn build-storybook

-      - name: Deploy 🚀
+      - name: Deploy to Design.nav.no 🚀
        uses: JamesIves/github-pages-deploy-action@3.6.2
        with:
          GITHUB_TOKEN: $NAV_DS_TOKEN
@@ -129,3 +112,12 @@ jobs:
          FOLDER: website/public
        env:
          NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
+
+      - name: Deploy storybook
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          personal_token: ${{secrets.GIT_REPO}}
+          external_repository: navikt/designsystemet
+          publish_dir: ./storybook-static
+          user_name: "github-actions[bot]"
+          user_email: "github-actions[bot]@users.noreply.github.com"
@@ -111,3 +111,7 @@ utilities/**/css
@navikt/ds-icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
+
+react-docgen.json
+cjs
+esm
@@ -1 +1 @@
-_
+_
@@ -1,7 +1,32 @@
 module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    config.devServer = { stats: "errors-only" };
+    return config;
+  },
+  devServer: { stats: "errors-only" },
  stories: [
-    "../packages/**/*.stories.@(js|jsx|ts|tsx)",
-    "../@navikt/**/*.stories.@(js|jsx|ts|tsx)",
+    "../.storybook/**/*.stories.@(mdx)",
+    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-docs",
+    {
+      name: "@storybook/addon-storysource",
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+        controls: { hideNoControlsWarning: true },
+      },
+    },
+    "@whitespace/storybook-addon-html",
  ],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
 };
@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import NavTheme from "./theme.js";
+
+addons.setConfig({
+  theme: NavTheme,
+});
@@ -0,0 +1,6 @@
+<div id="decorator-wrapper">
+  <div id="decorator-header" style="display: none"></div>
+  <div id="root"></div>
+  <div id="docs-root"></div>
+  <div id="decorator-footer" style="display: none"></div>
+</div>
@@ -0,0 +1,18 @@
+<!-- prettier-ignore -->
+<div data-src='https://www.nav.no/dekoratoren/env?availableLanguages=[{"locale":"nb","url":"http://localhost:8088/dekoratoren/","handleInApp":true},{"locale":"en","url":"http://localhost:8088/dekoratoren/en/","handleInApp":true}]&breadcrumbs=[{"url":"https://www.nav.no/person/dittnav","title":"ditt%20nav"},%20{"url":"https://www.nav.no/person/kontakt-oss/nb/","title":"kontakt%20oss"}]' id="decorator-env"></div>
+<link href="https://www.nav.no/dekoratoren/css/client.css" rel="stylesheet" />
+<script async src="https://www.nav.no/dekoratoren/client.js"></script>
+<style>
+  html,
+  body,
+  #decorator-wrapper {
+    min-height: 100vh;
+  }
+  #decorator-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  #decorator-footer {
+    margin-top: auto;
+  }
+</style>
@@ -1,14 +1,13 @@
 import "nav-frontend-core";
-import "@navikt/ds-css/baseline/index.css";
+import "@navikt/ds-css/index.css";

 export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  options: {
-    // Makes sure `all` story is first
-    storySort: (a, b) => {
-      if (a[0].indexOf("all") !== -1) return -1;
-      if (b[0].indexOf("all") !== -1) return 1;
-      return 0;
+    storySort: {
+      method: "",
+      order: [],
+      locales: "",
    },
  },
 };
@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/Kom i gang" />
+
+# Ta i bruk `@navikt/ds-react` pakken
+
+## Oppsett
+
+```bash
+yarn add @navikt/ds-react @navikt/ds-css
+```
+
+Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
+Dette gjøres for å la komponetene brukes i Nextjs prosjekter.
+
+```bash
+import "@navikt/ds-css"
+```
+
+Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
+
+## Testing
+
+For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
+
+```bash
+"moduleNameMapper": {
+  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
+  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
+}
+```
+
+Dette vil remappe komponentene (og ikonpakken) til å bruke CommonJs versjonen for testing
@@ -0,0 +1,6 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "NAV Designsystem",
+});
@@ -1,11 +1,31 @@
 const path = require("path");

 module.exports = (baseConfig) => {
-  baseConfig.config.module.rules.push({
-    test: /\.less$/,
-    loaders: ["style-loader", "css-loader", "less-loader"],
-    include: path.resolve(__dirname, "../packages/"),
-  });
+  baseConfig.config.module.rules.push(
+    {
+      test: /\.css$/,
+      use: ["style-loader", "css-loader"],
+      include: [
+        path.resolve(__dirname, "../node_modules/@navikt/ds-css/index.css"),
+      ],
+    },
+    {
+      test: /\.less$/,
+      loaders: ["style-loader", "css-loader", "less-loader"],
+      include: path.resolve(__dirname, "../packages/"),
+    }
+  );
+  baseConfig.config.resolve.alias = {
+    ...baseConfig.config.resolve?.alias,
+    "./normalize.css": path.resolve(
+      __dirname,
+      "../node_modules/normalize.css/normalize.css"
+    ),
+    "./@navikt/ds-tokens": path.resolve(
+      __dirname,
+      "../node_modules/@navikt/ds-tokens/dist/tokens.css"
+    ),
+  };

  return baseConfig.config;
 };
@@ -0,0 +1,8 @@
+.navds-accordion-anchor-menu {
+  padding: 1rem 0;
+}
+
+.navds-accordion-anchor-menu__title {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
@@ -0,0 +1,85 @@
+.navds-accordion-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-weight: var(--navds-font-weight-bold);
+}
+
+.navds-accordion-menu-collapsable__button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--navds-font-weight-bold);
+  color: var(--navds-color-text-link);
+  text-decoration: underline;
+}
+
+.navds-accordion-menu-collapsable .navds-accordion-menu__list,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-accordion-menu-item,
+.navds-accordion-menu-collapsable__button {
+  display: flex;
+  padding: 0.75rem 1rem;
+  line-height: 1.5rem; /* TODO: fix typography. */
+}
+
+.navds-accordion-menu-collapsable__expand-icon {
+  font-size: 1.5rem;
+  color: var(--navds-color-text-link);
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+}
+
+.navds-accordion-menu-collapsable--open
+  > .navds-accordion-menu-collapsable__button
+  > .navds-accordion-menu-collapsable__expand-icon {
+  transform: rotate(180deg);
+}
+
+.navds-accordion-menu-collapsable .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: 2rem;
+}
+
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: 3rem;
+}
+
+.navds-accordion-menu-item:focus,
+.navds-accordion-menu-collapsable__button:focus {
+  outline: 3px solid var(--navds-text-focus);
+  outline-offset: -3px;
+}
+
+.navds-accordion-menu-item:hover,
+.navds-accordion-menu-collapsable__button:hover {
+  background-color: var(--navds-color-gray-20);
+}
+
+.navds-accordion-menu-item--active {
+  box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
+  color: var(--navds-color-text);
+  text-decoration: none;
+  font-weight: var(--navds-font-weight-bold);
+}
@@ -24,7 +24,6 @@
 .navds-accordion__chevron {
  width: 1.25em;
  height: 1.25em;
-  transition: 300ms transform;
  transform: rotateZ(0deg);
  flex-shrink: 0;
  margin-left: 1rem;
@@ -0,0 +1,35 @@
+@import "@navikt/ds-tokens";
+@import "normalize.css";
+@import "Source-Sans-Pro-regular.css";
+@import "Source-Sans-Pro-italic.css";
+@import "Source-Sans-Pro-600.css";
+@import "print.css";
+@import "utility.css";
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--navds-font-family);
+  line-height: 1.375;
+  color: var(--navds-color-text-primary);
+  font-size: 1.125rem;
+}
+
+a {
+  color: var(--navds-color-text-link);
+}
+
+/* https://web.dev/prefers-reduced-motion/ */
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
@@ -1,18 +0,0 @@
-@import url(~normalize.css);
-@import url(~@navikt/ds-tokens/dist/tokens.css);
-@import url(Source-Sans-Pro-regular.css);
-@import url(Source-Sans-Pro-italic.css);
-@import url(Source-Sans-Pro-600.css);
-@import url(print.css);
-@import url(utility.css);
-
-body {
-  font-family: var(--navds-font-family);
-  line-height: 1.375;
-  color: var(--navds-color-text-primary);
-  font-size: 1.125rem;
-}
-
-a {
-  color: var(--navds-color-text-link);
-}
@@ -1,3 +1,23 @@
+/**************************
+ * .navds-grid *
+ **************************/
+
+.navds-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-gap: var(--navds-grid-gutter-small);
+}
+
+@media (min-width: 448px) {
+  .navds-grid {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+}
+
+/**************************
+ * .navds-grid__cell *
+ **************************/
+
 .navds-grid__cell--xs-1 {
  grid-column: span 1;
 }
@@ -1,11 +0,0 @@
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--navds-grid-gutter-small);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-}
@@ -1,2 +0,0 @@
-@import "./grid.css";
-@import "./cell.css";
@@ -0,0 +1,15 @@
+@import "baseline/baseline.css";
+@import "accordion.css";
+@import "accordion-anchor-menu.css";
+@import "accordion-menu.css";
+@import "alert.css";
+@import "button.css";
+@import "content-container.css";
+@import "grid.css";
+@import "internal-header.css";
+@import "layouts.css";
+@import "link.css";
+@import "modal.css";
+@import "popover.css";
+@import "tag.css";
+@import "typography.css";
@@ -0,0 +1,72 @@
+/**************************
+ * .navds-header *
+ **************************/
+
+.navds-header {
+  display: flex;
+  align-items: center;
+  background: var(--navds-color-darkgray);
+  color: white;
+  max-width: 100vw;
+  min-height: 50px;
+}
+
+.navds-header__column {
+  display: flex;
+  align-items: center;
+}
+
+/**************************
+  * .navds-header__title *
+  **************************/
+
+.navds-header__title {
+  padding: 0 1.5rem 0 1.5rem;
+  border-right: 1px solid var(--navds-color-gray-40);
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--navds-color-text-inverse);
+  font-size: var(--navds-font-size-medium);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-medium);
+}
+
+.navds-header__title > span > a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.navds-header__title > span > a:focus {
+  box-shadow: var(--navds-shadow-focus-on-dark);
+  outline: none;
+}
+
+/**************************
+  * .navds-header__user *
+  **************************/
+
+.navds-header__user {
+  color: var(--navds-color-text-inverse);
+  padding: 0 1.5rem 0 1.5rem;
+  margin-left: auto;
+  border-left: 1px solid var(--navds-color-gray-40);
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+}
+
+.navds-header__name {
+  margin-right: 1rem;
+  font-size: var(--navds-font-size-small);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-small);
+}
+
+.navds-header__ident {
+  font-size: var(--navds-font-size-xs);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-xs);
+}
@@ -1,16 +0,0 @@
-@import "./title.css";
-@import "./user.css";
-
-.navds-header {
-  display: flex;
-  align-items: center;
-  background: var(--navds-color-darkgray);
-  color: white;
-  max-width: 100vw;
-  min-height: 50px;
-}
-
-.navds-header__column {
-  display: flex;
-  align-items: center;
-}
@@ -1,23 +0,0 @@
-.navds-header__title {
-  padding: 0 1.5rem 0 1.5rem;
-  border-right: 1px solid var(--navds-color-gray-40);
-  display: flex;
-  align-self: stretch;
-  align-items: center;
-  text-decoration: none;
-  margin: 0;
-  color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
-}
-
-.navds-header__title > span > a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.navds-header__title > span > a:focus {
-  box-shadow: var(--navds-shadow-focus-on-dark);
-  outline: none;
-}
@@ -1,22 +0,0 @@
-.navds-header__user {
-  color: var(--navds-color-text-inverse);
-  padding: 0 1.5rem 0 1.5rem;
-  margin-left: auto;
-  border-left: 1px solid var(--navds-color-gray-40);
-  display: flex;
-  align-self: stretch;
-  align-items: center;
-}
-
-.navds-header__name {
-  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
-}
@@ -1 +0,0 @@
-@import "./layout.css";
@@ -1,117 +0,0 @@
-.navds-layout__container {
-  display: grid;
-  grid-gap: var(--navds-grid-gutter-small);
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.navds-layout__container--1-columns,
-.navds-layout__container--2-columns {
-  max-width: 60rem;
-}
-
-.navds-layout__container--3-columns {
-  max-width: 79.5rem;
-}
-
-.navds-layout__section--white > * {
-  background: white;
-}
-
-.navds-layout__section--padding > * {
-  padding: var(--navds-layout-padding-small);
-}
-
-.navds-layout__section--sticky > * {
-  top: var(--navds-grid-gutter-small);
-  position: sticky;
-}
-
-.navds-layout__section--left,
-.navds-layout__section--main,
-.navds-layout__section--right {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-layout__container {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-
-  .navds-layout__section--padding.navds-layout__section--left > *,
-  .navds-layout__section--padding.navds-layout__section--main > *,
-  .navds-layout__section--padding.navds-layout__section--right > * {
-    padding: var(--navds-layout-padding-medium-and-larger);
-  }
-}
-
-@media (min-width: 648px) {
-  .navds-layout__container {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-
-  .navds-layout__section--padding.navds-layout__section--right > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  /* prettier-ignore */
-  .navds-layout__container--2-columns > .navds-layout__section--padding.navds-layout__section--left > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  .navds-layout__container--1-columns > .navds-layout__section--main {
-    grid-column: span 10;
-  }
-
-  .navds-layout__container--2-columns > .navds-layout__section--left,
-  .navds-layout__container--2-columns > .navds-layout__section--right {
-    grid-row: 1;
-    grid-column: span 4;
-  }
-
-  .navds-layout__container--2-columns > .navds-layout__section--main {
-    grid-row: 1;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--left {
-    grid-row: 1;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--main {
-    grid-row: 2;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--right {
-    grid-column: span 4;
-    grid-row: 1 / span 2;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-layout__section--padding.navds-layout__section--left > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  .navds-layout__container--1-columns > .navds-layout__section--main {
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--left {
-    grid-row: 1;
-    grid-column: span 3;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--main {
-    grid-row: 1;
-    grid-column: span 6;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--right {
-    grid-row: 1;
-    grid-column: span 3;
-  }
-}
@@ -0,0 +1,322 @@
+/*****************
+ * .navds-layout *
+ *****************/
+
+.navds-layout__container {
+  display: grid;
+  grid-gap: var(--navds-grid-gutter-small);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.navds-layout__container--1-columns,
+.navds-layout__container--2-columns {
+  max-width: 60rem;
+}
+
+.navds-layout__container--3-columns {
+  max-width: 79.5rem;
+}
+
+.navds-layout__section--white > * {
+  background: white;
+}
+
+.navds-layout__section--padding > * {
+  padding: var(--navds-layout-padding-small);
+}
+
+.navds-layout__section--sticky > * {
+  top: calc(var(--navds-grid-gutter-small) + var(--decorator-sticky-offset));
+  position: sticky;
+}
+
+.navds-layout__section > *:not(:last-child) {
+  margin-bottom: var(--navds-layout-padding-small);
+}
+
+.navds-layout__section--left,
+.navds-layout__section--main,
+.navds-layout__section--right {
+  grid-column: span 12;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__container {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section > *:not(:last-child) {
+    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section--padding.navds-layout__section--left > *,
+  .navds-layout__section--padding.navds-layout__section--main > *,
+  .navds-layout__section--padding.navds-layout__section--right > * {
+    padding: var(--navds-layout-padding-medium-and-larger);
+  }
+}
+
+@media (min-width: 648px) {
+  .navds-layout__container {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section--padding.navds-layout__section--right > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  /* prettier-ignore */
+  .navds-layout__container--2-columns > .navds-layout__section--padding.navds-layout__section--left > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  .navds-layout__container--1-columns > .navds-layout__section--main {
+    grid-column: span 10;
+  }
+
+  .navds-layout__container--2-columns > .navds-layout__section--left,
+  .navds-layout__container--2-columns > .navds-layout__section--right {
+    grid-row: 1;
+    grid-column: span 4;
+  }
+
+  .navds-layout__container--2-columns > .navds-layout__section--main {
+    grid-row: 1;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--left {
+    grid-row: 1;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--main {
+    grid-row: 2;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--right {
+    grid-column: span 4;
+    grid-row: 1 / span 2;
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-layout__section--padding.navds-layout__section--left > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  .navds-layout__container--1-columns > .navds-layout__section--main {
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--left {
+    grid-row: 1;
+    grid-column: span 3;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--main {
+    grid-row: 1;
+    grid-column: span 6;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--right {
+    grid-row: 1;
+    grid-column: span 3;
+  }
+}
+
+/*************************
+ * .navds-layout__header *
+ ************************/
+
+.navds-layout__header {
+  background: var(--navds-layout-background-white);
+}
+
+.navds-layout__header-content {
+  grid-column: span 12;
+}
+
+.navds-layout__header-title {
+  margin: 0.25rem 0.85rem;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__header-title {
+    margin: 0.25rem 0;
+  }
+}
+
+/*************************
+ * .navds-layout__body *
+ ************************/
+
+.navds-layout__body {
+  background: var(--navds-layout-background-gray);
+}
+
+.navds-layout__body--white {
+  background: var(--navds-layout-background-white);
+}
+
+@media (min-width: 648px) {
+  .navds-layout__body--2-columns.navds-layout__body--padding {
+    padding-top: 3rem;
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-layout__body--3-columns.navds-layout__body--padding {
+    padding-top: 3rem;
+  }
+}
+
+/*************************
+ * .navds-layout__panel *
+ ************************/
+
+.navds-layout__panel {
+  width: 100%;
+  max-width: 100%;
+  position: relative;
+  display: inline-block;
+  padding: var(--navds-layout-padding-small);
+  background: white;
+  padding-top: 2.5rem;
+}
+
+.navds-layout__panel--icon-margin {
+  margin-top: 2rem;
+}
+
+.navds-layout__panel:not(:last-child) {
+  margin-bottom: var(--navds-grid-gutter-small);
+}
+
+.navds-layout__panel--highlight {
+  box-shadow: rgb(102, 164, 220) 0 0 0 0.15rem;
+}
+
+.navds-layout__panel-content {
+  margin-top: 1.25rem;
+}
+
+.navds-layout__panel-icon {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: -2rem;
+  left: 0;
+}
+
+.navds-layout__panel-icon svg,
+.navds-layout__panel-icon img {
+  background: #c7dbed;
+  border-radius: 2rem;
+  padding: 1rem;
+  height: 4rem;
+  width: 4rem;
+}
+
+.navds-layout__panel-title {
+  margin: 0.5rem 0;
+}
+
+.navds-layout__panel-copy {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+
+.navds-layout__panel-copy-icon {
+  color: var(--navds-color-text-link);
+  margin-right: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.navds-layout__panel-popover-content {
+  margin: 0.5rem;
+}
+
+.navds-layout__panel-copy-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: transparent;
+  margin: 0 1rem 0 0;
+  padding-left: 0;
+  padding-right: 0;
+  border: 0;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__panel {
+    padding: var(--navds-layout-padding-medium-and-larger);
+  }
+
+  .navds-layout__panel:not(:last-child) {
+    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
+  }
+}
+
+@media (min-width: 448px) and (max-width: 959px) {
+  .navds-layout__section .navds-accordion-anchor-menu__title {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+  .navds-layout__section .navds-accordion-menu-item,
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable__button {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-item,
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable__button {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-item,
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable__button {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+}
+
+@media (min-width: 648px) {
+  /* prettier-ignore */
+  .navds-layout__container--2-columns .navds-layout__panel--icon-margin:first-child {
+    margin-top: 0;
+  }
+}
+
+@media (min-width: 960px) {
+  /* prettier-ignore */
+  .navds-layout__container--3-columns .navds-layout__panel--icon-margin:first-child {
+    margin-top: 0;
+  }
+
+  .navds-layout__panel--icon-margin:not(:first-child) {
+    margin-top: 2rem;
+  }
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.1.3",
+  "version": "0.2.5",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -15,8 +15,16 @@
    "type": "git",
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
-  "dependencies": {
-    "@navikt/ds-tokens": "0.1.0-beta.6",
-    "normalize.css": "^8.0.1"
+  "main": "./dist/index.css",
+  "scripts": {
+    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
+  },
+  "devDependencies": {
+    "@navikt/ds-tokens": "^0.1.2",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.2.7",
+    "postcss-cli": "^8.3.1",
+    "postcss-import": "^14.0.0"
  }
 }
@@ -4,11 +4,6 @@
  box-shadow: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);
  border: var(--navds-border-default);
  border-radius: 2px;
-  padding: 1rem;
-}
-
-.navds-popover--small {
-  padding: 0.5rem;
 }

 .navds-popover--hidden {
@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}
@@ -1,7 +1,7 @@
 // https://levelup.gitconnected.com/learn-svg-to-react-using-figma-api-be0a5f9c0ca
 // used for reference/implementation

-const api = require("axios");
+import { create, get } from "axios";

 // Requires user to add a personalized figma token in .env
 const headers = {
@@ -11,7 +11,7 @@ const headers = {
 * Api connection for icon components
 * https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/NAV-ikoner-2.1-Figma-i-test?node-id=0%3A1
 */
-const instanceFiles = api.create({
+const instanceFiles = create({
  baseURL: `https://api.figma.com/v1/files/${process.env.FILE_KEY}/components`,
  headers,
 });
@@ -19,7 +19,7 @@ const instanceFiles = api.create({
 /**
 * api endpoint for images
 */
-const instanceImages = api.create({
+const instanceImages = create({
  baseURL: `https://api.figma.com/v1/images/${process.env.FILE_KEY}`,
  headers,
 });
@@ -45,9 +45,9 @@ const getSvgImageUrls = async (nodeIds) => {
 /**
 * Gets raw svg data from url
 */
-const getIconContent = async (url) => api.get(url);
+const getIconContent = async (url) => get(url);

-module.exports = {
+export default {
  getNodeChildren,
  getSvgImageUrls,
  getIconContent,
@@ -1,9 +1,9 @@
-const api = require("./api");
-const fs = require("fs");
-const path = require("path");
-const pLimit = require("p-limit");
-const rimraf = require("rimraf");
-const startCase = require("lodash.startcase");
+import { getNodeChildren, getSvgImageUrls, getIconContent } from "./api";
+import { existsSync, unlinkSync, writeFileSync, mkdirSync } from "fs";
+import { resolve } from "path";
+import pLimit from "p-limit";
+import rimraf from "rimraf";
+import startCase from "lodash.startcase";

 const generateMetadata = (iconNodesArr) => {
  return iconNodesArr
@@ -32,14 +32,14 @@ const main = async () => {
  // Limiting to ~20 concurrent downloads seems to lead to fewer erros
  const limit = pLimit(20);

-  const iconNodesArr = await api.getNodeChildren().catch((e) => {
+  const iconNodesArr = await getNodeChildren().catch((e) => {
    throw e;
  });

-  if (fs.existsSync(metadataFileName)) {
-    fs.unlinkSync(metadataFileName);
+  if (existsSync(metadataFileName)) {
+    unlinkSync(metadataFileName);
  }
-  fs.writeFileSync(
+  writeFileSync(
    metadataFileName,
    JSON.stringify(generateMetadata(iconNodesArr), null, 4),
    {
@@ -47,25 +47,24 @@ const main = async () => {
    }
  );

-  const iconUrls = await api.getSvgImageUrls(
+  const iconUrls = await getSvgImageUrls(
    iconNodesArr.map((node) => node.node_id).join(",")
  );

-  if (fs.existsSync(iconFolder)) {
+  if (existsSync(iconFolder)) {
    rimraf.sync(iconFolder);
  }
-  fs.mkdirSync(iconFolder);
+  mkdirSync(iconFolder);

  console.log("Total icons: " + iconNodesArr.length);

  await Promise.all(
    iconUrls.map((url, x) =>
      limit(() =>
-        api
-          .getIconContent(url)
+        getIconContent(url)
          .then(({ data }) => {
-            fs.writeFileSync(
-              path.resolve(
+            writeFileSync(
+              resolve(
                iconFolder,
                `${startCase(iconNodesArr[x].name).replace(/\s/g, "")}.svg`
              ),
@@ -86,8 +85,8 @@ const main = async () => {
  );

  if (misses.length > 0) {
-    fs.writeFileSync(
-      path.resolve("./", `misses.txt`),
+    writeFileSync(
+      resolve("./", `misses.txt`),
      JSON.stringify(misses, null, 4),
      {
        encoding: "utf8",
@@ -507,7 +507,7 @@
    "name": "DialogDots",
    "description": "",
    "created_at": "2020-07-01T10:37:43.133Z",
-    "updated_at": "2021-01-28T14:18:12.403Z",
+    "updated_at": "2021-02-23T08:58:14.310Z",
    "pageName": "Communication",
    "visible": true
  },
@@ -915,7 +915,7 @@
    "name": "Filter",
    "description": "",
    "created_at": "2020-07-01T10:37:42.891Z",
-    "updated_at": "2020-12-08T09:58:27.629Z",
+    "updated_at": "2021-02-23T08:58:14.284Z",
    "pageName": "Interface",
    "visible": true
  },
@@ -923,7 +923,7 @@
    "name": "FilterFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.605Z",
-    "updated_at": "2021-01-28T14:51:50.930Z",
+    "updated_at": "2021-02-23T08:58:14.297Z",
    "pageName": "Interface",
    "visible": true
  },
@@ -1235,7 +1235,7 @@
    "name": "Laptop",
    "description": "",
    "created_at": "2020-07-01T10:37:42.660Z",
-    "updated_at": "2020-07-01T10:37:42.660Z",
+    "updated_at": "2021-02-09T13:20:24.925Z",
    "pageName": "Device",
    "visible": true
  },
@@ -1311,6 +1311,22 @@
    "pageName": "Social media",
    "visible": true
  },
+  {
+    "name": "Link",
+    "description": "",
+    "created_at": "2021-03-05T09:54:39.896Z",
+    "updated_at": "2021-03-05T09:54:39.896Z",
+    "pageName": "Interface",
+    "visible": true
+  },
+  {
+    "name": "LinkFilled",
+    "description": "",
+    "created_at": "2021-03-05T09:35:48.053Z",
+    "updated_at": "2021-03-05T09:35:48.053Z",
+    "pageName": "Interface",
+    "visible": true
+  },
  {
    "name": "List",
    "description": "",
@@ -1427,7 +1443,7 @@
    "name": "Mobile",
    "description": "",
    "created_at": "2020-07-01T10:37:43.010Z",
-    "updated_at": "2020-07-01T10:37:43.010Z",
+    "updated_at": "2021-03-05T06:30:19.733Z",
    "pageName": "Device",
    "visible": true
  },
@@ -1467,7 +1483,7 @@
    "name": "MonitorFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.526Z",
-    "updated_at": "2021-01-25T10:37:34.902Z",
+    "updated_at": "2021-02-24T09:00:04.733Z",
    "pageName": "Device",
    "visible": true
  },
@@ -1507,7 +1523,7 @@
    "name": "Neutral",
    "description": "",
    "created_at": "2020-07-01T10:37:42.832Z",
-    "updated_at": "2020-11-24T11:50:38.568Z",
+    "updated_at": "2021-02-04T13:05:20.928Z",
    "pageName": "Gender",
    "visible": true
  },
@@ -1519,6 +1535,22 @@
    "pageName": "Gender",
    "visible": true
  },
+  {
+    "name": "NewTab",
+    "description": "",
+    "created_at": "2021-02-26T18:51:49.248Z",
+    "updated_at": "2021-03-02T15:45:51.239Z",
+    "pageName": "Interface",
+    "visible": true
+  },
+  {
+    "name": "NewTabFilled",
+    "description": "",
+    "created_at": "2021-02-26T18:51:49.243Z",
+    "updated_at": "2021-03-02T15:45:51.248Z",
+    "pageName": "Interface",
+    "visible": true
+  },
  {
    "name": "Next",
    "description": "",
@@ -1551,6 +1583,22 @@
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
+  {
+    "name": "Notes",
+    "description": "",
+    "created_at": "2021-03-02T15:27:31.821Z",
+    "updated_at": "2021-03-02T15:27:31.821Z",
+    "pageName": "File",
+    "visible": true
+  },
+  {
+    "name": "NotesFilled",
+    "description": "",
+    "created_at": "2021-03-02T15:27:31.814Z",
+    "updated_at": "2021-03-02T15:27:31.814Z",
+    "pageName": "File",
+    "visible": true
+  },
  {
    "name": "Office1",
    "description": "",
@@ -1579,7 +1627,7 @@
    "name": "Office2Filled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.393Z",
-    "updated_at": "2021-01-30T16:27:27.156Z",
+    "updated_at": "2021-02-23T08:58:14.273Z",
    "pageName": "Building",
    "visible": true
  },
@@ -1699,7 +1747,7 @@
    "name": "Plane",
    "description": "",
    "created_at": "2020-07-01T10:37:43.153Z",
-    "updated_at": "2020-07-01T10:37:43.153Z",
+    "updated_at": "2021-02-04T08:50:51.279Z",
    "pageName": "International",
    "visible": true
  },
@@ -1731,10 +1779,26 @@
    "name": "Print",
    "description": "",
    "created_at": "2020-07-01T10:37:43.050Z",
-    "updated_at": "2020-07-01T10:37:43.050Z",
+    "updated_at": "2021-02-25T11:46:52.195Z",
    "pageName": "Attachment",
    "visible": true
  },
+  {
+    "name": "PrinterRoom",
+    "description": "",
+    "created_at": "2021-02-24T09:00:04.707Z",
+    "updated_at": "2021-02-24T09:00:04.707Z",
+    "pageName": "Fyrstikkalleen",
+    "visible": true
+  },
+  {
+    "name": "PrinterRoomFilled",
+    "description": "",
+    "created_at": "2021-02-24T09:00:04.721Z",
+    "updated_at": "2021-02-24T09:00:04.721Z",
+    "pageName": "Fyrstikkalleen",
+    "visible": true
+  },
  {
    "name": "PrintFilled",
    "description": "",
@@ -1763,7 +1827,7 @@
    "name": "Receipt",
    "description": "",
    "created_at": "2020-07-01T10:37:42.904Z",
-    "updated_at": "2020-07-01T10:37:42.904Z",
+    "updated_at": "2021-02-22T11:08:16.519Z",
    "pageName": "Money",
    "visible": true
  },
@@ -1955,7 +2019,7 @@
    "name": "Settings",
    "description": "",
    "created_at": "2020-07-01T10:37:43.062Z",
-    "updated_at": "2020-07-01T10:37:43.062Z",
+    "updated_at": "2021-02-04T10:27:43.426Z",
    "pageName": "Settings",
    "visible": true
  },
@@ -1983,6 +2047,22 @@
    "pageName": "Communication",
    "visible": true
  },
+  {
+    "name": "Share",
+    "description": "",
+    "created_at": "2021-02-24T15:40:16.208Z",
+    "updated_at": "2021-02-26T07:42:06.022Z",
+    "pageName": "Social media",
+    "visible": true
+  },
+  {
+    "name": "ShareFilled",
+    "description": "",
+    "created_at": "2021-02-24T15:40:16.201Z",
+    "updated_at": "2021-02-26T07:42:06.014Z",
+    "pageName": "Social media",
+    "visible": true
+  },
  {
    "name": "Shower",
    "description": "",
@@ -2027,7 +2107,7 @@
    "name": "SightFilled",
    "description": "",
    "created_at": "2021-01-28T14:00:38.604Z",
-    "updated_at": "2021-01-28T14:00:38.604Z",
+    "updated_at": "2021-02-24T09:00:04.743Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -2163,7 +2243,7 @@
    "name": "System",
    "description": "",
    "created_at": "2020-07-01T10:37:42.766Z",
-    "updated_at": "2020-07-01T10:37:42.766Z",
+    "updated_at": "2021-02-04T12:57:42.991Z",
    "pageName": "Settings",
    "visible": true
  },
@@ -1,7 +1,7 @@
-const fs = require("fs");
-const sharp = require("sharp");
-const rimraf = require("rimraf");
-const pLimit = require("p-limit");
+import { existsSync, mkdirSync, readdirSync } from "fs";
+import sharp from "sharp";
+import rimraf from "rimraf";
+import pLimit from "p-limit";

 const convertToPng = async () => {
  const inputDir = "./svg/";
@@ -11,14 +11,14 @@ const convertToPng = async () => {

  const limit = pLimit(20);

-  if (fs.existsSync(outDir)) {
+  if (existsSync(outDir)) {
    rimraf.sync(outDir);
  }
-  fs.mkdirSync(outDir);
-  sizes.forEach((size) => fs.mkdirSync(outDir + size.toString()));
+  mkdirSync(outDir);
+  sizes.forEach((size) => mkdirSync(outDir + size.toString()));

  await Promise.all(
-    fs.readdirSync(inputDir).map((file) => {
+    readdirSync(inputDir).map((file) => {
      return limit(() =>
        sizes.forEach((size) => {
          const density = (100 * size) / 16;
@@ -1,4 +1,4 @@
-const zipdir = require("zip-dir");
+import zipdir from "zip-dir";

 const zipDir = async (dir, name) => {
  await zipdir(dir, { saveTo: name }, function (err, buffer) {
@@ -1,8 +1,12 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.1.5",
-  "private": true,
+  "version": "0.2.1",
+  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-icons"
+  },
  "keywords": [
    "NAV",
    "designsystem",
@@ -10,29 +14,31 @@
  ],
  "license": "MIT",
  "author": "NAV",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
+  "sideEffects": false,
+  "type": "module",
  "files": [
-    "/lib",
+    "/cjs",
+    "/esm",
    "/src",
    "/svg"
  ],
  "scripts": {
+    "cjs-package": "copyfiles -f config/package.json cjs",
    "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node -r dotenv/config figma-api/index.js dotenv_config_path=figma-api/.env",
    "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#3E3832=currentColor\" -d src svg",
    "convert-icons": "node figma-api/pngConverter.js",
-    "clean": "rm -rf src && rm -rf lib && rm -rf png && rm -rf NAV-ikonpakke-png.zip && rm -rf NAV-ikonpakke-svg.zip",
-    "build": "npm run clean && npm run create-icons && tsc && npm run convert-icons && node figma-api/zipIcons.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-icons"
+    "clean": "rm -rf src && rm -rf esm && rm -rf cjs && rm -rf png && rm -rf NAV-ikonpakke-png.zip && rm -rf NAV-ikonpakke-svg.zip",
+    "build": "npm run clean && npm run create-icons && tsc && tsc -p tsconfig-esm.json && yarn cjs-package && npm run convert-icons && node figma-api/zipIcons.js"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0"
  },
  "devDependencies": {
    "@svgr/cli": "^5.4.0",
+    "copyfiles": "^2.4.1",
    "dotenv": "^8.2.0",
    "lodash.kebabcase": "^4.1.1",
    "lodash.startcase": "4.4.0",
@@ -40,6 +46,5 @@
    "rimraf": "3.0.2",
    "sharp": "0.27.1",
    "zip-dir": "^2.0.0"
-  },
-  "sideEffects": false
+  }
 }
@@ -0,0 +1,36 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-icons/Kom i gang" />
+
+# Ta i bruk ikonpakken `@navikt/ds-icons`
+
+Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
+
+## Oppsett
+
+```bash
+yarn add @navikt/ds-icons
+```
+
+```bash
+Import { Expand } from `@navikt/ds-icons`;
+
+<Expand
+	aria-label="Åpne meny"
+	role="img"
+	focusable="false"
+/>
+```
+
+## Testing
+
+For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
+
+```bash
+"moduleNameMapper": {
+  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
+  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
+}
+```
+
+Dette vil remappe Ikonpakken (og komponentpakken) til å bruke CommonJs versjonen for testing
@@ -1,35 +1,65 @@
 import React from "react";
-// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-// import { Story, Meta } from '@storybook/react/types-6-0';
 import { storiesOf } from "@storybook/react";

 import * as Icons from "../src";
+export default {
+  title: "ds-icons/Ikoner",
+  argTypes: {
+    Icon: {
+      defaultValue: "System",
+      control: {
+        type: "select",
+        options: Object.entries(Icons).map(([Name, _]) => Name),
+      },
+    },
+    color: { control: "color" },
+  },
+};

-const iconsStories = storiesOf("@navikt/icons", module);
+if (process.env.STORYBOOK_CHROMATIC === "true") {
+  const iconsStories = storiesOf("ds-icons/Ikoner", module);

-Object.entries(Icons).forEach(([name, Icon]) => {
-  iconsStories.add(name, () => (
-    <div>
-      <Icon title="hello, world" />
-      <Icon style={{ height: "2em", width: "2em" }} />
-      <Icon style={{ height: "4em", width: "4em" }} />
-      <Icon style={{ height: "4em", width: "4em", color: "white" }} />
-      <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
-      <br />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#777" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#333" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#000" }} />
-      <br />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
-      />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
-      />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
-      />
-    </div>
-  ));
-});
+  Object.entries(Icons).forEach(([name, Icon]) => {
+    iconsStories.add(name, () => (
+      <div>
+        <Icon title="hello, world" />
+        <Icon style={{ height: "2em", width: "2em" }} />
+        <Icon style={{ height: "4em", width: "4em" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "white" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#777" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#333" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#000" }}
+        />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
+        />
+      </div>
+    ));
+  });
+}
+
+const Template = ({ Icon, color, size, ...args }) => {
+  const Iconname = Icons[Icon];
+  return <Iconname style={{ fontSize: size, color }} {...args} />;
+};
+export const Ikon = Template.bind({});
+Ikon.args = {
+  size: "24px",
+};
@@ -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="M23 4V0H1V5L9 13V24L15 21V13L22 6H13V4H23Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6H0V2H24V6ZM18 14L6 14L6 10L18 10V14ZM10 22H14V18H10V22Z" fill="#3E3832"/>
 </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="M21.7454 1.48842C19.7297 -0.496138 16.468 -0.496139 14.4522 1.48842L11.8753 4.02547C11.4818 4.41294 11.4768 5.04609 11.8643 5.43964C12.2518 5.8332 12.8849 5.83813 13.2785 5.45066L15.8554 2.9136C17.0927 1.69546 19.105 1.69547 20.3423 2.91361L21.0786 3.63848C22.3071 4.84808 22.3071 6.80268 21.0786 8.01228L15.9247 13.0864C14.6875 14.3045 12.6751 14.3045 11.4378 13.0864L10.7016 12.3615C10.308 11.9741 9.67487 11.979 9.28741 12.3725C8.89993 12.7661 8.90487 13.3992 9.29842 13.7867L10.0347 14.5116C12.0504 16.4961 15.3122 16.4961 17.3279 14.5116L22.4817 9.43747C24.5061 7.44438 24.5061 4.20638 22.4817 2.21329L21.7454 1.48842Z" fill="#3E3832"/>
+<path d="M2.25455 22.5116C4.27028 24.4961 7.53205 24.4961 9.54777 22.5116L12.1247 19.9745C12.5182 19.5871 12.5232 18.9539 12.1357 18.5604C11.7482 18.1668 11.1151 18.1619 10.7215 18.5493L8.14462 21.0864C6.90735 22.3045 4.89498 22.3045 3.65771 21.0864L2.92145 20.3615C1.69285 19.1519 1.69285 17.1973 2.92145 15.9877L8.07525 10.9136C9.31253 9.69546 11.3249 9.69547 12.5622 10.9136L13.2984 11.6385C13.692 12.0259 14.3251 12.021 14.7126 11.6275C15.1001 11.2339 15.0951 10.6008 14.7016 10.2133L13.9653 9.48842C11.9496 7.50386 8.68783 7.50386 6.6721 9.48841L1.5183 14.5625C-0.506099 16.5556 -0.506098 19.7936 1.5183 21.7867L2.25455 22.5116Z" fill="#3E3832"/>
+</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="M9.51472 15.906C11.8579 18.2501 15.6569 18.2501 18 15.906L22.2426 11.6616C24.5858 9.31754 24.5858 5.51699 22.2426 3.17288L20.8284 1.75808C18.4853 -0.586027 14.6863 -0.586027 12.3431 1.75808L11.2825 2.81918C10.5014 3.60055 10.5014 4.8674 11.2825 5.64877C12.0635 6.43014 13.3299 6.43014 14.1109 5.64877L15.1716 4.58767C15.9526 3.8063 17.219 3.8063 18 4.58767L19.4142 6.00247C20.1953 6.78384 20.1953 8.05069 19.4142 8.83206L15.1716 13.0764C14.3905 13.8578 13.1242 13.8578 12.3431 13.0764L11.636 12.369C10.855 11.5877 9.58866 11.5877 8.80761 12.369C8.02656 13.1504 8.02656 14.4173 8.80761 15.1986L9.51472 15.906Z" fill="#3E3832"/>
+<path d="M14.4853 8.09396C12.1421 5.74986 8.34314 5.74985 6 8.09396L1.75736 12.3384C-0.585786 14.6825 -0.585787 18.483 1.75736 20.8271L3.17157 22.2419C5.51472 24.586 9.31371 24.586 11.6569 22.2419L12.7175 21.1808C13.4986 20.3995 13.4986 19.1326 12.7175 18.3512C11.9365 17.5699 10.6701 17.5699 9.88909 18.3512L8.82843 19.4123C8.04738 20.1937 6.78105 20.1937 6 19.4123L4.58579 17.9975C3.80474 17.2162 3.80474 15.9493 4.58579 15.1679L8.82843 10.9236C9.60948 10.1422 10.8758 10.1422 11.6569 10.9236L12.364 11.631C13.145 12.4123 14.4113 12.4123 15.1924 11.631C15.9734 10.8496 15.9734 9.58273 15.1924 8.80136L14.4853 8.09396Z" fill="#3E3832"/>
+</svg>
@@ -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="M22 3H6V4H21V8H22V3ZM21 14V10H22V14H21ZM2 1C0.895431 1 0 1.89543 0 3V16C0 17.1046 0.89543 18 2 18H11V21H7C5.89543 21 5 21.8954 5 23H19C19 21.8954 18.1046 21 17 21H13V18H22C23.1046 18 24 17.1046 24 16V3C24 1.89543 23.1046 1 22 1H2Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 3H6V4H21V8H22V3ZM21 14V10H22V14H21ZM2 1C0.895431 1 0 1.89543 0 3V16C0 17.1046 0.89543 18 2 18H11V21H7C5.89543 21 5 21.8954 5 23H19C19 21.8954 18.1046 21 17 21H13V18H22C23.1046 18 24 17.1046 24 16V3C24 1.89543 23.1046 1 22 1H2Z" fill="#3E3832"/>
 </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="M8 16V2H22V16H8ZM6 1C6 0.447716 6.44772 0 7 0H23C23.5523 0 24 0.447715 24 1V17C24 17.5523 23.5523 18 23 18H18V22C18 23.1046 17.1046 24 16 24H2C0.895431 24 0 23.1046 0 22V8C0 6.89543 0.895431 6 2 6H6V1ZM6 8V17C6 17.5523 6.44772 18 7 18H16V22H2V8H6ZM14 10H10V8H14V4H16V8H20V10H16V14H14V10Z" fill="#3E3832"/>
+</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="M6 1C6 0.447716 6.44772 0 7 0H23C23.5523 0 24 0.447715 24 1V17C24 17.5523 23.5523 18 23 18H7C6.44772 18 6 17.5523 6 17V1ZM14 10V14H16V10L20 10V8L16 8V4H14V8H10V10H14ZM17 24H1C0.447716 24 0 23.5523 0 23V7C0 6.44772 0.447715 6 1 6H4V19C4 19.5523 4.44772 20 5 20H18V23C18 23.5523 17.5523 24 17 24Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.01096L23.0598 1.04481C24.3286 2.3565 24.3404 4.40707 23.2057 5.78656L22 7.25109V24H2V2H17.2933L17.7456 1.45042L17.8862 1.27963L18.0394 1.10889L18.0696 1.07797C19.3139 -0.193727 21.3848 -0.408755 22.8251 0.823961L22.8608 0.854533L23.0271 1.01096ZM15.6471 4H4V22H20V9.68214L14.1812 16.7559L9.272 18.975L6.96045 20.0199L7.55858 17.5547L8.83932 12.2761L15.2039 4.53926L15.2042 4.53888L15.2039 4.53857L15.6471 4ZM21.6612 4.51583L21.6611 4.51599L20.1639 6.33464L20.1634 6.33523L12.9327 15.1254L9.87014 16.5098L10.6749 13.1929L16.7488 5.80947L17.939 4.3626L17.9393 4.3622L17.9394 4.36215L17.9405 4.3608L18.0188 4.26567L19.4033 2.58351L19.4991 2.47669C20.0702 1.89304 20.9511 1.85255 21.5246 2.34338L21.5246 2.3434L21.6223 2.43532L21.6223 2.43534C22.1422 2.97278 22.1888 3.87388 21.6616 4.51541L21.6612 4.51583Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.00735L23.0598 1.04119C24.3286 2.35288 24.3404 4.40345 23.2057 5.78294L21.708 7.60217L14.1812 16.7523L22 7.24842V24H2V2H17.2903L17.7456 1.44681L17.8862 1.27601L18.0394 1.10527L18.0696 1.07435C19.3139 -0.197341 21.3848 -0.41237 22.8251 0.820347L22.8608 0.850918L23.0271 1.00735ZM21.6612 4.51222L21.6611 4.51237L20.1639 6.33103L20.1634 6.33162L12.9327 15.1218L9.87014 16.5062L10.6749 13.1893L16.7488 5.80585L17.939 4.35898L17.9393 4.35859L17.9394 4.35853L17.9405 4.35718L18.0188 4.26206L19.4033 2.5799L19.4991 2.47307C20.0702 1.88943 20.9511 1.84893 21.5246 2.33977L21.5246 2.33978L21.6223 2.43171L21.6223 2.43172C22.1422 2.96916 22.1888 3.87027 21.6616 4.5118L21.6612 4.51222Z" fill="#3E3832"/>
+</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.9998 17.1959V14.5544L21.5299 12.3481C21.9983 12.0553 22.1406 11.4384 21.8479 10.9701C21.5552 10.5017 20.9383 10.3594 20.4699 10.6521L17.9998 12.1959V7.02724C18.0043 6.85811 17.9656 6.69086 17.8888 6.54166C17.7914 6.35317 17.6358 6.19963 17.4457 6.10481L5.92689 0.113051C5.43694 -0.141811 4.83314 0.0487713 4.57828 0.538729C4.32342 1.02869 4.514 1.63248 5.00396 1.88734L12.9106 6.00015H2.99997C2.44769 6.00015 1.99998 6.44787 1.99998 7.00015V23C1.99998 23.5523 2.44769 24 2.99997 24H16.9999C17.5521 24 17.9998 23.5523 17.9998 23V19.5544L21.5299 17.3481C21.9982 17.0553 22.1406 16.4384 21.8479 15.9701C21.5552 15.5017 20.9383 15.3594 20.4699 15.6521L17.9998 17.1959ZM15.9999 18.9974V14.0047V13.9973V8.00014H3.99997V22H15.9999V19.0046V18.9974ZM6.99994 18.0001C6.44766 18.0001 5.99995 18.4478 5.99995 19C5.99995 19.5523 6.44766 20 6.99994 20H12.9999C13.5522 20 13.9999 19.5523 13.9999 19C13.9999 18.4478 13.5522 18.0001 12.9999 18.0001L6.99994 18.0001Z" fill="#3E3832"/>
+</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.9998 7.02724V12.1959L20.4699 10.6521C20.9383 10.3594 21.5552 10.5017 21.8479 10.9701C22.1406 11.4384 21.9983 12.0554 21.5299 12.3481L17.9998 14.5544V17.1959L20.4699 15.6521C20.9383 15.3594 21.5552 15.5017 21.8479 15.9701C22.1406 16.4384 21.9982 17.0553 21.5299 17.3481L17.9998 19.5544V23C17.9998 23.5523 17.5521 24 16.9999 24H2.99997C2.44769 24 1.99998 23.5523 1.99998 23V7.00015C1.99998 6.44787 2.44769 6.00015 2.99997 6.00015H12.9106L5.00396 1.88734C4.514 1.63248 4.32342 1.02869 4.57828 0.538729C4.83314 0.0487713 5.43694 -0.141811 5.92689 0.113051L17.4457 6.10481C17.6358 6.19963 17.7914 6.35317 17.8888 6.54166C17.9656 6.69086 18.0043 6.85811 17.9998 7.02724ZM6.99994 18.0001C6.44766 18.0001 5.99995 18.4478 5.99995 19C5.99995 19.5523 6.44766 20 6.99994 20H12.9999C13.5522 20 13.9999 19.5523 13.9999 19C13.9999 18.4478 13.5522 18.0001 12.9999 18.0001L6.99994 18.0001Z" fill="#3E3832"/>
+</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="M14 6.93671L12.2673 7.17036C8.69604 7.65193 6.1851 9.64766 4.51125 12.423C3.60163 13.9312 2.9476 15.6631 2.53546 17.4722C3.01938 16.8564 3.54509 16.2463 4.1131 15.6615C6.02443 13.6938 8.51404 11.9122 11.5955 11.2759L14 10.7794V14.1589L21.2613 9.04409L14 3.92931V6.93671ZM2.00483 21.8319C1.98661 21.8633 1.96852 21.8946 1.95055 21.9259C1.87942 22.0496 1.81022 22.1719 1.74298 22.2926C1.6773 22.4105 1.61348 22.5269 1.55151 22.6415C1.20695 23.279 0 23.0173 0 22.2926C0 22.1308 0.00164753 21.9684 0.00495931 21.8056C0.00785945 21.6631 0.0120358 21.5202 0.0174997 21.377C0.0188241 21.3423 0.0202242 21.3076 0.0217002 21.2728C0.32595 14.1118 3.85178 6.28706 12 5.1883V2.00175C12 1.19139 12.9134 0.717542 13.5759 1.1842L23.5737 8.22654C24.1392 8.62488 24.1392 9.46329 23.5737 9.86163L13.5759 16.904C12.9134 17.3706 12 16.8968 12 16.0864V13.2346C11.3031 13.3785 10.6364 13.5944 10 13.8685C6.32101 15.4535 3.65449 18.9871 2.00483 21.8319Z" fill="#3E3832"/>
+</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="M13.5759 16.904L23.5737 9.86163C24.1392 9.46329 24.1392 8.62488 23.5737 8.22654L13.5759 1.1842C12.9134 0.717542 12 1.19139 12 2.00175V5.1883C3.46298 6.33949 0 14.8739 0 22.2926C0 23.0173 1.20695 23.279 1.55151 22.6415C3.39544 19.2298 6.88128 14.2916 12 13.2346V16.0864C12 16.8968 12.9134 17.3706 13.5759 16.904Z" fill="#3E3832"/>
+</svg>
@@ -1,4 +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="M12 5C16.4183 5 20.4183 7.33333 24 12C20.4183 16.6667 16.4183 19 12 19C7.58172 19 3.58172 16.6667 0 12C3.58172 7.33333 7.58172 5 12 5ZM17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="#3E3832"/>
-<circle cx="12" cy="12" r="1" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C20.4183 7.33333 16.4183 5 12 5C7.58172 5 3.58172 7.33333 0 12C3.58172 16.6667 7.58172 19 12 19C16.4183 19 20.4183 16.6667 24 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" fill="#3E3832"/>
 </svg>
@@ -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="M23 0V5L15 13V21L9 24V13L1 5V0H23ZM21 2H3V4.171L11 12.1716V20.764L13 19.764V12.1716L19.17 6H13V4H21V2Z" fill="#3E3832"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 5H0V3H24V5ZM18 13L6 13V11L18 11V13ZM10 21H14V19H10V21Z" fill="#3E3832"/>
 </svg>
@@ -0,0 +1,13 @@
+{
+  "extends": "../../utilities/build/tsconfig-pakker.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "esModuleInterop": true,
+    "module": "ES2020",
+    "target": "ES2015",
+    "outDir": "./esm",
+    "sourceMap": true,
+    "declaration": true
+  },
+  "include": ["./src"]
+}
@@ -1,11 +1,13 @@
 {
  "extends": "../../utilities/build/tsconfig-pakker.json",
  "compilerOptions": {
-    "module": "ES6",
-    "outDir": "./lib",
+    "module": "commonjs",
+    "outDir": "./cjs",
+    "target": "es2015",
    "rootDir": "./src",
    "esModuleInterop": true,
-    "sourceMap": true
+    "sourceMap": false,
+    "declaration": false
  },
  "include": ["./src"]
 }
@@ -1,18 +0,0 @@
-{
-  "name": "@navikt/ds-react-accordion",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6",
-    "react-collapse": "^5.1.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,3 +0,0 @@
-import Accordion from "./Accordion";
-export default Accordion;
-export { AccordionProps } from "./Accordion";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-alert",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navds/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,3 +0,0 @@
-import Alert from "./Alert";
-export default Alert;
-export { AlertProps } from "./Alert";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-button",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,3 +0,0 @@
-import Button from "./Button";
-export default Button;
-export { ButtonProps } from "./Button";
@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}
@@ -1,19 +0,0 @@
-{
-  "name": "@navikt/ds-react-content-container",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6",
-    "react-modal": "^3.11.2",
-    "react-merge-refs": "^1.1.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,4 +0,0 @@
-export {
-  default as ContentContainer,
-  ContentContainerProps,
-} from "./ContentContainer";
@@ -1,32 +0,0 @@
-import * as React from "react";
-import { ContentContainer } from "../src/index";
-import "./style.css";
-
-export default {
-  title: "@navikt/content-container",
-  component: ContentContainer,
-  parameters: {
-    layout: "fullscreen",
-    backgrounds: {
-      default: "NAV gray",
-      values: [
-        {
-          name: "NAV gray",
-          value: "#f1f1f1",
-        },
-        {
-          name: "white",
-          value: "#ffffff",
-        },
-      ],
-    },
-  },
-};
-
-export const All = () => {
-  return (
-    <ContentContainer className={"navds-story-content-container"}>
-      -- Innhold --
-    </ContentContainer>
-  );
-};
@@ -1,7 +0,0 @@
-.navds-story-content-container {
-  display: flex;
-  background: white;
-  border-radius: 0.25rem;
-  justify-content: center;
-  align-items: center;
-}
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-grid",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,2 +0,0 @@
-export { default as Cell, CellProps } from "./Cell";
-export { default as Grid, GridProps } from "./Grid";
@@ -1,32 +0,0 @@
-export { default as Accordion, AccordionProps } from "./accordion/src/index";
-export { default as Alert, AlertProps } from "./alert/src/index";
-export { default as Button, ButtonProps } from "./button/src/index";
-export { default as Link, LinkProps } from "./link/src/index";
-export { default as Modal, ModalProps } from "./modal/src/index";
-export { default as Popover, PopoverProps } from "./popover/src/index";
-export { default as Tag, TagProps } from "./tag/src/index";
-export { Grid, Cell, GridProps, CellProps } from "./grid/src/index";
-export { Layout, LayoutProps, SectionProps } from "./layout/src/index";
-
-export {
-  InternalHeader,
-  InternalHeaderProps,
-  InternalHeaderTitle,
-  InternalHeaderTitleProps,
-  InternalHeaderUser,
-  InternalHeaderUserProps,
-} from "./internal-header/src/index";
-
-export {
-  Heading,
-  Text,
-  Paragraph,
-  Lead,
-  HeadingProps,
-  TextProps,
-} from "./typography/src/index";
-
-export {
-  ContentContainer,
-  ContentContainerProps,
-} from "./content-container/src/index";
@@ -1,20 +0,0 @@
-{
-  "name": "@navikt/ds-react-internalheader",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "react-router-dom": "^5.2.0"
-  }
-}
@@ -1,12 +0,0 @@
-export {
-  default as InternalHeader,
-  InternalHeaderProps,
-} from "./InternalHeader";
-export {
-  default as InternalHeaderTitle,
-  InternalHeaderTitleProps,
-} from "./InternalHeaderTitle";
-export {
-  default as InternalHeaderUser,
-  InternalHeaderUserProps,
-} from "./InternalHeaderUser";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-layout",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,37 +0,0 @@
-import React, { Children } from "react";
-import { forwardRef, ForwardRefExoticComponent, HTMLAttributes } from "react";
-import cl from "classnames";
-import { default as Section, SectionProps } from "./Section";
-import "@navikt/ds-css/layout/index.css";
-
-export interface LayoutWithSubComponents
-  extends ForwardRefExoticComponent<LayoutProps> {
-  Section: ForwardRefExoticComponent<SectionProps>;
-}
-
-export interface LayoutProps extends HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const Layout = forwardRef<HTMLDivElement, LayoutProps>(
-  ({ children, className, ...rest }, ref) => {
-    const columns = Children.count(children);
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-layout__container",
-          `navds-layout__container--${columns}-columns`,
-          className
-        )}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  }
-) as LayoutWithSubComponents;
-
-Layout.Section = Section;
-export default Layout;
@@ -1,4 +0,0 @@
-import { default as Layout, LayoutProps } from "./Layout";
-import { SectionProps } from "./Section";
-
-export { Layout, LayoutProps, SectionProps };
@@ -1,80 +0,0 @@
-import * as React from "react";
-import { Layout } from "../src/index";
-import { Left } from "./components/sections/Left";
-import { Main } from "./components/sections/Main";
-import { Right } from "./components/sections/Right";
-import { ContentContainer } from "../../content-container/src";
-import "./components/styles.css";
-
-export default {
-  title: "@navikt/layout/Article",
-  component: { Layout },
-  parameters: {
-    layout: "fullscreen",
-    backgrounds: {
-      default: "NAV gray",
-      values: [
-        {
-          name: "NAV gray",
-          value: "#f1f1f1",
-        },
-        {
-          name: "white",
-          value: "#ffffff",
-        },
-      ],
-    },
-  },
-};
-
-export const ThreeColumns = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section left sticky>
-        <Left />
-      </Layout.Section>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-      <Layout.Section right sticky>
-        <Right />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);
-
-export const TwoColumnsLeft = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section left sticky>
-        <Left />
-      </Layout.Section>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);
-
-export const TwoColumnsRight = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-      <Layout.Section right sticky>
-        <Right />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);
-
-export const OneColumn = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);
@@ -1,23 +0,0 @@
-import * as React from "react";
-import Lenke from "nav-frontend-lenker";
-import { Button } from "../../../../lib";
-
-export const Left = () => (
-  <ul className={"menu"}>
-    <li>
-      <Lenke href={"#"}>Iusto odio dignissimos</Lenke>
-    </li>
-    <li>
-      <Lenke href={"#"}>Nam libero tempore</Lenke>
-    </li>
-    <li>
-      <Lenke href={"#"}>Reiciendis voluptatibus</Lenke>
-    </li>
-    <li>
-      <Lenke href={"#"}>Earum rerum</Lenke>
-    </li>
-    <li>
-      <Button>Søk ...</Button>
-    </li>
-  </ul>
-);
@@ -1,105 +0,0 @@
-import * as React from "react";
-import { Heading } from "../../../../lib/typography/src";
-import { Normaltekst } from "nav-frontend-typografi";
-import { Cell, Grid } from "../../../../grid/src";
-import Lenke from "nav-frontend-lenker";
-import Snakkeboble from "nav-frontend-snakkeboble";
-import { Button } from "../../../../lib";
-
-export const Main = () => (
-  <div>
-    <Heading className={"section"} level={1} size={"xl"}>
-      Quis autem
-    </Heading>
-    <Normaltekst className={"section"}>
-      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
-      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
-      fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
-      sequi nesciunt.
-    </Normaltekst>
-    <Grid className={"section"}>
-      <Cell xs={6}>
-        <Lenke href={"#"}>Ea voluptate</Lenke>
-      </Cell>
-      <Cell xs={6}>
-        <Lenke href={"#"}>Quis autem</Lenke>
-      </Cell>
-    </Grid>
-    <Normaltekst className={"section"}>
-      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
-      consectetur, adipisci velit, sed quia non numquam eius modi tempora
-      incidunt ut labore et dolore magnam aliquam quaerat voluptatem.{" "}
-    </Normaltekst>
-    <Snakkeboble className={"section"}>
-      Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in
-      faucibus.
-    </Snakkeboble>
-    <Normaltekst className={"section"}>
-      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
-      suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
-      vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
-      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-      pariatur?
-    </Normaltekst>
-    <Heading className={"section"} level={2} size={"lg"}>
-      Nulla pariatur?
-    </Heading>
-    <Normaltekst className={"section"}>
-      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
-      imperdiet erat. Morbi sodales bibendum volutpat. Sed malesuada risus
-      lorem, in elementum purus commodo eget. Mauris maximus congue efficitur.
-      Cras vestibulum id metus sed pellentesque.
-    </Normaltekst>
-
-    <table className={"section tabell tabell--stripet"}>
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Fornavn</th>
-          <th>Etternavn</th>
-          <th>Rolle</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Jean-Luc</td>
-          <td>Picard</td>
-          <td>Kaptein</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>William</td>
-          <td>Riker</td>
-          <td>Kommandør</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Geordi</td>
-          <td>La Forge</td>
-          <td>Sjefsingeniør</td>
-        </tr>
-      </tbody>
-    </table>
-    <Normaltekst className={"section"}>
-      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
-      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
-      commodo tortor, eget mollis nunc augue eu elit. Ut nec fringilla odio, eu
-      scelerisque tellus.
-    </Normaltekst>
-    <Normaltekst className={"section"}>
-      Proin nec luctus justo. Pellentesque et dapibus libero. Phasellus non elit
-      eget justo mattis venenatis. In hac habitasse platea dictumst. Proin nunc
-      ipsum, ornare eu pretium in, aliquet non velit. Nullam efficitur tincidunt
-      leo, vel tempus nibh consectetur sed. Etiam porttitor finibus erat varius
-      rhoncus. Sed ac augue imperdiet, porta tellus vitae, aliquam est.
-    </Normaltekst>
-    <Normaltekst className={"section"}>
-      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
-      ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Normaltekst>
-    <Button>Søk ...</Button>
-  </div>
-);
@@ -1,8 +0,0 @@
-import * as React from "react";
-import Ekspanderbartpanel from "nav-frontend-ekspanderbartpanel";
-
-export const Right = () => (
-  <div>
-    <Ekspanderbartpanel tittel={"Snareveier"}>Test</Ekspanderbartpanel>
-  </div>
-);
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-link",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,4 +0,0 @@
-import Link from "./Link";
-export default Link;
-
-export { LinkProps } from "./Link";
@@ -1,19 +0,0 @@
-{
-  "name": "@navikt/ds-react-modal",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6",
-    "react-modal": "^3.11.2",
-    "react-merge-refs": "^1.1.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,4 +0,0 @@
-import Modal from "./Modal";
-export default Modal;
-
-export { ModalProps, setAppElement } from "./Modal";
@@ -1,43 +1,53 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.1.0-beta.6",
-  "private": true,
+  "version": "0.2.9",
+  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
+  "license": "MIT",
  "keywords": [
    "react",
    "typescript",
    "javascript"
  ],
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-react"
+  },
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
+  "sideEffects": false,
+  "type": "module",
  "publishConfig": {
    "access": "public"
  },
  "files": [
-    "/lib"
+    "/cjs",
+    "/esm",
+    "/src"
  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
  "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "cjs-package": "copyfiles -f config/package.json cjs",
+    "clean": "rm -rf cjs esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn cjs-package",
    "watch": "tsc --watch -p tsconfig.json"
  },
  "dependencies": {
+    "@navikt/ds-icons": "^0.2.1",
    "@popperjs/core": "^2.5.4",
-    "@navikt/ds-css": "0.1.0-beta.6",
-    "@navikt/ds-icons": "^0.1.0",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
    "react-merge-refs": "^1.1.0",
    "react-modal": "3.12.1",
-    "react-popper": "^2.2.4"
+    "react-popper": "^2.2.4",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "copyfiles": "^2.4.1",
+    "react-router-dom": "^5.2.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0"
  }
 }
@@ -1,19 +0,0 @@
-{
-  "name": "@navikt/ds-react-popover",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6",
-    "react-popper": "^2.2.4",
-    "react-merge-refs": "^1.1.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,3 +0,0 @@
-import Popover from "./Popover";
-export default Popover;
-export { PopoverProps } from "./Popover";
@@ -0,0 +1,40 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
+import { Heading } from "../index";
+import { ActiveAnchorProvider } from "./ActiveAnchorStore";
+import cl from "classnames";
+
+export interface AccordionAnchorMenuProps
+  extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionAnchorMenu = forwardRef<
+  HTMLDivElement,
+  AccordionAnchorMenuProps
+>(({ children, title, className, ...rest }, ref) => (
+  <div
+    className={cl("navds-accordion-anchor-menu", className)}
+    ref={ref}
+    {...rest}
+  >
+    {title && (
+      <Heading
+        level={2}
+        size="medium"
+        className="navds-accordion-anchor-menu__title"
+      >
+        {title}
+      </Heading>
+    )}
+    <ActiveAnchorProvider>
+      <BaseAccordionMenu aria-label={title || "Meny"}>
+        {children}
+      </BaseAccordionMenu>
+    </ActiveAnchorProvider>
+  </div>
+));
+
+export default AccordionAnchorMenu;
@@ -0,0 +1 @@
+export { AccordionMenuCollapsable as AccordionAnchorMenuCollapsable } from "../accordion-menu";
@@ -0,0 +1,39 @@
+import React, { forwardRef, useEffect } from "react";
+import { AccordionMenuItem, AccordionMenuItemType } from "../accordion-menu";
+import { useStore } from "./ActiveAnchorStore";
+
+const AccordionAnchorMenuItem: AccordionMenuItemType = forwardRef(
+  (props, ref) => {
+    const isAnchorActive = useIsAnchorActive(
+      props.href && props.href.split("#")[1]
+    );
+
+    return (
+      <AccordionMenuItem
+        {...props}
+        ref={ref}
+        active={props.active || isAnchorActive}
+      />
+    );
+  }
+);
+
+const useIsAnchorActive = (anchor: string | undefined) => {
+  const { activeAnchor, registerAnchor, unregisterAnchor } = useStore();
+
+  useEffect(() => {
+    if (anchor) {
+      const target = document.getElementById(anchor);
+      if (target) {
+        registerAnchor(anchor);
+        return () => {
+          unregisterAnchor(anchor);
+        };
+      }
+    }
+  }, [anchor, registerAnchor, unregisterAnchor]);
+
+  return (anchor && activeAnchor === anchor) || false;
+};
+
+export default AccordionAnchorMenuItem;
@@ -0,0 +1,69 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  useEffect,
+} from "react";
+
+export interface ActiveAnchorStore {
+  activeAnchor?: string;
+  registerAnchor: (anchor: string) => void;
+  unregisterAnchor: (anchor: string) => void;
+}
+
+export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
+export const ActiveAnchorProvider = ({ children }) => {
+  const [anchors, setAnchors] = useState<string[]>([]);
+  const [activeAnchor, setActiveAnchor] = useState<string>();
+
+  useEffect(() => {
+    const scrollListener = () => {
+      const offset = 100;
+      const lastPassedAnchor = anchors
+        .map((anchor) => document.getElementById(anchor))
+        .map((element: HTMLElement) => ({
+          id: element.id,
+          top: element.getBoundingClientRect().top - offset,
+          scrolledToBottom:
+            window.innerHeight + window.pageYOffset >=
+            document.body.offsetHeight,
+        }))
+        .filter((element) => element.scrolledToBottom || element.top <= 0)
+        .sort((a, b) => (a.top < b.top ? -1 : 1))
+        .map((anchor) => anchor.id)
+        .pop();
+
+      // Set active anchor and related url hash
+      if (lastPassedAnchor && activeAnchor !== lastPassedAnchor) {
+        const { href, hash } = window.location;
+        const urlWithoutHash = href.replace(hash, "");
+        const urlWithAnchor = `${urlWithoutHash}#${lastPassedAnchor}`;
+        const title = document.title;
+        window.history.pushState(lastPassedAnchor, title, urlWithAnchor);
+        setActiveAnchor(lastPassedAnchor);
+      }
+    };
+    window.addEventListener("scroll", scrollListener);
+    return () => {
+      window.removeEventListener("scroll", scrollListener);
+    };
+  }, [anchors, activeAnchor]);
+
+  return (
+    <ActiveAnchorContext.Provider
+      value={{
+        activeAnchor,
+        registerAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => [...anchors, anchor]);
+        }, []),
+        unregisterAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => anchors.filter((a) => a !== anchor));
+        }, []),
+      }}
+    >
+      {children}
+    </ActiveAnchorContext.Provider>
+  );
+};
+export const useStore = () => useContext(ActiveAnchorContext);
@@ -0,0 +1,3 @@
+export { default as AccordionAnchorMenu } from "./AccordionAnchorMenu";
+export { AccordionAnchorMenuCollapsable } from "./AccordionAnchorMenuCollapsable";
+export { default as AccordionAnchorMenuItem } from "./AccordionAnchorMenuItem";
@@ -0,0 +1,141 @@
+import * as React from "react";
+import {
+  AccordionAnchorMenu as Menu,
+  AccordionAnchorMenuCollapsable as Collapsable,
+  AccordionAnchorMenuItem as Item,
+} from "../index";
+import { useEffect } from "react";
+import { ProductPageLayout } from "../../index";
+import { Right } from "../../layouts/stories/components/sections/Right";
+import { LightBulb, Telephone } from "@navikt/ds-icons";
+import { MainOne } from "../../layouts/stories/components/sections/Main";
+import { MainTwo } from "../../layouts/stories/components/sections/Main";
+import { MainThree } from "../../layouts/stories/components/sections/Main";
+import { Link, HashRouter as Router } from "react-router-dom";
+
+export default {
+  title: "ds-react/accordion-anchor-menu",
+  component: { Menu },
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        document.getElementById("decorator-header").style.display = "block";
+        document.getElementById("decorator-footer").style.display = "block";
+        return () => {
+          document.getElementById("decorator-header").style.display = "none";
+          document.getElementById("decorator-footer").style.display = "none";
+        };
+      }, []);
+      return <Story />;
+    },
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const All = () => (
+  <ProductPageLayout title={"Nunc et lorem"}>
+    <ProductPageLayout.Section left sticky withPadding={false}>
+      <Menu title={"Minima"} smoothScrollBehavior>
+        <Item href={"#leo-quis"}>Leo quis</Item>
+        <Collapsable title={"Proin accumsan"}>
+          <Item href={"#nulla-pariatur"}>Nulla pariatur</Item>
+          <Item href={"#luctus-justo"}>Luctus justo</Item>
+        </Collapsable>
+        <Item href={"#maecenas-in-pretium"}>Maecenas in pretium</Item>
+      </Menu>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const ReactRouter = () => (
+  <ProductPageLayout title={"Nunc et lorem"}>
+    <ProductPageLayout.Section left sticky withPadding={false}>
+      <Menu>
+        <Item component={Link} to="/link1">
+          Leo quis
+        </Item>
+        <Collapsable title={"Proin accumsan"}>
+          <Item component={Link} to="/link2">
+            Nulla pariatur
+          </Item>
+          <Item component={Link} to="/link3">
+            Luctus justo
+          </Item>
+        </Collapsable>
+        <Collapsable title={"Sint cupidatat"}>
+          <Item component={Link} to="/link4">
+            Nulla pariatur
+          </Item>
+          <Item component={Link} to="/link5">
+            Luctus justo
+          </Item>
+        </Collapsable>
+        <Item component={Link} to="/link6">
+          Maecenas in pretium
+        </Item>
+      </Menu>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];
@@ -0,0 +1,25 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+import MenuItems from "./MenuItems";
+
+export interface AccordionMenuProps extends HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <nav
+        role="navigation"
+        ref={ref}
+        className={cl("navds-accordion-menu", className)}
+        {...rest}
+      >
+        <MenuItems>{children}</MenuItems>
+      </nav>
+    );
+  }
+);
+
+export default AccordionMenu;
@@ -0,0 +1,44 @@
+import React, { forwardRef, HTMLAttributes, useState } from "react";
+import cl from "classnames";
+import { Expand } from "@navikt/ds-icons";
+import MenuItems from "./MenuItems";
+
+export interface AccordionMenuCollapsableProps
+  extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionMenuCollapsable = forwardRef<
+  HTMLDivElement,
+  AccordionMenuCollapsableProps
+>(({ children, defaultOpen = false, title, className, ...rest }, ref) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div
+      ref={ref}
+      className={cl("navds-accordion-menu-collapsable", className, {
+        "navds-accordion-menu-collapsable--open": isOpen,
+      })}
+      {...rest}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="navds-accordion-menu-collapsable__button"
+      >
+        {title}
+        <Expand
+          role="img"
+          aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
+          className="navds-accordion-menu-collapsable__expand-icon"
+        />
+      </button>
+      {isOpen && <MenuItems>{children}</MenuItems>}
+    </div>
+  );
+});
+
+export default AccordionMenuCollapsable;
@@ -0,0 +1,40 @@
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util";
+import cl from "classnames";
+
+export type AccordionMenuItemType = OverridableComponent<AccordionMenuItemProps>;
+
+export interface AccordionMenuItemProps {
+  props: {
+    children: React.ReactNode;
+    active?: boolean;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+const AccordionMenuItem: AccordionMenuItemType = forwardRef(
+  (
+    {
+      children,
+      component: Component = "a",
+      active = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        className={cl("navds-accordion-menu-item", className, {
+          "navds-accordion-menu-item--active": active,
+        })}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+export default AccordionMenuItem;
				`@@ -0,0 +1 @@`
				`export { AccordionMenuCollapsable as AccordionAnchorMenuCollapsable } from "../accordion-menu";`