Lerna versionbump [ci skip]

* Test for fix i popover

* Lerna versionbump [ci skip]

* ryddet i testkode

* ryddet i testkode 2

* yarn lock

* Lerna versionbump [ci skip]

* yarn lock

.github/ISSUE_TEMPLATE/bug-report.md

@@ -3,14 +3,13 @@ name: Bug Report
 about: Meld inn bugs eller feil
 title: "[BUG]"
 labels: "bug \U0001F41B"
-assignees: ''
-
+assignees: ""
 ---
 
-## Hvilken av tjenestene våre gjelder det?
+## Hvilken løsning gjelder det?
 
 <!--
-  Sett en x i type pakke det gjelder:
+  Sett en x i type løsning det gjelder:
 - [x] type
 -->
 
@@ -19,9 +18,9 @@ assignees: ''
 - [ ] `Ikoner`
 - [ ] `Annet`
 
-## Beskriv feilen/problemet
+## Hva er feilen/problemet?
 
-<!-- 
+<!--
 > Beskriv hva slags problem(er) som oppstår
 
 > Hva forventet du skulle oppstå?
@@ -31,7 +30,7 @@ assignees: ''
 
 (skriv her.)
 
-## Steg for å reprodusere problemet
+## Steg for å reprodusere problemet (valgfri)
 
 <!--
 1. Steg en
@@ -41,11 +40,11 @@ assignees: ''
 
 (skriv her.)
 
-## Eksempel/Tilleggsinformasjon
+## Eksempel/Tilleggsinformasjon (valgfri)
 
 <!--
 Screenshots eller kodesnippets
-Legg gjerne ved ekstrainfo som nettleser, desktop/mobil etc
+Legg gjerne ved ekstrainfo som nettleser eller desktop/mobil hvis det er relevant.
 -->
 
 ```

.github/workflows/build-publish.yml

@@ -78,13 +78,13 @@ jobs:
 
       - name: Update changed packages with PATCH
         if: "contains(github.event.head_commit.message, '[fix]')"
-        run: yarn lerna version patch --include-merged-tags --yes
+        run: yarn lerna version patch --force-publish --include-merged-tags --yes
       - name: Update changed packages with MINOR
         if: "contains(github.event.head_commit.message, '[feature]')"
-        run: yarn lerna version minor --include-merged-tags --yes
+        run: yarn lerna version minor --force-publish --include-merged-tags --yes
       - name: Update changed packages with MAJOR
         if: "contains(github.event.head_commit.message, '[breaking]')"
-        run: yarn lerna version major --include-merged-tags --yes
+        run: yarn lerna version major --force-publish --include-merged-tags --yes
       - name: Publish to NPM registry
         run: yarn lerna publish --no-verify-access from-package --yes
 

.github/workflows/chromatic.yml

@@ -2,9 +2,12 @@ name: Chromatic
 
 on:
   push:
-    branches: [master]
+    branches:
+      - master
   pull_request:
-    branches: [master]
+    branches:
+      - master
+      - big-one-oh
 
 jobs:
   chromatic-pr:

.storybook/deprecated.stories.mdx

@@ -1,12 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-
-<Meta title="ds-react(deprecated)/intro" />
-
-# Utdaterte pakker
-
-På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
-
-- PageHeader -> @navikt/ds-react-navno
-- MicroCard -> @navikt/ds-react-navno
-
-- StepIndicator -> Horisontal `<Stepper />`

.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
     };
     return config;
   },
+  staticDirs: ["./public"],
   devServer: {
     stats: "errors-only",
   },
@@ -18,6 +19,7 @@ module.exports = {
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
+    "@whitespace/storybook-addon-html",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/manager.js

@@ -1,6 +1,12 @@
 import { addons } from "@storybook/addons";
 import NavTheme from "./theme.js";
+/* import logoUrl from "./public/logo.svg"; */
 
 addons.setConfig({
   theme: NavTheme,
 });
+
+/* const link = document.createElement("link");
+link.setAttribute("rel", "shortcut icon");
+link.setAttribute("href", logoUrl);
+document.head.appendChild(link); */

.storybook/preview.js

@@ -7,10 +7,47 @@ export const parameters = {
   options: {
     storySort: {
       method: "",
-      order: ["ds-icons", "ds-react", ["Default"]],
+      order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
       locales: "",
     },
   },
   viewMode: "docs",
   layout: "centered",
+  backgrounds: {
+    default: "Canvas",
+    values: [
+      {
+        name: "Canvas",
+        value: "#ffffff",
+      },
+      {
+        name: "Darkmode",
+        value: "#262626",
+      },
+    ],
+  },
 };
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "light",
+    toolbar: {
+      icon: "circlehollow",
+      items: [
+        { value: "light", icon: "circlehollow", title: "light" },
+        { value: "dark", icon: "circle", title: "dark" },
+      ],
+      showName: true,
+    },
+  },
+};
+
+export const withTheme = (StoryFn, context) => (
+  <div data-theme={context.parameters.theme || context.globals.theme}>
+    <StoryFn />
+  </div>
+);
+
+export const decorators = [withTheme];

.storybook/public/logo.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="44"
+  height="44"
+  fill="none"
+  viewBox="0 0 44 44"
+>
+  <path
+    fill="rgba(153, 196, 221, 1)"
+    fill-rule="evenodd"
+    d="M9.07 3.03A10.33 10.33 0 0 1 16.37 0h17.3C39.37 0 44 4.62 44 10.33v17.3c0 2.73-1.09 5.36-3.03 7.3l-6.04 6.04a10.33 10.33 0 0 1-7.3 3.03h-17.3C4.63 44 0 39.38 0 33.67v-17.3c0-2.73 1.09-5.36 3.03-7.3l6.04-6.04Z"
+    clip-rule="evenodd"
+  ></path>
+  <path
+    fill="rgba(0, 36, 58, 1)"
+    fill-rule="evenodd"
+    d="M12.96 6.92a4.82 4.82 0 0 1 3.42-1.42h17.29a4.83 4.83 0 0 1 4.83 4.83v17.29a4.8 4.8 0 0 1-1.42 3.42l-.37.37-6.65 6.65a1.5 1.5 0 1 1-2.12-2.12l6.64-6.64v-.01c.72-.72.72-1.87 0-2.59L17.3 9.42a1.83 1.83 0 0 0-2.6 0l-6.64 6.64a1.5 1.5 0 1 1-2.12-2.12l7.02-7.02Zm22.54 3.41v13.05L20.62 8.5h13.05c1 0 1.83.82 1.83 1.83ZM20.06 26.06a1.5 1.5 0 0 0-2.12-2.12l-11 11a1.5 1.5 0 1 0 2.12 2.12l11-11Z"
+    clip-rule="evenodd"
+  ></path>
+</svg>

.storybook/theme.js

@@ -1,6 +1,22 @@
 import { create } from "@storybook/theming";
+/* import logoUrl from "./public/logo.svg"; */
 
 export default create({
+  /* brandImage: process.env.NODE_ENV === "production" ? logoUrl : "/logo.svg", */
   base: "light",
+  // Typography
+  fontBase: '"Source Sans Pro", sans-serif',
+  fontCode: "monospace",
+
+  // Text colors
+  textColor: "#262626",
+  textInverseColor: "rgba(255,255,255,0.9)",
+
+  colorSecondary: "rgba(0, 36, 58, 1)",
+  colorPrimary: "rgba(153, 196, 221, 1)",
+
+  barTextColor: "rgba(0, 91, 130, 1)",
+  barSelectedColor: "rgba(0, 36, 58, 1)",
+
   brandTitle: "NAV Designsystem",
 });

.storybook/velkommen.stories.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="Intro/Velkommen" />
+
+# NAV designsystem
+
+- [Dokumentasjon](https://aksel.nav.no/designsystem)
+- [Komponenter](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+
+## Kom i gang
+
+### Kjernepakke
+
+```bash
+yarn add @navikt/ds-react @navikt/ds-css @navikt/ds-icons
+```
+
+### Pakke for interne-flater
+
+```bash
+yarn add @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+### Ikonpakke
+
+```bash
+yarn add @navikt/ds-icons
+```
+
+### Bruk
+
+```jsx
+import { Heading } from "@navikt/ds-react";
+
+<Heading level="1" size="xlarge">
+  Sidetitel
+</Heading>;
+```
+
+## Bidra
+
+Hjelp oss med å forbedre designsystemet med feedback eller kode-hjelp
+
+- [Kode](https://github.com/navikt/Designsystemet/tree/master/%40navikt)

@navikt/codemod/.gitignore

@@ -0,0 +1,6 @@
+*.d.ts
+*.js
+bin/*.js
+*.js.map
+!transforms/**/__testfixtures__/**/*.js
+!jest.config.js

@navikt/codemod/README.md

@@ -0,0 +1,106 @@
+# NAV designsystem Codemods
+
+Collection of Codemods for easier migration between breaking changes.
+
+Highly inspired by both MUI and NEXT
+
+- [NEXT](https://nextjs.org/docs/advanced-features/codemods)
+- [MUI](https://github.com/mui/material-ui/tree/master/packages/mui-codemod)
+
+## Usage
+
+Codemod transformations runs code-transformations programmatically in your project. This helps when migrating lots of breaking changes without spending hours doing it manually.
+
+NOTE: This codemod only supports fairly "default" usage of components. Components used with dynamic imports, styled-components, non-default imports (example `import * as DS from "@navikt/ds-react"` or `from "@navikt/ds-react/cjs"`) will not work as expected.
+
+```javascript
+npx @navikt/ds-codemod <transform> <path>
+```
+
+transform - name of transform, see available transforms below.
+path - files or directory to transform
+--dry Do a dry-run, no code will be edited
+--print Prints the changed output for comparison
+
+## Beta (0.19.x) -> v1.0.0
+
+`npx @navikt/ds-codemod v1.0.0/preset src`
+
+### preset
+
+Combines all avaliable codemods for migrating from beta -> v1.0.0. This transform should only be ran once.
+
+Includes these transforms
+
+- v1.0.0/tabs
+- v1.0.0/chat
+- v1.0.0/pagination
+
+### tabs
+
+`npx @navikt/ds-codemod v1.0.0/tabs src`
+
+```diff
+<Tabs
+  defaultValue="logg"
+  onChange={(x) => console.log(x)}
+-  loop
++  iconPosition="left"
+>
+  <Tabs.List
+-    loop
+  >
+    <Tabs.Tab
+      value="logg"
+      label="logg"
+-     iconPosition="left"
+    />
+  </Tabs.List>
+  <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+</Tabs>
+```
+
+### chat
+
+`npx @navikt/ds-codemodmod v1.0.0/chat src`
+
+```diff
+-<SpeechBubble
++<Chat
+-  illustration={<Illustration />}
+-  topText="Ola Normann 01.01.21 14:00"
+-  illustrationBgColor="blue"
++  avatar={<Illustration />}
++  name="Ola Normann 01.01.21 14:00"
++  avatarBgColor="blue"
+  backgroundColor="red"
+>
+- <SpeechBubble.Bubble>
++ <Chat.Bubble>
+    Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+- </SpeechBubble.Bubble>
++ </Chat.Bubble>
+-</SpeechBubble>
++</Chat>
+```
+
+### pagination
+
+`npx @navikt/ds-codemod v1.0.0/pagination src`
+
+This codemod should only be ran once, since the size-scale will keep decreasing for each subsequent iteration.
+
+```diff
+-<Pagiation />
++<Pagiation size="small"/>
+
+-<Pagiation size="medium"/>
++<Pagiation size="small"/>
+
+-<Pagiation size="small"/>
++<Pagiation size="xsmall"/>
+```
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

@navikt/codemod/bin/cli.ts

@@ -0,0 +1,203 @@
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/cli.js
+// @next/codemod optional-name-of-transform optional/path/to/src [...options]
+
+import globby from "globby";
+import inquirer from "inquirer";
+import meow from "meow";
+import path from "path";
+import execa from "execa";
+import chalk from "chalk";
+import isGitClean from "is-git-clean";
+
+export const jscodeshiftExecutable = require.resolve(".bin/jscodeshift");
+export const transformerDirectory = path.join(__dirname, "../", "transforms");
+
+export function checkGitStatus(force) {
+  let clean = false;
+  let errorMessage = "Unable to determine if git directory is clean";
+  try {
+    clean = isGitClean.sync(process.cwd());
+    errorMessage = "Git directory is not clean";
+  } catch (err) {
+    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+      clean = true;
+    }
+  }
+
+  if (!clean) {
+    if (force) {
+      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
+    } else {
+      console.log("Thank you for using @navikt/ds-codemod");
+      console.log(
+        chalk.yellow(
+          "\nBut before we continue, please stash or commit your git changes."
+        )
+      );
+      console.log(
+        "\nYou may use the --force flag to override this safety check."
+      );
+      process.exit(1);
+    }
+  }
+}
+
+export function runTransform({ files, flags, transformer }) {
+  const transformerPath = path.join(transformerDirectory, `${transformer}.js`);
+
+  let args = [];
+
+  const { dry, print, runInBand } = flags;
+
+  if (dry) {
+    args.push("--dry");
+  }
+  if (print) {
+    args.push("--print");
+  }
+  if (runInBand) {
+    args.push("--run-in-band");
+  }
+
+  args.push("--verbose=2");
+
+  args.push("--ignore-pattern=**/node_modules/**");
+
+  args.push("--extensions=tsx,ts,jsx,js");
+  args.push("--parser=tsx");
+
+  args = args.concat(["--transform", transformerPath]);
+
+  if (flags.jscodeshift) {
+    args = args.concat(flags.jscodeshift);
+  }
+
+  args = args.concat(files);
+
+  console.log(`Executing command: jscodeshift ${args.join(" ")}`);
+
+  const result = execa.sync(jscodeshiftExecutable, args, {
+    stdio: "inherit",
+    stripFinalNewline: false,
+  });
+
+  if (result.failed) {
+    throw new Error(`jscodeshift exited with code ${result.exitCode}`);
+  }
+}
+
+const TRANSFORMER_INQUIRER_CHOICES = [
+  {
+    name: "v1.0.0/preset: Runs all codemods for beta to v1 migration",
+    value: "v1.0.0/preset",
+  },
+  {
+    name: "v1.0.0/pagination: Fixes breaking API-changes from <Pagination /> component",
+    value: "v1.0.0/pagination",
+  },
+  {
+    name: "v1.0.0/tabs: Fixes breaking API-changes from <Tabs /> component",
+    value: "v1.0.0/tabs",
+  },
+  {
+    name: "v1.0.0/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
+    value: "v1.0.0/chat",
+  },
+];
+
+function expandFilePathsIfNeeded(filesBeforeExpansion) {
+  const shouldExpandFiles = filesBeforeExpansion.some((file) =>
+    file.includes("*")
+  );
+  return shouldExpandFiles
+    ? globby.sync(filesBeforeExpansion)
+    : filesBeforeExpansion;
+}
+
+export function run() {
+  const cli = meow({
+    description: "Codemods for updating @navikt/ds-* packages",
+    help: `
+    Usage
+      $ npx @navikt/codemod <transform> <path> <...options>
+        transform    One of the choices from <link-here>
+        path         Files or directory to transform. Can be a glob like pages/**.js
+    Options
+      --force            Bypass Git safety checks and forcibly run codemods
+      --dry              Dry run (no changes are made to files)
+      --print            Print transformed files to your terminal
+      --jscodeshift  (Advanced) Pass options directly to jscodeshift
+    `,
+    flags: {
+      boolean: ["force", "dry", "print", "help"],
+      string: ["_"],
+      alias: {
+        h: "help",
+      },
+    },
+  } as meow.Options<meow.AnyFlags>);
+
+  if (!cli.flags.dry) {
+    checkGitStatus(cli.flags.force);
+  }
+
+  if (
+    cli.input[0] &&
+    !TRANSFORMER_INQUIRER_CHOICES.find((x) => x.value === cli.input[0])
+  ) {
+    console.error("Invalid transform choice, pick one of:");
+    console.error(
+      TRANSFORMER_INQUIRER_CHOICES.map((x) => "- " + x.value).join("\n")
+    );
+    process.exit(1);
+  }
+
+  inquirer
+    .prompt([
+      {
+        type: "input",
+        name: "files",
+        message: "On which files or directory should the codemods be applied?",
+        when: !cli.input[1],
+        default: ".",
+        // validate: () =>
+        filter: (files) => files.trim(),
+      },
+      {
+        type: "list",
+        name: "transformer",
+        message: "Which transform would you like to apply?",
+        when: !cli.input[0],
+        pageSize: TRANSFORMER_INQUIRER_CHOICES.length,
+        choices: TRANSFORMER_INQUIRER_CHOICES,
+      },
+    ])
+    .then((answers) => {
+      const { files, transformer } = answers;
+
+      const filesBeforeExpansion = cli.input[1] || files;
+      const filesExpanded = expandFilePathsIfNeeded([filesBeforeExpansion]);
+
+      const selectedTransformer = cli.input[0] || transformer;
+
+      if (!filesExpanded.length) {
+        console.log(
+          `No files found matching ${filesBeforeExpansion.join(" ")}`
+        );
+        return null;
+      }
+
+      return runTransform({
+        files: filesExpanded,
+        flags: cli.flags,
+        transformer: selectedTransformer,
+      });
+    });
+}

@navikt/codemod/bin/ds-codemod.ts

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+// Based on https://github.com/reactjs/react-codemod/blob/dd8671c9a470a2c342b221ec903c574cf31e9f57/bin/react-codemod.js
+// next-codemod optional-name-of-transform optional/path/to/src [...options]
+
+require("./cli").run();

@navikt/codemod/jest.config.js

@@ -0,0 +1,8 @@
+const customJestConfig = {
+  testMatch: ["**/__tests__/**/*.js"],
+  verbose: true,
+  rootDir: "./transforms",
+};
+
+// createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async
+module.exports = customJestConfig;

@navikt/codemod/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@navikt/ds-codemod",
+  "version": "1.2.2",
+  "description": "NAV designsystem codemods",
+  "author": "NAV Designsystem team",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "codemod",
+    "jscodeshift"
+  ],
+  "files": [
+    "transforms/**/*.js",
+    "bin/*.js",
+    "lib/**/*.js",
+    "lib/cra-to-next/gitignore"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc --watch -p tsconfig.json",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "bin": "./bin/ds-codemod.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/Designsystemet.git",
+    "directory": "@navikt/codemod"
+  },
+  "homepage": "https://github.com/navikt/Designsystemet/tree/master/@navikt/codemod",
+  "dependencies": {
+    "chalk": "4.1.0",
+    "cheerio": "1.0.0-rc.9",
+    "execa": "4.0.3",
+    "globby": "11.0.1",
+    "inquirer": "7.3.3",
+    "is-git-clean": "1.1.0",
+    "jest": "^27.5.0",
+    "jscodeshift": "0.13.1",
+    "jscodeshift-add-imports": "1.0.10",
+    "meow": "7.0.1"
+  },
+  "devDependencies": {
+    "@types/jscodeshift": "0.11.5",
+    "@types/react": "^18.0.0",
+    "typescript": "^4.7.2"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

@navikt/codemod/transforms/__testfixtures__/rename-prop/rename.input.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble illustration={<Illustration />}>
+      <div />
+    </SpeechBubble>
+  );
+};

@navikt/codemod/transforms/__testfixtures__/rename-prop/rename.output.js

@@ -0,0 +1,8 @@
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble avatar={<Illustration />}>
+      <div />
+    </SpeechBubble>
+  );
+};

@navikt/codemod/transforms/__tests__/rename-prop.ts

@@ -0,0 +1,24 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = [
+  {
+    fixture: "rename",
+    options: {
+      component: "SpeechBubble",
+      from: "illustration",
+      to: "avatar",
+    },
+  },
+];
+
+for (const test of tests) {
+  defineTest(
+    __dirname,
+    "rename-prop",
+    test.options,
+    `rename-prop/${test.fixture}`
+  );
+}

@navikt/codemod/transforms/rename-prop.ts

@@ -0,0 +1,18 @@
+import renameProps from "./utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const printOptions = options.printOptions;
+
+  return renameProps({
+    root,
+    componentName: options.component,
+    props: { [options.from]: options.to },
+  }).toSource(printOptions);
+}

@navikt/codemod/transforms/utils/rename-props.ts

@@ -0,0 +1,12 @@
+export default function renameProps({ root, componentName, props }) {
+  return root.findJSXElements(componentName).forEach((path) => {
+    path.node.openingElement.attributes.forEach((node) => {
+      if (
+        node.type === "JSXAttribute" &&
+        Object.keys(props).includes(node.name.name)
+      ) {
+        node.name.name = props[node.name.name];
+      }
+    });
+  });
+}

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.input.js

@@ -0,0 +1,26 @@
+import { SpeechBubble, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <SpeechBubble
+      illustration={<Illustration />}
+      topText="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      illustrationBgColor="blue"
+      {...testProps}
+    >
+      <SpeechBubble.Bubble {...testProps}>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </SpeechBubble.Bubble>
+      <SpeechBubble.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </SpeechBubble.Bubble>
+      <SpeechBubble.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </SpeechBubble.Bubble>
+    </SpeechBubble>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/complete.output.js

@@ -0,0 +1,26 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+      {...testProps}
+    >
+      <Chat.Bubble {...testProps}>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/idempotent.input.js

@@ -0,0 +1,25 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/idempotent.output.js

@@ -0,0 +1,25 @@
+import { Chat, Button } from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <Chat
+      avatar={<Illustration />}
+      name="Ola Normann 01.01.21 14:00"
+      backgroundColor="red"
+      avatarBgColor="blue"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+        do.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/props.input.js

@@ -0,0 +1,44 @@
+import { SpeechBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <SpeechBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <SpeechBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </SpeechBubble.Bubble>
+      </SpeechBubble>
+      <SpeechBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <SpeechBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </SpeechBubble.Bubble>
+      </SpeechBubble>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/props.output.js

@@ -0,0 +1,44 @@
+import { Chat, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <Chat
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/renamed.input.js

@@ -0,0 +1,44 @@
+import { SpeechBubble as DsBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <DsBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+      <DsBubble
+        illustration={<Illustration />}
+        topText="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        illustrationBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/chat/renamed.output.js

@@ -0,0 +1,44 @@
+import { Chat as DsBubble, Button } from "@navikt/ds-react";
+/* eslint-disable react/jsx-no-undef */
+export const Page = () => {
+  return (
+    <div>
+      <DsBubble
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+      <DsBubble
+        avatar={<Illustration />}
+        name="Ola Normann 01.01.21 14:00"
+        backgroundColor="red"
+        avatarBgColor="blue"
+      >
+        <DsBubble.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
+          do.
+        </DsBubble.Bubble>
+        <DsBubble.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </DsBubble.Bubble>
+      </DsBubble>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.input.js

@@ -0,0 +1,18 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination
+        size="small"
+        onPageChange={setPage}
+        data-version="v1"
+        {...testProps}
+      />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+      <Pagination onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/idempotent.output.js

@@ -0,0 +1,18 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination
+        size="small"
+        onPageChange={setPage}
+        data-version="v1"
+        {...testProps}
+      />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/import.input.js

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <DsPagination onPageChange={setPage} />
+      <DsPagination size="medium" onPageChange={setPage} />
+      <DsPagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/import.output.js

@@ -0,0 +1,11 @@
+import { Pagination as DsPagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
+      <DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/size.input.js

@@ -0,0 +1,11 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination onPageChange={setPage} />
+      <Pagination size="medium" onPageChange={setPage} />
+      <Pagination size="small" onPageChange={setPage} />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/pagination/size.output.js

@@ -0,0 +1,11 @@
+import { Pagination, Button } from "@navikt/ds-react";
+
+export const Demo = () => {
+  return (
+    <div>
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="small" onPageChange={setPage} data-version="v1" />
+      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.input.js

@@ -0,0 +1,25 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <div>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)} {...testProps}>
+        <Tabs.List loop={false} {...testProps}>
+          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" {...testProps}/>
+          <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+        <Tabs.List>
+          <Tabs.Tab value="logg" label="logg" />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/complete.output.js

@@ -0,0 +1,30 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <div>
+      <Tabs
+        defaultValue="logg"
+        onChange={(x) => console.log(x)}
+        {...testProps}
+        loop={false}
+        iconPosition={props.left}>
+        <Tabs.List {...testProps}>
+          <Tabs.Tab value="logg" label="logg" {...testProps} />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+        <Tabs.List>
+          <Tabs.Tab value="logg" label="logg" />
+          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+        </Tabs.List>
+        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+      </Tabs>
+    </div>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/idempotent.input.js

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/idempotent.output.js

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/props.input.js

@@ -0,0 +1,15 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
+      <Tabs.List loop>
+        <Tabs.Tab value="logg" iconPosition="left" label="logg" />
+        <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__testfixtures__/tabs/props.output.js

@@ -0,0 +1,19 @@
+import { Tabs } from "@navikt/ds-react";
+
+const TabComp = () => {
+  return (
+    /* prettier-ignore */
+    <Tabs
+      defaultValue="logg"
+      onChange={(x) => console.log(x)}
+      loop
+      iconPosition="left">
+      <Tabs.List>
+        <Tabs.Tab value="logg" label="logg" />
+        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
+      </Tabs.List>
+      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
+      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
+    </Tabs>
+  );
+};

@navikt/codemod/transforms/v1.0.0/__tests__/chat.test.ts

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["props", "complete", "idempotent", "renamed"];
+
+for (const test of tests) {
+  defineTest(__dirname, "chat", null, `chat/${test}`);
+}

@navikt/codemod/transforms/v1.0.0/__tests__/pagination.test.ts

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["size", "import", "idempotent"];
+
+for (const test of tests) {
+  defineTest(__dirname, "pagination", null, `pagination/${test}`);
+}

@navikt/codemod/transforms/v1.0.0/__tests__/tabs.test.ts

@@ -0,0 +1,10 @@
+export {};
+
+jest.autoMockOff();
+const defineTest = require("jscodeshift/dist/testUtils").defineTest;
+
+const tests = ["props", "idempotent", "complete"];
+
+for (const test of tests) {
+  defineTest(__dirname, "tabs", null, `tabs/${test}`);
+}

@navikt/codemod/transforms/v1.0.0/chat.ts

@@ -0,0 +1,68 @@
+import renameProps from "../utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "SpeechBubble";
+
+  const root = j(file.source);
+
+  /* Finds and replaces import from SpeechBubble -> Chat */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "SpeechBubble") {
+          if (x.local.name !== x.imported.name) {
+            localName = x.local.name;
+            x.imported.name = "Chat";
+          } else {
+            x.imported.name = "Chat";
+            x.local.name = "Chat";
+          }
+        }
+      });
+    });
+
+  if (!!j(file.source).findJSXElements(localName)) {
+    renameProps({
+      root,
+      componentName: localName,
+      props: {
+        illustrationBgColor: "avatarBgColor",
+        illustration: "avatar",
+        topText: "name",
+      },
+    });
+
+    /* Find and replace name of all <SpeechBubble />*/
+    const compRoot = root.find(j.JSXElement, {
+      openingElement: { name: { name: localName } },
+    });
+
+    compRoot.forEach((x) => {
+      if (localName !== "SpeechBubble") return;
+      x.node.openingElement.name.name = "Chat";
+      x.node.closingElement.name.name = "Chat";
+    });
+
+    /* Need to handle dot-notations differently */
+    const child = root.find(j.JSXElement);
+
+    child.forEach((x) => {
+      if (
+        x.value.openingElement.name.type === "JSXMemberExpression" &&
+        x.value.openingElement.name.object.name === "SpeechBubble"
+      ) {
+        x.value.openingElement.name.object.name = "Chat";
+        x.value.closingElement.name.object.name = "Chat";
+      }
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/codemod/transforms/v1.0.0/pagination.ts

@@ -0,0 +1,83 @@
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "Pagination";
+
+  const root = j(file.source);
+
+  function addMigrationTag(node) {
+    const attributes = node.openingElement.attributes;
+    const isMigrated = attributes.find(
+      (node) =>
+        node.type === "JSXAttribute" &&
+        node.name.name === "data-version" &&
+        node.value.value === "v1"
+    );
+
+    if (!isMigrated) {
+      attributes.push(
+        j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
+      );
+    }
+  }
+
+  /* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
+  function addExplicitStandardProp(node) {
+    const attributes = node.openingElement.attributes;
+    const variant = attributes.find(
+      (node) => node.type === "JSXAttribute" && node.name.name === "size"
+    );
+
+    if (!variant) {
+      attributes.unshift(
+        j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
+      );
+      addMigrationTag(node);
+    }
+  }
+
+  /* Finds locally used name for Pagination */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (
+          x.imported.name === "Pagination" &&
+          x.local.name !== x.imported.name
+        ) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  if (!!j(file.source).findJSXElements(localName)) {
+    root.findJSXElements(`${localName}`).forEach((parent) => {
+      const skip = !!parent.value.openingElement?.attributes.find(
+        (x) => x.name.name === "data-version" && x.value.value === "v1"
+      );
+
+      parent.value.openingElement?.attributes.forEach((x, index) => {
+        let didUpdate = false;
+        if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
+          /* addExplicitStandardProp */
+          if (x.value.value === "medium") {
+            x.value = j.literal("small");
+            didUpdate = true;
+          } else if (x.value.value === "small") {
+            x.value = j.literal("xsmall");
+            didUpdate = true;
+          }
+
+          didUpdate && addMigrationTag(parent.value);
+        }
+      });
+      addExplicitStandardProp(parent.value);
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/codemod/transforms/v1.0.0/preset.ts

@@ -0,0 +1,15 @@
+import transformTabs from "./tabs";
+import transformChat from "./chat";
+import transformPagination from "./pagination";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  file.source = transformTabs(file, api, options);
+  file.source = transformChat(file, api, options);
+  file.source = transformPagination(file, api, options);
+
+  return file.source;
+}

@navikt/codemod/transforms/v1.0.0/tabs.ts

@@ -0,0 +1,83 @@
+import renameProps from "../utils/rename-props";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  let localName = "Tabs";
+  let iconPositionProp = null;
+
+  const root = j(file.source);
+
+  /* Finds used name for Tabs component */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "Tabs" && x.local.name !== x.imported.name) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  if (!!j(file.source).findJSXElements(localName)) {
+    renameProps({
+      root,
+      componentName: `${localName}.List`,
+      props: {
+        loop: "null",
+      },
+    });
+
+    root.findJSXElements(`${localName}`).forEach((parent) => {
+      parent.value.children.forEach((el) => {
+        const openingEl = el.openingElement;
+        if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
+          if (
+            openingEl.name.object.name === localName &&
+            openingEl.name.property.name === "List"
+          ) {
+            /* Move loop-prop */
+            el.openingElement.attributes.forEach((x, index) => {
+              if (x.name?.name === "loop" && x.type === "JSXAttribute") {
+                parent.value.openingElement.attributes.push(x);
+                delete el.openingElement.attributes[index];
+              }
+            });
+
+            /* Find and move iconPosition-prop to <Tabs/> */
+            el.children.forEach((tab) => {
+              const tabEl = tab.openingElement;
+              if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
+                if (
+                  tabEl.name.object.name === localName &&
+                  tabEl.name.property.name === "Tab"
+                ) {
+                  tabEl?.attributes.forEach((x, index) => {
+                    if (
+                      x.name?.name === "iconPosition" &&
+                      x.type === "JSXAttribute"
+                    ) {
+                      if (!iconPositionProp) {
+                        iconPositionProp = x;
+                      }
+                      delete tabEl.attributes[index];
+                    }
+                  });
+                }
+              }
+            });
+          }
+        }
+      });
+      iconPositionProp &&
+        parent.value.openingElement.attributes.push(iconPositionProp);
+      iconPositionProp = null;
+    });
+  }
+
+  return root.toSource(options.printOptions);
+}

@navikt/codemod/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "sourceMap": false,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "downlevelIteration": true,
+    "preserveWatchOutput": true,
+    "declaration": false,
+    "types": ["@types/jscodeshift", "node", "jest"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "jest.config.js"]
+}

@navikt/core/css/README.md

@@ -0,0 +1,50 @@
+# NAV designsystem styling
+
+CSS-package containing design for @navikt/ds-react and more.
+
+- All our tokens (Colors, border, shadows etc)
+- Component-styling for `@navikt/ds-react` packages
+- Normalize.css v8
+- Fonts
+
+## Installation
+
+Install `@navikt/ds-css` with yarn
+
+```bash
+  yarn add @navikt/ds-css
+```
+
+Install `@navikt/ds-css` with npm
+
+```bash
+  npm install @navikt/ds-css
+```
+
+## Usage
+
+You can import these styles once to make it accessible in your entire project. Typically you will add the following line to your root .js or .ts files.
+
+```javascript
+import "@navikt/ds-css";
+
+function App() {
+  return <Component />;
+}
+```
+
+But you can also import it in a .css-file like this
+
+```css
+@import "@navikt/ds-css";
+```
+
+## Learn more
+
+- [Designsystem documentation](https://aksel.nav.no/designsystem)
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+- [ds-react README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/react/README.md)
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

@navikt/core/css/accordion.css

@@ -1,15 +1,9 @@
 :root {
-  --navds-accordion-color-text: var(--navds-semantic-color-text);
-  --navds-accordion-color-background: var(
-    ---navds-semantic-color-component-background-light
-  );
-  --navds-accordion-color-text-hover: var(--navds-semantic-color-link);
-  --navds-accordion-color-border: var(--navds-semantic-color-border-muted);
-  --navds-accordion-color-border-hover: var(
+  --navds-accordion-color-text-hover: var(
     --navds-semantic-color-interaction-primary
   );
-  --navds-accordion-color-text-open: var(--navds-semantic-color-text);
-  --navds-accordion-color-text-open-hover: var(
+  --navds-accordion-color-border: var(--navds-semantic-color-border);
+  --navds-accordion-color-border-hover: var(
     --navds-semantic-color-interaction-primary
   );
   --navds-accordion-color-background-open: var(
@@ -17,14 +11,6 @@
   );
 }
 
-.navds-accordion .ReactCollapse--collapse {
-  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.navds-accordion {
-  background: var(--navds-accordion-color-background);
-}
-
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -33,9 +19,9 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  gap: var(--navds-spacing-4);
-  padding: var(--navds-spacing-4) var(--navds-spacing-3);
+  align-items: flex-start;
+  gap: var(--navds-spacing-2);
+  padding: 14px var(--navds-spacing-3) var(--navds-spacing-3);
   margin: 0;
   text-align: left;
   background: transparent;
@@ -54,20 +40,18 @@
   border-color: var(--navds-accordion-color-border-hover);
 }
 
-.navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--navds-accordion-color-background-open);
-  color: var(--navds-accordion-color-text-open);
-  border-color: transparent;
+.navds-accordion__header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.navds-accordion__item--open > .navds-accordion__header:hover {
-  border-color: transparent;
-  color: var(--navds-accordion-color-text-open-hover);
+.navds-accordion__item--open > .navds-accordion__header {
+  background-color: var(--navds-accordion-color-background-open);
+  border-color: var(--navds-accordion-color-background-open);
 }
 
 .navds-accordion__content {
-  color: var(--navds-accordion-color-text);
-  padding: var(--navds-spacing-5) var(--navds-spacing-3) var(--navds-spacing-10);
+  padding: var(--navds-spacing-3) var(--navds-spacing-3) 18px;
   border-bottom: 2px solid var(--navds-accordion-color-border);
 }
 
@@ -79,12 +63,12 @@
 }
 
 .navds-accordion__expand-icon {
-  width: 1.5rem;
-  height: 1.5rem;
+  font-size: 1.5rem;
+  height: 1.75rem;
   flex-shrink: 0;
 }
 
-.navds-accordion__expand-icon--flip {
+.navds-accordion__item--open .navds-accordion__expand-icon {
   transform: rotateZ(180deg);
 }
 

@navikt/core/css/alert.css

@@ -33,19 +33,13 @@
 }
 
 .navds-alert--small {
-  padding: var(--navds-spacing-2);
-  gap: var(--navds-spacing-2);
+  padding: var(--navds-spacing-2) var(--navds-spacing-4);
 }
 
 .navds-alert--full-width {
   border-radius: 0;
 }
 
-.navds-alert--full-width.navds-alert--small {
-  padding-right: var(--navds-spacing-4);
-  padding-left: var(--navds-spacing-4);
-}
-
 .navds-alert > .navds-alert__icon {
   flex-shrink: 0;
   font-size: 1.5rem;
@@ -80,6 +74,6 @@
 
 .navds-alert--inline {
   background-color: transparent;
-  border-color: transparent;
+  border: none;
   padding: 0;
 }

@navikt/core/css/baseline/baseline.css

@@ -43,9 +43,13 @@ a {
   color: var(--navds-semantic-color-link);
 }
 
+button {
+  color: inherit;
+}
+
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *,
+  *:not(.navds-loader *):not(.navds-loader),
   ::before,
   ::after {
     animation-delay: -1ms !important;

@navikt/core/css/button.css

@@ -94,11 +94,9 @@
   );
 
   /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-global-color-blue-200);
-  --navds-button-color-secondary-text-hover: var(--navds-global-color-blue-200);
-  --navds-button-color-secondary-text-active: var(
-    --navds-global-color-blue-200
-  );
+  --navds-button-color-secondary-text: var(--navds-global-color-white);
+  --navds-button-color-secondary-text-hover: var(--navds-global-color-white);
+  --navds-button-color-secondary-text-active: var(--navds-global-color-white);
   --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
   --navds-button-color-secondary-border-focus-active-hover: var(
     --navds-semantic-color-text
@@ -107,10 +105,10 @@
     --navds-semantic-color-component-background-inverted
   );
   --navds-button-color-secondary-background-hover: var(
-    --navds-global-color-blue-900
+    --navds-global-color-gray-800
   );
   --navds-button-color-secondary-background-active: var(
-    --navds-global-color-blue-800
+    --navds-global-color-gray-700
   );
 }
 
@@ -118,24 +116,35 @@
   display: inline-flex;
   cursor: pointer;
   margin: 0;
-  text-align: center;
   text-decoration: none;
   border: none;
   background: none;
   border-radius: var(--navds-border-radius-small);
-  min-width: 48px;
-  padding: var(--navds-spacing-3);
+  padding: var(--navds-spacing-3) var(--navds-spacing-5);
+  align-items: center;
+  justify-content: center;
+  gap: var(--navds-spacing-2);
 }
 
 .navds-button--small {
-  padding-top: 0.375rem;
-  padding-bottom: 0.375rem;
-  min-width: 32px;
+  padding: 0.375rem var(--navds-spacing-3);
 }
 
 .navds-button--xsmall {
-  padding: 0.125rem 0.375rem;
-  min-width: 24px;
+  padding: 0.125rem var(--navds-spacing-2);
+  gap: var(--navds-spacing-1);
+}
+
+.navds-button--icon-only {
+  padding: var(--navds-spacing-3);
+}
+
+.navds-button--small.navds-button--icon-only {
+  padding: 0.375rem;
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  padding: var(--navds-spacing-1);
 }
 
 .navds-button:focus {
@@ -143,22 +152,37 @@
   box-shadow: var(--navds-shadow-focus);
 }
 
-.navds-button__inner {
-  margin: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--navds-spacing-2);
-}
+.navds-button__icon {
+  --navds-button-icon-adjustment: -4px;
 
-.navds-button svg {
   font-size: 1.5rem;
+  display: flex;
 }
 
-.navds-button--small svg,
-.navds-button--xsmall svg {
+.navds-button__icon:first-child {
+  margin-left: var(--navds-button-icon-adjustment);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--navds-button-icon-adjustment);
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
+}
+
+.navds-button--small .navds-button__icon {
+  --navds-button-icon-adjustment: -2px;
+
   font-size: 1.25rem;
 }
 
+.navds-button--xsmall .navds-button__icon {
+  --navds-button-icon-adjustment: -2px;
+
+  font-size: 1rem;
+}
+
 /*************************
  * .navds-button--primary *
  *************************/

@navikt/core/css/card.css

@@ -1,55 +0,0 @@
-:root {
-  --navds-card-micro-color-text: var(--navds-semantic-color-text);
-  --navds-card-micro-color-background: var(--navds-global-color-orange-200);
-  --navds-card-micro-color-border: transparent;
-  --navds-card-micro-color-text-hover: var(--navds-semantic-color-link);
-  --navds-card-micro-color-background-hover: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-card-micro-color-border-hover: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-card-micro-color-text-focus: var(--navds-semantic-color-link);
-  --navds-card-micro-color-background-focus: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-card-micro-color-shadow-focus: var(--navds-semantic-color-focus);
-  --navds-card-micro-color-background-active: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-card-micro-color-text-active: var(
-    --navds-semantic-color-text-inverted
-  );
-}
-
-/*
-  MicroCard
-*/
-
-.navds-card__micro {
-  border-radius: var(--navds-border-radius-full);
-  color: var(--navds-card-micro-color-text);
-  display: inline-flex;
-  padding: var(--navds-spacing-1) var(--navds-spacing-2);
-  text-decoration: none;
-  background-color: var(--navds-card-micro-color-background);
-  border: 1px solid var(--navds-card-micro-color-border);
-}
-
-.navds-card__micro:hover {
-  background-color: var(--navds-card-micro-color-background-hover);
-  border-color: var(--navds-card-micro-color-border-hover);
-  color: var(--navds-card-micro-color-text-hover);
-}
-
-.navds-card__micro:focus {
-  background-color: var(--navds-card-micro-color-background-focus);
-  color: var(--navds-card-micro-color-text-focus);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--navds-card-micro-color-shadow-focus);
-}
-
-.navds-card__micro:active {
-  background-color: var(--navds-card-micro-color-background-active);
-  color: var(--navds-card-micro-color-text-active);
-}

@navikt/core/css/chat.css

@@ -0,0 +1,90 @@
+:root {
+  --navds-chat-color-background: var(--navds-semantic-color-canvas-background);
+  --navds-chat-color-avatar: var(--navds-semantic-color-text);
+  --navds-chat-color-avatar-background: var(
+    --navds-semantic-color-canvas-background
+  );
+}
+
+.navds-chat {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--navds-spacing-4);
+  padding-right: var(--navds-spacing-16);
+}
+
+.navds-chat--right {
+  flex-direction: row-reverse;
+  padding-right: 0;
+  padding-left: var(--navds-spacing-16);
+}
+
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-3);
+}
+
+.navds-chat--right .navds-chat__bubble-wrapper {
+  align-items: flex-end;
+}
+
+.navds-chat__avatar {
+  align-items: center;
+  background: var(--navds-chat-color-avatar-background);
+  color: var(--navds-chat-color-avatar);
+  border-radius: var(--navds-border-radius-full);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 3rem;
+  width: 3rem;
+}
+
+.navds-chat__avatar svg {
+  align-self: center;
+  height: 100%;
+  width: 100%;
+}
+
+.navds-chat__bubble {
+  padding: 1rem;
+  box-shadow: var(--navds-shadow-small);
+  width: fit-content;
+  max-width: 37.5rem;
+  background-color: var(--navds-chat-color-background);
+  border-radius: var(--navds-border-radius-xlarge);
+  border-bottom-left-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-chat__bubble:focus {
+  box-shadow: var(--navds-shadow-focus);
+  outline: none;
+}
+
+.navds-chat--right .navds-chat__bubble {
+  border-radius: var(--navds-border-radius-xlarge);
+  border-bottom-right-radius: 2px;
+}
+
+.navds-chat__top-text {
+  color: var(--navds-semantic-color-text-muted);
+  display: flex;
+  gap: var(--navds-spacing-2);
+  align-items: baseline;
+}
+
+.navds-chat--right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat__name {
+  font-weight: var(--navds-font-weight-bold);
+}

@navikt/core/css/form/confirmation-panel.css

@@ -5,6 +5,9 @@
   --navds-confirmation-panel-color-background-checked: var(
     --navds-global-color-green-50
   );
+  --navds-confirmation-panel-color-background-error: var(
+    --navds-global-color-red-50
+  );
   --navds-confirmation-panel-color-border: var(
     --navds-semantic-color-feedback-warning-border
   );
@@ -12,48 +15,26 @@
     --navds-semantic-color-feedback-success-border
   );
   --navds-confirmation-panel-color-border-error: var(
-    --navds-semantic-color-feedback-danger-background
-  );
-  --navds-confirmation-panel-color-background-error: var(
-    --navds-global-color-red-50
-  );
-  --navds-confirmation-panel-color-checkbox-background-checked-hover: var(
-    --navds-global-color-green-700
-  );
-  --navds-confirmation-panel-color-checkbox-border-checked-hover: var(
-    --navds-global-color-green-700
-  );
-  --navds-confirmation-panel-color-checkbox-background-checked: var(
-    --navds-global-color-green-500
-  );
-  --navds-confirmation-panel-color-checkbox-border-checked: var(
-    --navds-semantic-color-feedback-success-border
-  );
-  --navds-confirmation-panel-color-checkbox-label-checked: var(
-    --navds-semantic-color-text
+    --navds-semantic-color-feedback-danger-border
   );
 }
 
 .navds-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-4);
+  gap: var(--navds-spacing-3);
   padding: var(--navds-spacing-4);
   border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-confirmation-panel-color-border);
   background-color: var(--navds-confirmation-panel-color-background);
   transition: background-color linear 100ms;
+  justify-self: stretch;
 }
 
 .navds-confirmation-panel__content {
   max-width: 80ch;
 }
 
-.navds-confirmation-panel--small .navds-confirmation-panel__inner {
-  padding: var(--navds-spacing-3);
-  gap: var(--navds-spacing-2);
-}
-
 .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-checked);
   border-color: var(--navds-confirmation-panel-color-border-checked);
@@ -61,45 +42,5 @@
 
 .navds-confirmation-panel--error .navds-confirmation-panel__inner {
   background-color: var(--navds-confirmation-panel-color-background-error);
-  border: 1px solid transparent;
-}
-
-.navds-confirmation-panel
-  .navds-checkbox__input:hover
-  + .navds-checkbox__label {
-  text-decoration: underline;
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input:hover
-  + .navds-checkbox__label {
-  color: var(--navds-confirmation-panel-color-checkbox-label-checked);
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input
-  + .navds-checkbox__label::before {
-  transition: none;
-  background-color: var(
-    --navds-confirmation-panel-color-checkbox-background-checked
-  );
-  border-color: var(--navds-confirmation-panel-color-checkbox-border-checked);
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input:hover
-  + .navds-checkbox__label::before {
-  background-color: var(
-    --navds-confirmation-panel-color-checkbox-background-checked-hover
-  );
-  border-color: var(
-    --navds-confirmation-panel-color-checkbox-border-checked-hover
-  );
-}
-
-.navds-confirmation-panel--checked
-  .navds-checkbox__input:focus:hover
-  + .navds-checkbox__label::before {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMyAxMCI+ICAgIDxnPiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNCwxMGMtMC40LDAtMC44LTAuMS0xLjEtMC40TDAuNCw3LjFDMC4xLDYuOCwwLDYuNCwwLDZzMC4yLTAuOCwwLjUtMS4xQzEsNC40LDIsNC40LDIuNSw0LjlMNCw2LjRsNi40LTYgICAgQzEwLjgsMC4xLDExLjEsMCwxMS41LDBjMC40LDAsMC44LDAuMiwxLDAuNWMwLjYsMC42LDAuNSwxLjYtMC4xLDIuMXYwTDUsOS42QzQuNyw5LjksNC40LDEwLDQsMTB6IE0xMS44LDEuOUwxMS44LDEuOSAgICBDMTEuOCwxLjksMTEuOCwxLjksMTEuOCwxLjl6IE0xMS4yLDEuMUMxMS4yLDEuMSwxMS4yLDEuMSwxMS4yLDEuMUwxMS4yLDEuMXoiLz4gICAgPC9nPjwvc3ZnPg==);
+  border-color: var(--navds-confirmation-panel-color-border-error);
 }

@navikt/core/css/form/error-message.css

@@ -1,15 +0,0 @@
-:root {
-  --navds-error-message-color-text: var(
-    --navds-semantic-color-feedback-danger-text
-  );
-}
-
-.navds-error-message {
-  color: var(--navds-error-message-color-text);
-  display: flex;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-error-message::before {
-  content: "•";
-}

@navikt/core/css/form/error-summary.css

@@ -9,12 +9,12 @@
 
 .navds-error-summary {
   background-color: var(--navds-error-summary-color-background);
-  padding: var(--navds-spacing-4);
+  padding: var(--navds-spacing-5);
   border: 4px solid var(--navds-error-summary-color-border);
 }
 
 .navds-error-summary--small {
-  padding: var(--navds-spacing-2);
+  padding: var(--navds-spacing-3);
 }
 
 .navds-error-summary:focus {
@@ -23,12 +23,20 @@
 }
 
 .navds-error-summary__list {
-  margin: 1rem 0;
+  margin: var(--navds-spacing-3) 0;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--navds-spacing-3);
+  padding-left: var(--navds-spacing-6);
+  list-style: inherit;
+}
+
+.navds-error-summary__list > * {
+  color: var(--navds-global-color-blue-500);
 }
 
 .navds-error-summary--small > .navds-error-summary__list {
-  margin: 0.5rem 0;
+  margin: var(--navds-spacing-2) 0;
+  gap: var(--navds-spacing-2);
+  padding-left: var(--navds-spacing-5);
 }

@navikt/core/css/form/form.css

@@ -1,10 +1,29 @@
-.navds-form-field > :not(:first-child):not(:empty),
-.navds-form-field > input:not(:first-child) {
-  margin-top: var(--navds-spacing-2);
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--navds-spacing-2);
 }
 
-/* Applied when hideLabel is applied to form-element */
-.navds-form-field > .navds-sr-only + :not(:first-child):not(:empty),
-.navds-form-field > .navds-sr-only + input:not(:first-child) {
-  margin-top: 0;
+.navds-form-field__description {
+  margin-top: -4px;
+}
+
+.navds-form-field .navds-error-message,
+.navds-fieldset .navds-error-message {
+  display: flex;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-form-field .navds-error-message::before,
+.navds-fieldset .navds-error-message::before {
+  content: "•";
+}
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
 }

@navikt/core/css/form/index.css

@@ -5,7 +5,6 @@
 @import "form.css";
 @import "error-summary.css";
 @import "confirmation-panel.css";
-@import "error-message.css";
 @import "radio-checkbox.css";
 @import "select.css";
 @import "switch.css";

@navikt/core/css/form/radio-checkbox.css

@@ -3,9 +3,6 @@
     --navds-semantic-color-component-background-light
   );
   --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
-  --navds-radio-checkbox-color-description: var(
-    --navds-semantic-color-text-muted
-  );
   --navds-radio-checkbox-color-background-hover: var(
     --navds-semantic-color-interaction-primary-hover-subtle
   );
@@ -75,11 +72,6 @@
   gap: var(--navds-spacing-1);
 }
 
-.navds-checkbox__description,
-.navds-radio__description {
-  color: var(--navds-radio-checkbox-color-description);
-}
-
 .navds-checkbox--small > .navds-checkbox__input,
 .navds-radio--small > .navds-radio__input {
   width: 32px;

@navikt/core/css/form/search.css

@@ -6,6 +6,7 @@
     --navds-semantic-color-interaction-primary
   );
   --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
+  --navds-search-color-border-error: var(--navds-global-color-red-500);
 }
 
 [data-theme="dark"] {
@@ -13,6 +14,7 @@
   --navds-search-color-border: var(--navds-semantic-color-border-inverted);
   --navds-search-color-border-hover: var(--navds-global-color-blue-200);
   --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
+  --navds-search-color-border-error: var(--navds-global-color-red-300);
 }
 
 .navds-search {
@@ -150,6 +152,17 @@
   box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
 }
 
+/* Error-handling */
+.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
+  border-color: var(--navds-search-color-border-error);
+  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
+}
+
+.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
+  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error),
+    var(--navds-shadow-focus);
+}
+
 /* Focus layering */
 .navds-search__input:focus,
 .navds-search__button-clear,

@navikt/core/css/form/select.css

@@ -16,7 +16,6 @@
   --navds-select-color-background-disabled: var(
     --navds-semantic-color-component-background-alternate
   );
-  --navds-select-color-text-disabled: var(--navds-semantic-color-text);
 }
 
 .navds-select__input {
@@ -30,7 +29,7 @@
   display: inline-block;
   position: relative;
   padding: 0.5rem;
-  padding-right: 2.5rem;
+  padding-right: 2rem;
 }
 
 .navds-select__input:hover {
@@ -47,6 +46,7 @@
   display: flex;
   width: 100%;
   align-items: center;
+  color: var(--navds-semantic-color-text);
 }
 
 .navds-select__chevron {
@@ -70,13 +70,6 @@
   border-color: var(--navds-select-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-select--disabled {
-  opacity: 0.3;
-}
-
 .navds-select__input:disabled {
   background-color: var(--navds-select-color-background);
   border-color: var(--navds-select-color-border);

@navikt/core/css/form/switch.css

@@ -72,10 +72,6 @@
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
-.navds-switch__description {
-  color: var(--navds-semantic-color-text-muted);
-}
-
 .navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
   padding: 0.75rem 3.25rem 0.75rem 0;
 }

@navikt/core/css/form/text-field.css

@@ -27,7 +27,7 @@
 [data-theme="dark"] {
   --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
   --navds-text-field-color-background: var(
-    --navds-semantic-color-component-background-dark
+    --navds-semantic-color-component-background-inverted
   );
   --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
   --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
@@ -45,6 +45,10 @@
   color: var(--navds-text-field-color-text);
 }
 
+.navds-text-field__input[size] {
+  width: auto;
+}
+
 .navds-text-field__input::placeholder {
   color: var(--navds-text-field-color-placeholder-text);
 }
@@ -54,10 +58,6 @@
   min-height: 32px;
 }
 
-.navds-form-field--small > .navds-text-field__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
-}
-
 .navds-text-field__input:hover {
   border-color: var(--navds-text-field-color-border-hover);
 }
@@ -87,7 +87,6 @@
   border-color: var(--navds-text-field-color-border);
   box-shadow: none;
   cursor: not-allowed;
-  opacity: 0.3;
 }
 
 .navds-text-field__input[readonly] {
@@ -97,11 +96,6 @@
   cursor: not-allowed;
 }
 
-.navds-text-field--disabled > .navds-text-field__label,
-.navds-text-field--disabled > .navds-text-field__description {
-  opacity: 0.3;
-}
-
 /**
   * Removes default search icon
   */

@navikt/core/css/form/textarea.css

@@ -36,9 +36,8 @@
   border: 1px solid var(--navds-textarea-color-border);
   resize: none;
   width: 100%;
-  transition: height 0.1s ease-out;
   display: block;
-  min-height: 3rem;
+  color: var(--navds-text-field-color-text);
 }
 
 .navds-textarea--counter {
@@ -55,8 +54,7 @@
 }
 
 .navds-form-field--small .navds-textarea__input {
-  padding: var(--navds-spacing-1);
-  min-height: 2rem;
+  padding: 6px;
 }
 
 .navds-form-field--small .navds-textarea--counter.navds-textarea__input {
@@ -68,16 +66,20 @@
   color: var(--navds-textarea-color-counter-text);
   font-style: italic;
   position: absolute;
-  text-align: right;
-  left: var(--navds-spacing-3);
-  right: var(--navds-spacing-3);
-  bottom: var(--navds-spacing-2);
+  text-align: left;
+  left: 1px;
+  bottom: 1px;
+  padding: var(--navds-spacing-1) var(--navds-spacing-2);
 }
 
 .navds-textarea__counter--error {
   color: var(--navds-textarea-color-counter-text-error);
 }
 
+.navds-textarea--resize .navds-textarea__input {
+  resize: both;
+}
+
 /**
   Error handling
 */
@@ -87,13 +89,6 @@
   border-color: var(--navds-textarea-color-border-error);
 }
 
-/*
-  Disabled handling
- */
-.navds-textarea--disabled {
-  opacity: 0.3;
-}
-
 .navds-textarea__input:disabled {
   background-color: var(--navds-textarea-color-background);
   border-color: var(--navds-textarea-color-border);

@navikt/core/css/help-text.css

@@ -15,7 +15,6 @@
   --navds-help-text-color-shadow-hover: var(
     --navds-semantic-color-interaction-primary
   );
-  --navds-help-text-color-shadow-focus: var(--navds-semantic-color-focus);
   --navds-help-text-color-popover-background: var(
     --navds-semantic-color-feedback-info-background
   );
@@ -35,27 +34,36 @@
   font-size: 1.5rem;
 }
 
-.navds-help-text__button:hover {
-  color: var(--navds-help-text-color-hover);
-  background: var(--navds-help-text-color-background-hover);
-  box-shadow: 0 0 0 2px var(--navds-help-text-color-shadow-hover);
-}
-
 .navds-help-text__button:focus {
   outline: none;
-  color: var(--navds-help-text-color-focus);
-  background: var(--navds-help-text-color-background-focus);
-  box-shadow: 0 0 0 3px var(--navds-help-text-color-shadow-focus);
+  box-shadow: 0 0 0 1px var(--navds-global-color-white),
+    0 0 0 4px var(--navds-semantic-color-focus);
 }
 
 .navds-help-text__icon {
   border-radius: var(--navds-border-radius-full);
 }
 
-.navds-help-text__popover > .navds-popover__arrow::before {
+.navds-help-text__popover > .navds-popover__arrow {
   background-color: var(--navds-help-text-color-popover-background);
 }
 
 .navds-help-text__popover.navds-popover {
   background-color: var(--navds-help-text-color-popover-background);
+
+  --navds-popover-color-border: rgba(38 38 38 / 0.22);
+}
+
+.navds-help-text__icon--filled {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"])
+  > .navds-help-text__icon {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"])
+  > .navds-help-text__icon--filled {
+  display: inherit;
 }

@navikt/core/css/index.css

@@ -7,12 +7,12 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
+@import "chat.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";
 @import "link.css";
 @import "loader.css";
-@import "menu.css";
 @import "modal.css";
 @import "pagination.css";
 @import "popover.css";
@@ -22,12 +22,6 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "read-more.css";
-@import "speech-bubble.css";
-@import "step-indicator.css";
 @import "stepper.css";
 @import "table.css";
 @import "tabs.css";
-
-/* Navno spesific packages */
-@import "page-header.css";
-@import "card.css";

@navikt/core/css/link-panel.css

@@ -12,7 +12,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--navds-spacing-2);
+  gap: var(--navds-spacing-4);
 }
 
 .navds-link-panel:hover .navds-link-panel__title {
@@ -21,7 +21,7 @@
 }
 
 .navds-link-panel:hover {
-  box-shadow: var(--navds-shadow-card);
+  box-shadow: var(--navds-shadow-medium);
   border-color: var(--navds-link-panel-color-border-hover);
 }
 
@@ -42,5 +42,5 @@
 }
 
 .navds-link-panel__description {
-  margin-top: var(--navds-spacing-2);
+  margin-top: var(--navds-spacing-1);
 }

@navikt/core/css/link.css

@@ -48,10 +48,6 @@
 }
 
 .navds-link svg {
-  color: var(--navds-link-color-icon);
+  color: inherit;
   flex-shrink: 0;
 }
-
-.navds-link:focus svg {
-  color: var(--navds-link-color-icon-focus);
-}

@navikt/core/css/loader.css

@@ -1,16 +1,12 @@
 :root {
   --navds-loader-color-foreground: var(--navds-global-color-gray-400);
-  --navds-loader-color-background: var(
-    --navds-semantic-color-component-background-alternate
-  );
+  --navds-loader-color-background: rgb(0 0 0 / 0.05);
   --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);
   --navds-loader-color-interaction-foreground: var(
-    --navds-semantic-color-interaction-primary
+    --navds-global-color-blue-500
   );
-  --navds-loader-color-inverted-foreground: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-loader-color-inverted-background: rgb(255 255 255 / 0.3);
+  --navds-loader-color-inverted-foreground: var(--navds-global-color-white);
+  --navds-loader-color-inverted-background: rgb(255 255 255 / 0.25);
   --navds-loader-color-transparent-background: transparent;
 }
 
@@ -18,11 +14,14 @@
   width: 1.5rem;
   display: inline-block;
   position: relative;
-  animation: loader-rotate 1.4s linear infinite;
+  animation: loader-rotate 1.8s linear infinite;
+  stroke-width: 6;
+
+  --navds-loader-background-stroke-width: 5.9;
 }
 
 .navds-loader__foreground {
-  animation: loader-dasharray 1.4s ease-in-out infinite;
+  animation: loader-dasharray 1.8s ease-in-out infinite;
   stroke-dasharray: 80px, 200px;
   stroke-dashoffset: 0;
   stroke: var(--navds-loader-color-foreground);
@@ -30,6 +29,7 @@
 
 .navds-loader__background {
   stroke: var(--navds-loader-color-background);
+  stroke-width: var(--navds-loader-background-stroke-width);
 }
 
 .navds-loader--neutral .navds-loader__foreground {
@@ -52,28 +52,53 @@
   stroke: var(--navds-loader-color-transparent-background);
 }
 
+.navds-loader--3xlarge {
+  width: 5.5rem;
+  stroke-width: 5;
+
+  --navds-loader-background-stroke-width: 4.8;
+}
+
 .navds-loader--2xlarge {
   width: 4rem;
+  stroke-width: 6;
+
+  --navds-loader-background-stroke-width: 5.8;
 }
 
 .navds-loader--xlarge {
   width: 2.5rem;
+  stroke-width: 6;
+
+  --navds-loader-background-stroke-width: 5.8;
 }
 
 .navds-loader--large {
   width: 2rem;
+  stroke-width: 7;
+
+  --navds-loader-background-stroke-width: 6.8;
 }
 
 .navds-loader--medium {
   width: 1.5rem;
+  stroke-width: 7;
+
+  --navds-loader-background-stroke-width: 6.8;
 }
 
 .navds-loader--small {
   width: 1.25rem;
+  stroke-width: 8;
+
+  --navds-loader-background-stroke-width: 7.8;
 }
 
 .navds-loader--xsmall {
   width: 1rem;
+  stroke-width: 8;
+
+  --navds-loader-background-stroke-width: 7.8;
 }
 
 @keyframes loader-rotate {

@navikt/core/css/menu.css

@@ -1,102 +0,0 @@
-:root {
-  --navds-menu-color-text: var(--navds-semantic-color-link);
-  --navds-menu-color-text-hover: var(--navds-semantic-color-text);
-  --navds-menu-color-text-focus: var(--navds-semantic-color-text);
-  --navds-menu-color-background-hover: var(--navds-global-color-blue-50);
-  --navds-menu-color-text-active: var(--navds-semantic-color-text);
-  --navds-menu-outline-focus: var(--navds-semantic-color-focus);
-}
-
-.navds-menu__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  padding: 0 0.5rem;
-}
-
-.navds-menu__list--inner {
-  padding: 0;
-}
-
-.navds-menu-collapse__button {
-  cursor: pointer;
-  background-color: transparent;
-  border: none;
-  font: inherit;
-  text-align: inherit;
-  margin: 0;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: var(--navds-font-weight-bold);
-  color: var(--navds-menu-color-text);
-}
-
-.navds-menu-item,
-.navds-menu-collapse__button {
-  font-weight: var(--navds-font-weight-bold);
-  display: flex;
-  padding: var(--navds-spacing-3) var(--navds-spacing-2);
-  text-decoration: none;
-}
-
-.navds-menu-item:focus,
-.navds-menu-collapse__button:focus {
-  outline: 3px solid var(--navds-menu-outline-focus);
-  outline-offset: -3px;
-  color: var(--navds-menu-color-text-focus);
-}
-
-.navds-menu-collapse__button:focus > .navds-menu-collapse__expand-icon {
-  color: var(--navds-menu-color-focus);
-}
-
-.navds-menu-item:hover,
-.navds-menu-collapse__button:hover {
-  background-color: var(--navds-menu-color-background-hover);
-  color: var(--navds-menu-color-text-hover);
-}
-
-.navds-menu-item--active {
-  box-shadow: -0.5rem 0 var(--navds-semantic-color-link);
-  color: var(--navds-menu-color-text-active);
-  text-decoration: none;
-}
-
-/* Collapse icon */
-.navds-menu-collapse__expand-icon {
-  font-size: 1.5rem;
-  flex-shrink: 0;
-  margin-left: var(--navds-spacing-2);
-}
-
-.navds-menu-collapse__expand-icon--filled,
-.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon {
-  display: none;
-}
-
-.navds-menu-collapse__button:hover > .navds-menu-collapse__expand-icon--filled {
-  display: block;
-}
-
-.navds-menu-collapse--open
-  > .navds-menu-collapse__button
-  > .navds-menu-collapse__expand-icon {
-  transform: rotate(180deg);
-}
-
-/* Nesting levels */
-.navds-menu__list[data-depth="1"] .navds-menu-collapse__button,
-.navds-menu__list[data-depth="1"] .navds-menu-item {
-  padding-left: var(--navds-spacing-6);
-}
-
-.navds-menu__list[data-depth="2"] .navds-menu-collapse__button,
-.navds-menu__list[data-depth="2"] .navds-menu-item {
-  padding-left: var(--navds-spacing-10);
-}
-
-.navds-menu__list[data-depth="3"] .navds-menu-collapse__button,
-.navds-menu__list[data-depth="3"] .navds-menu-item {
-  padding-left: var(--navds-spacing-14);
-}

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.6",
+  "version": "1.2.2",
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.9.5",
+    "@navikt/ds-tokens": "^1.2.2",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/css/page-header.css

@@ -1,76 +0,0 @@
-:root {
-  --navds-page-header-color-background: var(
-    --navds-semantic-color-component-background-light
-  );
-  --navds-page-header-color-shadow-situation: var(
-    --navds-global-color-orange-400
-  );
-  --navds-page-header-color-shadow-product: var(--navds-global-color-green-400);
-  --navds-page-header-color-shadow-guide: var(
-    --navds-global-color-deepblue-400
-  );
-}
-
-.navds-page-header {
-  display: flex;
-  justify-content: center;
-  background-color: var(--navds-page-header-color-background);
-  padding: 1.5rem calc((100vw - 100%) / 2);
-  margin-left: calc((100vw - 100%) / -2);
-  margin-right: calc((100vw - 100%) / -2);
-}
-
-.navds-page-header__wrapper {
-  width: 100%;
-  max-width: 56.5rem;
-  text-align: left;
-}
-
-.navds-page-header__title {
-  display: flex;
-  margin: 0 auto;
-  width: 100%;
-  position: relative;
-  flex-direction: column;
-}
-
-.navds-page-header--left > .navds-page-header__wrapper {
-  text-align: left;
-}
-
-.navds-page-header--center > .navds-page-header__wrapper {
-  text-align: center;
-}
-
-.navds-page-header__illustration {
-  margin-right: 1.5rem;
-  pointer-events: none;
-}
-
-.navds-page-header__illustration > svg {
-  width: 5rem;
-  height: 5rem;
-}
-
-.navds-page-header--situation {
-  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-situation) inset;
-}
-
-.navds-page-header--product {
-  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-product) inset;
-}
-
-.navds-page-header--guide {
-  box-shadow: 0 -4px 0 var(--navds-page-header-color-shadow-guide) inset;
-}
-
-@media (max-width: 649px) {
-  .navds-page-header__illustration > svg {
-    width: 3rem;
-    height: 3rem;
-  }
-
-  .navds-page-header__title {
-    font-size: var(--navds-font-size-heading-xlarge);
-  }
-}

@navikt/core/css/pagination.css

@@ -1,25 +1,12 @@
 :root {
-  --navds-pagination-color-background-hover: var(
-    --navds-semantic-color-canvas-background
-  );
-  --navds-pagination-color-background-active: var(
-    --navds-semantic-color-interaction-primary-selected
-  );
-  --navds-pagination-color-text-active: var(
-    --navds-semantic-color-text-inverted
-  );
   --navds-pagination-color-background-selected: var(
-    --navds-semantic-color-interaction-primary
+    --navds-semantic-color-interaction-primary-selected
   );
   --navds-pagination-color-text-selected: var(
     --navds-semantic-color-text-inverted
   );
 }
 
-.navds-pagination {
-  display: flex;
-}
-
 .navds-pagination__list {
   margin: 0;
   padding: 0;
@@ -32,89 +19,48 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--navds-spacing-8);
+  width: var(--navds-spacing-12);
   cursor: default;
 }
 
 .navds-pagination--small .navds-pagination__ellipsis {
+  width: var(--navds-spacing-8);
+}
+
+.navds-pagination--xsmall .navds-pagination__ellipsis {
   width: var(--navds-spacing-6);
 }
 
 .navds-pagination__item {
-  display: flex;
-  cursor: pointer;
-  margin: 0;
-  text-decoration: none;
-  border: none;
-  background: none;
-  border-radius: var(--navds-border-radius-small);
-  padding: var(--navds-spacing-1) var(--navds-spacing-3);
+  color: var(--navds-semantic-color-text);
 }
 
-.navds-pagination--small .navds-pagination__item {
-  padding: 2px var(--navds-spacing-2);
-}
-
-.navds-pagination__item:hover {
-  background-color: var(--navds-pagination-color-background-hover);
-}
-
-.navds-pagination__item:active {
-  background-color: var(--navds-pagination-color-background-active);
-  color: var(--navds-pagination-color-text-active);
-}
-
-.navds-pagination__item:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus),
-    inset 0 0 0 3px white;
-  outline: none;
+.navds-pagination--medium .navds-pagination__item {
+  border-radius: var(--navds-border-radius-medium);
 }
 
 .navds-pagination__item[aria-current="true"] {
   background-color: var(--navds-pagination-color-background-selected);
   color: var(--navds-pagination-color-text-selected);
-  font-weight: var(--navds-font-weight-bold);
+}
+
+.navds-pagination__item[aria-current="true"]:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
+    var(--navds-shadow-focus);
 }
 
 .navds-pagination__prev-next {
   display: flex;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  text-decoration: underline;
-  color: var(--navds-semantic-color-link);
   align-items: center;
   gap: var(--navds-spacing-1);
-  border-radius: var(--navds-border-radius-small);
 }
 
-.navds-pagination__prev-next:focus {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-focus);
+.navds-pagination--small .navds-pagination__prev-next {
+  padding: 0.375rem;
 }
 
-.navds-pagination__prev-next:disabled {
-  cursor: not-allowed;
-  opacity: 0.3;
-}
-
-.navds-pagination__prev-next-icon {
-  margin: 7px;
-}
-
-.navds-pagination--small .navds-pagination__prev-next-icon {
-  margin: var(--navds-spacing-1);
-  font-size: 1rem;
-}
-
-.navds-pagination__next-text {
-  padding-left: 0.75rem;
-}
-
-.navds-pagination__prev-text {
-  padding-right: 0.75rem;
+.navds-pagination--xsmall .navds-pagination__prev-next {
+  padding: 0.125rem;
 }
 
 .navds-pagination--invisible {

@navikt/core/css/popover.css

@@ -8,7 +8,7 @@
 .navds-popover {
   z-index: var(--navds-z-index-popover);
   background-color: var(--navds-popover-color-background);
-  box-shadow: var(--navds-shadow-popover);
+  box-shadow: var(--navds-shadow-medium);
   border: 1px solid;
   border-color: var(--navds-popover-color-border);
   border-radius: var(--navds-border-radius-medium);
@@ -28,55 +28,33 @@
 }
 
 .navds-popover__arrow {
+  position: absolute;
   z-index: -1;
-}
-
-.navds-popover__arrow::before {
-  display: block;
-  content: "";
   transform: rotate(45deg);
   background-color: var(--navds-popover-color-background);
   border: 1px solid;
   border-color: var(--navds-popover-color-border);
   width: 1rem;
   height: 1rem;
-  top: 0;
-  left: 0;
 }
 
-.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow {
-  bottom: calc(1rem / -2);
-}
-
-.navds-popover[data-popper-placement^="top"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="top"] > .navds-popover__arrow {
   border-left-color: transparent;
   border-top-color: transparent;
 }
 
-.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow {
-  top: calc(1rem / -2);
-}
-
 /* prettier-ignore */
-.navds-popover[data-popper-placement^="bottom"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
   border-bottom-color: transparent;
   border-right-color: transparent;
 }
 
-.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow {
-  right: calc(1rem / -2);
-}
-
-.navds-popover[data-popper-placement^="left"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="left"] > .navds-popover__arrow {
   border-left-color: transparent;
   border-bottom-color: transparent;
 }
 
-.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow {
-  left: calc(1rem / -2);
-}
-
-.navds-popover[data-popper-placement^="right"] > .navds-popover__arrow::before {
+.navds-popover[data-placement^="right"] > .navds-popover__arrow {
   border-right-color: transparent;
   border-top-color: transparent;
 }

@navikt/core/css/read-more.css

@@ -1,11 +1,11 @@
-.navds-read-more {
+.navds-read-more__button {
   cursor: pointer;
   margin: 0;
   border: none;
   background: none;
   display: flex;
-  align-items: center;
-  gap: var(--navds-spacing-2);
+  align-items: flex-start;
+  gap: 0.125rem;
   color: var(--navds-semantic-color-link);
   border-radius: var(--navds-border-radius-small);
   padding: var(--navds-spacing-1) var(--navds-spacing-1) var(--navds-spacing-1)
@@ -13,54 +13,43 @@
   text-align: start;
 }
 
-.navds-read-more--small {
+.navds-read-more--small .navds-read-more__button {
   padding: 2px var(--navds-spacing-1) 2px 2px;
 }
 
-.navds-read-more:hover {
+.navds-read-more__button:hover {
   background-color: rgba(38 38 38 / 0.06);
 }
 
-.navds-read-more:active {
+.navds-read-more__button:active {
   background-color: rgba(38 38 38 / 0.1);
 }
 
-.navds-read-more:focus {
+.navds-read-more__button:focus {
   outline: none;
   box-shadow: var(--navds-shadow-focus);
 }
 
-.navds-read-more + .ReactCollapse--collapse {
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  padding-top: var(--navds-spacing-2);
-}
-
-.navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
-  padding: 0;
-}
-
 .navds-read-more__content {
-  display: flex;
-  align-items: stretch;
-  gap: 10px;
-  padding: 0 var(--navds-spacing-1);
-}
-
-.navds-read-more__content::before {
-  content: "";
-  display: block;
-  width: 2px;
-  background-color: rgba(38 38 38 / 0.36);
-  margin: 0 7px;
-  flex-shrink: 0;
+  margin-top: var(--navds-spacing-1);
+  border-left: 2px solid rgba(38 38 38 / 0.36);
+  margin-left: 11px;
+  padding-left: 11px;
 }
 
 .navds-read-more__expand-icon {
   font-size: 1.25rem;
+  height: 1.5rem;
   flex-shrink: 0;
 }
 
-.navds-read-more--open > .navds-read-more__expand-icon {
+.navds-read-more--small .navds-read-more__expand-icon {
+  height: 1.25rem;
+}
+
+.navds-read-more--open
+  > .navds-read-more__button
+  > .navds-read-more__expand-icon {
   transform: rotate(-180deg);
 }
 
@@ -68,11 +57,11 @@
   display: none;
 }
 
-.navds-read-more:hover
+.navds-read-more__button:hover
   > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
   display: inherit;
 }
 
-.navds-read-more:hover > .navds-read-more__expand-icon {
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
   display: none;
 }

@navikt/core/css/speech-bubble.css

@@ -1,85 +0,0 @@
-:root {
-  --navds-speechbubble-color-background: var(
-    --navds-semantic-color-component-background-alternate
-  );
-  --navds-speechbubble-color-illustration: var(--navds-semantic-color-text);
-  --navds-speechbubble-color-illustration-background: var(
-    --navds-semantic-color-canvas-background
-  );
-  --navds-speechbubble-color-detail-text: var(
-    --navds-semantic-color-text-muted
-  );
-}
-
-.navds-speechbubble {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--navds-spacing-4);
-}
-
-.navds-speechbubble--right {
-  flex-direction: row-reverse;
-}
-
-.navds-speechbubble__bubble-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-3);
-}
-
-.navds-speechbubble--right .navds-speechbubble__bubble-list {
-  align-items: flex-end;
-}
-
-.navds-speechbubble__illustration {
-  align-items: center;
-  background: var(--navds-speechbubble-color-illustration-background);
-  color: var(--navds-speechbubble-color-illustration);
-  border-radius: var(--navds-border-radius-full);
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  overflow: hidden;
-  height: 3rem;
-  width: 3rem;
-}
-
-.navds-speechbubble__illustration svg {
-  align-self: center;
-  height: 100%;
-  width: 100%;
-}
-
-.navds-speechbubble__bubble {
-  padding: 1rem;
-  box-shadow: var(--navds-shadow-popover);
-  width: fit-content;
-  max-width: 37.5rem;
-  background-color: var(--navds-speechbubble-color-background);
-  border-radius: var(--navds-border-radius-xlarge);
-  border-bottom-left-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--navds-spacing-2);
-}
-
-.navds-speechbubble__bubble:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-speechbubble--right .navds-speechbubble__bubble {
-  border-radius: var(--navds-border-radius-xlarge);
-  border-bottom-right-radius: 2px;
-}
-
-.navds-speechbubble__top-text {
-  color: var(--navds-speechbubble-color-detail-text);
-}
-
-.navds-speechbubble--right .navds-speechbubble__top-text {
-  align-self: flex-end;
-}

@navikt/core/css/step-indicator.css

@@ -1,202 +0,0 @@
-:root {
-  --navds-step-indicator-color-step-line: var(--navds-semantic-color-divider);
-  --navds-step-indicator-color-step-text: var(--navds-semantic-color-text);
-  --navds-step-indicator-color-step-label: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-step-indicator-color-step-number-background: var(
-    --navds-semantic-color-canvas-background-light
-  );
-  --navds-step-indicator-color-step-number-background-finished: var(
-    --navds-semantic-color-canvas-background
-  );
-  --navds-step-indicator-color-step-number-shadow: var(
-    --navds-semantic-color-border
-  );
-  --navds-step-indicator-color-step-number-shadow-active: var(
-    --navds-semantic-color-interaction-primary-selected
-  );
-  --navds-step-indicator-color-step-number-shadow-hover: var(
-    --navds-semantic-color-interaction-primary
-  );
-  --navds-step-indicator-color-step-number-background-active: var(
-    --navds-semantic-color-interaction-primary-selected
-  );
-  --navds-step-indicator-color-step-number-text-active: var(
-    --navds-semantic-color-text-inverted
-  );
-  --navds-step-indicator-color-step-number-shadow-inset: var(
-    --navds-semantic-color-component-background-light
-  );
-}
-
-/* StepIndicator */
-.navds-step-indicator {
-  display: flex;
-  align-items: flex-start;
-  padding: 0;
-  margin: 0;
-}
-
-/* Step */
-.navds-step-indicator__step-wrapper {
-  padding: 0 var(--navds-spacing-2);
-  flex: 1;
-  position: relative;
-  list-style: none;
-  min-width: 10rem;
-}
-
-.navds-step-indicator__step-wrapper--hidelabel {
-  min-width: 5rem;
-}
-
-.navds-step-indicator__step {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 0;
-  background: none;
-  border: none;
-  appearance: none;
-  width: 100%;
-  flex-shrink: 1;
-  color: var(--navds-step-indicator-color-step-text);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.navds-step-indicator__step-number {
-  flex-shrink: 0;
-  display: flex;
-  width: 2rem;
-  height: 2rem;
-  margin: 0.5rem;
-  border-radius: var(--navds-border-radius-full);
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
-  background-color: var(--navds-step-indicator-color-step-number-background);
-}
-
-.navds-step-indicator__step-wrapper:first-child
-  > .navds-step-indicator__step
-  > .navds-step-indicator__step-number {
-  padding-right: 0;
-}
-
-.navds-step-indicator__step-wrapper:last-child
-  > .navds-step-indicator__step
-  > .navds-step-indicator__step-number {
-  padding-left: 0;
-}
-
-.navds-step-indicator__step-label {
-  width: 100%;
-  margin-top: var(--navds-spacing-4);
-  text-align: center;
-  color: var(--navds-step-indicator-color-step-label);
-  text-decoration: underline;
-}
-
-.navds-step-indicator__step-line {
-  flex: 1 1 100%;
-  position: absolute;
-  top: 1.5rem;
-  right: calc(50% + 2rem);
-  left: calc(-50% + 2rem);
-  display: block;
-  border-top: 2px solid var(--navds-step-indicator-color-step-line);
-  border-radius: var(--navds-border-radius-medium);
-  pointer-events: none;
-}
-
-.navds-step-indicator__step--active > .navds-step-indicator__step-label {
-  color: var(--navds-step-indicator-color-step-text);
-  font-weight: bold;
-}
-
-.navds-step-indicator__step--active > .navds-step-indicator__step-number {
-  background-color: var(
-    --navds-step-indicator-color-step-number-background-active
-  );
-  color: var(--navds-step-indicator-color-step-number-text-active);
-  box-shadow: 0 0 0 1px
-    var(--navds-step-indicator-color-step-number-shadow-active);
-  width: 2.5rem;
-  height: 2.5rem;
-  margin: 0.25rem;
-}
-
-.navds-step-indicator__step:focus {
-  outline: none;
-}
-
-.navds-step-indicator__step:hover > .navds-step-indicator__step-label {
-  text-decoration: none;
-}
-
-.navds-step-indicator__step.navds-step-indicator__step--disabled:hover
-  > .navds-step-indicator__step-label {
-  text-decoration: underline;
-}
-
-.navds-step-indicator__step--active > .navds-step-indicator__step-label,
-.navds-step-indicator__step--active.navds-step-indicator__step--disabled:hover
-  > .navds-step-indicator__step-label {
-  text-decoration: none;
-}
-
-.navds-step-indicator__step:hover > .navds-step-indicator__step-number {
-  background: var(--navds-step-indicator-color-step-number-background);
-  box-shadow: 0 0 0 2px
-    var(--navds-step-indicator-color-step-number-shadow-hover);
-}
-
-.navds-step-indicator__step--active:hover > .navds-step-indicator__step-number {
-  background-color: var(
-    --navds-step-indicator-color-step-number-background-active
-  );
-  color: var(--navds-step-indicator-color-step-number-text-active);
-  box-shadow: 0 0 0 1px
-    var(--navds-step-indicator-color-step-number-shadow-active);
-}
-
-.navds-step-indicator__step:focus > .navds-step-indicator__step-number {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-step-indicator__step--active:focus > .navds-step-indicator__step-number {
-  box-shadow: 0 0 0 1px inset
-      var(--navds-step-indicator-color-step-number-shadow-inset),
-    var(--navds-shadow-focus);
-}
-
-.navds-step-indicator__step--disabled:hover
-  > .navds-step-indicator__step-number {
-  box-shadow: 0 0 0 1px var(--navds-step-indicator-color-step-number-shadow);
-}
-
-.navds-step-indicator__step--disabled.navds-step-indicator__step--active:disabled
-  > .navds-step-indicator__step-number {
-  box-shadow: 0 0 0 1px
-    var(--navds-step-indicator-color-step-number-shadow-active);
-}
-
-/* Finished state */
-.navds-step-indicator__step--finished > .navds-step-indicator__step-number,
-.navds-step-indicator__step--finished.navds-step-indicator__step--disabled
-  > .navds-step-indicator__step-number {
-  background: var(--navds-step-indicator-color-step-number-background-finished);
-}
-
-/* Disabled */
-.navds-step-indicator__step--disabled > .navds-step-indicator__step-number,
-.navds-step-indicator__step--disabled > .navds-step-indicator__step-label {
-  opacity: 0.3;
-}
-
-.navds-step-indicator__step--disabled {
-  cursor: not-allowed;
-}

@navikt/core/css/stepper.css

@@ -1,99 +1,180 @@
 .navds-stepper {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
+  --navds-stepper-circle-size: 1.75rem;
+  --navds-stepper-border-width: 2px;
+  --navds-stepper-line-length: 1rem;
 
-/* Step */
-.navds-stepper__step {
-  position: relative;
-  cursor: pointer;
-  padding: calc(2.25rem / 2) 0;
-  display: flex;
-  background: none;
-  border: none;
-  appearance: none;
-  width: 100%;
-  color: var(--navds-semantic-color-text);
-  text-decoration: none;
-  flex-shrink: 0;
-}
-
-.navds-stepper__step-number {
-  flex-shrink: 0;
-  display: flex;
-  width: 28px;
-  height: 28px;
-  margin: 0;
-  margin-right: var(--navds-spacing-3);
-  border-radius: var(--navds-border-radius-full);
-  align-items: center;
-  justify-content: center;
   color: var(--navds-semantic-color-interaction-primary);
-  box-shadow: inset 0 0 0 2px var(--navds-semantic-color-interaction-primary);
-  background-color: var(--navds-semantic-color-component-background-light);
+  font-weight: 600;
+  line-height: 1;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
 }
 
-/* Step-states: focus, active, hover */
-.navds-stepper__step-wrapper:hover
-  > .navds-stepper__step
-  > .navds-stepper__step-number {
+.navds-stepper--horizontal {
+  display: flex;
+  align-items: flex-start;
+  text-align: center;
+}
+
+.navds-stepper__item {
+  display: grid;
+  grid-template-rows:
+    [line-1] auto [step-start] var(--navds-stepper-circle-size)
+    [line-2 step-end] auto;
+  grid-template-columns: var(--navds-stepper-circle-size) auto;
+  justify-items: flex-start;
+  gap: 0.5rem;
+}
+
+.navds-stepper__line {
+  background-color: var(--navds-semantic-color-border-muted);
+  width: var(--navds-stepper-border-width);
+  height: 100%;
+  min-height: var(--navds-stepper-line-length);
+  justify-self: center;
+  grid-column: 1;
+}
+
+.navds-stepper__line--1 {
+  grid-row: line-1;
+  display: none;
+}
+
+.navds-stepper__line--2 {
+  grid-row: line-2;
+}
+
+:where(.navds-stepper__item:last-of-type) .navds-stepper__line--2 {
+  display: none;
+}
+
+.navds-stepper__step {
+  grid-row: 2 / -1;
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: [circle] var(--navds-stepper-circle-size) [content] auto;
+  gap: var(--navds-spacing-2);
+  align-items: baseline;
+  justify-content: flex-start;
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--navds-stepper-border-width);
+  margin: calc(var(--navds-stepper-border-width) * -1)
+    calc(var(--navds-stepper-border-width) * -1) 1.75rem;
+}
+
+button.navds-stepper__step {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+
+:where(.navds-stepper__step):focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
+  isolation: isolate;
+}
+
+.navds-stepper__circle {
+  grid-column: circle;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--navds-stepper-circle-size);
+  height: var(--navds-stepper-circle-size);
+  border: var(--navds-stepper-border-width) solid currentColor;
+  border-radius: var(--navds-border-radius-full);
+  line-height: 1;
+}
+
+.navds-stepper__content {
+  min-width: fit-content;
+  line-height: 1.5;
+  grid-column: content;
+}
+
+/* Horizontal */
+:where(.navds-stepper--horizontal) .navds-stepper__item {
+  flex: 1 1 100%;
+  grid-template-columns:
+    [line-1-start] 1fr [step-start] auto [line-1-end] var(
+      --navds-stepper-circle-size
+    )
+    [line-2-start] auto [step-end] 1fr [line-2-end];
+  grid-template-rows: var(--navds-stepper-circle-size) auto;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line {
+  height: var(--navds-stepper-border-width);
+  width: 100%;
+  min-height: auto;
+  grid-row: 1;
+  display: block;
+  align-self: center;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--1 {
+  grid-column: line-1;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__line--2 {
+  grid-column: line-2;
+}
+
+:where(.navds-stepper--horizontal .navds-stepper__item:first-of-type)
+  .navds-stepper__line--1,
+:where(.navds-stepper--horizontal .navds-stepper__item:last-of-type)
+  .navds-stepper__line--2 {
+  visibility: hidden;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__step {
+  grid-row: 1 / -1;
+  grid-column: step;
+  display: grid;
+  grid-template-rows: [circle] var(--navds-stepper-circle-size) [content] auto;
+  grid-template-columns:
+    [content-start] auto [circle] var(--navds-stepper-circle-size)
+    [content-end] auto;
+  justify-items: center;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__circle {
+  grid-row: circle;
+  grid-column: 2;
+}
+
+:where(.navds-stepper--horizontal) .navds-stepper__content {
+  grid-row: content;
+  grid-column: 1 / -1;
+  max-width: 24ch;
+}
+
+/* Active step */
+:where(.navds-stepper__step--active) .navds-stepper__content {
+  color: var(--navds-semantic-color-interaction-primary-selected);
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
+  .navds-stepper__content {
+  text-decoration: underline;
+}
+
+:where(.navds-stepper__step--active) .navds-stepper__circle {
+  background-color: var(--navds-semantic-color-interaction-primary-selected);
+  border-color: var(--navds-semantic-color-interaction-primary-selected);
+  color: var(--navds-semantic-color-text-inverted);
+}
+
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
+  .navds-stepper__circle {
   background-color: var(
     --navds-semantic-color-interaction-primary-hover-subtle
   );
 }
-
-.navds-stepper__step--active > .navds-stepper__step-number,
-.navds-stepper__step-wrapper:hover
-  > .navds-stepper__step--active
-  > .navds-stepper__step-number {
-  color: var(--navds-semantic-color-text-inverted);
-  background-color: var(--navds-semantic-color-interaction-primary-selected);
-  box-shadow: inset 0 0 0 2px
-    var(--navds-semantic-color-interaction-primary-selected);
-}
-
-.navds-stepper__step:focus {
-  box-shadow: var(--navds-shadow-focus);
-  outline: none;
-}
-
-.navds-stepper__step--active {
-  cursor: default;
-}
-
-/* Step label */
-.navds-stepper__step-label {
-  margin-top: 2px;
-  color: var(--navds-semantic-color-interaction-primary);
-  text-align: left;
-}
-
-.navds-stepper__step:hover > .navds-stepper__step-label {
-  text-decoration: underline;
-}
-
-.navds-stepper__step--active > .navds-stepper__step-label {
-  color: black;
-}
-
-.navds-stepper__step--active:hover > .navds-stepper__step-label {
-  text-decoration: none;
-}
-
-/* Step Horizontal Lines */
-
-.navds-stepper__step-wrapper:not(:last-child) > .navds-stepper__step::after {
-  content: "";
-  position: absolute;
-  top: calc(28px + 8px + (2.25rem / 2));
-  left: 13px;
-  height: calc(100% - 2.75rem);
-  display: block;
-  border-left: 2px solid var(--navds-semantic-color-border-muted);
-  border-radius: var(--navds-border-radius-medium);
-  pointer-events: none;
-  z-index: 1;
-}

@navikt/core/css/table.css

@@ -148,7 +148,7 @@
 }
 
 .navds-table__header-cell--align-right .navds-table__sort-button {
-  justify-content: end;
+  justify-content: flex-end;
 }
 
 .navds-table__header-cell--align-center .navds-table__sort-button {
@@ -224,8 +224,7 @@
   display: none;
 }
 
-.navds-table__expanded-row-collapse {
-  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+.navds-table__expanded-row-collapse:not([style*="height: 0px;"]) {
   border-bottom: 1px solid var(--navds-table-cell-color-border);
 }
 

@navikt/core/css/tabs.css

@@ -74,6 +74,10 @@
   gap: var(--navds-spacing-1);
 }
 
+.navds-tabs__tab-inner svg {
+  flex-shrink: 0;
+}
+
 .navds-tabs__tab-icon--top > .navds-tabs__tab-inner {
   flex-direction: column;
   gap: 0;

@navikt/core/css/tooltip.css

@@ -10,9 +10,6 @@
 
 .navds-tooltip {
   z-index: var(--navds-z-index-tooltip);
-}
-
-.navds-tooltip__inner {
   background-color: var(--navds-semantic-color-component-background-inverted);
   color: var(--navds-semantic-color-text-inverted);
   border-radius: var(--navds-border-radius-small);

@navikt/core/css/typography.css

@@ -1,3 +1,14 @@
+:root,
+[data-theme="light"] {
+  --navds-error-message-color-text: var(
+    --navds-semantic-color-feedback-danger-text
+  );
+}
+
+[data-theme="dark"] {
+  --navds-error-message-color-text: var(--navds-global-color-red-300);
+}
+
 /* Heading */
 .navds-heading {
   font-weight: var(--navds-font-weight-bold);
@@ -161,7 +172,6 @@
 /* Small text */
 .navds-detail {
   font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
   letter-spacing: 0.004em;
   line-height: var(--navds-font-line-height-medium);
   margin: 0;
@@ -171,6 +181,10 @@
   margin-bottom: var(--navds-spacing-2);
 }
 
+.navds-detail.navds-typo--uppercase {
+  text-transform: uppercase;
+}
+
 .navds-detail--small {
   font-weight: var(--navds-font-weight-regular);
 }
@@ -178,3 +192,7 @@
 .navds-detail--small.navds-typo--spacing {
   margin-bottom: var(--navds-spacing-2);
 }
+
+.navds-error-message {
+  color: var(--navds-error-message-color-text);
+}

@navikt/core/icons/README.md

@@ -1,28 +1,42 @@
-# @navikt/ds-icons
+# NAV icons
 
-Leverer [NAVs ikoner](https://design.nav.no/resources/icons) i React og SVG.
+All of NAVs own icons (400+ and counting)
 
-## Installering
+- As just SVG
+- As React-components
 
-```sh
-// yarn
-yarn add @navikt/ds-icons
+## Installation
 
-// npm
-npm install @navikt/ds-icons
+Install `@navikt/ds-icons` with yarn
+
+```bash
+  yarn add @navikt/ds-icons
 ```
 
-## Bruk
+Install `@navikt/ds-icons` with npm
 
-```jsx
-/* ESM (anbefalt for tree-shaking)*/
-import { Down } from "@navikt/ds-icons";
-/* CJS */
-import { Down } from "@navikt/cjs/ds-icons";
-
-<Down aria-label="Åpne meny" />;
+```bash
+  npm install @navikt/ds-icons
 ```
 
-## Dokumentasjon
+## Usage
 
-- [Ikonsøk](https://design.nav.no/resources/icons)
+Use as a regular React-component
+
+```javascript
+import { Star } from "@navikt/ds-icons";
+
+function App() {
+  return <Star title="star" />;
+}
+```
+
+## Learn more
+
+- [Designsystem documentation](https://aksel.nav.no/designsystem)
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+- [Icon-search](https://aksel.nav.no/designsystem/side/ikoner)
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

@navikt/core/icons/meta.json

@@ -41,6 +41,12 @@
     "created_at": "2021-04-30T08:02:00.034Z",
     "pageName": "People"
   },
+  {
+    "name": "ApplicantFilled",
+    "description": "",
+    "created_at": "2022-06-10T13:45:14.253Z",
+    "pageName": "People"
+  },
   {
     "name": "Attachment",
     "description": "2px-Original size",
@@ -189,13 +195,13 @@
     "name": "Braille",
     "description": "",
     "created_at": "2020-07-01T10:37:42.881Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "BrailleFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.306Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "Calculator",
@@ -539,6 +545,12 @@
     "created_at": "2021-01-11T13:37:55.440Z",
     "pageName": "Communication"
   },
+  {
+    "name": "DicisionCrossFilled",
+    "description": "",
+    "created_at": "2022-06-10T13:45:14.260Z",
+    "pageName": "People"
+  },
   {
     "name": "DirectionSign",
     "description": "",
@@ -555,13 +567,13 @@
     "name": "Disability",
     "description": "",
     "created_at": "2020-07-01T10:37:42.669Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "DisabilityFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.314Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "Dish",
@@ -906,15 +918,15 @@
     "pageName": "File"
   },
   {
-    "name": "FileProgressFilled",
+    "name": "FileProgress",
     "description": "",
-    "created_at": "2022-01-27T12:48:37.592Z",
+    "created_at": "2022-01-27T12:48:37.567Z",
     "pageName": "File"
   },
   {
-    "name": "Files",
+    "name": "FileProgressFilled",
     "description": "",
-    "created_at": "2022-01-27T12:48:37.567Z",
+    "created_at": "2022-01-27T12:48:37.592Z",
     "pageName": "File"
   },
   {
@@ -1101,13 +1113,13 @@
     "name": "GuideDog",
     "description": "",
     "created_at": "2020-07-01T10:37:42.922Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "GuideDogFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.295Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "Hamburger",
@@ -1751,6 +1763,18 @@
     "created_at": "2021-01-12T13:29:09.125Z",
     "pageName": "People"
   },
+  {
+    "name": "PeopleInCircle",
+    "description": "",
+    "created_at": "2022-07-07T09:09:15.789Z",
+    "pageName": "People"
+  },
+  {
+    "name": "PeopleInCircleFilled",
+    "description": "",
+    "created_at": "2022-07-07T09:09:15.782Z",
+    "pageName": "People"
+  },
   {
     "name": "Picture",
     "description": "",
@@ -1931,6 +1955,30 @@
     "created_at": "2021-01-11T13:37:55.658Z",
     "pageName": "Arrow"
   },
+  {
+    "name": "RotateLeft",
+    "description": "",
+    "created_at": "2022-08-03T12:27:13.304Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "RotateLeftFilled",
+    "description": "",
+    "created_at": "2022-08-03T12:27:13.309Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "RotateRight",
+    "description": "",
+    "created_at": "2022-08-03T12:27:13.299Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "RotateRightFilled",
+    "description": "",
+    "created_at": "2022-08-03T12:27:13.294Z",
+    "pageName": "Interface"
+  },
   {
     "name": "Ruler",
     "description": "",
@@ -2163,25 +2211,25 @@
     "name": "SignLanguage",
     "description": "",
     "created_at": "2020-07-01T10:37:42.697Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "SignLanguageFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.310Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "SignLanguageTwoHands",
     "description": "",
     "created_at": "2021-05-20T14:35:02.839Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "SignLanguageTwoHandsFilled",
     "description": "",
     "created_at": "2021-05-20T14:35:02.835Z",
-    "pageName": "Handicap"
+    "pageName": "Disability"
   },
   {
     "name": "SingleParent",
@@ -2250,7 +2298,7 @@
     "pageName": "Health"
   },
   {
-    "name": "Stethoscope",
+    "name": "StethoscopeFilled",
     "description": "",
     "created_at": "2022-03-18T08:51:04.700Z",
     "pageName": "Health"

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.8.16",
+  "version": "1.2.2",
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
     "type": "git",
@@ -31,19 +31,20 @@
     "build": "yarn clean && copyfiles util/* src && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
     "update": "ts-node figma/index.ts dotenv/config"
   },
-  "dependencies": {
-    "uuid": "^8.3.2"
-  },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@svgr/cli": "6.2.1",
     "@types/lodash.startcase": "^4.4.6",
     "@types/node": "^17.0.35",
     "@types/rimraf": "3.0.2",
-    "@types/uuid": "^8.3.1",
     "axios": "^0.21.3",
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",

@navikt/core/icons/svg/AddPerson.svg

@@ -1,5 +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="M18 24V14H20V24H18Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 18L24 18L24 20L14 20L14 18Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM15.2322 14.185L16.8296 12.9329C15.5735 11.7353 13.8726 11 12 11C8.13401 11 5 14.134 5 18H7C7 15.2386 9.23858 13 12 13C13.2323 13 14.3606 13.4458 15.2322 14.185Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10ZM16.8296 12.9329L15.2322 14.185C14.3606 13.4458 13.2323 13 12 13C9.23858 13 7 15.2386 7 18H5C5 14.134 8.13401 11 12 11C13.8726 11 15.5735 11.7353 16.8296 12.9329ZM18 24V20H14V18H18V14H20V18H24V20H20V24H18Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/ApplicantFilled.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 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM12.8702 17.2748L18 18.8946L23.1298 17.2748L18.6402 13.5335C18.2693 13.2245 17.7307 13.2245 17.3598 13.5335L12.8702 17.2748ZM24 19.1541L18 21.0028L12 19.1541V23C12 23.5523 12.4477 24 13 24H23C23.5523 24 24 23.5523 24 23V19.1541ZM5 18C5 14.134 8.13401 11 12 11C13.4274 11 14.7549 11.4272 15.8619 12.1608L8.86795 18H5Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Cancel.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="M7.70711 4.70711C8.09763 4.31658 8.09763 3.68342 7.70711 3.29289C7.31659 2.90237 6.68342 2.90237 6.2929 3.29289L2.29289 7.2929C2.10536 7.48043 2 7.73479 2 8C2 8.26522 2.10536 8.51957 2.29289 8.70711L6.2929 12.7071C6.68342 13.0976 7.31659 13.0976 7.70711 12.7071C8.09763 12.3166 8.09763 11.6834 7.70711 11.2929L5.41421 9H15C17.7614 9 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7879C13.2356 19 12.7879 19.4477 12.7879 20C12.7879 20.5523 13.2356 21 13.7879 21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 7 15 7H5.41422L7.70711 4.70711Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 4.7071C8.09763 4.31657 8.09763 3.68341 7.70711 3.29289C7.31658 2.90236 6.68342 2.90236 6.29289 3.29289L2.29289 7.29289C2.10535 7.48042 2 7.73478 2 8C2 8.26521 2.10535 8.51957 2.29289 8.7071L6.29289 12.7071C6.68342 13.0976 7.31658 13.0976 7.70711 12.7071C8.09763 12.3166 8.09763 11.6834 7.70711 11.2929L5.41421 8.99999H15C17.7614 8.99999 20 11.2386 20 14C20 16.7614 17.7614 19 15 19H13.7879C13.2356 19 12.7879 19.4477 12.7879 20C12.7879 20.5523 13.2356 21 13.7879 21H15C18.866 21 22 17.866 22 14C22 10.134 18.866 6.99999 15 6.99999H5.41421L7.70711 4.7071Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Caseworker.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="M11.7167 11.6111C13.8389 11.6111 15.752 12.5057 17.0997 13.9384L15.6059 15.4322C14.6412 14.3811 13.2559 13.7222 11.7167 13.7222C8.80187 13.7222 6.43893 16.0852 6.43893 19H4.32782C4.32782 14.9192 7.63594 11.6111 11.7167 11.6111ZM20.8991 17.4659L16.8884 21.4766L15.2352 21.7648L15.5234 20.1116L19.5341 16.1009C19.911 15.7239 20.5222 15.7239 20.8991 16.1009C21.2761 16.4778 21.2761 17.089 20.8991 17.4659ZM22.1848 18.7516L17.7674 23.169L13 24L13.831 19.2327L18.2485 14.8152C19.3354 13.7283 21.0978 13.7283 22.1848 14.8152C23.2718 15.9022 23.2718 17.6646 22.1848 18.7516Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C13.6569 8 15 6.65685 15 5C15 3.34315 13.6569 2 12 2C10.3431 2 9 3.34315 9 5C9 6.65685 10.3431 8 12 8ZM12 10C14.7614 10 17 7.76142 17 5C17 2.23858 14.7614 0 12 0C9.23858 0 7 2.23858 7 5C7 7.76142 9.23858 10 12 10Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5C15 6.65685 13.6569 8 12 8C10.3431 8 9 6.65685 9 5C9 3.34315 10.3431 2 12 2C13.6569 2 15 3.34315 15 5ZM17 5C17 7.76142 14.7614 10 12 10C9.23858 10 7 7.76142 7 5C7 2.23858 9.23858 0 12 0C14.7614 0 17 2.23858 17 5ZM17.0997 13.9384C15.752 12.5057 13.8389 11.6111 11.7167 11.6111C7.63594 11.6111 4.32782 14.9192 4.32782 19H6.43893C6.43893 16.0852 8.80187 13.7222 11.7167 13.7222C13.2559 13.7222 14.6412 14.3811 15.6059 15.4322L17.0997 13.9384ZM16.8884 21.4766L20.8991 17.4659C21.2761 17.089 21.2761 16.4778 20.8991 16.1009C20.5222 15.7239 19.911 15.7239 19.5341 16.1009L15.5234 20.1116L15.2352 21.7648L16.8884 21.4766ZM17.7674 23.169L22.1848 18.7516C23.2718 17.6646 23.2718 15.9022 22.1848 14.8152C21.0978 13.7283 19.3354 13.7283 18.2485 14.8152L13.831 19.2327L13 24L17.7674 23.169Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Cognition.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="M2.03257 10.3099C2.13321 4.59864 6.76058 0 12.4542 0H13.0077C21.3397 0 26.634 8.98403 22.6442 16.3525L21.8848 17.755V24H19.8994V17.245L20.9012 15.3948C24.1694 9.35908 19.8327 2 13.0077 2H12.4542C7.79406 2 4.01628 5.80558 4.01628 10.5V10.6857L1.98725 16H5.00898V19C5.00898 20.1046 5.89787 21 6.99437 21H10.9651V24H8.97976V23H6.99437C4.80137 23 3.02359 21.2091 3.02359 19V18H1.98725C0.593943 18 -0.365973 16.592 0.134194 15.282L2.03257 10.3099ZM8.48346 8C8.75759 8 8.97981 7.77614 8.97981 7.5C8.97981 7.22386 8.75759 7 8.48346 7C8.20934 7 7.98712 7.22386 7.98712 7.5C7.98712 7.77614 8.20934 8 8.48346 8ZM8.48346 10C9.16602 10 9.78422 9.72242 10.2329 9.27321L12.1186 10.2863L11.6874 11.0102C11.613 11.0035 11.5377 11 11.4615 11C10.0909 11 8.97981 12.1193 8.97981 13.5C8.97981 14.8807 10.0909 16 11.4615 16C12.8322 16 13.9433 14.8807 13.9433 13.5C13.9433 12.9259 13.7512 12.3969 13.4281 11.9749L13.8726 11.2287L15.9339 12.3361C15.9304 12.3903 15.9287 12.4449 15.9287 12.5C15.9287 13.8807 17.0398 15 18.4104 15C19.781 15 20.8921 13.8807 20.8921 12.5C20.8921 11.1193 19.781 10 18.4104 10C17.8172 10 17.2727 10.2096 16.8458 10.5594L14.8954 9.51151L15.2061 8.98976C15.2806 8.99654 15.3561 9 15.4323 9C16.8029 9 17.9141 7.88071 17.9141 6.5C17.9141 5.11929 16.8029 4 15.4323 4C14.0617 4 12.9506 5.11929 12.9506 6.5C12.9506 7.07401 13.1426 7.60284 13.4655 8.02485L13.1413 8.56913L10.9632 7.39891C10.9105 6.06507 9.82048 5 8.48346 5C7.11284 5 6.00173 6.11929 6.00173 7.5C6.00173 8.88071 7.11284 10 8.48346 10ZM18.9068 12.5C18.9068 12.7761 18.6845 13 18.4104 13C18.1363 13 17.9141 12.7761 17.9141 12.5C17.9141 12.2239 18.1363 12 18.4104 12C18.6845 12 18.9068 12.2239 18.9068 12.5ZM11.4615 14C11.7357 14 11.9579 13.7761 11.9579 13.5C11.9579 13.2239 11.7357 13 11.4615 13C11.1874 13 10.9652 13.2239 10.9652 13.5C10.9652 13.7761 11.1874 14 11.4615 14ZM15.9287 6.5C15.9287 6.77614 15.7064 7 15.4323 7C15.1582 7 14.936 6.77614 14.936 6.5C14.936 6.22386 15.1582 6 15.4323 6C15.7064 6 15.9287 6.22386 15.9287 6.5Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.03257 10.3099C2.13321 4.59864 6.76058 0 12.4542 0H13.0077C21.3397 0 26.634 8.98403 22.6442 16.3525L21.8848 17.755V24H19.8994V17.245L20.9012 15.3948C24.1694 9.35908 19.8327 2 13.0077 2H12.4542C7.79406 2 4.01628 5.80558 4.01628 10.5V10.6857L1.98725 16H5.00898V19C5.00898 20.1046 5.89787 21 6.99437 21H10.9651V24H8.97976V23H6.99437C4.80137 23 3.02359 21.2091 3.02359 19V18H1.98725C0.593943 18 -0.365973 16.592 0.134194 15.282L2.03257 10.3099ZM8.48346 8C8.75759 8 8.97981 7.77614 8.97981 7.5C8.97981 7.22386 8.75759 7 8.48346 7C8.20934 7 7.98712 7.22386 7.98712 7.5C7.98712 7.77614 8.20934 8 8.48346 8ZM8.48346 10C9.16602 10 9.78422 9.72242 10.2329 9.27321L12.1186 10.2863L11.6874 11.0102C11.613 11.0035 11.5377 11 11.4615 11C10.0909 11 8.97981 12.1193 8.97981 13.5C8.97981 14.8807 10.0909 16 11.4615 16C12.8322 16 13.9433 14.8807 13.9433 13.5C13.9433 12.9259 13.7512 12.3969 13.4281 11.9749L13.8726 11.2287L15.9339 12.3361C15.9304 12.3903 15.9287 12.4449 15.9287 12.5C15.9287 13.8807 17.0398 15 18.4104 15C19.781 15 20.8921 13.8807 20.8921 12.5C20.8921 11.1193 19.781 10 18.4104 10C17.8172 10 17.2727 10.2096 16.8458 10.5594L14.8954 9.51151L15.2061 8.98976C15.2806 8.99654 15.3561 9 15.4323 9C16.8029 9 17.9141 7.88071 17.9141 6.5C17.9141 5.11929 16.8029 4 15.4323 4C14.0617 4 12.9506 5.11929 12.9506 6.5C12.9506 7.07401 13.1426 7.60284 13.4655 8.02485L13.1413 8.56913L10.9632 7.39891C10.9106 6.06507 9.82048 5 8.48346 5C7.11284 5 6.00173 6.11929 6.00173 7.5C6.00173 8.88071 7.11284 10 8.48346 10ZM18.9068 12.5C18.9068 12.7761 18.6845 13 18.4104 13C18.1363 13 17.9141 12.7761 17.9141 12.5C17.9141 12.2239 18.1363 12 18.4104 12C18.6845 12 18.9068 12.2239 18.9068 12.5ZM11.4615 14C11.7357 14 11.9579 13.7761 11.9579 13.5C11.9579 13.2239 11.7357 13 11.4615 13C11.1874 13 10.9652 13.2239 10.9652 13.5C10.9652 13.7761 11.1874 14 11.4615 14ZM15.9287 6.5C15.9287 6.77614 15.7064 7 15.4323 7C15.1582 7 14.936 6.77614 14.936 6.5C14.936 6.22386 15.1582 6 15.4323 6C15.7064 6 15.9287 6.22386 15.9287 6.5Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Decision.svg

@@ -1,5 +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.9565 8C12.6134 8 13.9565 6.65685 13.9565 5C13.9565 3.34315 12.6134 2 10.9565 2C9.29969 2 7.95654 3.34315 7.95654 5C7.95654 6.65685 9.29969 8 10.9565 8ZM10.9565 10C13.718 10 15.9565 7.76142 15.9565 5C15.9565 2.23858 13.718 0 10.9565 0C8.19512 0 5.95654 2.23858 5.95654 5C5.95654 7.76142 8.19512 10 10.9565 10Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0569 11.5858C19.2758 10.8047 18.0095 10.8047 17.2285 11.5858L15.8143 13C15.0332 13.781 15.0332 15.0474 15.8143 15.8284L16.6856 16.6997L12.1071 21.2782L11.4 21.9853L12.8142 23.3995L13.5213 22.6924L18.0998 18.114L19.0496 19.0637C19.8306 19.8448 21.0969 19.8448 21.878 19.0637L23.2922 17.6495C24.0733 16.8685 24.0733 15.6021 23.2922 14.8211L20.0569 11.5858ZM18.6427 13L21.878 16.2353L20.4638 17.6495L17.2285 14.4142L18.6427 13Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1594 11.7521C13.2095 11.2709 12.1352 11 11 11C7.13401 11 4 14.134 4 18H6C6 15.2386 8.23858 13 11 13C11.5609 13 12.0993 13.092 12.6014 13.2617L14.1594 11.7521Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9565 8C12.6134 8 13.9565 6.65685 13.9565 5C13.9565 3.34315 12.6134 2 10.9565 2C9.29969 2 7.95654 3.34315 7.95654 5C7.95654 6.65685 9.29969 8 10.9565 8ZM10.9565 10C13.718 10 15.9565 7.76142 15.9565 5C15.9565 2.23858 13.718 0 10.9565 0C8.19512 0 5.95654 2.23858 5.95654 5C5.95654 7.76142 8.19512 10 10.9565 10ZM20.0569 11.5858C19.2758 10.8047 18.0095 10.8047 17.2285 11.5858L15.8143 13C15.0332 13.781 15.0332 15.0474 15.8143 15.8284L16.6856 16.6997L12.1071 21.2782L11.4 21.9853L12.8142 23.3995L13.5213 22.6924L18.0998 18.114L19.0496 19.0637C19.8306 19.8448 21.0969 19.8448 21.878 19.0637L23.2922 17.6495C24.0733 16.8685 24.0733 15.6021 23.2922 14.8211L20.0569 11.5858ZM18.6427 13L21.878 16.2353L20.4638 17.6495L17.2285 14.4142L18.6427 13ZM11 11C12.1352 11 13.2095 11.2709 14.1594 11.7521L12.6014 13.2617C12.0993 13.092 11.5609 13 11 13C8.23858 13 6 15.2386 6 18H4C4 14.134 7.13401 11 11 11Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DecisionFilled.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="M16 5C16 7.76142 13.7614 10 11 10C8.23858 10 6 7.76142 6 5C6 2.23858 8.23858 0 11 0C13.7614 0 16 2.23858 16 5ZM4 18C4 14.134 7.13401 11 11 11C12.3956 11 13.6959 11.4084 14.7877 12.1123L8.7108 18H4Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2782 12.2854C18.8876 11.9049 18.2545 11.9049 17.8639 12.2854L15.3891 14.6973C14.9985 15.0778 14.9985 15.6949 15.3891 16.0754L16.8033 17.4536L11.5 22.6218L12.9142 24L18.2175 18.8318L19.8085 20.3823C20.199 20.7628 20.8322 20.7628 21.2227 20.3823L23.6976 17.9704C24.0881 17.5899 24.0881 16.9728 23.6976 16.5923L19.2782 12.2854Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 10C13.7614 10 16 7.76142 16 5C16 2.23858 13.7614 0 11 0C8.23858 0 6 2.23858 6 5C6 7.76142 8.23858 10 11 10ZM11 11C7.13401 11 4 14.134 4 18H8.7108L14.7877 12.1123C13.6959 11.4084 12.3956 11 11 11ZM17.8639 12.2854C18.2545 11.9049 18.8876 11.9049 19.2782 12.2854L23.6976 16.5923C24.0881 16.9728 24.0881 17.5899 23.6976 17.9704L21.2227 20.3823C20.8322 20.7628 20.199 20.7628 19.8085 20.3823L18.2175 18.8318L12.9142 24L11.5 22.6218L16.8033 17.4536L15.3891 16.0754C14.9985 15.6949 14.9985 15.0778 15.3891 14.6973L17.8639 12.2854Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Dialog.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="M2 13.5179L4.60216 12H6V11C6 8.79086 7.79086 7 10 7H16V4C16 2.89543 15.1046 2 14 2H4C2.89543 2 2 2.89543 2 4V13.5179ZM5.14286 14H6V17C6 19.2091 7.79086 21 10 21H18.8571L24 24V11C24 8.79086 22.2091 7 20 7H18V4C18 1.79086 16.2091 0 14 0H4C1.79086 0 0 1.79086 0 4V17L5.14286 14ZM19.3978 19L22 20.5179V11C22 9.89543 21.1046 9 20 9H10C8.89543 9 8 9.89543 8 11V17C8 18.1046 8.89543 19 10 19H19.3978ZM11 15C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13C10.4477 13 10 13.4477 10 14C10 14.5523 10.4477 15 11 15ZM16 14C16 14.5523 15.5523 15 15 15C14.4477 15 14 14.5523 14 14C14 13.4477 14.4477 13 15 13C15.5523 13 16 13.4477 16 14ZM19 15C19.5523 15 20 14.5523 20 14C20 13.4477 19.5523 13 19 13C18.4477 13 18 13.4477 18 14C18 14.5523 18.4477 15 19 15Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 4C18 2.89543 17.1046 2 16 2H4C2.89543 2 2 2.89543 2 4V16.7896L6 14.328V18C6 19.1046 6.89543 20 8 20H16.4471L22 22.5629L22 16.5714V10C22 8.89543 21.1046 8 20 8H18V4ZM6 10V12H5.96696L4 13.2104V4L16 4V8H8C6.89543 8 6 8.89543 6 10ZM20 18.5714V10H8V18H16.8864L20 19.4371L20 18.5714ZM11 15C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13C10.4477 13 10 13.4477 10 14C10 14.5523 10.4477 15 11 15ZM15 14C15 14.5523 14.5523 15 14 15C13.4477 15 13 14.5523 13 14C13 13.4477 13.4477 13 14 13C14.5523 13 15 13.4477 15 14ZM17 15C17.5523 15 18 14.5523 18 14C18 13.4477 17.5523 13 17 13C16.4477 13 16 13.4477 16 14C16 14.5523 16.4477 15 17 15Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DialogFilled.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="M14 0C16.2091 0 18 1.79086 18 4V5H10C6.68629 5 4 7.68629 4 11V14.6667L0 17V10V4C0 1.79086 1.79086 0 4 0H14ZM10 7C7.79086 7 6 8.79086 6 11V17C6 19.2091 7.79086 21 10 21H18.8571L24 24V17V11C24 8.79086 22.2091 7 20 7H10ZM12 14C12 14.5523 11.5523 15 11 15C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13C11.5523 13 12 13.4477 12 14ZM15 15C15.5523 15 16 14.5523 16 14C16 13.4477 15.5523 13 15 13C14.4477 13 14 13.4477 14 14C14 14.5523 14.4477 15 15 15ZM20 14C20 14.5523 19.5523 15 19 15C18.4477 15 18 14.5523 18 14C18 13.4477 18.4477 13 19 13C19.5523 13 20 13.4477 20 14Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 2C17.1046 2 18 2.89543 18 4V6H7C5.34315 6 4 7.34315 4 9V15.5588L2 16.7896V4C2 2.89543 2.89543 2 4 2H16ZM8 8C6.89543 8 6 8.89543 6 10V18C6 19.1046 6.89543 20 8 20H16.4471L22 22.5629L22 16.5714V10C22 8.89543 21.1046 8 20 8H8ZM12 14C12 14.5523 11.5523 15 11 15C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13C11.5523 13 12 13.4477 12 14ZM14 15C14.5523 15 15 14.5523 15 14C15 13.4477 14.5523 13 14 13C13.4477 13 13 13.4477 13 14C13 14.5523 13.4477 15 14 15ZM18 14C18 14.5523 17.5523 15 17 15C16.4477 15 16 14.5523 16 14C16 13.4477 16.4477 13 17 13C17.5523 13 18 13.4477 18 14Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DicisionCrossFilled.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="M16.9995 4.99986C16.9995 7.76121 14.761 9.99973 11.9997 9.99973C9.23832 9.99973 6.99981 7.76121 6.99981 4.99986C6.99981 2.23851 9.23832 0 11.9997 0C14.761 0 16.9995 2.23851 16.9995 4.99986ZM11.9997 10.9997C8.13378 10.9997 4.99986 14.1336 4.99986 17.9995H15.3673L12.6852 14.5511L15.8705 12.1665C14.7618 11.4293 13.4309 10.9997 11.9997 10.9997ZM15.2605 15.0002L18.2829 18.8862L15.2605 22.7722L16.8392 24L19.5498 20.515L22.2603 24L23.839 22.7721L20.8166 18.8862L23.839 15.0002L22.2603 13.7724L19.5498 17.2574L16.8392 13.7724L15.2605 15.0002Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/DirectionSignFilled.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="M13 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735ZM11 17V24H13V17H11Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1V3H11V1C11 0.447715 11.4477 0 12 0C12.5523 0 13 0.447715 13 1ZM0.518226 4.77735C0.296708 4.44507 0.534904 4 0.934252 4H19.4648C19.7992 4 20.1114 4.1671 20.2969 4.4453L24 10L20.2969 15.5547C20.1114 15.8329 19.7992 16 19.4648 16H0.934253C0.534905 16 0.296708 15.5549 0.518226 15.2227L3.99999 10L0.518226 4.77735ZM11 17L11 24H13V17H11Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/DivideFilled.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="M11 12V0.0410728C4.84047 0.549224 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7802 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410728C18.2766 0.476382 22.5852 4.32556 23.712 9.37484C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 12V0.0410728C4.84047 0.549224 0 5.70934 0 12C0 18.6274 5.37258 24 12 24C14.9922 24 17.7286 22.9048 19.8303 21.0935L11 12ZM24 12C24 12.9017 23.9005 13.7802 23.712 14.6252C23.297 16.4847 22.4505 18.1814 21.2831 19.6048L13 11V0.0410728C18.2766 0.476383 22.5852 4.32556 23.712 9.37484C23.9005 10.2198 24 11.0983 24 12Z" fill="#262626"/>
 </svg>