Version Packages (#2044)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/README.md

@@ -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"
 ```

.changeset/config.json

@@ -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"

.github/PULL_REQUEST_TEMPLATE.md

@@ -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

.github/workflows/e2e.yml

@@ -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

.github/workflows/smoketest.yml

@@ -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:

.github/workflows/update-icons.yml

@@ -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"

.github/workflows/update-tokens.yml

@@ -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

.storybook/intro.stories.mdx

@@ -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";

.storybook/preview.jsx

@@ -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 = {

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @navikt/aksel-icons
 
+## 4.1.3
+
+## 4.1.2
+
+## 4.1.1
+
+## 4.1.0
+
+## 4.0.0
+
+## 3.4.2
+
+## 3.4.1
+
 ## 3.4.0
 
 ## 3.3.1

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "3.4.0",
+  "version": "4.1.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @navikt/aksel-stylelint
 
+## 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
+
+- [#2017](https://github.com/navikt/aksel/pull/2017) [`7615dbbb5`](https://github.com/navikt/aksel/commit/7615dbbb54c7c96e2252366188547b27b2ac1142) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add missing dependency
+
+## 3.4.1
+
+### Patch Changes
+
+- :bug: Stylelint hotfix, inkluderer nå dist-mappe (kanskje..)
+
 ## 3.4.0
 
 ### Minor Changes

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "3.4.0",
+  "version": "4.1.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -23,26 +23,27 @@
     "./recommended": "./dist/recommended.js"
   },
   "files": [
-    "./dist"
+    "/dist"
   ],
   "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.0",
-    "@navikt/ds-tokens": "^3.4.0",
+    "@navikt/ds-css": "^4.1.3",
+    "@navikt/ds-tokens": "^4.1.3",
     "@types/jest": "^29.0.0",
     "concurrently": "7.2.1",
     "copyfiles": "2.4.1",
     "jest": "^29.0.0",
     "jest-preset-stylelint": "^6.1.0",
+    "postcss-selector-parser": "^6.0.13",
+    "postcss-value-parser": "^4.2.0",
     "stylelint": "^14.8.5",
     "typescript": "^4.8.0"
   },

@navikt/aksel-stylelint/src/deprecations.ts

@@ -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",
+  },
 ];

@navikt/aksel-stylelint/src/rules/aksel-design-token-exists/index.test.ts

@@ -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",
     },
     {

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.test.ts

@@ -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,
+    },
   ],
 });

@navikt/aksel-stylelint/src/rules/aksel-no-deprecated-classes/index.ts

@@ -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({

@navikt/aksel-stylelint/src/utils.ts

@@ -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);

@navikt/aksel/CHANGELOG.md

@@ -1,5 +1,82 @@
 # @navikt/aksel
 
+## 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
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.4.2
+
+## 3.4.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@3.4.1
+
 ## 3.4.0
 
 ### Patch Changes

@navikt/aksel/README.md

@@ -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.

@navikt/aksel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel",
-  "version": "3.4.0",
+  "version": "4.1.3",
   "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.0",
+    "@navikt/ds-css": "4.1.3",
     "axios": "1.3.6",
     "chalk": "4.1.0",
     "clipboardy": "^2.3.0",

@navikt/aksel/src/codemod/migrations.ts

@@ -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) {

@navikt/aksel/src/codemod/transforms/v3.0.0/copybutton/copybutton.ts

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

@navikt/aksel/src/codemod/transforms/v4.0.0/date/date.ts

@@ -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;
+}

@navikt/aksel/src/codemod/transforms/v4.0.0/date/tests/complete.input.js

@@ -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>
+  );
+};

@navikt/aksel/src/codemod/transforms/v4.0.0/date/tests/complete.output.js

@@ -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>
+  );
+};

@navikt/aksel/src/codemod/transforms/v4.0.0/date/tests/date.test.ts

@@ -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",
   });
 }

@navikt/aksel/src/codemod/transforms/v4.0.0/date/tests/idempotent.input.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>
+  );
+};

@navikt/aksel/src/codemod/transforms/v4.0.0/date/tests/idempotent.output.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>
+  );
+};

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/internal-css.ts

@@ -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;
+}

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/tests/complete.input.css

@@ -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;
+}

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/tests/complete.input.js

@@ -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>;

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/tests/complete.output.css

@@ -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;
+}

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/tests/complete.output.js

@@ -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>;

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-css/tests/internal-css.test.ts

@@ -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) {

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/internal-react.ts

@@ -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));
+}

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import-add.input.js

@@ -0,0 +1,2 @@
+import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";
+import { Button, CopyButton } from "@navikt/ds-react";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import-add.output.js

@@ -0,0 +1,7 @@
+import {
+  Button,
+  CopyButton,
+  InternalHeader as Header,
+  Dropdown,
+  Timeline,
+} from "@navikt/ds-react";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import-alias.input.js

@@ -0,0 +1,5 @@
+import {
+  Dropdown as DSDropdown,
+  Timeline as DSTimeline,
+  Header as TestHeader,
+} from "@navikt/ds-react-internal";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import-alias.output.js

@@ -0,0 +1,5 @@
+import {
+  InternalHeader as TestHeader,
+  Dropdown as DSDropdown,
+  Timeline as DSTimeline,
+} from "@navikt/ds-react";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import-edgecase.input.js

@@ -0,0 +1 @@
+import { Header as InternalHeader } from "@navikt/ds-react-internal";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import-edgecase.output.js

@@ -0,0 +1 @@
+import { InternalHeader } from "@navikt/ds-react";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import.input.js

@@ -0,0 +1 @@
+import { Dropdown, Timeline, Header } from "@navikt/ds-react-internal";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/import.output.js

@@ -0,0 +1 @@
+import { InternalHeader as Header, Dropdown, Timeline } from "@navikt/ds-react";

@navikt/aksel/src/codemod/transforms/v4.0.0/internal-react/tests/internal-react.test.ts

@@ -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",
-  });
 }

@navikt/aksel/src/codemod/utils/moveAndRenameImport.ts

@@ -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);

@navikt/codemod/.gitignore

@@ -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

@navikt/codemod/CHANGELOG.md

@@ -1,235 +0,0 @@
-# @navikt/ds-codemod
-
-## 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

@navikt/codemod/README.md

@@ -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

@navikt/codemod/bin/cli.ts

@@ -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);
-}

@navikt/codemod/bin/config.ts

@@ -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.";

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

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-const { run } = require("./cli");
-
-run();

@navikt/codemod/bin/migrate.ts

@@ -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);
-    }
-  }
-}

@navikt/codemod/clean.mjs

@@ -1,10 +0,0 @@
-import { deleteSync } from "del";
-
-deleteSync([
-  "utils/**/*.js",
-  "bin/**/*.js",
-  "transforms/**/*.js",
-  "!transforms/**/__testfixtures__",
-  "!transforms/**/tests/*.input.*",
-  "!transforms/**/tests/*.output.*",
-]);

@navikt/codemod/jest.config.js

@@ -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;

@navikt/codemod/package.json

@@ -1,65 +0,0 @@
-{
-  "name": "@navikt/ds-codemod",
-  "version": "3.4.0",
-  "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
-  }
-}

@navikt/codemod/tokens-map.mjs

@@ -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 };

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

@@ -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);
-}

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

@@ -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",
-    },
-  });
-}

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

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

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

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

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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>
-  );
-};

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

@@ -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}`);
-}

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

@@ -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}`);
-}

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

@@ -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}`);
-}

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

@@ -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);
-}

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

@@ -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);
-}

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

@@ -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;
-}

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

@@ -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);
-}

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.input.css

@@ -1,7 +0,0 @@
-.test {
-  color: var(--navds-global-color-blue-100);
-  color: var(--navds-global-color-red-100);
-
-  --navds-global-color-red-100: var(--navds-global-color-green-100);
-  --navds-global-color-blue-100: red;
-}

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.input.js

@@ -1,16 +0,0 @@
-const StyledDiv = styled`
---navds-global-color-red-100: var(--navds-global-color-green-100);
---navds-global-color-blue-100: red;
-
-.test{
-  color: var(--navds-global-color-blue-100);
-}
-`;
-
-<style>
-  {`
-  .test{
-    color: var(--navds-global-color-blue-100);
-  }
-  `}
-</style>;

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.output.css

@@ -1,7 +0,0 @@
-.test {
-  color: var(--a-blue-100);
-  color: var(--a-red-100);
-
-  --v2-migration__navds-global-color-red-100: var(--a-green-100);
-  --v2-migration__navds-global-color-blue-100: red;
-}

@navikt/codemod/transforms/v2.0.0/update-css-tokens/tests/complete.output.js

@@ -1,16 +0,0 @@
-const StyledDiv = styled`
---v2-migration__navds-global-color-red-100: var(--a-green-100);
---v2-migration__navds-global-color-blue-100: red;
-
-.test{
-  color: var(--a-blue-100);
-}
-`;
-
-<style>
-  {`
-  .test{
-    color: var(--a-blue-100);
-  }
-  `}
-</style>;

@navikt/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts

@@ -1,22 +0,0 @@
-import { tokens } from "../../../tokens-map.mjs";
-
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
-  let src = file.source;
-
-  tokens.forEach((tok) => {
-    // eslint-disable-next-line no-useless-concat
-    const rgx = new RegExp("(" + `${tok[0]}:` + ")", "gm");
-    src = src.replace(rgx, `--v2-migration${tok[0].replace("--", "__")}:`);
-  });
-
-  tokens.forEach((tok) => {
-    const rgx = new RegExp("(" + tok[0] + ")", "gm");
-    src = src.replace(rgx, tok[1]);
-  });
-
-  return src;
-}

@navikt/codemod/transforms/v2.0.0/update-js-tokens/tests/complete.input.js

@@ -1,88 +0,0 @@
-import styled from "styled-components";
-import {
-  NavdsGlobalColorBlue400 as abc132,
-  NavdsGlobalColorGray100,
-  NavdsGlobalColorGray400,
-  NavdsSemanticColorLink,
-} from "@navikt/ds-tokens/dist/tokens";
-import { BodyShort } from "@navikt/ds-react";
-
-const StyledNavLink = styled(NavLink)`
-  border-bottom: 5px solid white;
-  color: inherit;
-  text-align: center;
-  text-decoration: none;
-  width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 5px;
-  padding-right: 5px;
-  :hover {
-    border-bottom: 5px solid ${abc132};
-    p {
-      color: ${NavdsSemanticColorLink};
-    }
-  }
-  &.active {
-    background-color: ${NavdsGlobalColorGray100};
-    border-bottom: 5px solid ${NavdsSemanticColorLink};
-
-    .typo-normal {
-      font-weight: bold;
-    }
-  }
-`;
-
-const StyledLenketekst = styled(BodyShort)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`;
-
-const StyledTekst = styled(BodyShort)`
-  border-bottom: 5px solid white;
-  color: ${NavdsGlobalColorGray400};
-  text-align: center;
-  text-decoration: none;
-  width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 5px;
-  padding-right: 5px;
-`;
-
-const Fane = ({ side, behandlingId, index, deaktivert }) => {
-  const { gåTilUrl } = useApp();
-  const fanenavn = side.navn;
-  return (
-    <>
-      {deaktivert && (
-        <StyledTekst size={"small"}>
-          {index + 1}. {fanenavn}
-        </StyledTekst>
-      )}
-      {!deaktivert && (
-        <StyledNavLink
-          key={side.navn}
-          to={`/behandling/${behandlingId}/${side.href}`}
-          onClick={(e) => {
-            e.preventDefault();
-            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
-          }}
-        >
-          <StyledLenketekst size={"small"}>
-            {index + 1}. {fanenavn}
-          </StyledLenketekst>
-        </StyledNavLink>
-      )}
-    </>
-  );
-};
-
-export default Fane;

@navikt/codemod/transforms/v2.0.0/update-js-tokens/tests/complete.output.js

@@ -1,88 +0,0 @@
-import styled from "styled-components";
-import {
-  ABlue400,
-  AGray100,
-  AGray400,
-  ATextAction,
-} from "@navikt/ds-tokens/dist/tokens";
-import { BodyShort } from "@navikt/ds-react";
-
-const StyledNavLink = styled(NavLink)`
-  border-bottom: 5px solid white;
-  color: inherit;
-  text-align: center;
-  text-decoration: none;
-  width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 5px;
-  padding-right: 5px;
-  :hover {
-    border-bottom: 5px solid ${ABlue400};
-    p {
-      color: ${ATextAction};
-    }
-  }
-  &.active {
-    background-color: ${AGray100};
-    border-bottom: 5px solid ${ATextAction};
-
-    .typo-normal {
-      font-weight: bold;
-    }
-  }
-`;
-
-const StyledLenketekst = styled(BodyShort)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`;
-
-const StyledTekst = styled(BodyShort)`
-  border-bottom: 5px solid white;
-  color: ${AGray400};
-  text-align: center;
-  text-decoration: none;
-  width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 5px;
-  padding-right: 5px;
-`;
-
-const Fane = ({ side, behandlingId, index, deaktivert }) => {
-  const { gåTilUrl } = useApp();
-  const fanenavn = side.navn;
-  return (
-    <>
-      {deaktivert && (
-        <StyledTekst size={"small"}>
-          {index + 1}. {fanenavn}
-        </StyledTekst>
-      )}
-      {!deaktivert && (
-        <StyledNavLink
-          key={side.navn}
-          to={`/behandling/${behandlingId}/${side.href}`}
-          onClick={(e) => {
-            e.preventDefault();
-            gåTilUrl(`/behandling/${behandlingId}/${side.href}`);
-          }}
-        >
-          <StyledLenketekst size={"small"}>
-            {index + 1}. {fanenavn}
-          </StyledLenketekst>
-        </StyledNavLink>
-      )}
-    </>
-  );
-};
-
-export default Fane;

@navikt/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -1,67 +0,0 @@
-import type { JSCodeshift } from "jscodeshift";
-import {
-  getImportSpecifier,
-  getImportSpecifierName,
-  renameImportSpecifier,
-} from "../../../utils/imports";
-import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
-
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file: JSCodeshift, api) {
-  let src = file.source;
-
-  const j = api.jscodeshift as JSCodeshift;
-
-  let root = j(file.source);
-
-  const jsImport = root.find(j.ImportDeclaration).filter((x) => {
-    return ["@navikt/ds-tokens/dist/tokens"].includes(
-      x.node.source.value as string
-    );
-  });
-
-  if (!jsImport) {
-    return src;
-  }
-
-  tokens.forEach((x) => {
-    const name = translateToken(x[0], "js");
-    const out = translateToken(x[1], "js");
-
-    let foundName: string = "";
-
-    getImportSpecifier(j, root, name, "@navikt/ds-tokens/dist/tokens").forEach(
-      (x) => (foundName = x.node.imported.name)
-    );
-
-    if (name === foundName) {
-      const localName =
-        getImportSpecifierName(
-          j,
-          root,
-          name,
-          "@navikt/ds-tokens/dist/tokens"
-        ) || name;
-
-      renameImportSpecifier(
-        j,
-        root,
-        name,
-        out,
-        "@navikt/ds-tokens/dist/tokens"
-      );
-
-      let code = root.toSource();
-
-      const rgx = new RegExp("(" + localName + ")", "gm");
-      code = code.replace(rgx, out);
-      root = j(code);
-    }
-  });
-
-  return root.toSource();
-}

@navikt/codemod/transforms/v2.0.0/update-less-tokens/tests/complete.input.less

@@ -1,26 +0,0 @@
-.filtersMenu {
-  box-shadow: @navds-global-color-blue-200 inset 0 0 0 8px;
-  border-radius: 0.2em;
-  background-color: white;
-}
-
-.filterExplanationHighlight {
-  background-color: @navds-global-color-green-100;
-  border: 1px solid @navds-global-color-green-500;
-  transition: all 0.4s linear;
-}
-
-.lenkepanelNavno {
-  border: 1px solid @navds-semantic-color-link;
-
-  .navds-link-panel__content {
-    display: flex;
-  }
-
-  .navds-link-panel__title,
-  .navds-link-panel__chevron {
-    color: @navds-semantic-color-link;
-  }
-
-  background-color: @navds-global-color-gray-600;
-}

@navikt/codemod/transforms/v2.0.0/update-less-tokens/tests/complete.output.less

@@ -1,26 +0,0 @@
-.filtersMenu {
-  box-shadow: @a-blue-200 inset 0 0 0 8px;
-  border-radius: 0.2em;
-  background-color: white;
-}
-
-.filterExplanationHighlight {
-  background-color: @a-green-100;
-  border: 1px solid @a-green-500;
-  transition: all 0.4s linear;
-}
-
-.lenkepanelNavno {
-  border: 1px solid @a-text-action;
-
-  .navds-link-panel__content {
-    display: flex;
-  }
-
-  .navds-link-panel__title,
-  .navds-link-panel__chevron {
-    color: @a-text-action;
-  }
-
-  background-color: @a-gray-600;
-}

@navikt/codemod/transforms/v2.0.0/update-less-tokens/update-less-tokens.ts

@@ -1,19 +0,0 @@
-import { translateToken } from "../../../utils/translate-token";
-import { tokens } from "../../../tokens-map.mjs";
-
-/**
- * @param {import('jscodeshift').FileInfo} file
- * @param {import('jscodeshift').API} api
- */
-export default function transformer(file, api) {
-  let src = file.source;
-
-  tokens.forEach((tok) => {
-    const lessToken = translateToken(tok[0], "less");
-
-    const rgx = new RegExp("(\\" + lessToken + ")", "gm");
-    src = src.replace(rgx, translateToken(tok[1], "less"));
-  });
-
-  return src;
-}

@navikt/codemod/transforms/v2.0.0/update-sass-tokens/tests/complete.input.scss

@@ -1,30 +0,0 @@
-.filtersMenu {
-  box-shadow: common.$navds-global-color-blue-200 inset 0 0 0 8px;
-  border-radius: 0.2em;
-  background-color: white;
-}
-
-.filterExplanationHighlight {
-  background-color: common.$navds-global-color-green-100;
-  border: 1px solid common.$navds-global-color-green-500;
-  transition: all 0.4s linear;
-}
-
-.lenkepanelNavno {
-  &:global(.navds-link-panel) {
-    border: 1px solid common.$navds-semantic-color-link;
-  }
-
-  :global {
-    .navds-link-panel__content {
-      display: flex;
-    }
-
-    .navds-link-panel__title,
-    .navds-link-panel__chevron {
-      color: common.$navds-semantic-color-link;
-    }
-  }
-
-  background-color: common.$navds-global-color-gray-600;
-}