Version Packages (#2053 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Oppdatert ikoner (#2054 )
2026-10-13 01:02:02 +00:00 · 2023-06-15 15:55:48 +02:00 · 2023-06-15 15:51:47 +02:00 · 2023-06-15 15:06:48 +02:00 · 2023-06-15 14:46:34 +02:00 · 2023-06-15 14:46:07 +02:00
954 changed files with 8555 additions and 15113 deletions
@@ -31,10 +31,7 @@ Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på e
  "@navikt/ds-react",
  "@navikt/ds-css",
  "@navikt/aksel-icons",
-  "@navikt/ds-icons",
  "@navikt/ds-tokens",
  "@navikt/ds-tailwind",
-  "@navikt/ds-css-internal",
-  "@navikt/ds-react-internal",
  "@navikt/ds-codemod"
 ```
@@ -8,12 +8,8 @@
      "@navikt/ds-css",
      "@navikt/ds-tokens",
      "@navikt/ds-tailwind",
-      "@navikt/ds-css-internal",
-      "@navikt/ds-react-internal",
-      "@navikt/ds-codemod",
      "@navikt/aksel-icons",
      "@navikt/aksel",
-      "@navikt/ds-icons",
      "@navikt/aksel-stylelint"
    ]
  ],
@@ -21,12 +17,7 @@
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
-  "ignore": [
-    "shadow-dom",
-    "aksel.nav.no",
-    "@navikt/ds-navno",
-    "aksel-icons-figma-plugin"
-  ],
+  "ignore": ["shadow-dom", "aksel.nav.no", "aksel-icons-figma-plugin"],

  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "updateInternalDependents": "always"
@@ -0,0 +1,17 @@
+### :memo: PR Checklist
+
+<!-- Remove non-relevant fields -->
+
+- [ ] :sparkles: New component? Add CSS-mappings to `@navikt/core/css/config/_mappings.js`.
+
+- [ ] :wastebasket: Are you deprecating a CSS class? (are you removing the last known reference to a CSS class?). Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description.
+
+- [ ] :balance_scale: Is the feature/component/code sufficiently complex to warrant tests? Add some unit-tests :test_tube:
+
+- [ ] :balance_scale: Does the feature/component add some complex user-interactions? Consider adding some [interaction-tests with storybook](https://storybook.js.org/docs/react/writing-tests/interaction-testing) :test_tube:
+
+- [ ] :boom: Are there breaking changes? Consider adding a codemod for easier migration.
+
+- [ ] :test_tube: Are all variations and cases shown in the storybook stories? Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
+
+- [ ] Run `yarn changeset` for version and changelog generation
@@ -13,7 +13,7 @@ jobs:
  playwright:
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.30.0-focal
+      image: mcr.microsoft.com/playwright:v1.33.0-focal
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
@@ -14,7 +14,7 @@ jobs:
    name: Smoketest Aksel
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.30.0-focal
+      image: mcr.microsoft.com/playwright:v1.33.0-focal
    steps:
      - uses: actions/setup-node@v3
        with:
@@ -1,42 +0,0 @@
-name: Update Icons
-
-on:
-  #  schedule:
-  #   - cron: 0 0 * * *
-  workflow_dispatch:
-
-jobs:
-  update:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v3
-        id: node-cache
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: install
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Update Icons
-        run: yarn workspace @navikt/ds-icons update
-        env:
-          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v3
-        with:
-          token: ${{ secrets.GIT_REPO }}
-          commit-message: "Ikoner synket fra figma"
-          branch: figma-icons-sync
-          committer: GitHub <noreply@github.com>
-          author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
-          signoff: false
-          delete-branch: true
-          title: "Ikonsynk Figma"
@@ -1,39 +0,0 @@
-name: Update tokens
-
-on:
-  workflow_dispatch:
-
-jobs:
-  update:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 14
-      - name: Node-modules cache
-        uses: actions/cache@v3
-        id: node-cache
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - name: install
-        if: steps.node-cache.outputs.cache-hit != 'true'
-        run: yarn install
-      - name: postinstall
-        if: steps.node-cache.outputs.cache-hit == 'true'
-        run: yarn postinstall
-      - name: Update tokens
-        run: yarn workspace @navikt/ds-tokens update
-        env:
-          FIGMA_TOKEN: ${{ secrets.FIGMA_IKONER_API }}
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v3
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          branch: figma-tokens-sync
-          delete-branch: true
-          title: "Tokens sync Figma"
-          commit-message: "Tokens synket fra figma"
-          committer: GitHub <noreply@github.com>
-          signoff: false
@@ -6,19 +6,11 @@ import { Meta, Canvas } from "@storybook/addon-docs";

 [Dokumentasjon](https://aksel.nav.no/komponenter)

-### Core
-
 ```bash
 yarn add @navikt/ds-react @navikt/ds-css
 ```

-### Interne-flater
-
-```bash
-yarn add @navikt/ds-react-internal @navikt/ds-css-internal
-```
-
-### Ikoner
+## Ikoner

 [Dokumentasjon](https://aksel.nav.no/ikoner)

@@ -26,7 +18,7 @@ yarn add @navikt/ds-react-internal @navikt/ds-css-internal
 yarn add @navikt/aksel-icons
 ```

-### Bruk
+## Bruk

 ```jsx
 import { Heading } from "@navikt/ds-react";
@@ -1,6 +1,4 @@
-import { RouterContext } from "next/dist/shared/lib/router-context";
 import "@navikt/ds-css/index.css";
-import "@navikt/ds-css-internal/index.css";
 import "./layout.css";

 export const parameters = {
@@ -1,5 +1,26 @@
 # @navikt/aksel-icons

+## 4.1.5
+
+### Patch Changes
+
+- [#2054](https://github.com/navikt/aksel/pull/2054) [`8f16d1571`](https://github.com/navikt/aksel/commit/8f16d1571ec7cf452c09618a9a918ee2a634c75a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner
+
+  - ChevronRightLast
+  - ChevronLeftLast
+
+## 4.1.4
+
+## 4.1.3
+
+## 4.1.2
+
+## 4.1.1
+
+## 4.1.0
+
+## 4.0.0
+
 ## 3.4.2

 ## 3.4.1
@@ -15,5 +15,5 @@ keywords:
  - Sammenføye
  - Kildekontroll
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -5,5 +5,5 @@ keywords:
  - left
  - venstre
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 14.06.2023
 created_at: 07.03.2023
@@ -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="M7.5 6.25C7.5 5.83579 7.16421 5.5 6.75 5.5C6.33579 5.5 6 5.83579 6 6.25V17.75C6 18.1642 6.33579 18.5 6.75 18.5C7.16421 18.5 7.5 18.1642 7.5 17.75V6.25ZM17.7803 7.03033C18.0732 6.73744 18.0732 6.26256 17.7803 5.96967C17.4874 5.67678 17.0126 5.67678 16.7197 5.96967L11.2197 11.4697C11.079 11.6103 11 11.8011 11 12C11 12.1989 11.079 12.3897 11.2197 12.5303L16.7197 18.0303C17.0126 18.3232 17.4874 18.3232 17.7803 18.0303C18.0732 17.7374 18.0732 17.2626 17.7803 16.9697L12.8107 12L17.7803 7.03033Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,12 @@
+name: ChevronLeftFirst
+category: Arrows
+sub_category: Chevron
+keywords:
+  - left
+  - venstre
+  - side
+  - first
+  - først
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023
@@ -6,5 +6,5 @@ keywords:
  - høyre
  - side
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 09.06.2023
 created_at: 07.03.2023
@@ -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="M18 6.25C18 5.83579 17.6642 5.5 17.25 5.5C16.8358 5.5 16.5 5.83579 16.5 6.25V17.75C16.5 18.1642 16.8358 18.5 17.25 18.5C17.6642 18.5 18 18.1642 18 17.75V6.25ZM7.28033 6.21967C6.98744 5.92678 6.51256 5.92678 6.21967 6.21967C5.92678 6.51256 5.92678 6.98744 6.21967 7.28033L11.1893 12.25L6.21967 17.2197C5.92678 17.5126 5.92678 17.9874 6.21967 18.2803C6.51256 18.5732 6.98744 18.5732 7.28033 18.2803L12.7803 12.7803C13.0732 12.4874 13.0732 12.0126 12.7803 11.7197L7.28033 6.21967Z" fill="#262626"/>
+</svg>
@@ -0,0 +1,10 @@
+name: ChevronRightLast
+category: Arrows
+sub_category: Chevron
+keywords:
+  - right
+  - høyre
+  - side
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023
@@ -15,5 +15,5 @@ keywords:
  - markup-språk
  - kildekode
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -13,5 +13,5 @@ keywords:
  - dra og slippe
  - skifte
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 26.05.2023
 created_at: 07.03.2023
@@ -23,5 +23,5 @@ keywords:
  - milepæler
  - hendelser
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.05.2023
 created_at: 07.03.2023
@@ -7,5 +7,5 @@ keywords:
  - delete
  - slett
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023
@@ -6,5 +6,5 @@ keywords:
  - uploading
  - send
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 08.06.2023
 created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "3.4.2",
+  "version": "4.1.5",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,26 @@
 # @navikt/aksel-stylelint

+## 4.1.5
+
+## 4.1.4
+
+## 4.1.3
+
+## 4.1.2
+
+## 4.1.1
+
+## 4.1.0
+
+### Minor Changes
+
+- [#2035](https://github.com/navikt/aksel/pull/2035) [`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Oppdatert Chips
+
+  - Toggle Chips har nå varianter: neutral og action
+  - Toggle Chips har nå en ny prop: `checkmark` som slår av/på checkmark ved selected-state
+
+## 4.0.0
+
 ## 3.4.2

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "3.4.2",
+  "version": "4.1.5",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -27,17 +27,16 @@
  ],
  "scripts": {
    "test": "jest",
-    "copy-internal-tokens": "node -e \"require('fs').copyFileSync('../internal/css/tokens.json','dist/internal-tokens.json')\"",
    "copy-css": "node -e \"require('fs').copyFileSync('../core/css/dist/index.css','dist/index.css')\"",
    "copy-tokens": "node -e \"require('fs').copyFileSync('../core/css/tokens.json','dist/tokens.json')\"",
-    "copy": "yarn copy-internal-tokens && yarn copy-css && yarn copy-tokens",
+    "copy": "yarn copy-css && yarn copy-tokens",
    "build": "tsc -p . && concurrently \"yarn:copy-*\"",
    "watch:lint": "tsc --watch -p .",
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^3.4.2",
-    "@navikt/ds-tokens": "^3.4.2",
+    "@navikt/ds-css": "^4.1.5",
+    "@navikt/ds-tokens": "^4.1.5",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,8 +1,28 @@
-type DeprecatedList = { classes: string[]; message: string }[];
+type DeprecatedList = {
+  classes: string[];
+  message: string;
+  deprecatePrefix?: boolean;
+}[];

 export const deprecations: DeprecatedList = [
  {
    classes: ["navdsi-deprecated-example", "navdsi-other-deprecated-example"],
    message: "Removed in vX.X.X, see documentation [link] for more information",
  },
+  {
+    classes: [
+      "navdsi-dropdown",
+      "navdsi-copy-to-clipboard",
+      "navdsi-header",
+      "navdsi-timeline",
+    ],
+    message:
+      "Class were moved to '@navikt/ds-css' and renamed with 'navds'-prefix in v4.0.0. Docs: https://aksel.nav.no/grunnleggende/kode/endringslogg#h728704adeb59.",
+    deprecatePrefix: true,
+  },
+  {
+    classes: ["navds-chips--icon-left"],
+    message:
+      "In v4.1.0 Chips. Toggle no longer handles special alignment for checkmark-icon, thus removing this class",
+  },
 ];
@@ -8,7 +8,7 @@ getTestRule()({

  accept: [
    {
-      code: ".foo { --ac-accordion-header-bg-hover: 1px; --ac-header-bg: red; }",
+      code: ".foo { --ac-accordion-header-bg-hover: 1px; --ac-internalheader-bg: red; }",
      description: "existing '--ac-' tokens overridden",
    },
    {
@@ -40,5 +40,17 @@ getTestRule()({
      column: 7,
      endColumn: 38,
    },
+    {
+      code: ".foo, \n .navdsi-dropdown-example \n .bar {}",
+      description: "selector with deprecated class name 1",
+      message: messages.unexpected(
+        "navdsi-dropdown-example",
+        deprecations[1].message
+      ),
+      line: 2,
+      endLine: 2,
+      column: 3,
+      endColumn: 26,
+    },
  ],
 });
@@ -17,7 +17,15 @@ const ruleFunction: stylelint.Rule = () => {
      selectorParser((selectors) => {
        selectors.walkClasses((className) => {
          for (const deprecation of deprecations) {
-            if (!deprecation.classes.includes(className.value)) {
+            if (
+              !deprecation.deprecatePrefix &&
+              !deprecation.classes.includes(className.value)
+            ) {
+              continue;
+            } else if (
+              deprecation.deprecatePrefix &&
+              !deprecation.classes.some((x) => className.value.startsWith(x))
+            ) {
              return;
            }
            stylelint.utils.report({
@@ -89,7 +89,6 @@ export const flattenObject = (obj) => {

 const tokenCSSFile = "./index.css";
 const tokenJsonFile = "./tokens.json";
-const internalTokensJSONFile = "./internal-tokens.json";

 let allowedTokenNames = [];

@@ -123,7 +122,6 @@ export const tokenExists = (
    });

    addTokens(tokenJsonFile, allowedTokenNames);
-    addTokens(internalTokensJSONFile, allowedTokenNames);
  }

  return allowedTokenNames.includes(inputToken);
@@ -1,5 +1,82 @@
 # @navikt/aksel

+## 4.1.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.5
+
+## 4.1.4
+
+### Patch Changes
+
+- Updated dependencies [[`e06096105`](https://github.com/navikt/aksel/commit/e060961050c75ec815e5c125001f1ff99106e298)]:
+  - @navikt/ds-css@4.1.4
+
+## 4.1.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.3
+
+## 4.1.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@4.1.2
+
+## 4.1.1
+
+### Patch Changes
+
+- Updated dependencies [[`91343563c`](https://github.com/navikt/aksel/commit/91343563c916a554d8ade5401c28ab4c3b3e26af)]:
+  - @navikt/ds-css@4.1.1
+
+## 4.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`7b42f536a`](https://github.com/navikt/aksel/commit/7b42f536aa90c1b5dbe2b19f1bbe292701546420), [`c028f36e2`](https://github.com/navikt/aksel/commit/c028f36e2bc58223ebf8b655980dde7eafb30add), [`b2f796d68`](https://github.com/navikt/aksel/commit/b2f796d681f1c1d76d26d1fd743268c8c618a854), [`db8c38a09`](https://github.com/navikt/aksel/commit/db8c38a094cd183db54aebecb62d5b223920a040)]:
+  - @navikt/ds-css@4.1.0
+
+## 4.0.0
+
+### Major Changes
+
+- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :test-tube: Datepicker og Monthpicker er nå ute av beta. Kjør codemod for migrering, eller `cmd/ctrl + shift + f` og erstatt `UNSAFE_` med ``
+
+  - UNSAFE-prefix er fjernet fra Datepicker og Monthpicker
+
+  ```bash
+  npx @navikt/aksel codemod v4-date
+  ```
+
+- [#2026](https://github.com/navikt/aksel/pull/2026) [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`
+
+  - `<Header />` er renamet til `<InternalHeader />`
+  - Dropdown, Timeline og InternalHeader(Header) er flyttet over til `@navikt/ds-react`
+  - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css` og classname-prefix er endret fra `navdsi` -> `navds` for flyttede komponenter. Sett opp [stylelint med configen vår](https://aksel.nav.no/grunnleggende/kode/stylelint), så vil du få feilmelding om du bruker gamle klassenavn.
+  - Fikset cascading-problem mellom dropdown og popover. Dropdown blir ikke lengre påvirket av import-rekkefølge av popover.
+  - Styling for flyttede komponenter finnes nå på CDN (https://aksel.nav.no/grunnleggende/kode/css-import)
+
+  Kjør codemod for migrering:
+
+  ```bash
+  // React
+  npx @navikt/aksel codemod v4-internal-react
+
+  // CSS
+  npx @navikt/aksel codemod v4-internal-css
+  ```
+
+### Patch Changes
+
+- Updated dependencies [[`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c), [`895bdc08e`](https://github.com/navikt/aksel/commit/895bdc08e50647d9b9186cbf0e9ab069323de56c)]:
+  - @navikt/ds-css@4.0.0
+
 ## 3.4.2

 ### Patch Changes
@@ -22,6 +22,45 @@ To get started:
 npx @navikt/aksel codemod --help
 ```

+### v4
+
+In v4, we moved all the components from `@navikt/ds-react-internal` to `@navikt/ds-react`. This means that you will need to update all your imports to the new package. As a part of this, Header was renamed to `InternalHeader` and all the CSS-classes was renamed to use `navds` as a prefix instead of `navdsi`.
+
+#### react
+
+`npx @navikt/aksel codemod v4-internal-react ...`
+
+Rewrites all imports from `@navikt/ds-react-internal` to `@navikt/ds-react`. Remember to remove `@navikt/ds-react-internal` as a dependency after migration.
+
+```diff
+- import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";
+- import { Button, CopyButton } from "@navikt/ds-react";
+ import { Button, CopyButton, Dropdown, Timeline, InternalHeader as Header } from "@navikt/ds-react";
+```
+
+#### css
+
+`npx @navikt/aksel codemod v4-internal-css ...`
+
+Rewrites all css with `navdsi`-prefix to `navds`-prefix. Rewrites all `.navdsi-header` classes to `.navds-internalheader`.
+
+Remember to remove `@navikt/ds-css-internal` as a dependency after migration + remove it from you lists of imports in the CSS-bundle.
+
+```diff
+- .navdsi-dropdown
+ .navds-dropdown
+- .navdsi-header
+ .navds-internalheader
+- .navdsi-timeline
+ .navds-timeline
+```
+
+Note: This is a "dumb" codemod that uses a simple regex to find and replace. This can lead to unknown sideeffects, so its reccomended to scope the codemod to spesific files.
+
+```bash
+`npx @navikt/aksel codemod v4-internal-css **/*.css`
+```
+
 ### v3

 There is no general codemods for migrating from v2 -> v3.
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "3.4.2",
+  "version": "4.1.5",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "3.4.2",
+    "@navikt/ds-css": "4.1.5",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -63,6 +63,30 @@ export const migrations: {
        "Remember to clean css-import from '@navikt/ds-css-internal' if no longer needed\nIf non-text was used as children, or different locales were handled, you need to manually fix this",
    },
  ],
+  "v4.0.0": [
+    {
+      description:
+        "Replaced deprecated 'internal'-component import to 'core'-imports",
+      value: "v4-internal-react",
+      path: "v4.0.0/internal-react/internal-react",
+      warning:
+        "Remember to also run 'v4-internal-css' if you have overwritten any css-classes!",
+    },
+    {
+      description:
+        "Replaced 'navdsi'-prefixes used to overwrite internal-css to 'navds'-prefixes",
+      value: "v4-internal-css",
+      path: "v4.0.0/internal-css/internal-css",
+      warning:
+        "Remember to remove '@navikt/ds-css-internal' imports if no longer needed! Also run 'v4-internal-react' to convert internal-react imports to core-imports",
+    },
+    {
+      description:
+        "Removes all instances of UNSAFE_ for datepicker/monthpicker.",
+      value: "v4-date",
+      path: "v4.0.0/date/date",
+    },
+  ],
 };

 export function getMigrationPath(str: string) {
@@ -23,6 +23,7 @@ export default function transformer(file, api, options, ...rest) {
    toImport: "@navikt/ds-react",
    fromName: "CopyToClipboard",
    toName,
+    ignoreAlias: true,
  });

  if (localName === null) {
@@ -0,0 +1,21 @@
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file) {
+  const names = [
+    "UNSAFE_useDatepicker",
+    "UNSAFE_DatePicker",
+    "UNSAFE_useRangeDatepicker",
+    "UNSAFE_MonthPicker",
+    "UNSAFE_useMonthpicker",
+  ];
+
+  let src = file.source;
+
+  names.forEach((name) => {
+    src = src.replaceAll(name, name.replace("UNSAFE_", ""));
+  });
+
+  return src;
+}
@@ -0,0 +1,72 @@
+import {
+  UNSAFE_useDatepicker,
+  UNSAFE_DatePicker,
+  UNSAFE_useRangeDatepicker,
+  UNSAFE_MonthPicker,
+  UNSAFE_useMonthpicker as DsUnsafeUseMonthpicker,
+} from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const UseDatepicker = () => {
+  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <UNSAFE_DatePicker {...datepickerProps} dropdownCaption>
+        <UNSAFE_DatePicker.Input {...inputProps} label="Velg dato" />
+      </UNSAFE_DatePicker>
+    </div>
+  );
+};
+
+export const UseRangedDatepicker = () => {
+  const { datepickerProps, fromInputProps, toInputProps } =
+    UNSAFE_useRangeDatepicker({
+      fromDate: new Date("Aug 23 2019"),
+      onRangeChange: console.log,
+      onValidate: console.log,
+    });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <UNSAFE_DatePicker {...datepickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <UNSAFE_DatePicker.Input {...fromInputProps} label="Fra" />
+          <UNSAFE_DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </UNSAFE_DatePicker>
+    </div>
+  );
+};
+
+export const UseMonthpicker = () => {
+  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+    disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
+    fromDate: new Date("Jan 1 2022"),
+    toDate: new Date("Sep 27 2025"),
+  });
+
+  const {} = UNSAFE_useMonthpicker({
+    disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
+    fromDate: new Date("Jan 1 2022"),
+    toDate: new Date("Sep 27 2025"),
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <UNSAFE_MonthPicker {...monthpickerProps} dropdownCaption>
+        <UNSAFE_MonthPicker.Input
+          {...inputProps}
+          label="Velg måned"
+          variant="monthpicker"
+        />
+      </UNSAFE_MonthPicker>
+    </div>
+  );
+};
@@ -0,0 +1,71 @@
+import {
+  useDatepicker,
+  DatePicker,
+  useRangeDatepicker,
+  MonthPicker,
+  useMonthpicker,
+} from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const UseDatepicker = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseRangedDatepicker = () => {
+  const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onRangeChange: console.log,
+    onValidate: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <DatePicker.Input {...fromInputProps} label="Fra" />
+          <DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseMonthpicker = () => {
+  const { inputProps, monthpickerProps } = DsUnsafeUseMonthpicker({
+    disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
+    fromDate: new Date("Jan 1 2022"),
+    toDate: new Date("Sep 27 2025"),
+  });
+
+  const {} = UNSAFE_useMonthpicker({
+    disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
+    fromDate: new Date("Jan 1 2022"),
+    toDate: new Date("Sep 27 2025"),
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker {...monthpickerProps} dropdownCaption>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg måned"
+          variant="monthpicker"
+        />
+      </MonthPicker>
+    </div>
+  );
+};
@@ -1,12 +1,12 @@
 import { check } from "../../../../utils/check";

-const migration = "update-less-tokens";
-const fixtures = ["complete"];
+const migration = "date";
+const fixtures = ["idempotent"];

 for (const fixture of fixtures) {
  check(__dirname, {
    fixture,
    migration,
-    extension: "less",
+    extension: "js",
  });
 }
@@ -0,0 +1,64 @@
+import {
+  useDatepicker,
+  DatePicker,
+  useRangeDatepicker,
+  MonthPicker,
+  useMonthpicker,
+} from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const UseDatepicker = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseRangedDatepicker = () => {
+  const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onRangeChange: console.log,
+    onValidate: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <DatePicker.Input {...fromInputProps} label="Fra" />
+          <DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseMonthpicker = () => {
+  const { inputProps, monthpickerProps } = useMonthpicker({
+    disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
+    fromDate: new Date("Jan 1 2022"),
+    toDate: new Date("Sep 27 2025"),
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker {...monthpickerProps} dropdownCaption>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg måned"
+          variant="monthpicker"
+        />
+      </MonthPicker>
+    </div>
+  );
+};
@@ -0,0 +1,64 @@
+import {
+  useDatepicker,
+  DatePicker,
+  useRangeDatepicker,
+  MonthPicker,
+  useMonthpicker,
+} from "@navikt/ds-react";
+
+/* eslint-disable react/jsx-no-undef */
+export const UseDatepicker = () => {
+  const { datepickerProps, inputProps } = useDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    toDate: new Date("Feb 23 2024"),
+    onDateChange: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps} dropdownCaption>
+        <DatePicker.Input {...inputProps} label="Velg dato" />
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseRangedDatepicker = () => {
+  const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onRangeChange: console.log,
+    onValidate: console.log,
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <DatePicker {...datepickerProps}>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <DatePicker.Input {...fromInputProps} label="Fra" />
+          <DatePicker.Input {...toInputProps} label="Til" />
+        </div>
+      </DatePicker>
+    </div>
+  );
+};
+
+export const UseMonthpicker = () => {
+  const { inputProps, monthpickerProps } = useMonthpicker({
+    disabled: [new Date("Apr 1 2022")],
+    onMonthChange: console.log,
+    fromDate: new Date("Jan 1 2022"),
+    toDate: new Date("Sep 27 2025"),
+  });
+
+  return (
+    <div style={{ height: "20rem" }}>
+      <MonthPicker {...monthpickerProps} dropdownCaption>
+        <MonthPicker.Input
+          {...inputProps}
+          label="Velg måned"
+          variant="monthpicker"
+        />
+      </MonthPicker>
+    </div>
+  );
+};
@@ -0,0 +1,23 @@
+const cssConversions = {
+  ".navdsi-dropdown": ".navds-dropdown",
+  ".navdsi-header": ".navds-internalheader",
+  ".navdsi-timeline": ".navds-timeline",
+  "--ac-header-bg": "--ac-internalheader-bg",
+  "--ac-header-divider": "--ac-internalheader-divider",
+  "--ac-header-text": "--ac-internalheader-text",
+  "--ac-header-hover-bg": "--ac-internalheader-hover-bg",
+  "--ac-header-active-bg": "--ac-internalheader-active-bg",
+};
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file) {
+  let src = file.source;
+
+  Object.entries(cssConversions).forEach(([key, value]) => {
+    src = src.replaceAll(key, value);
+  });
+
+  return src;
+}
@@ -0,0 +1,545 @@
+.navdsi-dropdown__menu {
+  overflow: hidden;
+  padding: var(--a-spacing-2) 0;
+  color: var(--ac-dropdown-text, var(--a-text-default));
+  width: 27ch;
+  max-height: 616px;
+  overflow-y: auto;
+  border-color: var(--ac-dropdown-border, var(--a-border-default));
+}
+
+.navdsi-dropdown__divider {
+  margin: var(--a-spacing-3) 0;
+  border: none;
+  border-bottom: 1px solid var(--a-border-divider);
+}
+
+.navdsi-dropdown__menu > :not(.navdsi-dropdown__divider):not(.navdsi-dropdown__list) {
+  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navdsi-dropdown__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navdsi-dropdown__list-item {
+  margin: 0;
+}
+
+.navdsi-dropdown__list-heading {
+  margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navdsi-dropdown__item {
+  border: none;
+  margin: 0;
+  overflow: visible;
+  background: transparent;
+  color: var(--ac-dropdown-item-text, var(--a-text-action));
+  font: inherit;
+  text-decoration: none;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-1) var(--a-spacing-4);
+}
+
+.navdsi-dropdown__item:hover {
+  background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navdsi-dropdown__item:active {
+  background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
+  color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
+}
+
+.navdsi-dropdown__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navdsi-dropdown__item:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navdsi-dropdown__item:disabled {
+  color: var(--ac-dropdown-item-text, var(--a-text-action));
+  opacity: 0.3;
+  background: transparent;
+  cursor: not-allowed;
+}
+
+.navdsi-header {
+  display: flex;
+  align-self: stretch;
+  background: var(--ac-header-bg, var(--a-surface-inverted));
+  min-height: var(--a-spacing-12);
+
+  --navdsi-header-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+}
+
+.navdsi-header__title {
+  border: none;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  font-weight: var(--a-font-weight-bold);
+  line-height: normal;
+  text-align: left;
+  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
+  border-right: 1px solid var(--ac-header-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--ac-header-text, var(--a-text-on-inverted));
+}
+
+button.navdsi-header__title {
+  cursor: pointer;
+}
+
+.navdsi-header__user {
+  padding: 0 var(--a-spacing-5);
+  border-left: 1px solid var(--ac-header-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+}
+
+.navdsi-header__button {
+  border: none;
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  gap: var(--a-spacing-2);
+  border-left: 1px solid var(--ac-header-divider, var(--a-gray-600));
+  color: var(--ac-header-text, var(--a-text-on-inverted));
+}
+
+a.navdsi-header__title:hover,
+button.navdsi-header__title:hover,
+.navdsi-header__button:hover {
+  background-color: var(--ac-header-hover-bg, var(--a-surface-inverted-hover));
+}
+
+.navdsi-header__title:focus-visible,
+.navdsi-header__button:focus-visible {
+  box-shadow: var(--navdsi-header-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navdsi-header__title:focus,
+  .navdsi-header__button:focus {
+    box-shadow: var(--navdsi-header-focus);
+    outline: none;
+  }
+}
+
+a.navdsi-header__title:active,
+button.navdsi-header__title:active,
+.navdsi-header__button:active {
+  background-color: var(--ac-header-active-bg, var(--a-surface-inverted-active));
+}
+
+.navdsi-header__user-button {
+  padding-left: var(--a-spacing-5);
+  gap: var(--a-spacing-4);
+}
+
+.navdsi-timeline {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  width: 100%;
+  min-width: fit-content;
+  align-items: center;
+}
+
+.navdsi-timeline__axislabels {
+  position: relative;
+  height: 1rem;
+  box-sizing: content-box;
+  grid-column: 2;
+}
+
+.navdsi-timeline__row-label {
+  white-space: nowrap;
+  width: auto;
+  margin-right: var(--a-spacing-4);
+  grid-column: 1;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+}
+
+.navdsi-timeline__row-label:where(:nth-last-child(2)) {
+  align-self: flex-end;
+}
+
+.navdsi-timeline__axislabels-label {
+  position: absolute;
+  color: var(--ac-timeline-axislabel-text, var(--a-text-subtle));
+  white-space: nowrap;
+}
+
+.navdsi-timeline__row {
+  display: flex;
+  background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
+  margin: var(--a-spacing-4) 0;
+  grid-column: 2;
+}
+
+.navdsi-timeline__row--active {
+  background: var(--ac-timeline-row-active-bg, var(--a-surface-selected));
+}
+
+.navdsi-timeline__row:last-of-type {
+  margin-bottom: 0;
+}
+
+.navdsi-timeline__row-periods {
+  min-height: 1.5rem;
+  position: relative;
+  width: 100%;
+  margin: 0;
+}
+
+.navdsi-timeline__row-periods > li {
+  list-style-type: none;
+}
+
+.navdsi-timeline__period {
+  height: 100%;
+  border-radius: var(--a-border-radius-full);
+  position: absolute;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  z-index: 2;
+  border: none;
+  font-size: 1rem;
+}
+
+.navdsi-timeline__period--inner {
+  margin: 0 var(--a-spacing-1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.navdsi-timeline__period--inner svg {
+  flex-shrink: 0;
+}
+
+.navdsi-timeline__period--clickable {
+  cursor: pointer;
+}
+
+.navdsi-timeline__period--success {
+  background: var(--ac-timeline-period-success-bg, var(--a-surface-success-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-success-border, var(--a-border-success));
+}
+
+.navdsi-timeline__period--success.navdsi-timeline__period--clickable:hover {
+  background: var(--a-surface-success-subtle-hover);
+  background: var(--ac-timeline-period-success-bg-hover, var(--a-surface-success-subtle-hover));
+}
+
+.navdsi-timeline__period--warning {
+  background: var(--ac-timeline-period-warning-bg, var(--a-surface-warning-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-warning-border, var(--a-border-warning));
+}
+
+.navdsi-timeline__period--warning.navdsi-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-warning-bg-hover, var(--a-surface-warning-subtle-hover));
+}
+
+.navdsi-timeline__period--danger {
+  background: var(--ac-timeline-period-danger-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-danger-border, var(--a-border-danger));
+}
+
+.navdsi-timeline__period--danger.navdsi-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-danger-bg-hover, var(--a-surface-danger-subtle-hover));
+}
+
+.navdsi-timeline__period--info {
+  background: var(--ac-timeline-period-info-bg, var(--a-surface-info-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-info-border, var(--a-border-info));
+}
+
+.navdsi-timeline__period--info.navdsi-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-info-bg-hover, var(--a-surface-info-subtle-hover));
+}
+
+.navdsi-timeline__period--neutral {
+  background: var(--ac-timeline-period-neutral-bg, var(--a-bg-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-neutral-border, var(--a-border-default));
+}
+
+.navdsi-timeline__period--neutral.navdsi-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-neutral-bg-hover, var(--a-gray-200));
+}
+
+.navdsi-timeline__period--connected-both {
+  border-radius: 0;
+}
+
+.navdsi-timeline__period--connected-right {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.navdsi-timeline__period--connected-left {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.navdsi-timeline__period--selected {
+  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected));
+  z-index: 3;
+}
+
+.navdsi-timeline__pin-wrapper {
+  position: absolute;
+  grid-column: 2;
+  top: 0;
+  z-index: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+  isolation: isolate;
+
+  --navdsc-timeline-pin-size: 0.9rem;
+}
+
+.navdsi-timeline__pin-button {
+  border: none;
+  cursor: pointer;
+  background: var(--a-surface-default);
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
+  z-index: 2;
+  border-radius: var(--a-border-radius-full);
+  padding: 3.5px;
+  position: relative;
+}
+
+.navdsi-timeline__pin-button::before {
+  content: "";
+  inset: 0;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: var(--a-border-radius-full);
+  left: calc(-12.5px + 3.5px);
+  top: calc(-12.5px + 3.5px);
+}
+
+.navdsi-timeline__pin-button:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+  outline: none;
+}
+
+.navdsi-timeline__pin-button:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
+}
+
+.navdsi-timeline__pin-button:hover:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navdsi-timeline__pin-button:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+    outline: none;
+  }
+
+  .navdsi-timeline__pin-button:hover:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+  }
+}
+
+.navdsi-timeline__pin-wrapper::before {
+  content: "";
+  top: var(--navdsc-timeline-pin-size);
+  height: calc(94% - var(--navdsc-timeline-pin-size));
+  width: 1px;
+  margin: 0 auto;
+  background: var(--a-surface-inverted);
+}
+
+.navdsi-timeline__zoom {
+  margin-top: var(--a-spacing-6);
+  float: right;
+  display: flex;
+  list-style-type: none;
+}
+
+.navdsi-timeline__zoom-button {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 9px 6px 8px;
+  border: 1px solid var(--ac-timeline-zoom-border, var(--a-border-default));
+  border-width: 1px 0 1px 1px;
+  background: var(--ac-timeline-zoom-bg, var(--a-surface-default));
+}
+
+.navdsi-timeline__zoom li:first-child .navdsi-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium);
+}
+
+.navdsi-timeline__zoom li:last-child .navdsi-timeline__zoom-button {
+  border-width: 1px;
+  border-radius: 0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;
+}
+
+.navdsi-timeline__zoom li:only-child .navdsi-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navdsi-timeline__zoom-button:not([aria-pressed="true"]):hover {
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
+}
+
+.navdsi-timeline__zoom-button[aria-pressed="true"] {
+  background: var(--ac-timeline-zoom-selected-bg, var(--a-surface-inverted));
+  color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
+}
+
+.navdsi-timeline__period:focus-visible {
+  outline: none;
+  z-index: 4;
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+.navdsi-timeline__period--selected:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    0 0 0 2px var(--a-border-focus);
+  z-index: 3;
+}
+
+.navdsi-timeline__zoom li:focus-within {
+  z-index: var(--a-z-index-focus);
+}
+
+.navdsi-timeline__zoom-button:focus-visible {
+  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+  border-width: 1px;
+}
+
+.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus-visible {
+  margin-right: 2px;
+  padding-right: 6px;
+}
+
+@supports not selector(:focus-visible) {
+  .navdsi-timeline__period:focus {
+    outline: none;
+    z-index: 4;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navdsi-timeline__period--selected:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+      0 0 0 2px var(--a-border-focus);
+    z-index: 3;
+  }
+
+  .navdsi-timeline__zoom-button:focus {
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    border-width: 1px;
+  }
+
+  .navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
+    margin-right: 2px;
+    padding-right: 6px;
+  }
+}
+
+/**
+* Timeline Popover
+*/
+
+.navds-timeline__popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-timeline__popover:focus {
+  outline: none;
+}
+
+.navds-timeline__popover-content {
+  padding: var(--a-spacing-3);
+}
+
+.navds-timeline__popover-arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+
+.tokens {
+  --ac-header-bg: red;
+  --ac-header-active-bg: orange;
+}
@@ -0,0 +1,17 @@
+const StyledDiv = styled`
+.navdsi-dropdown__menu {}
+.navdsi-dropdown__divider {}
+    button.navdsi-header__title:active {}
+.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {}
+.navdsi-timeline__period--danger {}
+`;
+
+<style>
+  {`
+    .navdsi-dropdown__menu {}
+    .navdsi-dropdown__divider {}
+    button.navdsi-header__title:active {}
+    .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {}
+    .navdsi-timeline__period--danger {}
+  `}
+</style>;
@@ -0,0 +1,544 @@
+.navds-dropdown__menu {
+  overflow: hidden;
+  padding: var(--a-spacing-2) 0;
+  color: var(--ac-dropdown-text, var(--a-text-default));
+  width: 27ch;
+  max-height: 616px;
+  overflow-y: auto;
+}
+
+.navds-dropdown__divider {
+  margin: var(--a-spacing-3) 0;
+  border: none;
+  border-bottom: 1px solid var(--a-border-divider);
+}
+
+.navds-dropdown__menu > :not(.navds-dropdown__divider):not(.navds-dropdown__list) {
+  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-dropdown__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navds-dropdown__list-item {
+  margin: 0;
+}
+
+.navds-dropdown__list-heading {
+  margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-dropdown__item {
+  border: none;
+  margin: 0;
+  overflow: visible;
+  background: transparent;
+  color: var(--ac-dropdown-item-text, var(--a-text-action));
+  font: inherit;
+  text-decoration: none;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-1) var(--a-spacing-4);
+}
+
+.navds-dropdown__item:hover {
+  background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-dropdown__item:active {
+  background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
+  color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
+}
+
+.navds-dropdown__item:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-dropdown__item:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  }
+}
+
+.navds-dropdown__item:disabled {
+  color: var(--ac-dropdown-item-text, var(--a-text-action));
+  opacity: 0.3;
+  background: transparent;
+  cursor: not-allowed;
+}
+
+.navds-internalheader {
+  display: flex;
+  align-self: stretch;
+  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
+  min-height: var(--a-spacing-12);
+
+  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+}
+
+.navds-internalheader__title {
+  border: none;
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  font-weight: var(--a-font-weight-bold);
+  line-height: normal;
+  text-align: left;
+  padding: 0 var(--a-spacing-5) 0 var(--a-spacing-6);
+  border-right: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+button.navds-internalheader__title {
+  cursor: pointer;
+}
+
+.navds-internalheader__user {
+  padding: 0 var(--a-spacing-5);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  display: flex;
+  align-items: center;
+}
+
+.navds-internalheader__button {
+  border: none;
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  overflow: visible;
+  background: transparent;
+  font: inherit;
+  line-height: normal;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  gap: var(--a-spacing-2);
+  border-left: 1px solid var(--ac-internalheader-divider, var(--a-gray-600));
+  color: var(--ac-internalheader-text, var(--a-text-on-inverted));
+}
+
+a.navds-internalheader__title:hover,
+button.navds-internalheader__title:hover,
+.navds-internalheader__button:hover {
+  background-color: var(--ac-internalheader-hover-bg, var(--a-surface-inverted-hover));
+}
+
+.navds-internalheader__title:focus-visible,
+.navds-internalheader__button:focus-visible {
+  box-shadow: var(--navds-internalheader-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-internalheader__title:focus,
+  .navds-internalheader__button:focus {
+    box-shadow: var(--navds-internalheader-focus);
+    outline: none;
+  }
+}
+
+a.navds-internalheader__title:active,
+button.navds-internalheader__title:active,
+.navds-internalheader__button:active {
+  background-color: var(--ac-internalheader-active-bg, var(--a-surface-inverted-active));
+}
+
+.navds-internalheader__user-button {
+  padding-left: var(--a-spacing-5);
+  gap: var(--a-spacing-4);
+}
+
+.navds-timeline {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  width: 100%;
+  min-width: fit-content;
+  align-items: center;
+}
+
+.navds-timeline__axislabels {
+  position: relative;
+  height: 1rem;
+  box-sizing: content-box;
+  grid-column: 2;
+}
+
+.navds-timeline__row-label {
+  white-space: nowrap;
+  width: auto;
+  margin-right: var(--a-spacing-4);
+  grid-column: 1;
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+}
+
+.navds-timeline__row-label:where(:nth-last-child(2)) {
+  align-self: flex-end;
+}
+
+.navds-timeline__axislabels-label {
+  position: absolute;
+  color: var(--ac-timeline-axislabel-text, var(--a-text-subtle));
+  white-space: nowrap;
+}
+
+.navds-timeline__row {
+  display: flex;
+  background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
+  margin: var(--a-spacing-4) 0;
+  grid-column: 2;
+}
+
+.navds-timeline__row--active {
+  background: var(--ac-timeline-row-active-bg, var(--a-surface-selected));
+}
+
+.navds-timeline__row:last-of-type {
+  margin-bottom: 0;
+}
+
+.navds-timeline__row-periods {
+  min-height: 1.5rem;
+  position: relative;
+  width: 100%;
+  margin: 0;
+}
+
+.navds-timeline__row-periods > li {
+  list-style-type: none;
+}
+
+.navds-timeline__period {
+  height: 100%;
+  border-radius: var(--a-border-radius-full);
+  position: absolute;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  z-index: 2;
+  border: none;
+  font-size: 1rem;
+}
+
+.navds-timeline__period--inner {
+  margin: 0 var(--a-spacing-1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.navds-timeline__period--inner svg {
+  flex-shrink: 0;
+}
+
+.navds-timeline__period--clickable {
+  cursor: pointer;
+}
+
+.navds-timeline__period--success {
+  background: var(--ac-timeline-period-success-bg, var(--a-surface-success-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-success-border, var(--a-border-success));
+}
+
+.navds-timeline__period--success.navds-timeline__period--clickable:hover {
+  background: var(--a-surface-success-subtle-hover);
+  background: var(--ac-timeline-period-success-bg-hover, var(--a-surface-success-subtle-hover));
+}
+
+.navds-timeline__period--warning {
+  background: var(--ac-timeline-period-warning-bg, var(--a-surface-warning-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-warning-border, var(--a-border-warning));
+}
+
+.navds-timeline__period--warning.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-warning-bg-hover, var(--a-surface-warning-subtle-hover));
+}
+
+.navds-timeline__period--danger {
+  background: var(--ac-timeline-period-danger-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-danger-border, var(--a-border-danger));
+}
+
+.navds-timeline__period--danger.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-danger-bg-hover, var(--a-surface-danger-subtle-hover));
+}
+
+.navds-timeline__period--info {
+  background: var(--ac-timeline-period-info-bg, var(--a-surface-info-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-info-border, var(--a-border-info));
+}
+
+.navds-timeline__period--info.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-info-bg-hover, var(--a-surface-info-subtle-hover));
+}
+
+.navds-timeline__period--neutral {
+  background: var(--ac-timeline-period-neutral-bg, var(--a-bg-subtle));
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-period-neutral-border, var(--a-border-default));
+}
+
+.navds-timeline__period--neutral.navds-timeline__period--clickable:hover {
+  background: var(--ac-timeline-period-neutral-bg-hover, var(--a-gray-200));
+}
+
+.navds-timeline__period--connected-both {
+  border-radius: 0;
+}
+
+.navds-timeline__period--connected-right {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.navds-timeline__period--connected-left {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.navds-timeline__period--selected {
+  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected));
+  z-index: 3;
+}
+
+.navds-timeline__pin-wrapper {
+  position: absolute;
+  grid-column: 2;
+  top: 0;
+  z-index: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+  isolation: isolate;
+
+  --navdsc-timeline-pin-size: 0.9rem;
+}
+
+.navds-timeline__pin-button {
+  border: none;
+  cursor: pointer;
+  background: var(--a-surface-default);
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
+  z-index: 2;
+  border-radius: var(--a-border-radius-full);
+  padding: 3.5px;
+  position: relative;
+}
+
+.navds-timeline__pin-button::before {
+  content: "";
+  inset: 0;
+  position: absolute;
+  width: 25px;
+  height: 25px;
+  border-radius: var(--a-border-radius-full);
+  left: calc(-12.5px + 3.5px);
+  top: calc(-12.5px + 3.5px);
+}
+
+.navds-timeline__pin-button:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+    0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+  outline: none;
+}
+
+.navds-timeline__pin-button:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
+}
+
+.navds-timeline__pin-button:hover:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+    0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+    0 0 0 6px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-timeline__pin-button:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
+      0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+    outline: none;
+  }
+
+  .navds-timeline__pin-button:hover:focus {
+    box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
+      0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
+      0 0 0 6px var(--a-border-focus);
+  }
+}
+
+.navds-timeline__pin-wrapper::before {
+  content: "";
+  top: var(--navdsc-timeline-pin-size);
+  height: calc(94% - var(--navdsc-timeline-pin-size));
+  width: 1px;
+  margin: 0 auto;
+  background: var(--a-surface-inverted);
+}
+
+.navds-timeline__zoom {
+  margin-top: var(--a-spacing-6);
+  float: right;
+  display: flex;
+  list-style-type: none;
+}
+
+.navds-timeline__zoom-button {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 9px 6px 8px;
+  border: 1px solid var(--ac-timeline-zoom-border, var(--a-border-default));
+  border-width: 1px 0 1px 1px;
+  background: var(--ac-timeline-zoom-bg, var(--a-surface-default));
+}
+
+.navds-timeline__zoom li:first-child .navds-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium);
+}
+
+.navds-timeline__zoom li:last-child .navds-timeline__zoom-button {
+  border-width: 1px;
+  border-radius: 0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;
+}
+
+.navds-timeline__zoom li:only-child .navds-timeline__zoom-button {
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-timeline__zoom-button:not([aria-pressed="true"]):hover {
+  background: var(--ac-timeline-zoom-bg-hover, var(--a-surface-action-subtle-hover));
+}
+
+.navds-timeline__zoom-button[aria-pressed="true"] {
+  background: var(--ac-timeline-zoom-selected-bg, var(--a-surface-inverted));
+  color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
+}
+
+.navds-timeline__period:focus-visible {
+  outline: none;
+  z-index: 4;
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-timeline__period--selected:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+    0 0 0 2px var(--a-border-focus);
+  z-index: 3;
+}
+
+.navds-timeline__zoom li:focus-within {
+  z-index: var(--a-z-index-focus);
+}
+
+.navds-timeline__zoom-button:focus-visible {
+  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+  border-width: 1px;
+}
+
+.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible {
+  margin-right: 2px;
+  padding-right: 6px;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-timeline__period:focus {
+    outline: none;
+    z-index: 4;
+    box-shadow: 0 0 0 2px var(--a-border-focus);
+  }
+
+  .navds-timeline__period--selected:focus {
+    box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
+      0 0 0 2px var(--a-border-focus);
+    z-index: 3;
+  }
+
+  .navds-timeline__zoom-button:focus {
+    box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
+    border-width: 1px;
+  }
+
+  .navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus {
+    margin-right: 2px;
+    padding-right: 6px;
+  }
+}
+
+/**
+* Timeline Popover
+*/
+
+.navds-timeline__popover {
+  z-index: var(--a-z-index-popover);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  box-shadow: var(--a-shadow-medium);
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-timeline__popover:focus {
+  outline: none;
+}
+
+.navds-timeline__popover-content {
+  padding: var(--a-spacing-3);
+}
+
+.navds-timeline__popover-arrow {
+  position: absolute;
+  z-index: -1;
+  transform: rotate(45deg);
+  background-color: var(--ac-popover-bg, var(--a-surface-default));
+  border: 1px solid;
+  border-color: var(--ac-popover-border, var(--a-border-default));
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-timeline__popover[data-placement^="top"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-top-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="bottom"] > .navds-timeline__popover-arrow {
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.navds-timeline__popover[data-placement^="right"] > .navds-timeline__popover-arrow {
+  border-right-color: transparent;
+  border-top-color: transparent;
+}
+
+.tokens {
+  --ac-internalheader-bg: red;
+  --ac-internalheader-active-bg: orange;
+}
@@ -0,0 +1,17 @@
+const StyledDiv = styled`
+.navds-dropdown__menu {}
+.navds-dropdown__divider {}
+    button.navds-internalheader__title:active {}
+.navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {}
+.navds-timeline__period--danger {}
+`;
+
+<style>
+  {`
+    .navds-dropdown__menu {}
+    .navds-dropdown__divider {}
+    button.navds-internalheader__title:active {}
+    .navds-timeline__popover[data-placement^="left"] > .navds-timeline__popover-arrow {}
+    .navds-timeline__period--danger {}
+  `}
+</style>;
@@ -1,6 +1,6 @@
 import { check } from "../../../../utils/check";

-const migration = "update-js-tokens";
+const migration = "internal-css";
 const fixtures = ["complete"];

 for (const fixture of fixtures) {
@@ -0,0 +1,38 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
+import moveAndRenameImport from "../../../utils/moveAndRenameImport";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options, ...rest) {
+  const j = api.jscodeshift;
+
+  let root: any;
+  try {
+    root = j(file.source);
+  } catch {
+    return file.source;
+  }
+
+  moveAndRenameImport(j, root, {
+    fromImport: "@navikt/ds-react-internal",
+    toImport: "@navikt/ds-react",
+    fromName: "Header",
+    toName: "InternalHeader",
+  });
+  moveAndRenameImport(j, root, {
+    fromImport: "@navikt/ds-react-internal",
+    toImport: "@navikt/ds-react",
+    fromName: "Dropdown",
+    toName: "Dropdown",
+  });
+  moveAndRenameImport(j, root, {
+    fromImport: "@navikt/ds-react-internal",
+    toImport: "@navikt/ds-react",
+    fromName: "Timeline",
+    toName: "Timeline",
+  });
+
+  return root.toSource(getLineTerminator(file.source));
+}
@@ -0,0 +1,2 @@
+import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";
+import { Button, CopyButton } from "@navikt/ds-react";
@@ -0,0 +1,7 @@
+import {
+  Button,
+  CopyButton,
+  InternalHeader as Header,
+  Dropdown,
+  Timeline,
+} from "@navikt/ds-react";
@@ -0,0 +1,5 @@
+import {
+  Dropdown as DSDropdown,
+  Timeline as DSTimeline,
+  Header as TestHeader,
+} from "@navikt/ds-react-internal";
@@ -0,0 +1,5 @@
+import {
+  InternalHeader as TestHeader,
+  Dropdown as DSDropdown,
+  Timeline as DSTimeline,
+} from "@navikt/ds-react";
@@ -0,0 +1 @@
+import { Header as InternalHeader } from "@navikt/ds-react-internal";
@@ -0,0 +1 @@
+import { InternalHeader } from "@navikt/ds-react";
@@ -0,0 +1 @@
+import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";
@@ -0,0 +1 @@
+import { InternalHeader as Header, Dropdown, Timeline } from "@navikt/ds-react";
@@ -1,7 +1,7 @@
 import { check } from "../../../../utils/check";

-const migration = "update-css-tokens";
-const fixtures = ["complete"];
+const migration = "internal-react";
+const fixtures = ["import", "import-add", "import-alias", "import-edgecase"];

 for (const fixture of fixtures) {
  check(__dirname, {
@@ -9,10 +9,4 @@ for (const fixture of fixtures) {
    migration,
    extension: "js",
  });
-
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: "css",
-  });
 }
@@ -8,8 +8,16 @@ export default function moveAndRenameImport(
    toImport,
    fromName,
    toName,
-  }: { fromImport: string; toImport: string; fromName: string; toName: string }
+    ignoreAlias = false,
+  }: {
+    fromImport: string;
+    toImport: string;
+    fromName: string;
+    toName: string;
+    ignoreAlias?: boolean;
+  }
 ) {
+  /* Does package-name exist */
  const existingFromImport = root.find(j.ImportDeclaration, {
    source: {
      value: fromImport,
@@ -39,6 +47,7 @@ export default function moveAndRenameImport(
    existingFromImportSpecifier.remove();
  }

+  /* Remove import if its now empty */
  if (
    !existingFromImport.get("specifiers").value?.length ||
    existingFromImport.get("specifiers").value?.length === 0
@@ -46,12 +55,14 @@ export default function moveAndRenameImport(
    existingFromImport.remove();
  }

+  /* Does package exist */
  const existingImport = root.find(j.ImportDeclaration, {
    source: {
      value: toImport,
    },
  });

+  /* Check if migrated name allready exist */
  const existingImportSpecifier = existingImport.find(j.ImportSpecifier, {
    imported: {
      name: toName,
@@ -59,7 +70,9 @@ export default function moveAndRenameImport(
  });

  if (existingImportSpecifier.length <= 0) {
-    const newImportSpecifier = j.importSpecifier(j.identifier(toName));
+    const newImportSpecifier = ignoreAlias
+      ? j.importSpecifier(j.identifier(toName))
+      : j.importSpecifier(j.identifier(toName), j.identifier(localname));

    if (existingImport.length > 0) {
      existingImport.get("specifiers").push(newImportSpecifier);
@@ -1,9 +0,0 @@
-*.d.ts
-*.js
-bin/*.js
-*.js.map
-!transforms/**/__testfixtures__/**/*.js
-!transforms/**/tests/**/*.output.js
-!transforms/**/tests/**/*.input.js
-transforms/**/tests/**/*.test.js
-!jest.config.js
@@ -1,239 +0,0 @@
-# @navikt/ds-codemod
-
-## 3.4.2
-
-## 3.4.1
-
-## 3.4.0
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-## 3.2.3
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-### Patch Changes
-
- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
-
-  - `@navikt/ds-codemods` vil bli deprecated ettehvert.
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
-
-## 2.8.9
-
-## 2.8.8
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
-
-## 2.8.4
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
-
-## 2.7.7
-
-## 2.7.6
-
-## 2.7.5
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
-
-## 2.5.0
-
-## 2.4.3
-
-## 2.4.2
-
-### Patch Changes
-
- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-## 2.3.1
-
-## 2.3.0
-
-## 2.2.0
-
-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
-
-## 2.1.2
-
-## 2.1.1
-
-## 2.1.0
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-## 2.0.14
-
-## 2.0.13
-
-## 2.0.12
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
-
-## 2.0.5
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
-
-## 2.0.1
-
-## 2.0.0
-
-### Major Changes
-
- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
-
-## 1.5.10
-
-## 1.5.9
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-## 1.5.3
-
-## 1.5.2
-
-## 1.5.1
-
-## 1.5.0
-
-## 1.4.4
-
-## 1.4.3
-
-## 1.4.2
-
-## 1.4.1
-
-## 1.4.0
-
-## 1.3.39
-
-### Patch Changes
-
- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
-
-## 1.3.38
@@ -1,4 +0,0 @@
-# Deperecation!
-
-This package will be been deprecated in favor of [@navikt/aksel](...)
-Run `npx @navikt/aksel codemod --help` to get started
@@ -1,36 +0,0 @@
-import meow, { AnyFlags } from "meow";
-
-import { migrate } from "./migrate";
-import { cliConfig } from "./config";
-
-const help = `
-Usage
-  $ npx @navikt/ds-codemod ${cliConfig.args
-    .map((arg) => `<${arg.name}>`)
-    .join(" ")}
-  ${cliConfig.args.map((arg) => `${arg.name}\t${arg.description}`).join("\n  ")}
-Options
-  ${Object.entries(cliConfig.flags)
-    .map(([name, val]: [string, any]) => `--${name}\t${val.description}`)
-    .join("\n  ")}
-`;
-
-const { input, flags } = meow({
-  description: cliConfig.description,
-  flags: Object.fromEntries(
-    Object.entries(cliConfig.flags).map(
-      ([name, flag]: [string, any]): [string, AnyFlags] => [
-        name,
-        {
-          alias: flag.alias,
-          type: flag.type,
-        },
-      ]
-    )
-  ),
-  help,
-});
-
-export async function run() {
-  await migrate(input[0], input[1], flags);
-}
@@ -1,37 +0,0 @@
-const createCLIConfig = (config: any) => config;
-
-export const cliConfig = createCLIConfig({
-  description: "Migrations for NAV designsystem solutions",
-  args: [
-    {
-      name: "migration",
-      description:
-        "One of the choices from https://github.com/navikt/aksel/blob/main/%40navikt/codemod/README.md",
-    },
-    {
-      name: "path",
-      description:
-        "Files or directory to transform. Can be a glob like src/**.css",
-    },
-  ],
-  flags: {
-    dry: {
-      alias: "d",
-      description: "Dry run, no changes will be made to files",
-      type: "boolean",
-    },
-    print: {
-      alias: "p",
-      description: "Print transformed files",
-      type: "boolean",
-    },
-    force: {
-      alias: "f",
-      description: "Forcibly run migrations without checking git-changes",
-      type: "boolean",
-    },
-  },
-});
-
-export const DS_MIGRATION_COMMENT =
-  "ds-codemod: Unable to migrate the following expression. Please upgrade manually.";
@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-const { run } = require("./cli");
-
-run();
@@ -1,140 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-import * as jscodeshift from "jscodeshift/src/Runner";
-import chalk from "chalk";
-import isGitClean from "is-git-clean";
-import globby from "globby";
-
-export interface MigrateOptions {
-  dry?: boolean;
-  print?: boolean;
-  force?: boolean;
-}
-
-const migrationsMap = [
-  {
-    name: "v1/preset: Runs all codemods for beta to v1 migration",
-    value: "v1/preset",
-    path: "v1.0.0/preset",
-  },
-  {
-    name: "v1/pagination: Fixes breaking API-changes from <Pagination /> component",
-    value: "v1/pagination",
-    path: "v1.0.0/pagination",
-  },
-  {
-    name: "v1/tabs: Fixes breaking API-changes from <Tabs /> component",
-    value: "v1/tabs",
-    path: "v1.0.0/tabs",
-  },
-  {
-    name: "v1/chat: Fixes breaking API-changes from <SpeechBubble /> (now <Chat/>) component",
-    value: "v1/chat",
-    path: "v1.0.0/chat",
-  },
-  {
-    name: "v2/css: Fixes css-variables",
-    value: "v2/css",
-    path: "v2.0.0/update-css-tokens/update-css-tokens",
-  },
-  {
-    name: "v2/js: Fixes js-variables",
-    value: "v2/js",
-    path: "v2.0.0/update-js-tokens/update-js-tokens",
-  },
-  {
-    name: "v2/sass: Fixes sass-variables",
-    value: "v2/sass",
-    path: "v2.0.0/update-sass-tokens/update-sass-tokens",
-  },
-  {
-    name: "v2/less: Fixes less-variables",
-    value: "v2/less",
-    path: "v2.0.0/update-less-tokens/update-less-tokens",
-  },
-];
-
-export async function migrate(
-  migration: string,
-  files: string,
-  options: MigrateOptions = {}
-) {
-  const foundMigration = migrationsMap.find((x) => x.value === migration);
-  const migrationFile = path.join(
-    __dirname,
-    `../transforms/${foundMigration.path}.js`
-  );
-
-  try {
-    if (!fs.existsSync(migrationFile)) {
-      throw new Error(`No migration found for ${migration}`);
-    }
-
-    if (!files) throw new Error(`No path provided for migration`);
-
-    if (!options.dry) {
-      checkGitStatus(options.force);
-    }
-
-    const filepaths = globby.sync(files, { cwd: process.cwd() });
-
-    if (filepaths.length === 0) {
-      throw new Error(`No files found for ${files}`);
-    }
-
-    // eslint-disable-next-line no-console
-    console.log(chalk.green("Running migration:"), migration);
-
-    await jscodeshift.run(migrationFile, filepaths, {
-      babel: true,
-      ignorePattern: [
-        "**/node_modules/**",
-        "**/.next/**",
-        "**/build/**",
-        "**/dist/**",
-      ],
-      extensions: "tsx,ts,jsx,js",
-      parser: "tsx",
-      verbose: 2,
-      runInBand: true,
-      silent: false,
-      stdin: false,
-      ...options,
-    });
-  } catch (error) {
-    console.error(error);
-    process.exit(1);
-  }
-}
-
-export function checkGitStatus(force?: boolean) {
-  let clean = false;
-  let errorMessage = "Unable to determine if git directory is clean";
-  try {
-    clean = isGitClean.sync(process.cwd());
-    errorMessage = "Git directory is not clean";
-  } catch (err: any) {
-    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
-      clean = true;
-    }
-  }
-
-  if (!clean) {
-    /* eslint-disable no-console */
-    if (force) {
-      console.log(`WARNING: ${errorMessage}. Forcibly continuing.`);
-    } else {
-      console.log("Thank you for using @navikt/ds-codemod!");
-      console.log(
-        chalk.yellow(
-          "\nBut before we continue, please stash or commit your git changes."
-        )
-      );
-      console.log(
-        "\nYou may use the --force flag to override this safety check."
-      );
-      process.exit(1);
-    }
-  }
-}
@@ -1,10 +0,0 @@
-import { deleteSync } from "del";
-
-deleteSync([
-  "utils/**/*.js",
-  "bin/**/*.js",
-  "transforms/**/*.js",
-  "!transforms/**/__testfixtures__",
-  "!transforms/**/tests/*.input.*",
-  "!transforms/**/tests/*.output.*",
-]);
@@ -1,8 +0,0 @@
-const customJestConfig = {
-  testMatch: ["**/__tests__/**/*.js", "**/tests/*.test.js"],
-  verbose: true,
-  rootDir: "./transforms",
-};
-
-// createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async
-module.exports = customJestConfig;
@@ -1,65 +0,0 @@
-{
-  "name": "@navikt/ds-codemod",
-  "version": "3.4.2",
-  "description": "Aksel codemods for NAVs designsystem",
-  "author": "Aksel | NAV designsystem team",
-  "license": "MIT",
-  "keywords": [
-    "react",
-    "codemod",
-    "jscodeshift"
-  ],
-  "files": [
-    "transforms/**/*.js",
-    "utils/**/*.js",
-    "bin/*.js",
-    "lib/**/*.js",
-    "lib/cra-to-next/gitignore",
-    "tokens-map.mjs"
-  ],
-  "scripts": {
-    "build": "yarn clean && tsc -p tsconfig.json",
-    "dev": "yarn clean && tsc --watch -p tsconfig.json",
-    "start": "./bin/cli.js",
-    "test": "yarn build && jest",
-    "test:watch": "jest --watch",
-    "clean": "node clean.mjs"
-  },
-  "bin": "./bin/ds-codemod.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/aksel.git",
-    "directory": "@navikt/codemod"
-  },
-  "homepage": "https://github.com/navikt/aksel/tree/main/@navikt/codemod",
-  "dependencies": {
-    "chalk": "4.1.0",
-    "cheerio": "1.0.0-rc.9",
-    "execa": "4.0.3",
-    "globby": "11.0.1",
-    "inquirer": "7.3.3",
-    "is-git-clean": "1.1.0",
-    "jest": "^29.0.0",
-    "jscodeshift": "0.13.1",
-    "jscodeshift-add-imports": "1.0.10",
-    "lodash": "4.17.21",
-    "meow": "7.0.1",
-    "prettier": "2.8.8"
-  },
-  "devDependencies": {
-    "@babel/preset-env": "^7.0.0",
-    "@types/jest": "^29.0.0",
-    "@types/jscodeshift": "0.11.5",
-    "@types/react": "^18.0.0",
-    "del": "7.0.0",
-    "typescript": "^4.8.0"
-  },
-  "sideEffects": false,
-  "engines": {
-    "node": ">=12.0.0"
-  },
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
-  }
-}
@@ -1,368 +0,0 @@
-/* prettier-ignore */
-const tokens = [
-  ["--navds-semantic-color-text-inverted", "--a-text-on-inverted"],
-  ["--navds-semantic-color-text-muted", "--a-text-subtle"],
-  ["--navds-semantic-color-text", "--a-text-default"],
-  ["--navds-semantic-color-feedback-danger-text", "--a-text-danger"],
-  ["--navds-semantic-color-link-visited", "--a-text-visited"],
-  ["--navds-semantic-color-link", "--a-text-action"],
-  ["--navds-spacing-32", "--a-spacing-32"],
-  ["--navds-spacing-24", "--a-spacing-24"],
-  ["--navds-spacing-20", "--a-spacing-20"],
-  ["--navds-spacing-18", "--a-spacing-18"],
-  ["--navds-spacing-16", "--a-spacing-16"],
-  ["--navds-spacing-14", "--a-spacing-14"],
-  ["--navds-spacing-12", "--a-spacing-12"],
-  ["--navds-spacing-11", "--a-spacing-11"],
-  ["--navds-spacing-10", "--a-spacing-10"],
-  ["--navds-spacing-9", "--a-spacing-9"],
-  ["--navds-spacing-8", "--a-spacing-8"],
-  ["--navds-spacing-7", "--a-spacing-7"],
-  ["--navds-spacing-6", "--a-spacing-6"],
-  ["--navds-spacing-5", "--a-spacing-5"],
-  ["--navds-spacing-4", "--a-spacing-4"],
-  ["--navds-spacing-3", "--a-spacing-3"],
-  ["--navds-spacing-2", "--a-spacing-2"],
-  ["--navds-spacing-1", "--a-spacing-1"],
-  ["--navds-global-color-purple-900", "--a-purple-900"],
-  ["--navds-global-color-purple-800", "--a-purple-800"],
-  ["--navds-global-color-purple-700", "--a-purple-700"],
-  ["--navds-global-color-purple-600", "--a-purple-600"],
-  ["--navds-global-color-purple-500", "--a-purple-500"],
-  ["--navds-global-color-purple-400", "--a-purple-400"],
-  ["--navds-global-color-purple-300", "--a-purple-300"],
-  ["--navds-global-color-purple-200", "--a-purple-200"],
-  ["--navds-global-color-purple-100", "--a-purple-100"],
-  ["--navds-global-color-purple-50", "--a-purple-50"],
-  ["--navds-global-color-orange-900", "--a-orange-900"],
-  ["--navds-global-color-orange-800", "--a-orange-800"],
-  ["--navds-global-color-orange-700", "--a-orange-700"],
-  ["--navds-global-color-orange-600", "--a-orange-600"],
-  ["--navds-global-color-orange-500", "--a-orange-500"],
-  ["--navds-global-color-orange-400", "--a-orange-400"],
-  ["--navds-global-color-orange-300", "--a-orange-300"],
-  ["--navds-global-color-orange-200", "--a-orange-200"],
-  ["--navds-global-color-orange-100", "--a-orange-100"],
-  ["--navds-global-color-orange-50", "--a-orange-50"],
-  ["--navds-global-color-limegreen-900", "--a-limegreen-900"],
-  ["--navds-global-color-limegreen-800", "--a-limegreen-800"],
-  ["--navds-global-color-limegreen-700", "--a-limegreen-700"],
-  ["--navds-global-color-limegreen-600", "--a-limegreen-600"],
-  ["--navds-global-color-limegreen-500", "--a-limegreen-500"],
-  ["--navds-global-color-limegreen-400", "--a-limegreen-400"],
-  ["--navds-global-color-limegreen-300", "--a-limegreen-300"],
-  ["--navds-global-color-limegreen-200", "--a-limegreen-200"],
-  ["--navds-global-color-limegreen-100", "--a-limegreen-100"],
-  ["--navds-global-color-limegreen-50", "--a-limegreen-50"],
-  ["--navds-global-color-lightblue-900", "--a-lightblue-900"],
-  ["--navds-global-color-lightblue-800", "--a-lightblue-800"],
-  ["--navds-global-color-lightblue-700", "--a-lightblue-700"],
-  ["--navds-global-color-lightblue-600", "--a-lightblue-600"],
-  ["--navds-global-color-lightblue-500", "--a-lightblue-500"],
-  ["--navds-global-color-lightblue-400", "--a-lightblue-400"],
-  ["--navds-global-color-lightblue-300", "--a-lightblue-300"],
-  ["--navds-global-color-lightblue-200", "--a-lightblue-200"],
-  ["--navds-global-color-lightblue-100", "--a-lightblue-100"],
-  ["--navds-global-color-lightblue-50", "--a-lightblue-50"],
-  ["--navds-global-color-green-900", "--a-green-900"],
-  ["--navds-global-color-green-800", "--a-green-800"],
-  ["--navds-global-color-green-700", "--a-green-700"],
-  ["--navds-global-color-green-600", "--a-green-600"],
-  ["--navds-global-color-green-500", "--a-green-500"],
-  ["--navds-global-color-green-400", "--a-green-400"],
-  ["--navds-global-color-green-300", "--a-green-300"],
-  ["--navds-global-color-green-200", "--a-green-200"],
-  ["--navds-global-color-green-100", "--a-green-100"],
-  ["--navds-global-color-green-50", "--a-green-50"],
-  ["--navds-global-color-deepblue-900", "--a-deepblue-900"],
-  ["--navds-global-color-deepblue-800", "--a-deepblue-800"],
-  ["--navds-global-color-deepblue-700", "--a-deepblue-700"],
-  ["--navds-global-color-deepblue-600", "--a-deepblue-600"],
-  ["--navds-global-color-deepblue-500", "--a-deepblue-500"],
-  ["--navds-global-color-deepblue-400", "--a-deepblue-400"],
-  ["--navds-global-color-deepblue-300", "--a-deepblue-300"],
-  ["--navds-global-color-deepblue-200", "--a-deepblue-200"],
-  ["--navds-global-color-deepblue-100", "--a-deepblue-100"],
-  ["--navds-global-color-deepblue-50", "--a-deepblue-50"],
-  ["--navds-global-color-red-900", "--a-red-900"],
-  ["--navds-global-color-red-800", "--a-red-800"],
-  ["--navds-global-color-red-700", "--a-red-700"],
-  ["--navds-global-color-red-600", "--a-red-600"],
-  ["--navds-global-color-red-500", "--a-red-500"],
-  ["--navds-global-color-red-400", "--a-red-400"],
-  ["--navds-global-color-red-300", "--a-red-300"],
-  ["--navds-global-color-red-200", "--a-red-200"],
-  ["--navds-global-color-red-100", "--a-red-100"],
-  ["--navds-global-color-red-50", "--a-red-50"],
-  ["--navds-global-color-blue-900", "--a-blue-900"],
-  ["--navds-global-color-blue-800", "--a-blue-800"],
-  ["--navds-global-color-blue-700", "--a-blue-700"],
-  ["--navds-global-color-blue-600", "--a-blue-600"],
-  ["--navds-global-color-blue-500", "--a-blue-500"],
-  ["--navds-global-color-blue-400", "--a-blue-400"],
-  ["--navds-global-color-blue-300", "--a-blue-300"],
-  ["--navds-global-color-blue-200", "--a-blue-200"],
-  ["--navds-global-color-blue-100", "--a-blue-100"],
-  ["--navds-global-color-blue-50", "--a-blue-50"],
-  ["--navds-global-color-gray-900", "--a-gray-900"],
-  ["--navds-global-color-gray-800", "--a-gray-800"],
-  ["--navds-global-color-gray-700", "--a-gray-700"],
-  ["--navds-global-color-gray-600", "--a-gray-600"],
-  ["--navds-global-color-gray-500", "--a-gray-500"],
-  ["--navds-global-color-gray-400", "--a-gray-400"],
-  ["--navds-global-color-gray-300", "--a-gray-300"],
-  ["--navds-global-color-gray-200", "--a-gray-200"],
-  ["--navds-global-color-gray-100", "--a-gray-100"],
-  ["--navds-global-color-gray-50", "--a-gray-50"],
-  ["--navds-global-color-nav-red", "--a-nav-red"],
-  ["--navds-global-color-white", "--a-white"],
-  ["--navds-global-color-transparent", "--a-transparent"],
-  ["--navds-border-radius-full", "--a-border-radius-full"],
-  ["--navds-border-radius-xlarge", "--a-border-radius-xlarge"],
-  ["--navds-border-radius-large", "--a-border-radius-large"],
-  ["--navds-border-radius-medium", "--a-border-radius-medium"],
-  ["--navds-border-radius-small", "--a-border-radius-small"],
-  ["--navds-z-index-tooltip", "--a-z-index-tooltip"],
-  ["--navds-z-index-focus", "--a-z-index-focus"],
-  ["--navds-z-index-popover", "--a-z-index-popover"],
-  ["--navds-z-index-modal", "--a-z-index-modal"],
-  ["--navds-font-weight-regular", "--a-font-weight-regular"],
-  ["--navds-font-weight-bold", "--a-font-weight-bold"],
-  ["--navds-font-size-small", "--a-font-size-small"],
-  ["--navds-font-size-medium", "--a-font-size-medium"],
-  ["--navds-font-size-large", "--a-font-size-large"],
-  ["--navds-font-size-xlarge", "--a-font-size-xlarge"],
-  ["--navds-font-size-heading-xsmall", "--a-font-size-heading-xsmall"],
-  ["--navds-font-size-heading-small", "--a-font-size-heading-small"],
-  ["--navds-font-size-heading-medium", "--a-font-size-heading-medium"],
-  ["--navds-font-size-heading-large", "--a-font-size-heading-large"],
-  ["--navds-font-size-heading-xlarge", "--a-font-size-heading-xlarge"],
-  ["--navds-font-size-heading-2xlarge", "--a-font-size-heading-2xlarge"],
-  ["--navds-font-line-height-medium", "--a-font-line-height-medium"],
-  ["--navds-font-line-height-large", "--a-font-line-height-large"],
-  ["--navds-font-line-height-xlarge", "--a-font-line-height-xlarge"],
-  ["--navds-font-line-height-heading-xsmall","--a-font-line-height-heading-xsmall"],
-  ["--navds-font-line-height-heading-small","--a-font-line-height-heading-small"],
-  ["--navds-font-line-height-heading-medium","--a-font-line-height-heading-medium"],
-  ["--navds-font-line-height-heading-large","--a-font-line-height-heading-large"],
-  ["--navds-font-line-height-heading-xlarge","--a-font-line-height-heading-xlarge"],
-  ["--navds-font-line-height-heading-2xlarge","--a-font-line-height-heading-2xlarge"],
-  ["--navds-font-family", "--a-font-family"],
-
-  ["--navds-semantic-color-feedback-info-icon", "--a-icon-info"],
-  ["--navds-semantic-color-feedback-warning-icon", "--a-icon-warning"],
-  ["--navds-semantic-color-feedback-danger-icon", "--a-icon-danger"],
-  ["--navds-semantic-color-feedback-success-icon", "--a-icon-success"],
-
-  ["--navds-semantic-color-feedback-info-background", "--a-surface-info-subtle"],
-  ["--navds-semantic-color-feedback-warning-background", "--a-surface-warning-subtle"],
-  ["--navds-semantic-color-interaction-danger-selected", "--a-surface-danger-active"],
-  ["--navds-semantic-color-interaction-danger-hover", "--a-surface-danger-hover"],
-  ["--navds-semantic-color-interaction-danger", "--a-surface-danger"],
-  ["--navds-semantic-color-feedback-danger-background", "--a-surface-danger-subtle"],
-  ["--navds-semantic-color-feedback-success-background", "--a-surface-success-subtle"],
-  ["--navds-semantic-color-interaction-primary-hover-subtle","--a-surface-action-subtle-hover"],
-  ["--navds-semantic-color-interaction-primary-selected","--a-surface-action-selected"],
-  ["--navds-semantic-color-interaction-primary-hover","--a-surface-action-hover"],
-  ["--navds-semantic-color-interaction-primary", "--a-surface-action"],
-  ["--navds-semantic-color-canvas-background-inverted", "--a-surface-inverted"],
-  ["--navds-semantic-color-component-background-inverted", "--a-surface-inverted"],
-  ["--navds-semantic-color-component-background-alternate", "--a-surface-subtle"],
-  ["--navds-semantic-color-component-background-light", "--a-surface-default"],
-  ["--navds-semantic-color-canvas-background-light", "--a-bg-default"],
-  ["--navds-semantic-color-canvas-background", "--a-bg-subtle"],
-  ["--navds-semantic-color-border-inverted", "--a-border-on-inverted"],
-  ["--navds-semantic-color-border-muted", "--a-border-default"],
-  ["--navds-semantic-color-border", "--a-border-strong"],
-  ["--navds-semantic-color-focus-inverted", "--a-border-focus-on-inverted"],
-  ["--navds-semantic-color-focus", "--a-border-focus"],
-  ["--navds-semantic-color-feedback-info-border", "--a-border-info"],
-  ["--navds-semantic-color-feedback-warning-border", "--a-border-warning"],
-  ["--navds-semantic-color-feedback-danger-border", "--a-border-danger"],
-  ["--navds-semantic-color-feedback-success-border", "--a-border-success"],
-  ["--navds-semantic-color-divider", "--a-border-divider"],
-  ["--navds-shadow-focus-inverted", "--a-shadow-focus-inverted"],
-  ["--navds-shadow-focus", "--a-shadow-focus"],
-  ["--navds-shadow-xsmall", "--a-shadow-xsmall"],
-  ["--navds-shadow-small", "--a-shadow-small"],
-  ["--navds-shadow-medium", "--a-shadow-medium"],
-  ["--navds-shadow-large", "--a-shadow-large"],
-  ["--navds-shadow-xlarge", "--a-shadow-xlarge"],
-
-  /* Components */
-["--navds-modal-color-overlay", "--a-surface-backdrop"],
-["--navds-accordion-color-border", "--a-border-strong"],
-["--navds-accordion-color-text-hover", "--a-surface-action"],
-["--navds-accordion-color-border-hover", "--a-surface-action"],
-["--navds-accordion-color-background-open", "--a-surface-action-subtle"],
-["--navds-alert-color-error-border", "--a-border-danger"],
-["--navds-alert-color-error-background", "--a-surface-danger-subtle"],
-["--navds-alert-color-warning-border", "--a-border-warning"],
-["--navds-alert-color-warning-background", "--a-surface-warning-subtle"],
-["--navds-alert-color-info-border", "--a-border-info"],
-["--navds-alert-color-info-background", "--a-surface-info-subtle"],
-["--navds-alert-color-success-border", "--a-border-success"],
-["--navds-alert-color-success-background", "--a-surface-success-subtle"],
-["--navds-alert-color-border", "--a-border-default"],
-["--navds-chat-color-avatar-background", "--a-bg-subtle"],
-["--navds-chat-color-background", "--a-bg-subtle"],
-["--navds-chat-color-avatar", "--a-text-default"],
-["--navds-guide-panel-color-illustration-background", "--a-surface-action-subtle"],
-["--navds-guide-panel-color-background", "--a-surface-default"],
-["--navds-guide-panel-color-border", "--a-border-action"],
-["--navds-error-summary-color-background", "--a-surface-default"],
-["--navds-error-summary-color-border", "--a-border-danger"],
-["--navds-confirmation-panel-color-background-checked", "--a-surface-success-subtle"],
-["--navds-confirmation-panel-color-background-error", "--a-surface-danger-subtle"],
-["--navds-confirmation-panel-color-border-checked", "--a-border-success"],
-["--navds-confirmation-panel-color-border-error", "--a-border-danger"],
-["--navds-confirmation-panel-color-background", "--a-surface-warning-subtle"],
-["--navds-confirmation-panel-color-border", "--a-border-warning"],
-["--navds-radio-checkbox-color-background-hover", "--a-surface-action-subtle"],
-["--navds-radio-checkbox-color-background-checked", "--a-surface-action"],
-["--navds-radio-checkbox-color-shadow-hover", "--a-surface-action"],
-["--navds-radio-checkbox-color-shadow-checked", "--a-surface-action"],
-["--navds-radio-checkbox-color-shadow-error", "--a-surface-danger"],
-["--navds-radio-checkbox-color-label-hover", "--a-surface-action"],
-["--navds-radio-checkbox-color-background", "--a-surface-default"],
-["--navds-radio-checkbox-color-text", "--a-text-default"],
-["--navds-radio-checkbox-color-shadow", "--a-border-strong"],
-["--navds-select-color-border-hover", "--a-surface-action"],
-["--navds-select-color-border-error", "--a-surface-danger"],
-["--navds-select-color-shadow-error", "--a-surface-danger"],
-["--navds-select-color-border-disabled","--a-gray-400"],
-["--navds-select-color-background-disabled", "--a-surface-subtle"],
-["--navds-switch-color-label-hover", "--a-surface-action"],
-["--navds-select-color-background", "--a-surface-default"],
-["--navds-select-color-border", "--a-border-strong"],
-["--navds-switch-color-label", "--a-text-default"],
-["--navds-switch-color-track-background-hover-checked", "--a-icon-success"],
-["--navds-switch-color-track-shadow-inner-focus", "--a-surface-default"],
-["--navds-switch-color-track-background-checked", "--a-border-success"],
-["--navds-switch-color-track-background-hover", "--a-surface-neutral-hover"],
-["--navds-switch-color-track-background", "--a-surface-neutral"],
-["--navds-switch-color-thumb-icon-checked", "--a-border-success"],
-["--navds-switch-color-thumb-loader-checked", "--a-border-success"],
-["--navds-switch-color-thumb-icon", "--a-icon-subtle"],
-["--navds-switch-color-thumb", "--a-surface-default"],
-["--navds-textarea-color-counter-text-error", "--a-surface-danger"],
-["--navds-textarea-color-border-hover", "--a-surface-action"],
-["--navds-textarea-color-border-error", "--a-surface-danger"],
-["--navds-textarea-color-shadow-error", "--a-surface-danger"],
-["--navds-textarea-color-counter-text", "--a-text-subtle"],
-["--navds-textarea-color-text-disabled", "--a-text-default"],
-["--navds-textarea-color-border-disabled", "--a-gray-400"],
-["--navds-textarea-color-background-disabled", "--a-surface-subtle"],
-["--navds-textarea-color-background", "--a-surface-default"],
-["--navds-textarea-color-border", "--a-border-strong"],
-["--navds-help-text-color-popover-background", "--a-surface-info-subtle"],
-["--navds-help-text-color-background-hover", "--a-surface-action"],
-["--navds-help-text-color-background-focus", "--a-surface-action"],
-["--navds-help-text-color-shadow-hover", "--a-surface-action"],
-["--navds-help-text-color-hover", "--a-surface-default"],
-["--navds-help-text-color-focus", "--a-surface-default"],
-["--navds-help-text-color", "--a-surface-action"],
-["--navds-link-color-text-focus", "--a-text-on-action"],
-["--navds-link-color-text-active", "--a-text-on-action"],
-["--navds-link-color-text", "--a-text-action"],
-["--navds-link-color-icon", "--a-icon-action"],
-["--navds-link-color-icon-focus", "--a-icon-on-action"],
-["--navds-link-color-background-focus", "--a-border-focus"],
-["--navds-link-color-background-active", "--a-border-focus"],
-["--navds-link-color-on-info-background", "--a-text-default"],
-["--navds-link-color-on-error-background", "--a-text-default"],
-["--navds-loader-color-neutral-foreground", "--a-border-default"],
-["--navds-loader-color-interaction-foreground", "--a-surface-action"],
-["--navds-loader-color-inverted-foreground", "--a-surface-default"],
-["--navds-loader-color-transparent-background", "--a-surface-transparent"],
-["--navds-loader-color-foreground", "--a-border-default"],
-["--navds-loader-color-background", "--a-surface-active"],
-["--navds-modal-color-background", "--a-surface-default"],
-["--navds-pagination-color-text-selected", "--a-text-on-action"],
-["--navds-pagination-color-background-selected", "--a-surface-action-selected"],
-["--navds-popover-color-background", "--a-surface-default"],
-["--navds-popover-color-border", "--a-border-default"],
-["--navds-tag-color-info-background", "--a-surface-info-subtle"],
-["--navds-tag-color-info-border", "--a-border-info"],
-["--navds-tag-color-warning-background", "--a-surface-warning-subtle"],
-["--navds-tag-color-warning-border", "--a-border-warning"],
-["--navds-tag-color-success-background", "--a-surface-success-subtle"],
-["--navds-tag-color-success-border", "--a-border-success"],
-["--navds-tag-color-error-background", "--a-surface-danger-subtle"],
-["--navds-tag-color-error-border", "--a-border-danger"],
-["--navds-tag-color-border", "--a-border-default"],
-["--navds-tag-color-background", "--a-surface-subtle"],
-["--navds-toggle-group-color-background-hover", "--a-surface-action-subtle"],
-["--navds-toggle-group-color-text-hover", "--a-surface-action"],
-["--navds-toggle-group-color-background-pressed", "--a-surface-action-selected"],
-["--navds-toggle-group-color-text-pressed", "--a-text-on-action"],
-["--navds-toggle-group-color-background", "--a-surface-default"],
-["--navds-toggle-group-color-text", "--a-text-default"],
-["--navds-toggle-group-color-border", "--a-border-divider"],
-["--navds-panel-color-background", "--a-surface-default"],
-["--navds-panel-color-border", "--a-border-default"],
-["--navds-link-panel-color-border-hover", "--a-surface-action"],
-["--navds-link-panel-color-title-hover", "--a-text-action"],
-["--navds-link-panel-color-text", "--a-text-default"],
-["--navds-table-row-color-background-selected-hover", "--a-surface-action-subtle-hover"],
-["--navds-table-row-color-background-hover", "--a-bg-subtle"],
-["--navds-table-row-color-background-selected", "--a-surface-action-subtle"],
-["--navds-table-row-color-background-zebra", "--a-surface-subtle"],
-["--navds-table-cell-color-border-hover", "--a-border-strong"],
-["--navds-table-cell-color-border", "--a-border-default"],
-
-["--navds-button-color-primary-background-hover", "--a-surface-action-hover"],
-["--navds-button-color-primary-background-active", "--a-surface-action-active"],
-["--navds-button-color-primary-border-focus", "--a-surface-default"],
-["--navds-button-color-primary-text", "--a-text-on-action"],
-["--navds-button-color-primary-background", "--a-surface-action"],
-["--navds-button-color-secondary-border-focus-active-hover", "--a-surface-default"],
-["--navds-button-color-secondary-text-hover", "--a-text-action"],
-["--navds-button-color-secondary-text-active", "--a-text-on-action"],
-["--navds-button-color-secondary-background-hover", "--a-surface-action-subtle-hover"],
-["--navds-button-color-secondary-background-active", "--a-surface-action-active"],
-["--navds-button-color-secondary-border", "--a-border-action"],
-["--navds-button-color-secondary-text", "--a-text-action"],
-["--navds-button-color-secondary-background", "--a-surface-default"],
-["--navds-button-color-tertiary-background-hover", "--a-surface-action-subtle-hover"],
-["--navds-button-color-tertiary-border-focus", "--a-border-action"],
-["--navds-button-color-tertiary-border-active", "--a-surface-default"],
-["--navds-button-color-tertiary-background-active", "--a-surface-action-active"],
-["--navds-button-color-tertiary-text-active", "--a-text-on-action"],
-["--navds-button-color-tertiary-text", "--a-text-action"],
-["--navds-button-color-danger-background-hover", "--a-surface-danger-hover"],
-["--navds-button-color-danger-background-active", "--a-surface-danger-active"],
-["--navds-button-color-danger-border-focus", "--a-surface-default"],
-["--navds-button-color-danger-background", "--a-surface-danger"],
-["--navds-button-color-danger-text", "--a-text-on-danger"],
-["--navds-error-message-color-text", "--a-text-danger"],
-["--navds-search-color-border-hover", "--a-border-action"],
-["--navds-search-color-clear-hover", "--a-text-action"],
-["--navds-search-color-border-error", "--a-border-danger"],
-["--navds-search-color-text", "--a-text-default"],
-["--navds-search-color-border", "--a-border-default"],
-["--navds-text-field-color-border-hover", "--a-border-action"],
-["--navds-text-field-color-border-error", "--a-border-danger"],
-["--navds-text-field-color-shadow-error", "--a-border-danger"],
-["--navds-text-field-color-border-disabled", "--a-gray-400"],
-["--navds-text-field-color-background-disabled", "--a-surface-subtle"],
-["--navds-text-field-color-placeholder-text", "--a-text-subtle"],
-["--navds-text-field-color-text-disabled", "--a-text-default"],
-["--navds-text-field-color-text", "--a-text-default"],
-["--navds-text-field-color-background", "--a-surface-default"],
-["--navds-text-field-color-border", "--a-border-default"],
-
-["--navds-dropdown-menu-color", "--a-text-default"],
-["--navdsi-dropdown-item-color-text", "--a-text-action"],
-["--navdsi-dropdown-item-color-background-hover", "--a-surface-action-subtle-hover"],
-["--navdsi-dropdown-item-color-background-active", "--a-surface-action-active"],
-["--navds-dropdown-item-color-focus", "--a-border-focus"],
-["--navdsi-header-color-text", "--a-text-on-inverted"],
-["--navdsi-header-color-background", "--a-surface-inverted"],
-["--navdsi-header-color-border", "--a-gray-600"],
-["--navdsi-header-color-hover", "--a-surface-inverted-hover"],
-["--navdsi-header-color-active", "--a-surface-inverted-active"],
-["--navds-button-icon-adjustment", "--ac-button-icon-margin"]
-]
-
-module.exports = { tokens };
@@ -1,18 +0,0 @@
-import renameProps from "../../utils/rename-props";
-
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api, options) {
-  const j = api.jscodeshift;
-  const root = j(file.source);
-
-  const printOptions = options.printOptions;
-
-  return renameProps({
-    root,
-    componentName: options.component,
-    props: { [options.from]: options.to },
-  }).toSource(printOptions);
-}
@@ -1,17 +0,0 @@
-import { check } from "../../../utils/check";
-
-const migration = "rename-prop";
-const fixtures = ["rename"];
-
-for (const fixture of fixtures) {
-  check(__dirname, {
-    fixture,
-    migration,
-    extension: "js",
-    options: {
-      component: "SpeechBubble",
-      from: "illustration",
-      to: "avatar",
-    },
-  });
-}
@@ -1,8 +0,0 @@
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <SpeechBubble illustration={<Illustration />}>
-      <div />
-    </SpeechBubble>
-  );
-};
@@ -1,8 +0,0 @@
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <SpeechBubble avatar={<Illustration />}>
-      <div />
-    </SpeechBubble>
-  );
-};
@@ -1,26 +0,0 @@
-import { SpeechBubble, Button } from "@navikt/ds-react";
-
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <SpeechBubble
-      illustration={<Illustration />}
-      topText="Ola Normann 01.01.21 14:00"
-      backgroundColor="red"
-      illustrationBgColor="blue"
-      {...testProps}
-    >
-      <SpeechBubble.Bubble {...testProps}>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </SpeechBubble.Bubble>
-      <SpeechBubble.Bubble>
-        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-        do.
-      </SpeechBubble.Bubble>
-      <SpeechBubble.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </SpeechBubble.Bubble>
-    </SpeechBubble>
-  );
-};
@@ -1,26 +0,0 @@
-import { Chat, Button } from "@navikt/ds-react";
-
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <Chat
-      avatar={<Illustration />}
-      name="Ola Normann 01.01.21 14:00"
-      backgroundColor="red"
-      avatarBgColor="blue"
-      {...testProps}
-    >
-      <Chat.Bubble {...testProps}>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-        do.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-  );
-};
@@ -1,25 +0,0 @@
-import { Chat, Button } from "@navikt/ds-react";
-
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <Chat
-      avatar={<Illustration />}
-      name="Ola Normann 01.01.21 14:00"
-      backgroundColor="red"
-      avatarBgColor="blue"
-    >
-      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-        do.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-  );
-};
@@ -1,25 +0,0 @@
-import { Chat, Button } from "@navikt/ds-react";
-
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <Chat
-      avatar={<Illustration />}
-      name="Ola Normann 01.01.21 14:00"
-      backgroundColor="red"
-      avatarBgColor="blue"
-    >
-      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-        do.
-      </Chat.Bubble>
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-  );
-};
@@ -1,44 +0,0 @@
-import { SpeechBubble, Button } from "@navikt/ds-react";
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <div>
-      <SpeechBubble
-        illustration={<Illustration />}
-        topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        illustrationBgColor="blue"
-      >
-        <SpeechBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </SpeechBubble.Bubble>
-      </SpeechBubble>
-      <SpeechBubble
-        illustration={<Illustration />}
-        topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        illustrationBgColor="blue"
-      >
-        <SpeechBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </SpeechBubble.Bubble>
-        <SpeechBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </SpeechBubble.Bubble>
-      </SpeechBubble>
-    </div>
-  );
-};
@@ -1,44 +0,0 @@
-import { Chat, Button } from "@navikt/ds-react";
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <div>
-      <Chat
-        avatar={<Illustration />}
-        name="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        avatarBgColor="blue"
-      >
-        <Chat.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar={<Illustration />}
-        name="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        avatarBgColor="blue"
-      >
-        <Chat.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
@@ -1,44 +0,0 @@
-import { SpeechBubble as DsBubble, Button } from "@navikt/ds-react";
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <div>
-      <DsBubble
-        illustration={<Illustration />}
-        topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        illustrationBgColor="blue"
-      >
-        <DsBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </DsBubble.Bubble>
-      </DsBubble>
-      <DsBubble
-        illustration={<Illustration />}
-        topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        illustrationBgColor="blue"
-      >
-        <DsBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </DsBubble.Bubble>
-      </DsBubble>
-    </div>
-  );
-};
@@ -1,44 +0,0 @@
-import { Chat as DsBubble, Button } from "@navikt/ds-react";
-/* eslint-disable react/jsx-no-undef */
-export const Page = () => {
-  return (
-    <div>
-      <DsBubble
-        avatar={<Illustration />}
-        name="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        avatarBgColor="blue"
-      >
-        <DsBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </DsBubble.Bubble>
-      </DsBubble>
-      <DsBubble
-        avatar={<Illustration />}
-        name="Ola Normann 01.01.21 14:00"
-        backgroundColor="red"
-        avatarBgColor="blue"
-      >
-        <DsBubble.Bubble>
-          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Eu fugiat esse fugiat Lorem culpa nulla mollit tempor incididunt aute
-          do.
-        </DsBubble.Bubble>
-        <DsBubble.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </DsBubble.Bubble>
-      </DsBubble>
-    </div>
-  );
-};
@@ -1,18 +0,0 @@
-import { Pagination, Button } from "@navikt/ds-react";
-
-export const Demo = () => {
-  return (
-    <div>
-      <Pagination
-        size="small"
-        onPageChange={setPage}
-        data-version="v1"
-        {...testProps}
-      />
-      <Pagination size="small" onPageChange={setPage} data-version="v1" />
-      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
-      <Pagination onPageChange={setPage} />
-      <Pagination size="small" onPageChange={setPage} />
-    </div>
-  );
-};
@@ -1,18 +0,0 @@
-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>
-  );
-};
@@ -1,11 +0,0 @@
-import { Pagination as DsPagination, Button } from "@navikt/ds-react";
-
-export const Demo = () => {
-  return (
-    <div>
-      <DsPagination onPageChange={setPage} />
-      <DsPagination size="medium" onPageChange={setPage} />
-      <DsPagination size="small" onPageChange={setPage} />
-    </div>
-  );
-};
@@ -1,11 +0,0 @@
-import { Pagination as DsPagination, Button } from "@navikt/ds-react";
-
-export const Demo = () => {
-  return (
-    <div>
-      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
-      <DsPagination size="small" onPageChange={setPage} data-version="v1" />
-      <DsPagination size="xsmall" onPageChange={setPage} data-version="v1" />
-    </div>
-  );
-};
@@ -1,11 +0,0 @@
-import { Pagination, Button } from "@navikt/ds-react";
-
-export const Demo = () => {
-  return (
-    <div>
-      <Pagination onPageChange={setPage} />
-      <Pagination size="medium" onPageChange={setPage} />
-      <Pagination size="small" onPageChange={setPage} />
-    </div>
-  );
-};
@@ -1,11 +0,0 @@
-import { Pagination, Button } from "@navikt/ds-react";
-
-export const Demo = () => {
-  return (
-    <div>
-      <Pagination size="small" onPageChange={setPage} data-version="v1" />
-      <Pagination size="small" onPageChange={setPage} data-version="v1" />
-      <Pagination size="xsmall" onPageChange={setPage} data-version="v1" />
-    </div>
-  );
-};
@@ -1,25 +0,0 @@
-import { Tabs } from "@navikt/ds-react";
-
-const TabComp = () => {
-  return (
-    /* prettier-ignore */
-    <div>
-      <Tabs defaultValue="logg" onChange={(x) => console.log(x)} {...testProps}>
-        <Tabs.List loop={false} {...testProps}>
-          <Tabs.Tab value="logg" iconPosition={props.left} label="logg" {...testProps}/>
-          <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
-        </Tabs.List>
-        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-      </Tabs>
-      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
-        <Tabs.List>
-          <Tabs.Tab value="logg" label="logg" />
-          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
-        </Tabs.List>
-        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-      </Tabs>
-    </div>
-  );
-};
@@ -1,30 +0,0 @@
-import { Tabs } from "@navikt/ds-react";
-
-const TabComp = () => {
-  return (
-    /* prettier-ignore */
-    <div>
-      <Tabs
-        defaultValue="logg"
-        onChange={(x) => console.log(x)}
-        {...testProps}
-        loop={false}
-        iconPosition={props.left}>
-        <Tabs.List {...testProps}>
-          <Tabs.Tab value="logg" label="logg" {...testProps} />
-          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
-        </Tabs.List>
-        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-      </Tabs>
-      <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
-        <Tabs.List>
-          <Tabs.Tab value="logg" label="logg" />
-          <Tabs.Tab value="logg2" label="logg2medlangtekst" />
-        </Tabs.List>
-        <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-        <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-      </Tabs>
-    </div>
-  );
-};
@@ -1,19 +0,0 @@
-import { Tabs } from "@navikt/ds-react";
-
-const TabComp = () => {
-  return (
-    /* prettier-ignore */
-    <Tabs
-      defaultValue="logg"
-      onChange={(x) => console.log(x)}
-      loop
-      iconPosition="left">
-      <Tabs.List>
-        <Tabs.Tab value="logg" label="logg" />
-        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
-      </Tabs.List>
-      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-    </Tabs>
-  );
-};
@@ -1,19 +0,0 @@
-import { Tabs } from "@navikt/ds-react";
-
-const TabComp = () => {
-  return (
-    /* prettier-ignore */
-    <Tabs
-      defaultValue="logg"
-      onChange={(x) => console.log(x)}
-      loop
-      iconPosition="left">
-      <Tabs.List>
-        <Tabs.Tab value="logg" label="logg" />
-        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
-      </Tabs.List>
-      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-    </Tabs>
-  );
-};
@@ -1,15 +0,0 @@
-import { Tabs } from "@navikt/ds-react";
-
-const TabComp = () => {
-  return (
-    /* prettier-ignore */
-    <Tabs defaultValue="logg" onChange={(x) => console.log(x)}>
-      <Tabs.List loop>
-        <Tabs.Tab value="logg" iconPosition="left" label="logg" />
-        <Tabs.Tab value="logg2" iconPosition="top" label="logg2medlangtekst" />
-      </Tabs.List>
-      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-    </Tabs>
-  );
-};
@@ -1,19 +0,0 @@
-import { Tabs } from "@navikt/ds-react";
-
-const TabComp = () => {
-  return (
-    /* prettier-ignore */
-    <Tabs
-      defaultValue="logg"
-      onChange={(x) => console.log(x)}
-      loop
-      iconPosition="left">
-      <Tabs.List>
-        <Tabs.Tab value="logg" label="logg" />
-        <Tabs.Tab value="logg2" label="logg2medlangtekst" />
-      </Tabs.List>
-      <Tabs.Panel value="logg">TabPanel for Logg-tab</Tabs.Panel>
-      <Tabs.Panel value="logg2">TabPanel for Inbox-tab</Tabs.Panel>
-    </Tabs>
-  );
-};
@@ -1,10 +0,0 @@
-export {};
-
-jest.autoMockOff();
-const defineTest = require("jscodeshift/dist/testUtils").defineTest;
-
-const tests = ["props", "complete", "idempotent", "renamed"];
-
-for (const test of tests) {
-  defineTest(__dirname, "chat", null, `chat/${test}`);
-}
@@ -1,10 +0,0 @@
-export {};
-
-jest.autoMockOff();
-const defineTest = require("jscodeshift/dist/testUtils").defineTest;
-
-const tests = ["size", "import", "idempotent"];
-
-for (const test of tests) {
-  defineTest(__dirname, "pagination", null, `pagination/${test}`);
-}
@@ -1,10 +0,0 @@
-export {};
-
-jest.autoMockOff();
-const defineTest = require("jscodeshift/dist/testUtils").defineTest;
-
-const tests = ["props", "idempotent", "complete"];
-
-for (const test of tests) {
-  defineTest(__dirname, "tabs", null, `tabs/${test}`);
-}
@@ -1,68 +0,0 @@
-import renameProps from "../../utils/rename-props";
-
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api, options) {
-  const j = api.jscodeshift;
-  let localName = "SpeechBubble";
-
-  const root = j(file.source);
-
-  /* Finds and replaces import from SpeechBubble -> Chat */
-  root
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === "@navikt/ds-react")
-    .forEach((imp) => {
-      imp.value.specifiers.forEach((x) => {
-        if (x.imported.name === "SpeechBubble") {
-          if (x.local.name !== x.imported.name) {
-            localName = x.local.name;
-            x.imported.name = "Chat";
-          } else {
-            x.imported.name = "Chat";
-            x.local.name = "Chat";
-          }
-        }
-      });
-    });
-
-  if (j(file.source).findJSXElements(localName)) {
-    renameProps({
-      root,
-      componentName: localName,
-      props: {
-        illustrationBgColor: "avatarBgColor",
-        illustration: "avatar",
-        topText: "name",
-      },
-    });
-
-    /* Find and replace name of all <SpeechBubble />*/
-    const compRoot = root.find(j.JSXElement, {
-      openingElement: { name: { name: localName } },
-    });
-
-    compRoot.forEach((x) => {
-      if (localName !== "SpeechBubble") return;
-      x.node.openingElement.name.name = "Chat";
-      x.node.closingElement.name.name = "Chat";
-    });
-
-    /* Need to handle dot-notations differently */
-    const child = root.find(j.JSXElement);
-
-    child.forEach((x) => {
-      if (
-        x.value.openingElement.name.type === "JSXMemberExpression" &&
-        x.value.openingElement.name.object.name === "SpeechBubble"
-      ) {
-        x.value.openingElement.name.object.name = "Chat";
-        x.value.closingElement.name.object.name = "Chat";
-      }
-    });
-  }
-
-  return root.toSource(options.printOptions);
-}
@@ -1,83 +0,0 @@
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api, options) {
-  const j = api.jscodeshift;
-  let localName = "Pagination";
-
-  const root = j(file.source);
-
-  function addMigrationTag(node) {
-    const attributes = node.openingElement.attributes;
-    const isMigrated = attributes.find(
-      (node) =>
-        node.type === "JSXAttribute" &&
-        node.name.name === "data-version" &&
-        node.value.value === "v1"
-    );
-
-    if (!isMigrated) {
-      attributes.push(
-        j.jsxAttribute(j.jsxIdentifier("data-version"), j.literal("v1"))
-      );
-    }
-  }
-
-  /* https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/variant-prop.js */
-  function addExplicitStandardProp(node) {
-    const attributes = node.openingElement.attributes;
-    const variant = attributes.find(
-      (node) => node.type === "JSXAttribute" && node.name.name === "size"
-    );
-
-    if (!variant) {
-      attributes.unshift(
-        j.jsxAttribute(j.jsxIdentifier("size"), j.literal("small"))
-      );
-      addMigrationTag(node);
-    }
-  }
-
-  /* Finds locally used name for Pagination */
-  root
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === "@navikt/ds-react")
-    .forEach((imp) => {
-      imp.value.specifiers.forEach((x) => {
-        if (
-          x.imported.name === "Pagination" &&
-          x.local.name !== x.imported.name
-        ) {
-          localName = x.local.name;
-        }
-      });
-    });
-
-  if (j(file.source).findJSXElements(localName)) {
-    root.findJSXElements(`${localName}`).forEach((parent) => {
-      const skip = !!parent.value.openingElement?.attributes.find(
-        (x) => x.name.name === "data-version" && x.value.value === "v1"
-      );
-
-      parent.value.openingElement?.attributes.forEach((x, index) => {
-        let didUpdate = false;
-        if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
-          /* addExplicitStandardProp */
-          if (x.value.value === "medium") {
-            x.value = j.literal("small");
-            didUpdate = true;
-          } else if (x.value.value === "small") {
-            x.value = j.literal("xsmall");
-            didUpdate = true;
-          }
-
-          didUpdate && addMigrationTag(parent.value);
-        }
-      });
-      addExplicitStandardProp(parent.value);
-    });
-  }
-
-  return root.toSource(options.printOptions);
-}
@@ -1,15 +0,0 @@
-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;
-}
@@ -1,83 +0,0 @@
-import renameProps from "../../utils/rename-props";
-
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api, options) {
-  const j = api.jscodeshift;
-  let localName = "Tabs";
-  let iconPositionProp = null;
-
-  const root = j(file.source);
-
-  /* Finds used name for Tabs component */
-  root
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === "@navikt/ds-react")
-    .forEach((imp) => {
-      imp.value.specifiers.forEach((x) => {
-        if (x.imported.name === "Tabs" && x.local.name !== x.imported.name) {
-          localName = x.local.name;
-        }
-      });
-    });
-
-  if (j(file.source).findJSXElements(localName)) {
-    renameProps({
-      root,
-      componentName: `${localName}.List`,
-      props: {
-        loop: "null",
-      },
-    });
-
-    root.findJSXElements(`${localName}`).forEach((parent) => {
-      parent.value.children.forEach((el) => {
-        const openingEl = el.openingElement;
-        if (openingEl?.name && openingEl.name.type === "JSXMemberExpression") {
-          if (
-            openingEl.name.object.name === localName &&
-            openingEl.name.property.name === "List"
-          ) {
-            /* Move loop-prop */
-            el.openingElement.attributes.forEach((x, index) => {
-              if (x.name?.name === "loop" && x.type === "JSXAttribute") {
-                parent.value.openingElement.attributes.push(x);
-                delete el.openingElement.attributes[index];
-              }
-            });
-
-            /* Find and move iconPosition-prop to <Tabs/> */
-            el.children.forEach((tab) => {
-              const tabEl = tab.openingElement;
-              if (tabEl?.name && tabEl.name.type === "JSXMemberExpression") {
-                if (
-                  tabEl.name.object.name === localName &&
-                  tabEl.name.property.name === "Tab"
-                ) {
-                  tabEl?.attributes.forEach((x, index) => {
-                    if (
-                      x.name?.name === "iconPosition" &&
-                      x.type === "JSXAttribute"
-                    ) {
-                      if (!iconPositionProp) {
-                        iconPositionProp = x;
-                      }
-                      delete tabEl.attributes[index];
-                    }
-                  });
-                }
-              }
-            });
-          }
-        }
-      });
-      iconPositionProp &&
-        parent.value.openingElement.attributes.push(iconPositionProp);
-      iconPositionProp = null;
-    });
-  }
-
-  return root.toSource(options.printOptions);
-}
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	69aea38784	Version Packages (#2053 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-15 15:55:48 +02:00
Ken	8f16d1571e	🎨 Oppdatert ikoner (#2054 )	2023-06-15 15:51:47 +02:00
Marianne Røsvik	e2265c9a78	Added two new icons (#2047 )	2023-06-15 15:06:48 +02:00
Ken	925aa7a140	🐛 OverridableComponent omitter nå 'as' (#2051 )	2023-06-15 14:46:34 +02:00
Ken	7c17e40cac	🐛 Datepicker og Monthpicker lukker nå popover ved escape (#2052 )	2023-06-15 14:46:07 +02:00
github-actions[bot]andgithub-actions[bot]	3c8889ea88	Version Packages (#2050 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-13 16:49:54 +02:00
Ken	e060961050	🐛 Fikset bruk av text-subtle på skjemaelementer (#2049 )	2023-06-13 16:45:35 +02:00
Ken	18aa4ee7fb	Merge branch 'main' of https://github.com/navikt/aksel	2023-06-09 14:36:38 +02:00
Ken	f44edd76a2	Merge branch 'next'	2023-06-09 14:31:11 +02:00
github-actions[bot]andgithub-actions[bot]	1fa636bdd5	Version Packages (#2044 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-09 14:16:43 +02:00
Ken	44a75acb6b	🐛 className ble ikke riktig forwardet til period	2023-06-09 14:14:15 +02:00
Ken	550faee900	💄 Checkboard-pattern for transparent visning av tokens	2023-06-09 13:53:29 +02:00
Karl O	88b6174b0b	📝 La til next-logger så backend logging får rett log-level (#2042 )	2023-06-09 13:34:31 +02:00
Ken	fbf016b3bd	✨ Forbedringer for Aksel.nav.no UI (#2043 )	2023-06-09 13:05:59 +02:00
Julian Nymark Ken Ken	09fa503b98	initial template for PR (#2019 ) * initial template for PR * update template * update template * 📝 Oppdatert template --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-06-09 09:55:28 +02:00
Ken	f5688485f5	⬆️ Oppdatert Sanity	2023-06-08 18:43:14 +02:00
github-actions[bot]andgithub-actions[bot]	6385c4686e	Version Packages (#2039 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-08 16:07:32 +02:00
Ken	30068dca3f	📝 La til jsdoc for skeleton-komponent	2023-06-08 16:03:27 +02:00
github-actions[bot]andgithub-actions[bot]	3aa04d2375	Version Packages (#2038 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-08 15:25:09 +02:00
Ken	91343563c9	🐛 Fikset markering av tekst internt i Skeleton-komponent	2023-06-08 15:21:52 +02:00
Ken	d5c8112339	📝 Fikset typo i skeleton-docs	2023-06-08 15:02:24 +02:00
github-actions[bot]andgithub-actions[bot]	e6cc9d1b4f	Version Packages (#2031 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-08 14:49:16 +02:00
Ken	db8c38a094	[Ny komponent] Skeleton (#1821 )	2023-06-08 14:44:08 +02:00
Ken	35041e64eb	Update README.md	2023-06-08 08:17:20 +02:00
Ken	690422d824	🐛 Fikset darkmode for skjemakomponenter	2023-06-07 20:10:28 +02:00
Ken	b54bebd308	⚡ Forbedret søk	2023-06-07 16:11:40 +02:00
Ken	8db194170c	🐛 Fikset chips.css bug etter merge	2023-06-07 15:45:00 +02:00
Ken	7b42f536aa	🎨 Oppdatert Chips-komponent (#2035 )	2023-06-07 15:39:11 +02:00
Ken	b2f796d681	💄 Text-subtle, icon-subtle til 700 nivå, form-description farger(#2036 )	2023-06-07 15:22:02 +02:00
Julian Nymark Ken Ken	17d92c9ed5	add jsdoc (it's mostly copilot + some tweaks) (#2034 ) * 📝 add jsdoc (it's mostly copilot + some tweaks) * 😂 emojis * 🏷️ add jsdoc for overridableComponents * 🏷️ Oppdatert docgen for nestede komponenter * 🎨 Oppdatert chat * 🏷️ Dokumentert date-hooks * 🏷️ Expansioncard-props * 🏷️ Stepper.step jsdoc * 🏷️ Tabs jsdoc * 🏷️ Linkpaneltypes * 🏷️ List jsdoc * 🏷️ list jsdoc * 🏷️ InternalHeader-docs * 🏷️ jsdoc for dropdown * 🏷️ Timeline jsdoc --------- Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com>	2023-06-07 14:19:34 +02:00
Ken	7bae5dce88	🎨 Fikset søketreff for CSS + overflow av ikonsøk-form	2023-06-06 15:43:38 +02:00
Ken	6aca0a4b6a	🎨 Data-tokens (#2032 )	2023-06-06 13:49:31 +02:00
Ken	4f7fde22a3	🐛 Regex-fix for sanity-url er	2023-06-06 13:45:34 +02:00
Ken	0dad69a8df	💄 Fadein frontpage-cards	2023-06-05 22:34:37 +02:00
Julian Nymark	c028f36e2b	Indent prop added to accordion (#2027 )	2023-06-05 19:38:44 +02:00
Ken	988fb36619	📝 Nettside-readme	2023-06-05 17:25:09 +02:00
Ken	f61cd88627	📝 Oppdatert readme	2023-06-05 17:10:26 +02:00
github-actions[bot]andgithub-actions[bot]	7d62019a13	Version Packages (#2028 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-06-05 16:05:27 +02:00
Ken	83e3a1131a	⚰️ Fjernet kode for gamle pakker (#2029 )	2023-06-05 15:58:53 +02:00
Ken	895bdc08e5	v4: Internal til Core, Datepicker ut av beta (#2026 )	2023-06-05 15:05:31 +02:00
Ken	3c991e13d1	🐛 Fikset duplisert-id for komponent-eksempler	2023-06-05 14:50:42 +02:00
MaxandMaximilian Lloyd	0c24d57c6c	📝 Noen JSDoc eksempler (#2025 ) Co-authored-by: Maximilian Lloyd <maximilian.oysta.lloyd@nav.no>	2023-06-05 09:14:48 +02:00
Ken	0f0041b71e	🎨 Forbedret ikonside og eksempel-navigering 🎨 Fungerende anchor-tag navigering for eksempler 🚚 Flyttet sections-kode i sidebar ut i egen hook 💄 Oppdatert tag	2023-06-05 08:52:21 +02:00
Ken	da40cc405c	⬆️ Oppdatert sanity (#2021 )	2023-06-02 20:31:14 +02:00
Ken	c135cbe642	⬆️ Oppdatert playwright-image til 1.33.0 versjon	2023-06-01 08:25:22 +02:00
Ken	2a2e9edbd7	⬇️ Negradert playwright for å matche docker img-tag	2023-05-31 23:39:39 +02:00
Ken	d22d6049e8	⬆️ Oppdatert playwright-image til nyeste versjon	2023-05-31 23:26:17 +02:00
Ken	f9bea26a29	🔥 Fjernet lenke til identitet da siden ikke lengre finnes	2023-05-31 23:17:17 +02:00
				`@@ -0,0 +1 @@`
				`import { Header as InternalHeader } from "@navikt/ds-react-internal";`
				`@@ -0,0 +1 @@`
				`import { InternalHeader } from "@navikt/ds-react";`
				`@@ -0,0 +1 @@`
				`import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";`
				`@@ -0,0 +1 @@`
				`import { InternalHeader as Header, Dropdown, Timeline } from "@navikt/ds-react";`