Version Packages (#2202)

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

@@ -1,6 +1,9 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "navikt/aksel" }],
+  "changelog": [
+    "@svitejs/changesets-changelog-github-compact",
+    { "repo": "navikt/aksel" }
+  ],
   "commit": false,
   "fixed": [
     [
@@ -8,12 +11,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 +20,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,44 @@
+### Description
+
+<!-- PR description/motivation
+add links to project-tasks, slack discussions etc here
+-->
+
+### Change summary
+
+<!-- Short summary of changes in PR
+- added variant x
+- fixed bug in y
+-->
+
+### PR Checklist 📝 (Remove fields after check!)
+
+#### New component? ✨
+
+- Check that component-styling is correctly configured in `@navikt/core/css/config/_mappings.js`. This is needed for correct build and CDN upload.
+- Check that styling is correctly exported from `@navikt/core/css/index.css`
+- Check that correct tokens for component is documented in `@navikt/core/css/tokens.json`
+- Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
+- Add JSDoc to component (see other components for reference)
+- Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
+- Is the component sufficiently complex to warrant tests? Add some unit-tests for jest.
+
+#### Component-updates 🎉
+
+- Revalidate if everything under `New component` is still accounted for
+- Deprecating/removing a CSS class? Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description. This helps stylelint-users keep their code clean and bug-free.
+
+#### Documentation 📝
+
+- Add/update component-demos for component `aksel.nav.no/website/pages/eksempler`
+- Create/Update documentation in sanity if needed
+  Note: Props, tokens and examples only updates to sanity on merge to main
+
+#### Versioning 🏷️
+
+- Run `yarn changeset` to generate a version-entry for change.
+- - Bug/hotfix: Patch
+- - New feature: Minor
+- - Breaking change: Major
+- Adding breaking changes? Consider adding a codemod for easier migration.
+- Breaking changes also needs documentation under "Migration"-page on website

.github/workflows/chromatic.yml

@@ -75,7 +75,7 @@ jobs:
         with:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: "github-actions[bot]"
-          body-includes: github-comment-finder
+          body-includes: Storybook demo
 
       - name: Create or update comment
         if: steps.chromatic_tests.outcome == 'success' && !contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'
@@ -84,7 +84,7 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
 
             [${{ steps.vars.outputs.sha_short }}](https://github.com/navikt/aksel/commit/${{ steps.vars.outputs.sha_short }}) | ${{steps.chromatic_tests.outputs.componentCount}} komponenter | ${{steps.chromatic_tests.outputs.specCount}} stories
           edit-mode: replace
@@ -96,7 +96,7 @@ jobs:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            ### [<img id="github-comment-finder" src="https://raw.githubusercontent.com/storybookjs/brand/main/logo/logo-storybook-inverse.svg" height="32"/>](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
 
             ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}
 

.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.35.1-jammy
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.github/workflows/release.yml

@@ -28,6 +28,10 @@ jobs:
           node-version: 16.13.0
           cache: yarn
 
+      - uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
       - name: Restore cache
         uses: actions/cache@v3
         with:

.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.35.1-jammy
     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

.gitignore

@@ -150,4 +150,5 @@ playwright-report/
 /test-results/
 backup-*.tar.gz
 sitemap-urls.json
-*.tar.gz
+*.tar.gz
+searchindex.json

.storybook/indexer.ts

@@ -10,6 +10,11 @@ module.exports = (indexers) => {
   const exampleIndexer = async (fileName: string, opts) => {
     let code = readFileSync(fileName, "utf-8").toString();
 
+    code = code
+      .split("\n")
+      .filter((line) => !line.includes("withDsExample"))
+      .join("\n");
+
     code = code.replace("export const args =", "const args =");
 
     code += `\nexport default { title: "Eksempler/${fileName

.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/main.cjs

@@ -1,5 +1,4 @@
 const storyIndexers = require("./indexer");
-
 const path = require("path");
 const { mergeConfig } = require("vite");
 
@@ -59,15 +58,11 @@ module.exports = {
   },
   async viteFinal(config) {
     return mergeConfig(config, {
-      define: { "process.env": {} },
+      define: {
+        "process.env": {},
+      },
       resolve: {
         alias: [
-          /*
-          // Example
-          {
-            find: "@components",
-            replacement: path.resolve(__dirname, "./src/components"),
-          }, */
           {
             find: "components",
             replacement: path.resolve(

.storybook/preview.jsx

@@ -1,12 +1,10 @@
-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 = {
   options: {
     storySort: {
-      method: "",
+      method: "alphabetical",
       order: ["Intro", "ds-react", ["form"], ["Default"], "ds-icons"],
       locales: "",
     },

@navikt/aksel-icons/CHANGELOG.md

@@ -1,204 +1,135 @@
 # @navikt/aksel-icons
 
-## 3.4.1
+## 5.0.3
 
-## 3.4.0
+## 5.0.2
 
-## 3.3.1
+## 5.0.1
 
-## 3.3.0
+## 5.0.0
 
-## 3.2.4
+## 4.12.1
+
+## 4.12.0
+
+## 4.11.2
+
+## 4.11.1
+
+## 4.11.0
+
+## 4.10.2
+
+## 4.10.1
+
+## 4.10.0
+
+## 4.9.1
+
+## 4.9.0
+
+## 4.8.0
+
+## 4.7.4
+
+## 4.7.3
+
+## 4.7.2
+
+## 4.7.1
+
+## 4.7.0
+
+## 4.6.1
+
+## 4.6.0
+
+## 4.5.0
+
+## 4.4.2
+
+## 4.4.1
+
+## 4.1.5
+
+### Patch Changes
+
+- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
 
 ## 3.2.3
 
 ### Patch Changes
 
-- [#1998](https://github.com/navikt/aksel/pull/1998) [`53c98181c`](https://github.com/navikt/aksel/commit/53c98181c327ead3406bec3487c10232af7d463a) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Nye ikoner!
-
-  - :sparkles: FileParagraph
-  - :sparkles: FilePlus
-
-## 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
+- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
 
 ## 2.9.8
 
 ### Patch Changes
 
-- [#1959](https://github.com/navikt/aksel/pull/1959) [`8790c5997`](https://github.com/navikt/aksel/commit/8790c5997e0d647419bdb5080c86781d08c196b8) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Statusikoner er nå tydeligere og mer konsistente.
+- Oppdatert Statusikoner til å være tydeligere og mer konsistente. ([PR](https://github.com/navikt/aksel/pull/1959))
 
 ## 2.9.7
 
 ### Patch Changes
 
-- :bug: CheckmarkIcon
+- Fikset `CheckmarkIcon`-bug
 
 ## 2.9.6
 
 ### Patch Changes
 
-- [#1956](https://github.com/navikt/aksel/pull/1956) [`8c8559009`](https://github.com/navikt/aksel/commit/8c8559009982911bc4402913656ba4cc6a223dd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset CheckmarkCircleIcon
-
-## 2.9.5
-
-## 2.9.4
+- Fikset `CheckmarkCircleIcon`-bug ([PR](https://github.com/navikt/aksel/pull/1956))
 
 ## 2.9.3
 
 ### Patch Changes
 
-- [#1950](https://github.com/navikt/aksel/pull/1950) [`c03d53d5a`](https://github.com/navikt/aksel/commit/c03d53d5aa2dc7f06a223d48069fa21ee39bb396) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: BulletList
-  - :tada: NumberList
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
+- Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
 
 ## 2.8.15
 
 ### Patch Changes
 
-- [#1928](https://github.com/navikt/aksel/pull/1928) [`dfe923582`](https://github.com/navikt/aksel/commit/dfe923582a57b41c77cfb4fbfa7c56be047ef2b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Lagt til nye ikoner :tada:
-
-  - HandKnot.svg
-  - HandKnotFilled.svg
-
-- [#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
+- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
 
 ## 2.8.13
 
 ### Patch Changes
 
-- [#1921](https://github.com/navikt/aksel/pull/1921) [`ecd6241e5`](https://github.com/navikt/aksel/commit/ecd6241e5751519fbda800a5f41a613957dbf77c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner :tada:
-
-## 2.8.12
+- Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
 
 ## 2.8.11
 
 ### Patch Changes
 
-- [#1909](https://github.com/navikt/aksel/pull/1909) [`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
-
-## 2.8.10
-
-## 2.8.9
+- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
 
 ## 2.8.8
 
 ### Patch Changes
 
-- [`ed8e28454`](https://github.com/navikt/aksel/commit/ed8e284540a9e3a5be7d1d5e393f31db86962613) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Nye ikoner
-
-  - :tada: VideoSlash
-  - :tada: VideoSlashFill
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
+- Nye ikoner `VideoSlash` og `VideoSlashFill`
 
 ## 2.8.4
 
 ### Patch Changes
 
-- Fikset Sourcemap-bug i Aksel-icons
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
+- Fikset Sourcemap-bug
 
 ## 2.7.7
 
 ### Patch Changes
 
-- [`a22ac3eb7`](https://github.com/navikt/aksel/commit/a22ac3eb78135bf93d4771802475396849809c03) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :Sparkles: Nye ikoner
-
-  - :tada: CaretUpDownFilledDown
-  - :tada: CaretUpDownFilledUp
-  - :tada: CloudDown
-  - :tada: CloudDownFill
-  - :tada: CloudUp
-  - :tada: CloudUpFill
-  - :tada: HddDown
-  - :tada: HddDownFill
-  - :tada: HddUp
-  - :tada: HddUpFill
-  - :tada: Inbox
-  - :tada: InboxDown
-  - :tada: InboxDownFill
-  - :tada: InboxFill
-  - :tada: InboxUp
-  - :tada: InboxUpFill
-  - :tada: ShoppingBasket
-  - :tada: ShoppingBasketFill
-
-## 2.7.6
-
-## 2.7.5
+- Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
 
 ## 2.7.4
 
 ### Patch Changes
 
-- [#1852](https://github.com/navikt/aksel/pull/1852) [`a4fd1dd22`](https://github.com/navikt/aksel/commit/a4fd1dd227b9b56b747f962aa0c2b2dc9b4e30a4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikonpakke med nye ikoner :rocket:
-
-  - :tada: CaretDownFill
-  - :tada: CaretLeft
-  - :tada: CaretLeftFill
-  - :tada: CaretLeftRight
-  - :tada: CaretLeftRightFill
-  - :tada: CaretRight
-  - :tada: CaretRightFill
-  - :tada: CaretUpDownFill
-  - :tada: CaretUpFill
-  - :tada: Escalator
-  - :tada: Moon
-  - :tada: MoonFill
-  - :fire: EscalatorStroke
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-### Patch Changes
-
-- [`7d9517cf9`](https://github.com/navikt/aksel/commit/7d9517cf90331b57441a0787a04eef66efd1b9b0) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Public-access for ny ikonpakke i GPR
+- Nye ikoner, `CaretDownFill`, `CaretLeft`, `CaretLeftFill`, `CaretLeftRight`, `CaretLeftRightFill`, `CaretRight`, `CaretRightFill`, `CaretUpDownFill`, `CaretUpFill`, `Escalator`, `Moon`, `MoonFill`. Fjernet `EscalatorStroke` ([PR](https://github.com/navikt/aksel/pull/1852))
 
 ## 2.7.0
 
 ### Minor Changes
 
-- [#1847](https://github.com/navikt/aksel/pull/1847) [`de291a972`](https://github.com/navikt/aksel/commit/de291a9722c262d40fecaec7be55b71f86e60160) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ny ikonpakke med for core icons 3! `@navikt/aksel-icons`
+- Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))

@navikt/aksel-icons/figma-plugin/src/ui/app.css

@@ -58,7 +58,7 @@
 .icon-button {
   min-height: 3rem;
   min-width: 3rem;
-  border-radius: 2px;
+  border-radius: var(--a-border-radius-small);
   display: grid;
   place-content: center;
   background-color: var(--a-surface-default);

@navikt/aksel-icons/figma-plugin/src/ui/utils.ts

@@ -1,9 +1,9 @@
 import meta from "@navikt/aksel-icons/metadata";
 
 const subCategorizeIcons = (
-  icons: typeof meta[1][]
-): { sub_category: string; icons: typeof meta[1][] }[] => {
-  const categories: { sub_category: string; icons: typeof meta[1][] }[] = [];
+  icons: (typeof meta)[1][]
+): { sub_category: string; icons: (typeof meta)[1][] }[] => {
+  const categories: { sub_category: string; icons: (typeof meta)[1][] }[] = [];
 
   for (const icon of icons) {
     const i = categories.findIndex(
@@ -19,14 +19,14 @@ const subCategorizeIcons = (
 };
 
 export const categorizeIcons = (
-  icons: typeof meta[1][]
+  icons: (typeof meta)[1][]
 ): {
   category: string;
-  sub_categories: { sub_category: string; icons: typeof meta[1][] }[];
+  sub_categories: { sub_category: string; icons: (typeof meta)[1][] }[];
 }[] => {
   const categories: {
     category: string;
-    icons: typeof meta[1][];
+    icons: (typeof meta)[1][];
   }[] = [];
 
   for (const icon of icons) {
@@ -42,14 +42,14 @@ export const categorizeIcons = (
     .map((x) => ({ ...x, sub_categories: subCategorizeIcons(x.icons) }));
 };
 
-const noFill = (icon: typeof meta[1], icons: typeof meta[1][]) => {
+const noFill = (icon: (typeof meta)[1], icons: (typeof meta)[1][]) => {
   const foundFill = icons.find(
     (x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name
   );
   return !foundFill;
 };
 
-export const getFillIcon = (icons: typeof meta[1][]) => {
+export const getFillIcon = (icons: (typeof meta)[1][]) => {
   return icons.filter(
     (x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z)
   );

@navikt/aksel-icons/icons/Branching.yml

@@ -15,5 +15,5 @@ keywords:
   - Sammenføye
   - Kildekontroll
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ChevronLeftDouble.yml

@@ -5,5 +5,5 @@ keywords:
   - left
   - venstre
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 14.06.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ChevronLeftFirst.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 6.25C7.5 5.83579 7.16421 5.5 6.75 5.5C6.33579 5.5 6 5.83579 6 6.25V17.75C6 18.1642 6.33579 18.5 6.75 18.5C7.16421 18.5 7.5 18.1642 7.5 17.75V6.25ZM17.7803 7.03033C18.0732 6.73744 18.0732 6.26256 17.7803 5.96967C17.4874 5.67678 17.0126 5.67678 16.7197 5.96967L11.2197 11.4697C11.079 11.6103 11 11.8011 11 12C11 12.1989 11.079 12.3897 11.2197 12.5303L16.7197 18.0303C17.0126 18.3232 17.4874 18.3232 17.7803 18.0303C18.0732 17.7374 18.0732 17.2626 17.7803 16.9697L12.8107 12L17.7803 7.03033Z" fill="#262626"/>
+</svg>

@navikt/aksel-icons/icons/ChevronLeftFirst.yml

@@ -0,0 +1,12 @@
+name: ChevronLeftFirst
+category: Arrows
+sub_category: Chevron
+keywords:
+  - left
+  - venstre
+  - side
+  - first
+  - først
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023

@navikt/aksel-icons/icons/ChevronRightDouble.yml

@@ -6,5 +6,5 @@ keywords:
   - høyre
   - side
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 09.06.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/ChevronRightLast.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 6.25C18 5.83579 17.6642 5.5 17.25 5.5C16.8358 5.5 16.5 5.83579 16.5 6.25V17.75C16.5 18.1642 16.8358 18.5 17.25 18.5C17.6642 18.5 18 18.1642 18 17.75V6.25ZM7.28033 6.21967C6.98744 5.92678 6.51256 5.92678 6.21967 6.21967C5.92678 6.51256 5.92678 6.98744 6.21967 7.28033L11.1893 12.25L6.21967 17.2197C5.92678 17.5126 5.92678 17.9874 6.21967 18.2803C6.51256 18.5732 6.98744 18.5732 7.28033 18.2803L12.7803 12.7803C13.0732 12.4874 13.0732 12.0126 12.7803 11.7197L7.28033 6.21967Z" fill="#262626"/>
+</svg>

@navikt/aksel-icons/icons/ChevronRightLast.yml

@@ -0,0 +1,10 @@
+name: ChevronRightLast
+category: Arrows
+sub_category: Chevron
+keywords:
+  - right
+  - høyre
+  - side
+variant: Stroke
+updated_at: 15.06.2023
+created_at: 15.06.2023

@navikt/aksel-icons/icons/Code.yml

@@ -15,5 +15,5 @@ keywords:
   - markup-språk
   - kildekode
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/DragHorizontal.yml

@@ -13,5 +13,5 @@ keywords:
   - dra og slippe
   - skifte
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 26.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/LineGraphDot.yml

@@ -23,5 +23,5 @@ keywords:
   - milepæler
   - hendelser
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Minus.yml

@@ -7,5 +7,5 @@ keywords:
   - delete
   - slett
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 24.05.2023
 created_at: 07.03.2023

@navikt/aksel-icons/icons/Upload.yml

@@ -6,5 +6,5 @@ keywords:
   - uploading
   - send
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 08.06.2023
 created_at: 07.03.2023

@navikt/aksel-icons/package.json

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

@navikt/aksel-stylelint/CHANGELOG.md

@@ -1,13 +1,75 @@
 # @navikt/aksel-stylelint
 
+## 5.0.3
+
+## 5.0.2
+
+## 5.0.1
+
+## 5.0.0
+
+## 4.12.1
+
+## 4.12.0
+
+## 4.11.2
+
+## 4.11.1
+
+## 4.11.0
+
+## 4.10.2
+
+## 4.10.1
+
+## 4.10.0
+
+## 4.9.1
+
+## 4.9.0
+
+## 4.8.0
+
+## 4.7.4
+
+## 4.7.3
+
+## 4.7.2
+
+## 4.7.1
+
+## 4.7.0
+
+## 4.6.1
+
+## 4.6.0
+
+## 4.5.0
+
+## 4.4.2
+
+## 4.4.1
+
+## 4.1.0
+
+### Minor Changes
+
+- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
+
+## 3.4.2
+
+### Patch Changes
+
+- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))
+
 ## 3.4.1
 
 ### Patch Changes
 
-- :bug: Stylelint hotfix, inkluderer nå dist-mappe (kanskje..)
+- Inkluderer nå dist-mappe i release
 
 ## 3.4.0
 
 ### Minor Changes
 
-- [#1973](https://github.com/navikt/aksel/pull/1973) [`61c411421`](https://github.com/navikt/aksel/commit/61c4114214841ec42f48e1abd0d72d2a42d265ab) Thanks [@JulianNymark](https://github.com/JulianNymark)! - add stylelint plugin
+- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))

@navikt/aksel-stylelint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-stylelint",
-  "version": "3.4.1",
+  "version": "5.0.3",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
   "repository": {
@@ -27,22 +27,23 @@
   ],
   "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.1",
-    "@navikt/ds-tokens": "^3.4.1",
+    "@navikt/ds-css": "^5.0.3",
+    "@navikt/ds-tokens": "^5.0.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,41 @@
-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",
+  },
+  {
+    classes: ["navds-modal__overlay"],
+    message:
+      "Removed in v5.0.0, use `.navds-modal::backdrop` and `.navds-modal--polyfilled + .backdrop` instead",
+  },
+  {
+    classes: ["navds-modal__button--shake"],
+    message: "Removed in v5.0.0",
+  },
+  {
+    classes: ["navds-modal__content"],
+    message: "Renamed to `.navds-modal__body` in v5.0.0",
+  },
 ];

@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,173 +1,190 @@
 # @navikt/aksel
 
-## 3.4.1
+## 5.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`8d934e093`](https://github.com/navikt/aksel/commit/8d934e0931caaa6f774a8f1b20fa34a19ece7218), [`8d934e093`](https://github.com/navikt/aksel/commit/8d934e0931caaa6f774a8f1b20fa34a19ece7218)]:
+  - @navikt/ds-css@5.0.3
+
+## 5.0.2
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @navikt/ds-css@3.4.1
+  - @navikt/ds-css@5.0.2
 
-## 3.4.0
+## 5.0.1
 
 ### Patch Changes
 
-- Updated dependencies [[`b958d41a2`](https://github.com/navikt/aksel/commit/b958d41a20c66327658514fcf24ae20893c9531a)]:
-  - @navikt/ds-css@3.4.0
+- Updated dependencies [[`90db7dd0c`](https://github.com/navikt/aksel/commit/90db7dd0c120c16a387d3169c05c1f33dc694323)]:
+  - @navikt/ds-css@5.0.1
 
-## 3.3.1
+## 5.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`2993f809a`](https://github.com/navikt/aksel/commit/2993f809adbf26fe88237066fea7f3e1a21b6690), [`2993f809a`](https://github.com/navikt/aksel/commit/2993f809adbf26fe88237066fea7f3e1a21b6690), [`3438b5d7e`](https://github.com/navikt/aksel/commit/3438b5d7e75037889946d4f89e95cd1f91bbb2d0)]:
+  - @navikt/ds-css@5.0.0
+
+## 4.12.1
+
+### Patch Changes
+
+- Updated dependencies [[`5cda39ce1`](https://github.com/navikt/aksel/commit/5cda39ce19fa3f25ae18a0b07dd85e97378edd26)]:
+  - @navikt/ds-css@4.12.1
+
+## 4.12.0
+
+### Patch Changes
+
+- Updated dependencies [[`1c482e03b`](https://github.com/navikt/aksel/commit/1c482e03b845c4e6f6f1e174a58992fbeeabb52e), [`107d6f3d9`](https://github.com/navikt/aksel/commit/107d6f3d935cbc9bb94bc15cea63431cd15bbd61), [`09d41e9b6`](https://github.com/navikt/aksel/commit/09d41e9b6da5486a55faaf8088191b4a8374e420), [`a402777c7`](https://github.com/navikt/aksel/commit/a402777c70a18899ef4239b10a6335a671e26167)]:
+  - @navikt/ds-css@4.12.0
+
+## 4.11.2
+
+### Patch Changes
+
+- Updated dependencies [[`72321e384`](https://github.com/navikt/aksel/commit/72321e3846f785318ebdba9f8e06cf13b09cd524)]:
+  - @navikt/ds-css@4.11.2
+
+## 4.11.1
+
+### Patch Changes
+
+- Updated dependencies [[`e68ab5cb2`](https://github.com/navikt/aksel/commit/e68ab5cb2cd91c2f0234c864ee71821ed07a8203)]:
+  - @navikt/ds-css@4.11.1
+
+## 4.11.0
+
+### Patch Changes
+
+- Updated dependencies [[`64901adcc`](https://github.com/navikt/aksel/commit/64901adccb8f19fbe06cdab4a70d47978e90e343), [`0de8238ec`](https://github.com/navikt/aksel/commit/0de8238ecf22e9f1fbc0e1b0cfe7a5cd7254901e), [`647b14a23`](https://github.com/navikt/aksel/commit/647b14a23888f82bacc4806d3afaacb5e39178fa)]:
+  - @navikt/ds-css@4.11.0
+
+## 4.10.2
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @navikt/ds-css@3.3.1
+  - @navikt/ds-css@4.10.2
 
-## 3.3.0
+## 4.10.1
+
+### Patch Changes
+
+- Updated dependencies [[`d3bd1202e`](https://github.com/navikt/aksel/commit/d3bd1202eddb23dd3f1f09c3e4086ff3b19737d6)]:
+  - @navikt/ds-css@4.10.1
+
+## 4.10.0
+
+### Patch Changes
+
+- Updated dependencies [[`267799ca0`](https://github.com/navikt/aksel/commit/267799ca0ecc0c549e159f94124befb654e29331)]:
+  - @navikt/ds-css@4.10.0
+
+## 4.9.1
+
+### Patch Changes
+
+- Updated dependencies [[`eff8a902c`](https://github.com/navikt/aksel/commit/eff8a902c50fd5ebc56616e866aa0a61b9eb5efc)]:
+  - @navikt/ds-css@4.9.1
+
+## 4.9.0
+
+### Patch Changes
+
+- Updated dependencies [[`e033b34c3`](https://github.com/navikt/aksel/commit/e033b34c3b85fb98dd11dd0300bb20075e1b06e8)]:
+  - @navikt/ds-css@4.9.0
+
+## 4.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`8a82e1c1f`](https://github.com/navikt/aksel/commit/8a82e1c1f66ea38fca77b25d74b14926bd817dd9)]:
+  - @navikt/ds-css@4.8.0
+
+## 4.7.4
+
+### Patch Changes
+
+- Updated dependencies [[`492cfc180`](https://github.com/navikt/aksel/commit/492cfc1801df4ab16306185345d5089e24a0d659)]:
+  - @navikt/ds-css@4.7.4
+
+## 4.7.3
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @navikt/ds-css@3.3.0
+  - @navikt/ds-css@4.7.3
 
-## 3.2.4
+## 4.7.2
 
 ### Patch Changes
 
-- Updated dependencies [[`30eee0dac`](https://github.com/navikt/aksel/commit/30eee0dac4e3e5a1379033283a6885e646e80458)]:
-  - @navikt/ds-css@3.2.4
+- Updated dependencies [[`e6fdfdc9b`](https://github.com/navikt/aksel/commit/e6fdfdc9b44156b6eb8ebc0eda3a9259dce800ff)]:
+  - @navikt/ds-css@4.7.2
 
-## 3.2.3
-
-### Patch Changes
-
-- Updated dependencies [[`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969), [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221)]:
-  - @navikt/ds-css@3.2.3
-
-## 3.2.2
+## 4.7.1
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @navikt/ds-css@3.2.2
+  - @navikt/ds-css@4.7.1
 
-## 3.2.1
+## 4.7.0
+
+### Patch Changes
+
+- Updated dependencies [[`e3027cc19`](https://github.com/navikt/aksel/commit/e3027cc1966623433cfc2d28915273486c7bf611)]:
+  - @navikt/ds-css@4.7.0
+
+## 4.6.1
+
+### Patch Changes
+
+- Updated dependencies [[`28430f134`](https://github.com/navikt/aksel/commit/28430f13455a8ecc10447e5e1ad75625d29c4bcb)]:
+  - @navikt/ds-css@4.6.1
+
+## 4.6.0
+
+### Patch Changes
+
+- Updated dependencies [[`ae70bfa71`](https://github.com/navikt/aksel/commit/ae70bfa7192db46d8dea0dfb0222a857efc46be5)]:
+  - @navikt/ds-css@4.6.0
+
+## 4.5.0
+
+### Patch Changes
+
+- Updated dependencies [[`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5), [`b05958863`](https://github.com/navikt/aksel/commit/b05958863b1adadb1b6a3fcceb4477e7411b66b5)]:
+  - @navikt/ds-css@4.5.0
+
+## 4.4.2
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - @navikt/ds-css@3.2.1
+  - @navikt/ds-css@4.4.2
 
-## 3.2.0
+## 4.4.1
 
 ### Patch Changes
 
-- Updated dependencies [[`affcab14c`](https://github.com/navikt/aksel/commit/affcab14c3d536929dfa64a36f5b43f9d0e8c3b7)]:
-  - @navikt/ds-css@3.2.0
+- Updated dependencies [[`415632675`](https://github.com/navikt/aksel/commit/4156326752eaf7a97855b33653850362dada8788)]:
+  - @navikt/ds-css@4.4.1
 
-## 3.1.3
+## 4.0.0
 
-### Patch Changes
+### Major Changes
 
-- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
-  - @navikt/ds-css@3.1.3
+- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
 
-## 3.1.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.1.2
-
-## 3.1.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.1.1
-
-## 3.1.0
-
-### Patch Changes
-
-- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
-  - @navikt/ds-css@3.1.0
-
-## 3.0.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@3.0.1
-
-## 3.0.0
-
-### Patch Changes
-
-- Updated dependencies [[`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f), [`166ee5feb`](https://github.com/navikt/aksel/commit/166ee5feb3c987c4e633eb449812116bfd865d3f)]:
-  - @navikt/ds-css@3.0.0
-
-## 2.9.8
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.8
-
-## 2.9.7
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.7
-
-## 2.9.6
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.6
-
-## 2.9.5
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.5
+- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
 
 ## 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.
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.4
-
-## 2.9.3
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.3
-
-## 2.9.2
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.2
-
-## 2.9.1
-
-### Patch Changes
-
-- Updated dependencies []:
-  - @navikt/ds-css@2.9.1
-
-## 2.9.0
-
-### Patch Changes
-
-- Updated dependencies [[`657b7f3f3`](https://github.com/navikt/aksel/commit/657b7f3f3e62c5ce3173e6c95a29fcd237ce7343)]:
-  - @navikt/ds-css@2.9.0
+- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))

@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.1",
+  "version": "5.0.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.1",
+    "@navikt/ds-css": "5.0.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,237 +0,0 @@
-# @navikt/ds-codemod
-
-## 3.4.1
-
-## 3.4.0
-
-## 3.3.1
-
-## 3.3.0
-
-## 3.2.4
-
-## 3.2.3
-
-## 3.2.2
-
-## 3.2.1
-
-## 3.2.0
-
-## 3.1.3
-
-## 3.1.2
-
-## 3.1.1
-
-## 3.1.0
-
-## 3.0.1
-
-## 3.0.0
-
-## 2.9.8
-
-## 2.9.7
-
-## 2.9.6
-
-## 2.9.5
-
-## 2.9.4
-
-### Patch Changes
-
-- [#1952](https://github.com/navikt/aksel/pull/1952) [`27b2b4a11`](https://github.com/navikt/aksel/commit/27b2b4a11caf5ca05c96c686c453653d8a900e5f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :truck: Flyttet Codemods from `@navikt/ds-codemods` -> `@navikt/aksel`.
-
-  - `@navikt/ds-codemods` vil bli deprecated ettehvert.
-
-## 2.9.3
-
-## 2.9.2
-
-## 2.9.1
-
-## 2.9.0
-
-## 2.8.16
-
-## 2.8.15
-
-### Patch Changes
-
-- [#1930](https://github.com/navikt/aksel/pull/1930) [`6682be1c8`](https://github.com/navikt/aksel/commit/6682be1c8e6562213c64e5be4bed70fef54ab865) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Alle pakker implementerer nå npm provenance (beta)
-
-## 2.8.14
-
-## 2.8.13
-
-## 2.8.12
-
-## 2.8.11
-
-## 2.8.10
-
-## 2.8.9
-
-## 2.8.8
-
-## 2.8.7
-
-## 2.8.6
-
-## 2.8.5
-
-## 2.8.4
-
-## 2.8.3
-
-## 2.8.2
-
-## 2.8.1
-
-## 2.8.0
-
-## 2.7.8
-
-## 2.7.7
-
-## 2.7.6
-
-## 2.7.5
-
-## 2.7.4
-
-## 2.7.3
-
-## 2.7.2
-
-## 2.7.1
-
-## 2.7.0
-
-## 2.6.2
-
-## 2.6.1
-
-## 2.6.0
-
-## 2.5.1
-
-## 2.5.0
-
-## 2.4.3
-
-## 2.4.2
-
-### Patch Changes
-
-- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
-
-## 2.4.1
-
-## 2.4.0
-
-## 2.3.1
-
-## 2.3.0
-
-## 2.2.0
-
-## 2.1.7
-
-## 2.1.6
-
-## 2.1.5
-
-## 2.1.4
-
-## 2.1.3
-
-## 2.1.2
-
-## 2.1.1
-
-## 2.1.0
-
-## 2.0.18
-
-## 2.0.17
-
-## 2.0.16
-
-## 2.0.15
-
-## 2.0.14
-
-## 2.0.13
-
-## 2.0.12
-
-## 2.0.11
-
-## 2.0.10
-
-## 2.0.9
-
-## 2.0.8
-
-## 2.0.7
-
-## 2.0.6
-
-## 2.0.5
-
-## 2.0.4
-
-## 2.0.3
-
-## 2.0.2
-
-## 2.0.1
-
-## 2.0.0
-
-### Major Changes
-
-- [`6b96e4833`](https://github.com/navikt/aksel/commit/6b96e48330c2e013a1acee85cefccd9ccc1aece4) Thanks [@KenAJoh](https://github.com/KenAJoh)! - v2: Tokens update and font-loading
-
-## 1.5.10
-
-## 1.5.9
-
-## 1.5.8
-
-## 1.5.7
-
-## 1.5.6
-
-## 1.5.5
-
-## 1.5.4
-
-## 1.5.3
-
-## 1.5.2
-
-## 1.5.1
-
-## 1.5.0
-
-## 1.4.4
-
-## 1.4.3
-
-## 1.4.2
-
-## 1.4.1
-
-## 1.4.0
-
-## 1.3.39
-
-### Patch Changes
-
-- [`40f0b3340`](https://github.com/navikt/aksel/commit/40f0b3340d01bf85fecc04f2f3a8e8b2acf996f1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Bump for latest-tag
-
-## 1.3.38

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