Lerna versionbump [ci skip]

Co-authored-by: Ken <ken.aleksander@gmail.com>

.github/ISSUE_TEMPLATE/bug-report.md

@@ -3,25 +3,12 @@ name: Bug Report
 about: Meld inn bugs eller feil
 title: "[BUG]"
 labels: "bug \U0001F41B"
-assignees: ''
-
+assignees: ""
 ---
 
-## Hvilken av tjenestene våre gjelder det?
+## Hva er feilen/problemet?
 
 <!--
-  Sett en x i type pakke det gjelder:
-- [x] type
--->
-
-- [ ] `Komponenter`
-- [ ] `Stiler`
-- [ ] `Ikoner`
-- [ ] `Annet`
-
-## Beskriv feilen/problemet
-
-<!-- 
 > Beskriv hva slags problem(er) som oppstår
 
 > Hva forventet du skulle oppstå?
@@ -31,7 +18,7 @@ assignees: ''
 
 (skriv her.)
 
-## Steg for å reprodusere problemet
+## Steg for å reprodusere problemet (valgfri)
 
 <!--
 1. Steg en
@@ -41,11 +28,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/ISSUE_TEMPLATE/feature-request.md

@@ -1,24 +1,23 @@
 ---
 name: Feature Request
-about: Foreslå noe nytt for designsystemet
+about: Foreslå noe nytt!
 title: "[NEW]"
 labels: new ✨
-assignees: ''
-
+assignees: ""
 ---
 
-## Beskriv forespørselen
+## Hva?
 
 (skriv her.)
 
-## Hvilken funksjon vil dette har for bruker?
+## Hva løser dette?
 
 (skriv her.)
 
-## Eksempler/Tilleggsinformasjon 
+## Eksempler/Info
 
 <!--
-Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc. 
+Del gjerne eksempel av lignende løsninger som er i bruk idag, URL/Screenshots etc.
 Link gjerne til relaterte issues her også.
 -->
 

.github/workflows/build-publish.yml

@@ -15,14 +15,14 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[ci skip]')"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0 # Required to retrieve git history
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"
@@ -47,16 +47,16 @@ jobs:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
     if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: "0"
           token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           registry-url: https://registry.npmjs.org
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"
@@ -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,23 +2,25 @@ name: Chromatic
 
 on:
   push:
-    branches: [master]
+    branches:
+      - master
   pull_request:
-    branches: [master]
+    branches:
+      - master
 
 jobs:
   chromatic-pr:
     if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"
@@ -73,7 +75,7 @@ jobs:
 
             - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
             - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :white_check_mark: SUCCESS :white_check_mark:
+            - :white_check_mark: No changes detected :white_check_mark:
 
             commit: `${{ steps.vars.outputs.sha_short }}`
           edit-mode: replace
@@ -89,7 +91,7 @@ jobs:
 
             - :clipboard: [Review](${{steps.chromatic_tests.outputs.url}})
             - :tada: [Storybook preview](${{steps.storybook_url.outputs.replaced}})
-            - :no_entry_sign: FAILED :no_entry_sign:, review endringer.
+            - :no_entry_sign: Changes detected :no_entry_sign:, review endringer.
 
             commit: `${{ steps.vars.outputs.sha_short }}`
           edit-mode: replace
@@ -98,14 +100,14 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name == 'push'"
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"

.github/workflows/update-icons.yml

@@ -1,20 +1,20 @@
 name: Update Icons
 
 on:
-#  schedule:
- #   - cron: 0 0 * * *
+  #  schedule:
+  #   - cron: 0 0 * * *
   workflow_dispatch:
 
 jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"

.github/workflows/update-tokens.yml

@@ -7,12 +7,12 @@ jobs:
   update:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 14
       - name: Node-modules cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: node-cache
         with:
           path: "**/node_modules"

.husky/_/husky.sh

@@ -1,10 +1,12 @@
-#!/bin/sh
+#!/usr/bin/env sh
 if [ -z "$husky_skip_init" ]; then
   debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
   }
 
-  readonly hook_name="$(basename "$0")"
+  readonly hook_name="$(basename -- "$0")"
   debug "starting $hook_name..."
 
   if [ "$HUSKY" = "0" ]; then
@@ -17,14 +19,18 @@ if [ -z "$husky_skip_init" ]; then
     . ~/.huskyrc
   fi
 
-  export readonly husky_skip_init=1
+  readonly husky_skip_init=1
+  export husky_skip_init
   sh -e "$0" "$@"
   exitCode="$?"
 
   if [ $exitCode != 0 ]; then
     echo "husky - $hook_name hook exited with code $exitCode (error)"
-    exit $exitCode
   fi
 
-  exit 0
+  if [ $exitCode = 127 ]; then
+    echo "husky - command not found in PATH=$PATH"
+  fi
+
+  exit $exitCode
 fi

.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 -> Horizontal `<Stepper />`

.storybook/main.js

@@ -19,8 +19,6 @@ module.exports = {
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-a11y",
-    "@whitespace/storybook-addon-html",
-    "storybook-addon-css-user-preferences",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/preview.js

@@ -7,7 +7,7 @@ export const parameters = {
   options: {
     storySort: {
       method: "",
-      order: ["Intro", "ds-icons", "ds-react", ["Default"]],
+      order: ["Intro", "ds-icons", "ds-react", ["form"], ["Default"]],
       locales: "",
     },
   },
@@ -21,13 +21,33 @@ export const parameters = {
         value: "#ffffff",
       },
       {
-        name: "Alternate",
-        value: "#f7f7f7",
-      },
-      {
-        name: "Inverted",
-        value: "#292929",
+        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} lang="no">
+    <StoryFn />
+  </div>
+);
+
+export const decorators = [withTheme];

.storybook/theme.js

@@ -9,7 +9,7 @@ export default create({
   fontCode: "monospace",
 
   // Text colors
-  textColor: "#292929",
+  textColor: "#262626",
   textInverseColor: "rgba(255,255,255,0.9)",
 
   colorSecondary: "rgba(0, 36, 58, 1)",

@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

@@ -35,7 +35,7 @@ export function checkGitStatus(force) {
     if (force) {
       console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
     } else {
-      console.log("Thank you for using @@navikt/ds-codemod");
+      console.log("Thank you for using @navikt/ds-codemod");
       console.log(
         chalk.yellow(
           "\nBut before we continue, please stash or commit your git changes."
@@ -94,6 +94,18 @@ export function runTransform({ files, flags, transformer }) {
 }
 
 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",

@navikt/codemod/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "1.0.2",
-  "private": true,
+  "version": "1.3.24",
   "description": "NAV designsystem codemods",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -11,7 +10,7 @@
     "jscodeshift"
   ],
   "files": [
-    "transforms/*.js",
+    "transforms/**/*.js",
     "bin/*.js",
     "lib/**/*.js",
     "lib/cra-to-next/gitignore"
@@ -49,5 +48,8 @@
   "sideEffects": false,
   "engines": {
     "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

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

@@ -8,8 +8,9 @@ export const Page = () => {
       topText="Ola Normann 01.01.21 14:00"
       backgroundColor="red"
       illustrationBgColor="blue"
+      {...testProps}
     >
-      <SpeechBubble.Bubble>
+      <SpeechBubble.Bubble {...testProps}>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </SpeechBubble.Bubble>
       <SpeechBubble.Bubble>

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

@@ -8,8 +8,9 @@ export const Page = () => {
       name="Ola Normann 01.01.21 14:00"
       backgroundColor="red"
       avatarBgColor="blue"
+      {...testProps}
     >
-      <Chat.Bubble>
+      <Chat.Bubble {...testProps}>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </Chat.Bubble>
       <Chat.Bubble>

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

@@ -3,9 +3,16 @@ 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"
+        {...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

@@ -3,7 +3,14 @@ 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.output.js

@@ -3,9 +3,9 @@ import { Pagination as DsPagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <DsPagination size="small" onPageChange={setPage} />
-      <DsPagination size="small" onPageChange={setPage} />
-      <DsPagination size="xsmall" onPageChange={setPage} />
+      <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.output.js

@@ -3,9 +3,9 @@ import { Pagination, Button } from "@navikt/ds-react";
 export const Demo = () => {
   return (
     <div>
-      <Pagination size="small" onPageChange={setPage} />
-      <Pagination size="small" onPageChange={setPage} />
-      <Pagination size="xsmall" onPageChange={setPage} />
+      <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

@@ -4,9 +4,9 @@ const TabComp = () => {
   return (
     /* prettier-ignore */
     <div>
-      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
-        <Tabs.List loop={false}>
-          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" />
+      <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>

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

@@ -7,10 +7,11 @@ const TabComp = () => {
       <Tabs
         defaultValue="logg"
         onChange={(x) => console.log(x)}
+        {...testProps}
         loop={false}
         iconPosition={props.left}>
-        <Tabs.List>
-          <Tabs.Tab value="logg" label="logg" />
+        <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>

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

@@ -8,6 +8,22 @@ export default function transformer(file, api, options) {
 
   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;
@@ -19,6 +35,7 @@ export default function transformer(file, api, options) {
       attributes.unshift(
         j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
       );
+      addMigrationTag(node);
     }
   }
 
@@ -42,14 +59,20 @@ export default function transformer(file, api, options) {
       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);

@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/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,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-accordion-color-text-hover: var(
     --navds-semantic-color-interaction-primary
   );
@@ -11,10 +12,6 @@
   );
 }
 
-.navds-accordion .ReactCollapse--collapse {
-  transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -72,7 +69,9 @@
   flex-shrink: 0;
 }
 
-.navds-accordion__item--open .navds-accordion__expand-icon {
+.navds-accordion__item--open
+  > .navds-accordion__header
+  > .navds-accordion__expand-icon {
   transform: rotateZ(180deg);
 }
 

@navikt/core/css/alert.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-alert-color-border: var(--navds-semantic-color-border-muted);
   --navds-alert-color-error-border: var(
     --navds-semantic-color-feedback-danger-border
@@ -34,18 +35,12 @@
 
 .navds-alert--small {
   padding: var(--navds-spacing-2) var(--navds-spacing-4);
-  gap: var(--navds-spacing-3);
 }
 
 .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;

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

@@ -6,11 +6,8 @@
 @import "print.css";
 @import "utility.css";
 
-/* Disabled because of UU concerns */
-
-/* @import "smooth-scroll.css"; */
-
-html {
+html,
+:host {
   box-sizing: border-box;
 }
 
@@ -21,6 +18,7 @@ html {
 }
 
 :root,
+:host,
 [data-theme="light"] {
   --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
 
@@ -33,8 +31,9 @@ html {
   color: var(--navds-semantic-color-text-inverted);
 }
 
-body {
-  font-family: var(--navds-font-family);
+body,
+:host {
+  font-family: var(--navds-font-family, "Source Sans Pro", Arial, sans-serif);
   line-height: 1.333;
   font-size: 1.125rem;
 }

@navikt/core/css/baseline/smooth-scroll.css

@@ -1,28 +0,0 @@
-/**
-* Solution copied from blogpost
-* https://schepp.dev/posts/smooth-scrolling-and-page-search/
-* Currently disabled
-*/
-
-@keyframes smoothscroll1 {
-  from,
-  to {
-    scroll-behavior: smooth;
-  }
-}
-
-@keyframes smoothscroll2 {
-  from,
-  to {
-    scroll-behavior: smooth;
-  }
-}
-
-html {
-  animation: smoothscroll1 1s;
-}
-
-html:focus-within {
-  animation-name: smoothscroll2;
-  scroll-behavior: smooth;
-}

@navikt/core/css/button.css

@@ -1,4 +1,5 @@
 :root,
+:host,
 [data-theme="light"] {
   /* Primary */
   --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
@@ -116,24 +117,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 {
@@ -141,22 +153,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 *
  *************************/
@@ -179,8 +206,8 @@
     var(--navds-shadow-focus);
 }
 
-.navds-button--primary:hover:disabled,
-.navds-button--primary:active:disabled {
+.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
   background-color: var(--navds-button-color-primary-background);
 }
 
@@ -216,8 +243,8 @@
     var(--navds-shadow-focus);
 }
 
-.navds-button--secondary:disabled,
-.navds-button--secondary:hover:disabled {
+.navds-button--secondary:where(:disabled, .navds-button--disabled),
+.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--navds-button-color-secondary-text);
   background-color: var(--navds-button-color-secondary-background);
   box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
@@ -255,9 +282,10 @@
     var(--navds-shadow-focus);
 }
 
-.navds-button--tertiary:disabled,
-.navds-button--tertiary:active:disabled,
-.navds-button--tertiary:active:hover:disabled {
+.navds-button--tertiary:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
   color: var(--navds-button-color-tertiary-text);
   background: none;
   box-shadow: none;
@@ -285,8 +313,8 @@
     var(--navds-shadow-focus);
 }
 
-.navds-button--danger:hover:disabled,
-.navds-button--danger:active:disabled {
+.navds-button--danger:active:where(:disabled, .navds-button--disabled),
+.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
   background-color: var(--navds-button-color-danger-background);
 }
 
@@ -294,11 +322,11 @@
  * .navds-button:disabled *
  **************************/
 
-.navds-button:disabled {
+.navds-button:where(:disabled, .navds-button--disabled) {
   cursor: not-allowed;
 }
 
-.navds-button:disabled:not(.navds-button--loading) {
+.navds-button:where(:disabled:not(.navds-button--loading), .navds-button--disabled:not(.navds-button--loading)) {
   opacity: 0.3;
 }
 

@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,91 @@
+:root,
+:host {
+  --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);
+  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/content-container.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-content-container-max-width: 79.5rem;
 }
 

@navikt/core/css/date.css

@@ -0,0 +1,204 @@
+.navds-date {
+  padding: var(--navds-spacing-3);
+}
+
+.navds-date .rdp-day_range_middle.rdp-day_disabled {
+  color: var(--navds-global-color-white);
+  background: var(--navds-global-color-deepblue-500);
+}
+
+.navds-date .rdp-month,
+.navds-date.rdp-month {
+  display: grid;
+  gap: var(--navds-spacing-5);
+}
+
+.navds-date__caption-label {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-head_cell {
+  text-transform: capitalize;
+  font-size: var(--navds-font-size-small);
+}
+
+.navds-date .rdp-weeknumber {
+  color: var(--navds-global-color-white);
+  background: var(--navds-global-color-gray-800);
+  font-size: var(--navds-font-size-small);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.125rem var(--navds-spacing-1);
+  border-radius: var(--navds-border-radius-small);
+}
+
+.navds-date__caption-dropdown {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--navds-spacing-2);
+  align-items: center;
+}
+
+.navds-date__caption__month-wrapper {
+  display: flex;
+  justify-content: center;
+  gap: var(--navds-spacing-2);
+  align-items: center;
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-button {
+  all: unset;
+  width: 2.5rem;
+  height: 2.5rem;
+  text-align: center;
+  border-radius: var(--navds-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start {
+  border-radius: 12px 2px 2px 12px;
+  border-radius: var(--navds-border-radius-xlarge)
+    var(--navds-border-radius-small) var(--navds-border-radius-small)
+    var(--navds-border-radius-xlarge);
+}
+
+.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-radius: var(--navds-border-radius-small)
+    var(--navds-border-radius-xlarge) var(--navds-border-radius-xlarge)
+    var(--navds-border-radius-small);
+}
+
+.navds-date .rdp-day_range_start.rdp-day_range_end {
+  border-radius: var(--navds-border-radius-xlarge);
+}
+
+.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
+.navds-date
+  .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
+  box-shadow: var(--navds-shadow-focus);
+}
+
+.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
+.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+  box-shadow: inset 0 0 0 1px var(--navds-global-color-white),
+    0 0 0 3px var(--navds-global-color-blue-800);
+}
+
+/* Monthpicker */
+.navds-date__month-button {
+  all: unset;
+  text-align: center;
+  width: 3rem;
+  height: 2.75rem;
+  text-transform: capitalize;
+  border-radius: var(--navds-border-radius-medium);
+  cursor: pointer;
+}
+
+.navds-date__month-button:focus,
+.navds-monthpicker__caption-button:focus {
+  box-shadow: var(--navds-shadow-focus);
+  z-index: 1;
+}
+
+.navds-date__year-label {
+  display: flex;
+  align-items: center;
+}
+
+.navds-date__wrapper,
+.navds-date__standalone-wrapper {
+  height: fit-content;
+  width: fit-content;
+}
+
+.navds-date .navds-date__field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+}
+
+/* Focus layering */
+.navds-date__field-input:focus,
+.navds-date__field-button {
+  z-index: 1;
+}
+
+.navds-date .rdp-day_selected,
+.navds-monthpicker__month--selected {
+  color: var(--navds-global-color-white);
+  background: var(--navds-global-color-deepblue-500);
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,
+.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover {
+  background: var(--navds-global-color-blue-50);
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_today {
+  box-shadow: 0 0 0 1px var(--navds-global-color-deepblue-500);
+}
+
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--navds-spacing-2);
+}
+
+.navds-date__caption-button {
+  color: var(--navds-global-color-gray-900);
+}
+
+.navds-date__field-input {
+  padding-right: var(--navds-spacing-12);
+}
+
+.navds-form-field--small .navds-date__field-input {
+  padding-right: var(--navds-spacing-8);
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: var(--navds-spacing-2);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--navds-global-color-gray-900);
+}
+
+.navds-form-field--small .navds-date__field-button {
+  right: var(--navds-spacing-2);
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.navds-form-field--small .navds-date__field-button svg {
+  font-size: var(--navds-font-size-medium);
+}
+
+.navds-form-field--disabled .navds-date__field-button {
+  opacity: 1;
+}
+
+.navds-date__caption__year {
+  width: 5rem;
+}

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-confirmation-panel-color-background: var(
     --navds-global-color-orange-50
   );

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-error-summary-color-background: var(
     --navds-semantic-color-component-background-light
   );

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

@@ -1,11 +1,9 @@
-:root {
+:root,
+:host {
   --navds-radio-checkbox-color-background: var(
     --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 +73,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

@@ -1,4 +1,5 @@
 :root,
+:host,
 [data-theme="light"] {
   --navds-search-color-text: var(--navds-semantic-color-text);
   --navds-search-color-border: var(--navds-semantic-color-border);

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-select-color-background: var(
     --navds-semantic-color-component-background-light
   );
@@ -16,7 +17,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 +30,7 @@
   display: inline-block;
   position: relative;
   padding: 0.5rem;
-  padding-right: 2.5rem;
+  padding-right: 2rem;
 }
 
 .navds-select__input:hover {
@@ -47,6 +47,7 @@
   display: flex;
   width: 100%;
   align-items: center;
+  color: var(--navds-semantic-color-text);
 }
 
 .navds-select__chevron {

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-switch-color-label: var(--navds-semantic-color-text);
   --navds-switch-color-label-hover: var(
     --navds-semantic-color-interaction-primary
@@ -72,10 +73,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

@@ -1,4 +1,5 @@
 :root,
+:host,
 [data-theme="light"] {
   --navds-text-field-color-text: var(--navds-semantic-color-text);
   --navds-text-field-color-background: var(

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-textarea-color-background: var(
     --navds-semantic-color-component-background-light
   );
@@ -12,7 +13,7 @@
   --navds-textarea-color-shadow-error: var(
     --navds-semantic-color-interaction-danger
   );
-  --navds-textarea-color-counter-text: var(--navds-global-color-gray-400);
+  --navds-textarea-color-counter-text: var(--navds-semantic-color-text-muted);
   --navds-textarea-color-counter-text-error: var(
     --navds-semantic-color-interaction-danger
   );
@@ -37,7 +38,6 @@
   resize: none;
   width: 100%;
   display: block;
-  min-height: 48px;
   color: var(--navds-text-field-color-text);
 }
 

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-guide-panel-color-background: var(
     --navds-semantic-color-component-background-light
   );
@@ -13,7 +14,7 @@
  */
 .navds-guide-panel {
   position: relative;
-  padding-left: 2.5rem;
+  padding-left: var(--navds-spacing-10);
 }
 
 .navds-guide-panel__content {
@@ -21,23 +22,23 @@
   border-radius: var(--navds-border-radius-medium);
   border: 2px solid var(--navds-guide-panel-color-border);
   min-height: 7.25rem;
-  padding: 1.5rem;
-  padding-left: 3.5rem;
+  padding: var(--navds-spacing-6);
+  padding-left: var(--navds-spacing-14);
 }
 
 .navds-guide-panel--poster {
   padding-left: 0;
-  padding-top: 3.125rem;
+  padding-top: var(--navds-spacing-12);
 }
 
 .navds-guide-panel--poster .navds-guide-panel__content {
-  padding: 2rem;
-  padding-top: 4.25rem;
+  padding: var(--navds-spacing-8);
+  padding-top: var(--navds-spacing-16);
 }
 
 .navds-guide-panel .navds-guide {
   position: absolute;
-  top: 1rem;
+  top: var(--navds-spacing-4);
   transform: translateX(-50%);
 }
 
@@ -75,6 +76,6 @@
 }
 
 .navds-guide__illustration--medium {
-  height: 6.25rem;
-  width: 6.25rem;
+  height: 6rem;
+  width: 6rem;
 }

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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-help-text-color: var(--navds-semantic-color-interaction-primary);
   --navds-help-text-color-hover: var(
     --navds-semantic-color-component-background-light
@@ -15,7 +16,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 +35,37 @@
   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);
+  max-width: 65ch;
+
+  --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

@@ -2,32 +2,26 @@
 @import "baseline/baseline.css";
 @import "typography.css";
 @import "grid.css";
-
 @import "accordion.css";
 @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";
+@import "date.css";
 @import "tag.css";
 @import "tooltip.css";
 @import "toggle-group.css";
 @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

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-link-panel-color-text: var(--navds-semantic-color-text);
   --navds-link-panel-color-border-hover: var(
     --navds-semantic-color-interaction-primary

@navikt/core/css/link.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-link-color-text: var(--navds-semantic-color-link);
   --navds-link-color-text-focus: var(--navds-semantic-color-text-inverted);
   --navds-link-color-text-active: var(--navds-semantic-color-text-inverted);

@navikt/core/css/loader.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-loader-color-foreground: var(--navds-global-color-gray-400);
   --navds-loader-color-background: rgb(0 0 0 / 0.05);
   --navds-loader-color-neutral-foreground: var(--navds-global-color-gray-400);

@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/modal.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-modal-color-background: var(
     --navds-semantic-color-component-background-light
   );

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.18.28",
+  "version": "1.3.24",
   "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.8",
+    "@navikt/ds-tokens": "^1.3.24",
     "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,13 @@
-: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
-  );
+:root,
+:host {
   --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 +20,52 @@
   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:where(.navds-pagination--prev-next--with-text) {
+  padding-left: 0.375rem;
+  padding-right: 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:where(.navds-pagination--prev-next--with-text) {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
 }
 
 .navds-pagination--invisible {

@navikt/core/css/panel.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-panel-color-background: var(
     --navds-semantic-color-component-background-light
   );

@navikt/core/css/popover.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-popover-color-background: var(
     --navds-semantic-color-component-background-light
   );
@@ -28,55 +29,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,44 +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-1);
-}
-
-.navds-read-more:not(.navds-read-more--open) + .ReactCollapse--collapse {
-  padding: 0;
-}
-
 .navds-read-more__content {
+  margin-top: var(--navds-spacing-1);
   border-left: 2px solid rgba(38 38 38 / 0.36);
   margin-left: 11px;
-  padding-left: 15px;
+  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);
 }
 
@@ -58,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-small);
-  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

@@ -36,6 +36,11 @@
   grid-column: 1;
 }
 
+.navds-stepper__step--behind.navds-stepper__step--completed
+  + .navds-stepper__line {
+  background-color: var(--navds-global-color-blue-500);
+}
+
 .navds-stepper__line--1 {
   grid-row: line-1;
   display: none;
@@ -55,7 +60,6 @@
   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;
@@ -73,6 +77,11 @@ button.navds-stepper__step {
   text-align: inherit;
 }
 
+.navds-stepper__step--non-interactive {
+  color: var(--navds-global-color-gray-600);
+  cursor: default;
+}
+
 :where(.navds-stepper__step):focus {
   outline: none;
   box-shadow: var(--navds-shadow-focus);
@@ -91,10 +100,17 @@ button.navds-stepper__step {
   line-height: 1;
 }
 
+.navds-stepper__circle--success {
+  border: none;
+  background: none;
+  font-size: 28px;
+}
+
 .navds-stepper__content {
   min-width: fit-content;
   line-height: 1.5;
   grid-column: content;
+  padding-top: 0.035rem;
 }
 
 /* Horizontal */
@@ -161,11 +177,15 @@ button.navds-stepper__step {
   color: var(--navds-semantic-color-interaction-primary-selected);
 }
 
-:where(.navds-stepper__step:not(.navds-stepper__step--active):hover)
-  .navds-stepper__content {
+:where(.navds-stepper__step:hover) .navds-stepper__content {
   text-decoration: underline;
 }
 
+:where(.navds-stepper__step--non-interactive:hover, .navds-stepper__step--active:hover)
+  .navds-stepper__content {
+  text-decoration: none;
+}
+
 :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);
@@ -178,3 +198,41 @@ button.navds-stepper__step {
     --navds-semantic-color-interaction-primary-hover-subtle
   );
 }
+
+/* Non-interactive */
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
+  .navds-stepper__content {
+  color: var(--navds-global-color-gray-900);
+}
+
+.navds-stepper__step--non-interactive.navds-stepper__step--behind.navds-stepper__step--completed
+  + .navds-stepper__line {
+  background-color: var(--navds-global-color-gray-600);
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active)
+  .navds-stepper__circle {
+  background-color: var(--navds-global-color-gray-900);
+  border-color: var(--navds-global-color-gray-900);
+  color: var(--navds-global-color-white);
+}
+
+:where(.navds-stepper__step--non-interactive:hover) .navds-stepper__circle {
+  background-color: transparent;
+}
+
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active:hover)
+  .navds-stepper__circle {
+  background-color: var(--navds-global-color-gray-900);
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active)
+  .navds-stepper__circle {
+  background-color: inherit;
+  color: var(--navds-global-color-deepblue-500);
+}
+
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
+  .navds-stepper__circle {
+  color: var(--navds-global-color-gray-900);
+}

@navikt/core/css/table.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-table-cell-color-border: var(--navds-semantic-color-border-muted);
   --navds-table-row-color-background-hover: var(
     --navds-semantic-color-canvas-background
@@ -33,7 +34,7 @@
   display: table-row;
 }
 
-.navds-table__body .navds-table__row:hover {
+.navds-table__body .navds-table__row--shade-on-hover:hover {
   background-color: var(--navds-table-row-color-background-hover);
 }
 
@@ -41,20 +42,21 @@
   background-color: var(--navds-table-row-color-background-selected);
 }
 
-.navds-table__body .navds-table__row--selected:hover {
+.navds-table__body
+  .navds-table__row--shade-on-hover.navds-table__row--selected:hover {
   background-color: var(--navds-table-row-color-background-selected-hover);
 }
 
 .navds-table--zebra-stripes
   .navds-table__body
-  .navds-table__row:nth-child(odd):not(:hover):not(.navds-table__row--selected) {
+  :where(.navds-table__row:nth-child(odd):not(.navds-table__row--selected)) {
   background-color: var(--navds-table-row-color-background-zebra);
 }
 
 .navds-table--zebra-stripes
   .navds-table__body
-  .navds-table__expandable-row:nth-child(4n
-    + 1):not(:hover):not(.navds-table__row--selected) {
+  :where(.navds-table__expandable-row:nth-child(4n
+      + 1):not(.navds-table__row--selected)) {
   background-color: transparent;
 }
 
@@ -87,11 +89,17 @@
   text-align: center;
 }
 
-.navds-table__body .navds-table__row:hover .navds-table__header-cell,
-.navds-table__body .navds-table__row:hover .navds-table__data-cell {
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover)
+  .navds-table__header-cell,
+:where(.navds-table__body .navds-table__row--shade-on-hover:hover)
+  .navds-table__data-cell {
   border-color: var(--navds-table-cell-color-border-hover);
 }
 
+:where(.navds-table__expandable-row--open:hover) .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
 .navds-table--small .navds-table__header-cell,
 .navds-table--small .navds-table__data-cell {
   padding: var(--navds-spacing-2) var(--navds-spacing-3);
@@ -160,8 +168,16 @@
   flex-shrink: 0;
 }
 
-.navds-table__expandable-row--open .navds-table__header-cell,
+.navds-table__expandable-row:not(.navds-table__expandable-row--open)
+  .navds-table__data-cell {
+  transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
+}
+
 .navds-table__expandable-row--open .navds-table__data-cell {
+  border-bottom-color: transparent;
+}
+
+.navds-table__expandable-row--open .navds-table__header-cell {
   border-color: var(--navds-semantic-color-border-muted);
 }
 
@@ -224,8 +240,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/tag.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-tag-color-border: var(--navds-semantic-color-border-muted);
   --navds-tag-color-background: var(
     --navds-semantic-color-component-background-alternate

@navikt/core/css/toggle-group.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --navds-toggle-group-color-background: var(
     --navds-semantic-color-component-background-light
   );
@@ -18,6 +19,12 @@
   );
 }
 
+.navds-toggle-group__wrapper {
+  display: grid;
+  justify-items: start;
+  gap: var(--navds-spacing-2);
+}
+
 .navds-toggle-group {
   border-radius: 7px; /* Custom value OK */
   background-color: var(--navds-toggle-group-color-background);
@@ -91,7 +98,3 @@
   > svg {
   font-size: 1.125rem;
 }
-
-.navds-toggle-group__label {
-  margin-bottom: 0.5rem;
-}

@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,4 +1,5 @@
 :root,
+:host,
 [data-theme="light"] {
   --navds-error-message-color-text: var(
     --navds-semantic-color-feedback-danger-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

@@ -1955,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": "",
@@ -2327,6 +2351,18 @@
     "created_at": "2021-04-15T07:12:49.753Z",
     "pageName": "Status"
   },
+  {
+    "name": "Sun",
+    "description": "",
+    "created_at": "2022-10-18T11:04:04.614Z",
+    "pageName": "Interface"
+  },
+  {
+    "name": "SunFilled",
+    "description": "",
+    "created_at": "2022-10-18T11:04:04.607Z",
+    "pageName": "Interface"
+  },
   {
     "name": "System",
     "description": "",
@@ -2351,6 +2387,12 @@
     "created_at": "2021-01-11T13:37:55.639Z",
     "pageName": "Settings"
   },
+  {
+    "name": "Table",
+    "description": "",
+    "created_at": "2022-09-16T10:02:07.689Z",
+    "pageName": "Interface"
+  },
   {
     "name": "TalkingRoom",
     "description": "",

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.8.20",
+  "version": "1.3.24",
   "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/EmailOpened.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 d="M1 8.2L0.518081 7.32378L0 7.60873V8.2H1ZM23 8.2H24V7.60873L23.4819 7.32378L23 8.2ZM12 2.15L12.4819 1.27378L12 1.00873L11.5181 1.27378L12 2.15ZM12 15L11.5211 15.8779L12 16.1391L12.4789 15.8779L12 15ZM22 20H2V22H22V20ZM1.48192 9.07622L12.4819 3.02622L11.5181 1.27378L0.518081 7.32378L1.48192 9.07622ZM11.5181 3.02622L22.5181 9.07622L23.4819 7.32378L12.4819 1.27378L11.5181 3.02622ZM22 8.2V9H24V8.2H22ZM2 9V8.2H0V9H2ZM22 9V20H24V9H22ZM22.5211 8.1221L13.5211 13.0312L14.4789 14.787L23.4789 9.8779L22.5211 8.1221ZM13.5211 13.0312L11.5211 14.1221L12.4789 15.8779L14.4789 14.787L13.5211 13.0312ZM23.5605 19.1718L14.5605 13.0809L13.4395 14.7373L22.4395 20.8282L23.5605 19.1718ZM2 20V9H0V20H2ZM12.4789 14.1221L10.4789 13.0312L9.52115 14.787L11.5211 15.8779L12.4789 14.1221ZM10.4789 13.0312L1.47885 8.1221L0.521148 9.8779L9.52115 14.787L10.4789 13.0312ZM1.56048 20.8282L10.5605 14.7373L9.43952 13.0809L0.439522 19.1718L1.56048 20.8282ZM2 20H2H0C0 21.1046 0.895431 22 2 22V20ZM22 22C23.1046 22 24 21.1046 24 20H22V22Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.00873L24 7.60873V20C24 21.1046 23.1046 22 22 22H2C0.895432 22 0 21.1046 0 20V7.60873L12 1.00873ZM2 10.6845V18.1158L8.08008 14.0009L2 10.6845ZM10.056 15.0787L2.78419 20H21.2158L13.944 15.0787L12 16.1391L10.056 15.0787ZM15.9199 14.0009L22 18.1158V10.6845L15.9199 14.0009ZM21.6486 8.59802L12 3.29127L2.35136 8.59802L12 13.8609L21.6486 8.59802Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/Notes.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.01096L23.0598 1.04481C24.3286 2.3565 24.3404 4.40707 23.2057 5.78656L22 7.25109V24H2V2H17.2933L17.7456 1.45042L17.8862 1.27963L18.0394 1.10889L18.0696 1.07797C19.3139 -0.193727 21.3848 -0.408755 22.8251 0.823961L22.8608 0.854533L23.0271 1.01096ZM15.6471 4H4V22H20V9.68214L14.1812 16.7559L9.272 18.975L6.96045 20.0199L7.55858 17.5547L8.83932 12.2761L15.2039 4.53926L15.2042 4.53888L15.2039 4.53857L15.6471 4ZM21.6612 4.51583L21.6611 4.51599L20.1639 6.33464L20.1634 6.33523L12.9327 15.1254L9.87014 16.5098L10.6749 13.1929L16.7488 5.80947L17.939 4.3626L17.9393 4.3622L17.9394 4.36215L17.9405 4.3608L18.0188 4.26567L19.4033 2.58351L19.4991 2.47669C20.0702 1.89304 20.9511 1.85255 21.5246 2.34338L21.5246 2.3434L21.6223 2.43532L21.6223 2.43534C22.1422 2.97278 22.1888 3.87388 21.6616 4.51541L21.6612 4.51583Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.01096L23.0598 1.04481C24.3286 2.3565 24.3404 4.40707 23.2057 5.78656L14.1812 16.7559L6.96045 20.0199L8.83932 12.2761L16.4721 2.9977L16.4746 2.99469L17.8862 1.27962L18.0394 1.10889L18.0696 1.07796C19.3139 -0.193727 21.3848 -0.408755 22.8251 0.823961L22.8608 0.854533L23.0271 1.01096ZM21.6223 2.43534C22.1422 2.97278 22.1884 3.87445 21.6611 4.51599L12.9327 15.1254L9.87014 16.5098L10.6749 13.1929L19.4033 2.58351L19.4991 2.47669C20.0702 1.89304 20.9511 1.85256 21.5246 2.3434L21.6223 2.43534ZM2 2H14.7037L13.0583 4H4V22H20V12.8311L22 10.4001V24H2V2Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/NotesFilled.svg

@@ -1,3 +1,3 @@
 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.00735L23.0598 1.04119C24.3286 2.35288 24.3404 4.40345 23.2057 5.78294L21.708 7.60217L14.1812 16.7523L22 7.24842V24H2V2H17.2903L17.7456 1.44681L17.8862 1.27601L18.0394 1.10527L18.0696 1.07435C19.3139 -0.197341 21.3848 -0.412369 22.8251 0.820347L22.8608 0.850919L23.0271 1.00735ZM21.6612 4.51222L21.6611 4.51237L20.1639 6.33103L20.1634 6.33162L12.9327 15.1218L9.87014 16.5062L10.6749 13.1893L16.7488 5.80585L17.939 4.35898L17.9393 4.35859L17.9394 4.35853L17.9405 4.35718L18.0188 4.26206L19.4033 2.5799L19.4991 2.47307C20.0702 1.88943 20.9511 1.84893 21.5246 2.33977L21.5246 2.33978L21.6223 2.43171L21.6223 2.43172C22.1422 2.96916 22.1888 3.87027 21.6616 4.5118L21.6612 4.51222Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.01096L23.0598 1.04481C24.3286 2.3565 24.3404 4.40707 23.2057 5.78656L14.1812 16.7559L6.96045 20.0199L8.83932 12.2761L16.4721 2.9977L16.4746 2.99469L17.8862 1.27963L18.0394 1.10889L18.0696 1.07797C19.3139 -0.193725 21.3848 -0.408754 22.8251 0.823963L22.8608 0.854535L23.0271 1.01096ZM2 2H14.7037L13.0583 4H4V22H20V12.8311L22 10.4001V24H2V2Z" fill="#262626"/>
 </svg>

@navikt/core/icons/svg/RotateLeft.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="M10.2931 5.29289L13.7931 1.79289L15.2074 3.20711L13.4145 5H16C19.3137 5 22 7.68629 22 11V15H20V11C20 8.79086 18.2091 7 16 7H13.4145L15.2074 8.79289L13.7931 10.2071L10.2931 6.70711L9.58603 6L10.2931 5.29289ZM4 11C2.89543 11 2 11.8954 2 13V20C2 21.1046 2.89543 22 4 22H11C12.1046 22 13 21.1046 13 20V13C13 11.8954 12.1046 11 11 11H4ZM4 13H11V20H4V13Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/RotateLeftFilled.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="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM12.7931 1.79289L9.29314 5.29289L8.58603 6L9.29314 6.70711L12.7931 10.2071L14.2074 8.79289L12.4145 7H15C17.2091 7 19 8.79086 19 11V15H21V11C21 7.68629 18.3137 5 15 5H12.4145L14.2074 3.20711L12.7931 1.79289ZM3 13.5C3 12.6716 3.67157 12 4.5 12H10.5C11.3284 12 12 12.6716 12 13.5V19.5C12 20.3284 11.3284 21 10.5 21H4.5C3.67157 21 3 20.3284 3 19.5V13.5Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/RotateRight.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7H10.5859L8.79299 8.79289L10.2072 10.2071L13.7072 6.7071L14.4143 6.00002L13.7072 5.29292L10.2072 1.79267L8.79297 3.20684L10.586 5H8C4.68629 5 2 7.68629 2 11V15H4V11C4 8.79086 5.79086 7 8 7ZM13 11C11.8954 11 11 11.8954 11 13V20C11 21.1046 11.8954 22 13 22H20C21.1046 22 22 21.1046 22 20V13C22 11.8954 21.1046 11 20 11H13ZM13 13H20V20H13V13Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/RotateRightFilled.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="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM11.5858 7H9C6.79086 7 5 8.79086 5 11V15H3V11C3 7.68629 5.68629 5 9 5H11.5859L9.79287 3.20682L11.2071 1.79266L14.7071 5.2929L15.4142 6.00001L14.7071 6.70709L11.2071 10.2071L9.79289 8.79288L11.5858 7ZM12 13.5C12 12.6716 12.6716 12 13.5 12H19.5C20.3284 12 21 12.6716 21 13.5V19.5C21 20.3284 20.3284 21 19.5 21H13.5C12.6716 21 12 20.3284 12 19.5V13.5Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Sun.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C12.5063 1 12.9167 1.41041 12.9167 1.91667V3.75C12.9167 4.25626 12.5063 4.66667 12 4.66667C11.4937 4.66667 11.0833 4.25626 11.0833 3.75V1.91667C11.0833 1.41041 11.4937 1 12 1Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 19.3333C12.5063 19.3333 12.9167 19.7437 12.9167 20.25V22.0833C12.9167 22.5896 12.5063 23 12 23C11.4937 23 11.0833 22.5896 11.0833 22.0833V20.25C11.0833 19.7437 11.4937 19.3333 12 19.3333Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3333 12C19.3333 11.4937 19.7437 11.0833 20.25 11.0833H22.0833C22.5896 11.0833 23 11.4937 23 12C23 12.5063 22.5896 12.9167 22.0833 12.9167H20.25C19.7437 12.9167 19.3333 12.5063 19.3333 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 11.4937 1.41041 11.0833 1.91667 11.0833H3.75C4.25626 11.0833 4.66667 11.4937 4.66667 12C4.66667 12.5063 4.25626 12.9167 3.75 12.9167H1.91667C1.41041 12.9167 1 12.5063 1 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22183 4.22183C4.57981 3.86385 5.16021 3.86385 5.51819 4.22183L6.81455 5.51819C7.17253 5.87617 7.17253 6.45657 6.81455 6.81455C6.45657 7.17253 5.87617 7.17253 5.51819 6.81455L4.22183 5.51819C3.86385 5.16021 3.86384 4.57981 4.22183 4.22183Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1854 17.1854C17.5434 16.8275 18.1238 16.8275 18.4818 17.1854L19.7782 18.4818C20.1362 18.8398 20.1362 19.4202 19.7782 19.7782C19.4202 20.1362 18.8398 20.1362 18.4818 19.7782L17.1854 18.4818C16.8275 18.1238 16.8275 17.5434 17.1854 17.1854Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1854 6.81455C16.8275 6.45657 16.8275 5.87617 17.1854 5.51819L18.4818 4.22182C18.8398 3.86384 19.4202 3.86384 19.7782 4.22182C20.1362 4.57981 20.1362 5.16021 19.7782 5.51819L18.4818 6.81455C18.1238 7.17253 17.5434 7.17253 17.1854 6.81455Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22183 19.7782C3.86385 19.4202 3.86385 18.8398 4.22183 18.4818L5.51819 17.1854C5.87617 16.8275 6.45657 16.8275 6.81455 17.1854C7.17253 17.5434 7.17253 18.1238 6.81455 18.4818L5.51819 19.7782C5.16021 20.1362 4.57981 20.1362 4.22183 19.7782Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/SunFilled.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C12.5063 1 12.9167 1.41041 12.9167 1.91667V3.75C12.9167 4.25626 12.5063 4.66667 12 4.66667C11.4937 4.66667 11.0833 4.25626 11.0833 3.75V1.91667C11.0833 1.41041 11.4937 1 12 1Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 19.3333C12.5063 19.3333 12.9167 19.7437 12.9167 20.25V22.0833C12.9167 22.5896 12.5063 23 12 23C11.4937 23 11.0833 22.5896 11.0833 22.0833V20.25C11.0833 19.7437 11.4937 19.3333 12 19.3333Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.3333 12C19.3333 11.4937 19.7437 11.0833 20.25 11.0833H22.0833C22.5896 11.0833 23 11.4937 23 12C23 12.5063 22.5896 12.9167 22.0833 12.9167H20.25C19.7437 12.9167 19.3333 12.5063 19.3333 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 11.4937 1.41041 11.0833 1.91667 11.0833H3.75C4.25626 11.0833 4.66667 11.4937 4.66667 12C4.66667 12.5063 4.25626 12.9167 3.75 12.9167H1.91667C1.41041 12.9167 1 12.5063 1 12Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22183 4.22183C4.57981 3.86385 5.16021 3.86385 5.51819 4.22183L6.81455 5.51819C7.17253 5.87617 7.17253 6.45657 6.81455 6.81455C6.45657 7.17253 5.87617 7.17253 5.51819 6.81455L4.22183 5.51819C3.86385 5.16021 3.86384 4.57981 4.22183 4.22183Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1854 17.1854C17.5434 16.8275 18.1238 16.8275 18.4818 17.1854L19.7782 18.4818C20.1362 18.8398 20.1362 19.4202 19.7782 19.7782C19.4202 20.1362 18.8398 20.1362 18.4818 19.7782L17.1854 18.4818C16.8275 18.1238 16.8275 17.5434 17.1854 17.1854Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1854 6.81455C16.8275 6.45657 16.8275 5.87617 17.1854 5.51819L18.4818 4.22182C18.8398 3.86384 19.4202 3.86384 19.7782 4.22182C20.1362 4.57981 20.1362 5.16021 19.7782 5.51819L18.4818 6.81455C18.1238 7.17253 17.5434 7.17253 17.1854 6.81455Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22183 19.7782C3.86385 19.4202 3.86385 18.8398 4.22183 18.4818L5.51819 17.1854C5.87617 16.8275 6.45657 16.8275 6.81455 17.1854C7.17253 17.5434 7.17253 18.1238 6.81455 18.4818L5.51819 19.7782C5.16021 20.1362 4.57981 20.1362 4.22183 19.7782Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="#262626"/>
+<path d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z" fill="#262626"/>
+</svg>

@navikt/core/icons/svg/Table.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="M3.79289 3.79289C4.30057 3.28522 4.98913 3 5.70711 3H18.2929C19.0108 3 19.6995 3.28519 20.2072 3.79294C20.7147 4.30056 21 4.98908 21 5.70711V18.2929C21 19.0108 20.7147 19.6995 20.2071 20.2071C19.6995 20.7147 19.0108 21 18.2929 21H5.70711C4.98908 21 4.30056 20.7147 3.79294 20.2072C3.28519 19.6995 3 19.0108 3 18.2929V5.70711C3 4.98913 3.28522 4.30057 3.79289 3.79289ZM5.70711 5C5.51957 5 5.33971 5.0745 5.20711 5.20711C5.0745 5.33971 5 5.51957 5 5.70711V8.08861H19V5.70711C19 5.51962 18.9255 5.33972 18.7928 5.20706C18.6603 5.07453 18.4804 5 18.2929 5H5.70711ZM19 10.0886H16V19H18.2929C18.4804 19 18.6603 18.9255 18.7929 18.7929C18.9255 18.6603 19 18.4804 19 18.2929V10.0886ZM14 19V10.0886H10V19H14ZM8 19V10.0886H5V18.2929C5 18.4804 5.07453 18.6603 5.20706 18.7928C5.33972 18.9255 5.51962 19 5.70711 19H8Z" fill="#262626"/>
+</svg>

@navikt/core/icons/util/useId.ts

@@ -1,22 +1,39 @@
-import { useLayoutEffect, useState } from "react";
-import { v4 } from "uuid";
+//https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/useId.ts
+import React, { useEffect, useState } from "react";
 
-const canUseDOM = (): boolean => {
-  return (
-    typeof window !== "undefined" &&
-    typeof window.document !== "undefined" &&
-    typeof window.document.createElement !== "undefined"
-  );
-};
+let globalId = 0;
+function useGlobalId(idOverride?: string): string | undefined {
+  const [defaultId, setDefaultId] = useState(idOverride);
+  const id = idOverride || defaultId;
+  useEffect(() => {
+    if (defaultId == null) {
+      // Fallback to this default id when possible.
+      // Use the incrementing value for client-side rendering only.
+      // We can't use it server-side.
+      // If you want to use random values please consider the Birthday Problem: https://en.wikipedia.org/wiki/Birthday_problem
+      globalId += 1;
+      setDefaultId(`navds-id-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
 
-export const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {};
-
-export const useId: (id?: string) => string = (id) => {
-  const [newId, setNewId] = useState<string | undefined>(undefined);
-
-  useClientLayoutEffect(() => {
-    setNewId(v4());
-  }, []);
-
-  return id ?? newId ?? "";
-};
+// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId: undefined | (() => string) = (React as any)[
+  // eslint-disable-next-line no-useless-concat
+  "useId" + ""
+];
+/**
+ *
+ * @example <div id={useId()} />
+ * @param idOverride
+ * @returns {string}
+ */
+export function useId(idOverride?: string): string | undefined {
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? reactId;
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- `useId` is invariant at runtime.
+  return useGlobalId(idOverride);
+}

@navikt/core/react/README.md

@@ -0,0 +1,44 @@
+# NAV React-components
+
+All of NAVs core React-components
+
+- Uses styling from `@navikt/ds-css`
+- All components implemented with React.forwardRef!
+- Most components extend native html-elements.
+
+## Installation
+
+Install `@navikt/ds-react` with yarn
+
+```bash
+  yarn add @navikt/ds-react
+```
+
+Install `@navikt/ds-react` with npm
+
+```bash
+  npm install @navikt/ds-react
+```
+
+## Usage
+
+Remember to also import @navikt/ds-css to apply styling! See README-link under "learn more"-section below.
+
+```javascript
+import { Button } from "@navikt/ds-react";
+
+function App() {
+  return <Button variant="secondary">Click me!</Button>;
+}
+```
+
+## Learn more
+
+- [Designsystem documentation](https://aksel.nav.no/designsystem)
+- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
+- [ds-css README](https://github.com/navikt/Designsystemet/blob/master/%40navikt/core/css/README.md)
+
+## License
+
+[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)

@navikt/core/react/jest-setup.ts

@@ -1 +1,6 @@
 import "@testing-library/jest-dom/extend-expect";
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.25",
+  "version": "1.3.24",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -35,35 +35,29 @@
     "test": "jest"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "0.6.0",
-    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.20",
-    "@popperjs/core": "^2.10.1",
-    "@radix-ui/react-tabs": "0.1.5",
-    "@radix-ui/react-toggle-group": "0.1.5",
-    "classnames": "^2.2.6",
-    "react-collapse": "^5.1.0",
-    "react-merge-refs": "^1.1.0",
-    "react-modal": "3.15.1",
-    "react-popper": "^2.2.5",
-    "uuid": "^8.3.2"
+    "@floating-ui/react-dom-interactions": "0.9.2",
+    "@navikt/ds-icons": "^1.3.24",
+    "@radix-ui/react-tabs": "1.0.0",
+    "@radix-ui/react-toggle-group": "1.0.0",
+    "clsx": "^1.2.1",
+    "date-fns": "2.29.3",
+    "react-day-picker": "8.3.4",
+    "react-modal": "3.15.1"
   },
   "devDependencies": {
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "^5.16.0",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^14.0.0",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.0",
     "@types/faker": "5.5.8",
     "@types/jest": "^27.0.1",
     "@types/node": "^17.0.35",
-    "@types/react-collapse": "^5.0.1",
     "@types/react-modal": "^3.13.1",
     "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",
     "faker": "5.5.3",
     "fast-glob": "3.2.11",
     "jest": "^27.5.0",
-    "react-docgen-typescript": "2.2.2",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
@@ -75,5 +69,10 @@
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   }
 }

@navikt/core/react/src/accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import cl from "classnames";
+import cl from "clsx";
 import React, { forwardRef } from "react";
 import AccordionItem, { AccordionItemType } from "./AccordionItem";
 import AccordionContent, { AccordionContentType } from "./AccordionContent";

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -1,6 +1,6 @@
-import cl from "classnames";
+import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Collapse, UnmountClosed } from "react-collapse";
+import AnimateHeight from "../util/AnimateHeight";
 import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
@@ -8,8 +8,6 @@ export interface AccordionContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Content inside Accordion.Content
-   * If renderContentWhenClosed is false in Accordion.Item,
-   * this will be removed from dom when Accordion is closed
    */
   children: React.ReactNode;
 }
@@ -19,7 +17,7 @@ export type AccordionContentType = React.ForwardRefExoticComponent<
 >;
 
 const AccordionContent: AccordionContentType = forwardRef(
-  ({ children, className, id, ...rest }, ref) => {
+  ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
     if (context === null) {
@@ -29,21 +27,17 @@ const AccordionContent: AccordionContentType = forwardRef(
       return null;
     }
 
-    const CollapseComponent = context.renderContentWhenClosed
-      ? Collapse
-      : UnmountClosed;
-
     return (
-      <div ref={ref} aria-labelledby={context.buttonId} {...rest}>
-        <CollapseComponent isOpened={context.open}>
-          <BodyLong
-            as="div"
-            className={cl("navds-accordion__content", className)}
-          >
-            {children}
-          </BodyLong>
-        </CollapseComponent>
-      </div>
+      <AnimateHeight height={context.open ? "auto" : 0} duration={250}>
+        <BodyLong
+          {...rest}
+          as="div"
+          ref={ref}
+          className={cl("navds-accordion__content", className)}
+        >
+          {children}
+        </BodyLong>
+      </AnimateHeight>
     );
   }
 );

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -1,8 +1,8 @@
 import { Expand, ExpandFilled } from "@navikt/ds-icons";
-import cl from "classnames";
+import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { Heading } from "..";
 import { AccordionItemContext } from "./AccordionItem";
-import { useClientLayoutEffect, useId } from "..";
 
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -17,15 +17,8 @@ export type AccordionHeaderType = React.ForwardRefExoticComponent<
 >;
 
 const AccordionHeader: AccordionHeaderType = forwardRef(
-  ({ children, className, id, onClick, ...rest }, ref) => {
+  ({ children, className, onClick, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
-    const newId = useId(id);
-
-    const setButtonId = context && context.setButtonId;
-
-    useClientLayoutEffect(() => {
-      setButtonId && setButtonId(id ? newId : `accordionContent-${newId}`);
-    }, [setButtonId, newId]);
 
     if (context === null) {
       console.error(
@@ -45,18 +38,18 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
       <button
         {...rest}
         ref={ref}
-        id={context.buttonId}
-        className={cl(
-          "navds-accordion__header",
-          className,
-          "navds-heading",
-          "navds-heading--small"
-        )}
+        className={cl("navds-accordion__header", className)}
         type="button"
         onClick={handleClick}
         aria-expanded={context.open}
       >
-        <span className="navds-accordion__header-content">{children}</span>
+        <Heading
+          size="small"
+          as="span"
+          className="navds-accordion__header-content"
+        >
+          {children}
+        </Heading>
         <Expand aria-hidden className="navds-accordion__expand-icon" />
         <ExpandFilled
           aria-hidden

@navikt/core/react/src/accordion/AccordionItem.tsx

@@ -1,4 +1,4 @@
-import cl from "classnames";
+import cl from "clsx";
 import React, { createContext, forwardRef, useState } from "react";
 
 export interface AccordionItemProps
@@ -18,11 +18,6 @@ export interface AccordionItemProps
    * @default false
    */
   defaultOpen?: boolean;
-  /**
-   * Removes content inside Accordion.Content if false from dom when closed
-   * @default false
-   */
-  renderContentWhenClosed?: boolean;
 }
 
 export type AccordionItemType = React.ForwardRefExoticComponent<
@@ -32,9 +27,6 @@ export type AccordionItemType = React.ForwardRefExoticComponent<
 export interface AccordionItemContextProps {
   open: boolean;
   toggleOpen: () => void;
-  setButtonId: (id: string) => void;
-  buttonId: string;
-  renderContentWhenClosed: boolean;
 }
 
 export const AccordionItemContext =
@@ -42,20 +34,10 @@ export const AccordionItemContext =
 
 const AccordionItem: AccordionItemType = forwardRef(
   (
-    {
-      children,
-      className,
-      open,
-      defaultOpen = false,
-      renderContentWhenClosed = false,
-      onClick,
-      id,
-      ...rest
-    },
+    { children, className, open, defaultOpen = false, onClick, id, ...rest },
     ref
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
-    const [buttonId, setButtonId] = useState("");
 
     return (
       <div
@@ -73,9 +55,6 @@ const AccordionItem: AccordionItemType = forwardRef(
                 setInternalOpen((iOpen) => !iOpen);
               }
             },
-            renderContentWhenClosed,
-            setButtonId,
-            buttonId,
           }}
         >
           {children}

@navikt/core/react/src/accordion/accordion.stories.tsx

@@ -17,45 +17,45 @@ export default {
 const Content = () => (
   <Accordion.Content>
     Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
-    laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi qui
-    nostrud sit consectetur consectetur officia nostrud ullamco. Est ex duis
-    proident nostrud elit qui laborum anim minim eu eiusmod. Veniam in nostrud
-    sunt tempor velit incididunt sint ex dolor qui velit id eu. Deserunt magna
-    sunt velit in. Est exercitation id cillum qui do. Minim adipisicing nostrud
-    commodo proident occaecat aliquip nulla anim proident reprehenderit. Magna
-    ipsum officia veniam cupidatat duis veniam dolore reprehenderit mollit
-    velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
-    laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
-    reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo cillum
-    eiusmod eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+    laboris voluptate officia pariatur. <a href="#Lorem">Lorem est</a> ex anim
+    velit occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
+    ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
+    eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor qui
+    velit id eu. Deserunt magna sunt velit in. Est exercitation id cillum qui
+    do. Minim adipisicing nostrud commodo proident occaecat aliquip nulla anim
+    proident reprehenderit. Magna ipsum officia veniam cupidatat duis veniam
+    dolore reprehenderit mollit velit. Ut consequat commodo minim occaecat id
+    pariatur. Nisi enim tempor laborum commodo. Tempor sit quis nostrud eu
+    cupidatat sunt commodo reprehenderit irure deserunt eiusmod ipsum.
+    Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui proident
+    commodo adipisicing eiusmod id.
   </Accordion.Content>
 );
 
-export const Default = (props) => {
+const Item = (props) => {
   const [open, setOpen] = useState(false);
 
-  const Item = () =>
-    props.controlled ? (
-      <Accordion.Item
-        open={open}
-        renderContentWhenClosed={props.renderContentWhenClosed}
-      >
-        <Accordion.Header onClick={() => setOpen(!open)}>
-          Accordion header text
-        </Accordion.Header>
-        <Content />
-      </Accordion.Item>
-    ) : (
-      <Accordion.Item renderContentWhenClosed={props.renderContentWhenClosed}>
-        <Accordion.Header>Accordion header text</Accordion.Header>
-        <Content />
-      </Accordion.Item>
-    );
+  return props.controlled ? (
+    <Accordion.Item open={open}>
+      <Accordion.Header onClick={() => setOpen(!open)}>
+        Accordion header text
+      </Accordion.Header>
+      <Content />
+    </Accordion.Item>
+  ) : (
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+  );
+};
+
+export const Default = (props) => {
   return (
     <div style={{ width: 500 }}>
       <Accordion>
         {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
-          <Item key={y} />
+          <Item key={y} {...props} />
         ))}
       </Accordion>
     </div>
@@ -64,7 +64,6 @@ export const Default = (props) => {
 
 Default.args = {
   controlled: false,
-  renderContentWhenClosed: false,
   nItems: 2,
 };
 

@navikt/core/react/src/alert/Alert.tsx

@@ -4,7 +4,7 @@ import {
   SuccessColored,
   WarningColored,
 } from "@navikt/ds-icons";
-import cl from "classnames";
+import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyLong } from "..";
 
@@ -23,7 +23,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   size?: "medium" | "small";
   /**
-   * Toggles full-width Alert (removes border-radius)
+   * Removes border-radius
    * @default false
    */
   fullWidth?: boolean;

@navikt/core/react/src/alert/alert.stories.tsx

@@ -13,6 +13,12 @@ export default {
         options: ["error", "warning", "info", "success"],
       },
     },
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
   },
 };
 
@@ -36,6 +42,7 @@ export const Default = (props) => (
 
 Default.args = {
   children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+  fullWidth: false,
 };
 
 export const Small = () => {

@navikt/core/react/src/button/Button.tsx

@@ -1,7 +1,6 @@
-import React, { useRef, useState, forwardRef } from "react";
-import mergeRefs from "react-merge-refs";
-import cl from "classnames";
-import { BodyShort, OverridableComponent, Loader } from "../";
+import React, { useRef, useState, forwardRef, useMemo } from "react";
+import cl from "clsx";
+import { OverridableComponent, Loader, mergeRefs, Label } from "../";
 import { useClientLayoutEffect } from "../util";
 
 export interface ButtonProps
@@ -9,7 +8,7 @@ export interface ButtonProps
   /**
    * Button content
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * Changes design and interaction-visuals
    * @default "primary"
@@ -30,6 +29,15 @@ export interface ButtonProps
    * @default false
    */
   loading?: boolean;
+  /**
+   * Button Icon
+   */
+  icon?: React.ReactNode;
+  /**
+   * Icon position in Button
+   * @default "left"
+   */
+  iconPosition?: "left" | "right";
 }
 
 export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
@@ -44,14 +52,17 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
         loading = false,
         disabled,
         style,
+        icon,
+        iconPosition = "left",
         ...rest
       },
       ref
     ) => {
       const buttonRef = useRef<HTMLButtonElement | null>(null);
-      const mergedRef = mergeRefs([buttonRef, ref]);
       const [widthOverride, setWidthOverride] = useState<number>();
 
+      const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+
       useClientLayoutEffect(() => {
         if (loading) {
           const requestID = window.requestAnimationFrame(() => {
@@ -77,6 +88,8 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
             `navds-button--${size}`,
             {
               "navds-button--loading": widthOverride,
+              "navds-button--icon-only": !!icon && !children,
+              "navds-button--disabled": disabled ?? widthOverride,
             }
           )}
           style={{
@@ -85,14 +98,27 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           }}
           disabled={disabled ?? widthOverride ? true : undefined}
         >
-          <BodyShort
-            as="span"
-            className="navds-button__inner"
-            size={size === "medium" ? "medium" : "small"}
-            aria-live="polite"
-          >
-            {widthOverride ? <Loader size={size} /> : children}
-          </BodyShort>
+          {widthOverride ? (
+            <Loader size={size} />
+          ) : (
+            <>
+              {icon && iconPosition === "left" && (
+                <span className="navds-button__icon">{icon}</span>
+              )}
+              {children && (
+                <Label
+                  as="span"
+                  size={size === "medium" ? "medium" : "small"}
+                  aria-live="polite"
+                >
+                  {children}
+                </Label>
+              )}
+              {icon && iconPosition === "right" && (
+                <span className="navds-button__icon">{icon}</span>
+              )}
+            </>
+          )}
         </Component>
       );
     }

@navikt/core/react/src/button/button.stories.tsx

@@ -6,7 +6,7 @@ export default {
   title: "ds-react/Button",
   component: Button,
   parameters: {
-    chromatic: { delay: 300 },
+    chromatic: { delay: 600 },
   },
   argTypes: {
     variant: {
@@ -18,7 +18,13 @@ export default {
     size: {
       control: {
         type: "radio",
-        options: ["medium", "small"],
+        options: ["medium", "small", "xsmall"],
+      },
+    },
+    iconPosition: {
+      control: {
+        type: "radio",
+        options: ["left", "right"],
       },
     },
   },
@@ -40,10 +46,14 @@ const varSwitch = {
 
 export const Default = (props) => {
   return (
-    <Button variant={props.variant} size={props.size} loading={props.loading}>
-      {props.icon ? <Star /> : null}
+    <Button
+      variant={props.variant}
+      size={props.size}
+      loading={props.loading}
+      icon={props.icon ? <Star /> : undefined}
+      iconPosition={props.iconPosition}
+    >
       {props.children}
-      {props.icon ? <Star /> : null}
     </Button>
   );
 };
@@ -51,6 +61,7 @@ export const Default = (props) => {
 Default.args = {
   icon: false,
   loading: false,
+  iconPosition: "left",
   children: "Knapp",
 };
 
@@ -114,26 +125,31 @@ export const Icon = () => (
   <div className="colgap">
     <div className="rowgap">
       {variants.map((variant) => (
-        <Button key={variant} variant={variant}>
-          <Star aria-hidden />
-          <span className="navds-sr-only">Stjerne</span>
-        </Button>
+        <Button
+          key={variant}
+          variant={variant}
+          icon={<Star title="Stjerne" />}
+        />
       ))}
     </div>
     <div className="rowgap">
       {variants.map((variant) => (
-        <Button key={variant} variant={variant} size="small">
-          <Star aria-hidden />
-          <span className="navds-sr-only">Stjerne</span>
-        </Button>
+        <Button
+          key={variant}
+          variant={variant}
+          size="small"
+          icon={<Star title="Stjerne" />}
+        />
       ))}
     </div>
     <div className="rowgap">
       {variants.map((variant) => (
-        <Button key={variant} variant={variant} size="xsmall">
-          <Star aria-hidden />
-          <span className="navds-sr-only">Stjerne</span>
-        </Button>
+        <Button
+          key={variant}
+          variant={variant}
+          size="xsmall"
+          icon={<Star title="Stjerne" />}
+        />
       ))}
     </div>
   </div>
@@ -142,29 +158,59 @@ export const Icon = () => (
 export const IconWText = () => (
   <div className="colgap">
     <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant}>
-          <Star aria-hidden />
+      {variants.map((variant, i) => (
+        <Button
+          key={variant}
+          variant={variant}
+          icon={<Star title="Stjerne" />}
+          iconPosition={i % 2 ? "left" : "right"}
+        >
           {varSwitch[variant]}
-          <Star aria-hidden />
         </Button>
       ))}
     </div>
     <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} size="small">
-          <Star aria-hidden />
+      {variants.map((variant, i) => (
+        <Button
+          key={variant}
+          variant={variant}
+          size="small"
+          icon={<Star title="Stjerne" />}
+          iconPosition={i % 2 ? "left" : "right"}
+        >
           {varSwitch[variant]}
-          <Star aria-hidden />
         </Button>
       ))}
     </div>
     <div className="rowgap">
+      {variants.map((variant, i) => (
+        <Button
+          key={variant}
+          variant={variant}
+          size="xsmall"
+          icon={<Star title="Stjerne" />}
+          iconPosition={i % 2 ? "left" : "right"}
+        >
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const Disabled = () => (
+  <div className="colgap">
+    <div className="rowgap">
       {variants.map((variant) => (
-        <Button key={variant} variant={variant} size="xsmall">
-          <Star aria-hidden />
+        <Button key={variant} variant={variant} disabled>
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} disabled as="a" href="#">
           {varSwitch[variant]}
-          <Star aria-hidden />
         </Button>
       ))}
     </div>

@navikt/core/react/src/card/MicroCard.tsx

@@ -1,32 +0,0 @@
-import React, { forwardRef } from "react";
-import cl from "classnames";
-import { OverridableComponent } from "..";
-
-export interface MicroCardProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  /**
-   * Link text
-   */
-  children: React.ReactNode;
-}
-
-export const MicroCard: OverridableComponent<
-  MicroCardProps,
-  HTMLAnchorElement
-> = forwardRef(({ className, as: Component = "a", children, ...rest }, ref) => (
-  <Component
-    ref={ref}
-    className={cl(
-      "navds-card__micro",
-      "navds-detail",
-      "navds-detail--small",
-      className
-    )}
-    title={children}
-    {...rest}
-  >
-    {children}
-  </Component>
-));
-
-export default MicroCard;

@navikt/core/react/src/card/index.ts

@@ -1,2 +0,0 @@
-export { default as MicroCard } from "./MicroCard";
-export { MicroCardProps } from "./MicroCard";

@navikt/core/react/src/card/stories/card.stories.mdx

@@ -1,26 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { MicroCard } from "../index.ts";
-
-<Meta title="ds-react(deprecated)/card/intro" />
-
-# Hvordan ta i bruk card
-
-## MicroCard
-
-Kan brukes som en vanlig lenke direkte:
-
-```
-<MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
-```
-
-<Canvas>
-  <MicroCard href="/lenke/til/side">Lenketekst</MicroCard>
-</Canvas>
-
-Hvis man ønsker å ta i bruk nextjs sin `Link`-komponent:
-
-```jsx
-<Link href="/lenke/til/side" passHref>
-  <MicroCard>Lenketekst</MicroCard>
-</Link>
-```

@navikt/core/react/src/card/stories/card.stories.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { MicroCard } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
-export default {
-  title: "ds-react(deprecated)/card",
-  component: MicroCard,
-} as Meta;
-
-export const All = () => {
-  return (
-    <div>
-      <h2>MicroCard</h2>
-      <MicroCard href="#">Sit laborum aliqua.</MicroCard>
-    </div>
-  );
-};

@navikt/core/react/src/chat/Bubble.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "clsx";
+import { Detail } from "../typography";
+
+export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Bubble text
+   */
+  children: React.ReactNode;
+  /**
+   * name/sender on bubble
+   */
+  name?: string;
+  /**
+   * Timestamp for sent message
+   */
+  timestamp?: string;
+  /**
+   * Background color on bubble
+   */
+  backgroundColor?: string;
+}
+
+export type BubbleType = React.ForwardRefExoticComponent<
+  BubbleProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const Bubble: BubbleType = forwardRef(
+  ({ children, className, name, timestamp, backgroundColor, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-chat__bubble", className)}
+        style={{ backgroundColor: backgroundColor }}
+        tabIndex={0}
+        {...rest}
+      >
+        {(timestamp || name) && (
+          <div className="navds-chat__top-text">
+            {name && <Detail className="navds-chat__name">{name}</Detail>}
+            {timestamp && (
+              <Detail className="navds-chat__timestamp">{timestamp}</Detail>
+            )}
+          </div>
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Bubble;

@navikt/core/react/src/chat/Chat.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "clsx";
+import Bubble, { BubbleType } from "./Bubble";
+import { BodyLong, BodyShort } from "..";
+
+export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Children of type <Chat.Bubble />
+   */
+  children: React.ReactNode;
+  /**
+   * Chat-message name
+   */
+  name?: string;
+  /**
+   * Timestamp for sent message
+   */
+  timestamp?: string;
+  /**
+   * Avatar for messenger. Regular text for initials works to
+   */
+  avatar: React.ReactNode;
+  /**
+   * Background color on bubbles
+   */
+  backgroundColor?: string;
+  /**
+   * Background color for avatar
+   */
+  avatarBgColor?: string;
+  /**
+   * Positions avatar and Bubbles
+   * @default "left"
+   */
+  position?: "left" | "right";
+}
+
+interface ChatComponent
+  extends React.ForwardRefExoticComponent<
+    ChatProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Bubble: BubbleType;
+}
+
+export const Chat = forwardRef<HTMLDivElement, ChatProps>(
+  (
+    {
+      children,
+      className,
+      name,
+      timestamp,
+      avatar,
+      position = "left",
+      avatarBgColor,
+      backgroundColor,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cl("navds-chat", className, `navds-chat--${position}`)}
+        {...rest}
+      >
+        <BodyShort
+          as="div"
+          className="navds-chat__avatar"
+          style={{ backgroundColor: avatarBgColor }}
+        >
+          {avatar}
+        </BodyShort>
+        <ol className="navds-chat__bubble-wrapper">
+          {React.Children.map(children, (child, i) => {
+            if (React.isValidElement(child)) {
+              return (
+                <BodyLong as="li">
+                  {React.cloneElement(child, {
+                    name: name && i === 0 ? name : undefined,
+                    timestamp: timestamp && i === 0 ? timestamp : undefined,
+                    backgroundColor,
+                    ...child.props,
+                  })}
+                </BodyLong>
+              );
+            }
+          })}
+        </ol>
+      </div>
+    );
+  }
+) as ChatComponent;
+
+Chat.Bubble = Bubble;
+
+export default Chat;

@navikt/core/react/src/chat/chat.stories.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import { Chat } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+
+export default {
+  title: "ds-react/Chat",
+  component: Chat,
+  argTypes: {
+    backgroundColor: {
+      control: {
+        type: "text",
+      },
+    },
+    avatarBgColor: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props) => {
+  return (
+    <Chat
+      avatar={props?.avatar ?? "ON"}
+      name={props?.name ?? "Ola Normann"}
+      timestamp={props?.timestamp ?? "01.01.21 14:00"}
+      avatarBgColor={props?.avatarBgColor}
+      backgroundColor={props?.backgroundColor}
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};
+
+Default.args = {
+  name: "Ola Normann",
+  timestamp: "01.01.21 14:00",
+  avatar: "ON",
+};
+
+export const Farger = () => {
+  return (
+    <Chat
+      avatar="ON"
+      name="Ola Normann"
+      timestamp="01.01.21 14:00"
+      avatarBgColor="var(--navds-global-color-lightblue-200)"
+      backgroundColor="var(--navds-global-color-lightblue-100)"
+    >
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};
+
+export const Position = () => {
+  return (
+    <div className="colgap">
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 14:00"
+        backgroundColor="rgba(255, 249, 240, 1)"
+        avatarBgColor="rgba(255, 236, 204, 1)"
+      >
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar="KH"
+        name="Kari Høyli"
+        timestamp="01.01.21 14:32"
+        position="right"
+        backgroundColor="rgba(230, 240, 255, 1)"
+        avatarBgColor="rgba(204, 225, 255, 1)"
+      >
+        <Chat.Bubble>
+          Reprehenderit pariatur officia exercitation laboris.
+        </Chat.Bubble>
+        <Chat.Bubble>
+          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
+          est dolore incididunt. Occaecat cupidatat magna.
+        </Chat.Bubble>
+      </Chat>
+      <Chat
+        avatar="ON"
+        name="Ola Normann"
+        timestamp="01.01.21 15:00"
+        backgroundColor="rgba(255, 249, 240, 1)"
+        avatarBgColor="rgba(255, 236, 204, 1)"
+      >
+        <Chat.Bubble>
+          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
+          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+          labore sunt aute.
+        </Chat.Bubble>
+      </Chat>
+    </div>
+  );
+};
+
+export const Avatar = () => {
+  return (
+    <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+      <Chat.Bubble>
+        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+      </Chat.Bubble>
+      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+      <Chat.Bubble>
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
+      </Chat.Bubble>
+    </Chat>
+  );
+};
+
+const Illustration = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">
+    <path
+      fill="#e7e5e2"
+      d="M14 50.7C15 52.3 17.9 81 26.5 81S39 51.8 39 50.3c-13.2-7.6-25 .4-25 .4z"
+    />
+    <path
+      fill="#5c4378"
+      d="M38.7 50.2c6 2.9 15.3 10.9 15.3 18.3V93H0V68.5c0-7.1 8.5-14.8 14.5-18-.3.2-.5.3-.5.3 1 1.7 3.8 9.2 12.4 9.2C35 60 39 51.9 39 50.4c-.1-.1-.2-.2-.3-.2z"
+    />
+    <path
+      fill="#d2242a"
+      d="M46.7 76H31.2c-.7 0-1.3-.6-1.2-1.3v-8.5c0-.7.6-1.3 1.3-1.3h15.5c.7 0 1.3.6 1.3 1.3v8.5c-.1.7-.7 1.3-1.4 1.3"
+    />
+    <path
+      fill="#fff"
+      d="M42.9 71c0 2.1-1.7 3.8-3.8 3.8-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c2.1 0 3.8 1.7 3.8 3.8m-8.7 1.7h-.7l.8-1.9h.7l-.8 1.9zm9.3 0H43l.8-1.9h.5l-.8 1.9zm1.2 0h-.2l.8-1.9h.2l-.8 1.9z"
+    />
+    <path
+      fill="#c52d35"
+      d="M36.2 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.6s-.1 0-.1.1l-.2.6v.1h.2l.1 1.2c0-.1 0 0 0 0"
+    />
+    <path
+      fill="#c52d35"
+      d="M37.5 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.9s-.1 0-.1.1l-.2.6-.1.1h.5c.1 0 .2.1.2.2v1c-.1-.1-.1 0 0 0m2.6-1.9h-.6s-.1 0-.1.1v1.8s0 .1.1.1h.6s.1 0 .1-.1l.2-.6V72h-.2l-.1-1.2"
+    />
+    <path
+      fill="#c52d35"
+      d="M37.7 72.7h.4s.1 0 .1-.1l.2-.6v-.1h-.2c0 .1-.5.8-.5.8zm3.9-1.9h.7s.1 0 0 .1l-.7 1.8H41l.6-1.9"
+    />
+    <path
+      fill="#c52d35"
+      d="M40.8 70.8h-1c-.1 0 .3.1.3.1l.7 1.7s0 .1.1.1h.6l-.7-1.9m-1.3.6v.4s-.1-.4-.3-.4c-.3 0-.3.2-.3.3 0 .1.1.3.2.3h.5l-.3.7H39c-.2 0-.9-.3-.9-.9 0-.6.5-1 .9-1 .2-.1.5.2.5.6 0-.1 0-.1 0 0z"
+    />
+    <path
+      fill="#5a1f57"
+      d="M39.9 66.7h-1.6c-.1 0-.2-.1-.2-.2v-.3c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v.3c0 .2-.1.2-.2.2"
+    />
+    <path fill="#c2b5cf" d="M38.7 66.5h.9V64h-.9v2.5z" />
+    <path
+      fill="#e7e5e2"
+      d="M47.2 35.3C44.7 45.6 36.6 53.1 27 53.1S9.3 45.6 6.8 35.3c-.2.1-.5.1-.8.1-1.1 0-2-.8-2-1.7v-7c0-1 .9-1.7 2-1.7h.2C7.7 13.1 16.4 4 27 4c10.6 0 19.3 9.1 20.8 21h.2c1.1 0 2 .8 2 1.7v7c0 1-.9 1.7-2 1.7-.3 0-.5 0-.8-.1z"
+    />
+    <path
+      fill="#635e59"
+      d="M19 27.6c-1.4.1-1.9-2-1.4-3.4.1-.3.6-1.5 1.4-1.5.8 0 1.2.7 1.3.8.6 1.4.3 4-1.3 4.1m16.2 0c1.4.1 1.9-2 1.4-3.4-.1-.3-.6-1.5-1.4-1.5-.8 0-1.2.7-1.3.8-.6 1.4-.3 4 1.3 4.1"
+    />
+    <path
+      fill="#d1bfa3"
+      d="M26.8 34.6c-.4 0-.7-.1-1-.2-.3-.1-.4-.4-.3-.7.1-.3.4-.4.7-.3.5.2 1.5.1 2.2-.4.7-.4 1.1-1 1.2-1.5.1-.4-.1-.9-.4-1.3-.2-.2-.8-.2-1.6-.1-.3 0-.5-.1-.6-.4 0-.3.1-.5.4-.6 1.2-.2 2.1 0 2.6.6.5.7.8 1.4.6 2.1-.1.8-.7 1.6-1.7 2.2-.6.3-1.4.6-2.1.6z"
+    />
+    <path
+      fill="#593a32"
+      d="M27.1 42.1h-.3c-5.3-.2-7.3-4.1-7.4-4.3-.1-.3 0-.6.2-.7.2-.1.6 0 .7.2.1.1 1.9 3.6 6.6 3.8 4.7.2 6.4-3.7 6.4-3.7.1-.3.4-.4.7-.3.3.1.4.4.3.7-.1 0-2.1 4.3-7.2 4.3z"
+    />
+    <path
+      fill="#f6b873"
+      d="M6.6 30.7c.1-.1.1-.2.1-.3v-2c-.1-5.6 1.8-8.1 3.4-10.1 0 0-1 4.3-.3 3.4 3.8-5 21.4-1.6 25-8.1.5 3.6-4.1 4.6-4.1 4.6 3.7.7 6.9-.8 7.7-2.5.3 1.4-.6 2.4-1.9 3.4 4.5-.9 4.6-4 4.6-4 .6 4.1 5.3 2.5 5.3 9.3v6c0 .3.2.6.5.6h.5c.3 0 .5-.3.5-.6V26c.3-15.6-8.5-26-20.6-26C15.9 0 5 10.4 5 24.1v6.3c0 .4.2.6.5.6h.6c.2 0 .3-.1.5-.3"
+    />
+    <path
+      fill="#f6b873"
+      d="M25.9 43.4c-4.4 0-8-1.4-8-3.2s3.6-3.2 8-3.2 8 1.4 8 3.2c0 1.8-3.6 3.2-8 3.2m.8-9.4c-2.9 0-4.7.7-8.8 2.1-12.7 4.6-11.6-14-11.6-14C3.4 46 18.6 52 26.5 52c8.1 0 24.1-8.1 21-30 0 0 .4 17.1-12.9 13.8-3.7-.9-5-1.8-7.9-1.8z"
+    />
+  </svg>
+);

@navikt/core/react/src/chat/index.ts

@@ -0,0 +1 @@
+export { default as Chat, ChatProps } from "./Chat";

@navikt/core/react/src/date/DateInput.tsx

@@ -0,0 +1,161 @@
+import { Calender } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
+import { FormFieldProps, useFormField } from "../form/useFormField";
+import { useDateInputContext } from "./hooks";
+
+export interface DateInputProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Input label
+   */
+  label: React.ReactNode;
+  /**
+   * Shows label and description for screenreaders-only
+   * @default false
+   */
+  hideLabel?: boolean;
+  /**
+   * Changes padding and font-sizes
+   * @default medium
+   */
+  size?: "medium" | "small";
+  /**
+   * @private
+   */
+  variant?: "datepicker" | "monthpicker";
+}
+
+export type DateInputType = React.ForwardRefExoticComponent<
+  DateInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+const DateInput: DateInputType = forwardRef<HTMLInputElement, DateInputProps>(
+  (props, ref) => {
+    const {
+      className,
+      hideLabel = false,
+      label,
+      description,
+      variant = "datepicker",
+      ...rest
+    } = props;
+
+    const isDatepickerVariant = variant === "datepicker";
+
+    const conditionalVariables = {
+      prefix: isDatepickerVariant ? "datepicker-input" : "monthpicker-input",
+      iconTitle: {
+        open: isDatepickerVariant ? "Åpne datovelger" : "Åpne månedsvelger",
+        close: isDatepickerVariant ? "Lukk datovelger" : "Lukk månedsvelger",
+      },
+    };
+
+    const { onOpen, ariaId, open } = useDateInputContext();
+
+    const {
+      inputProps,
+      size = "medium",
+      inputDescriptionId,
+      errorId,
+      showErrorMsg,
+      hasError,
+    } = useFormField(props, conditionalVariables.prefix);
+
+    return (
+      <div
+        className={cl(
+          className,
+          "navds-form-field",
+          `navds-form-field--${size}`,
+          "navds-date__field",
+          {
+            "navds-text-field--error": hasError,
+            "navds-date__field--error": hasError,
+            "navds-form-field--disabled": !!inputProps.disabled,
+            "navds-text-field--disabled": !!inputProps.disabled,
+          }
+        )}
+      >
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          className={cl("navds-form-field__label", {
+            "navds-sr-only": hideLabel,
+          })}
+        >
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cl("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
+        )}
+        <div className="navds-date__field-wrapper">
+          <input
+            ref={ref}
+            {...omit(rest, ["error", "errorId", "size"])}
+            {...inputProps}
+            autoComplete="off"
+            aria-controls={ariaId}
+            className={cl(
+              className,
+              "navds-date__field-input",
+              "navds-text-field__input",
+              "navds-body-short",
+              `navds-body-${size}`
+            )}
+            size={14}
+          />
+          <Button
+            variant="tertiary"
+            type="button"
+            size="small"
+            onClick={() => onOpen()}
+            className="navds-date__field-button"
+            tabIndex={open ? -1 : 0}
+            disabled={inputProps.disabled}
+            icon={
+              <Calender
+                title={
+                  open
+                    ? conditionalVariables.iconTitle.close
+                    : conditionalVariables.iconTitle.open
+                }
+              />
+            }
+          />
+        </div>
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+export const DatePickerInput: DateInputType = forwardRef<
+  HTMLInputElement,
+  DateInputProps
+>((props, ref) => <DateInput {...props} ref={ref} />);
+
+export const MonthPickerInput: DateInputType = forwardRef<
+  HTMLInputElement,
+  DateInputProps
+>((props, ref) => <DateInput {...props} variant="monthpicker" ref={ref} />);