Version Packages (#3366 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
[Darkside] List CSS update (#3354 )
2026-10-13 09:12:03 +00:00 · 2024-11-20 09:51:46 +01:00 · 2024-11-19 16:30:28 +01:00 · 2024-11-19 15:26:03 +01:00 · 2024-11-19 15:14:44 +01:00 · 2024-11-19 15:08:06 +01:00
451 changed files with 20247 additions and 6287 deletions
@@ -1,4 +1,19 @@
-// TODO: Convert to new format: https://eslint.org/docs/latest/use/configure/migration-guide
+/**
+ * TODO:
+ * - Convert to new format (v9): https://eslint.org/docs/latest/use/configure/migration-guide
+ * - Look into opinionated stylistic plugin
+ * - Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
+ * - We should add "plugin:react/jsx-runtime", but not sure if this will cause problems for projects not using the new JSX transform
+ * - Consider adding the rule "id-length"
+ */
+
+/**
+ * V9 migration WIP
+ * - eslint-plugin-storybook does not support v9 yet: https://github.com/storybookjs/eslint-plugin-storybook/issues/157
+ * - eslint-plugin-testing-library does not support v9 yet: https://github.com/testing-library/eslint-plugin-testing-library/issues?q=is%3Aissue+is%3Aopen+v9
+ * - @vitest/eslint-plugin supports v9, just need to replace @vitest/legacy-recommended: https://github.com/vitest-dev/eslint-plugin-vitest?tab=readme-ov-file#usage
+ * - Looks like @typescript-eslint/eslint-plugin and @typescript-eslint/parser can both be replaced by just typescript-eslint in v9: https://typescript-eslint.io/getting-started#step-2-configuration
+ */
 module.exports = {
  env: {
    browser: true,
@@ -8,15 +23,13 @@ module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
-    //"plugin:react/jsx-runtime", // Not sure if this will cause problems for projects not using the new JSX transform
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:storybook/recommended",
-    // TODO: Look into opinionated stylistic plugin
-    // TODO: Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
  ],
+  /* Allows eslint-plugin-react to detect installed react-version */
  settings: { react: { version: "detect" } },
  rules: {
    "import/no-unresolved": "off",
@@ -26,12 +39,6 @@ module.exports = {
    ],
    "array-callback-return": "error",
    "object-shorthand": "error",
-    // TODO: Consider adding the rule "id-length"
-    // Temporary:
-    "react/prop-types": "off",
-    "react/display-name": "off",
-    "import/no-named-as-default": "off",
-    // "import/no-cycle": [1],
    "no-else-return": "error",
    "no-console": [
      "warn",
@@ -53,7 +60,12 @@ module.exports = {
        ],
      },
    ],
+    /* Temporarily turned off until code is updated */
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "import/no-named-as-default": "off",
  },
+  /* https://eslint.org/docs/latest/use/configure/rules#report-unused-eslint-disable-comments */
  reportUnusedDisableDirectives: true,
  overrides: [
    {
@@ -66,17 +78,27 @@ module.exports = {
      files: ["**/*.ts?(x)"],
      extends: ["plugin:@typescript-eslint/recommended"],
      rules: {
-        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }], // TODO: Consider { builtinGlobals: true }
+        /*
+         * TODO:
+         * - Consider { builtinGlobals: true }
+         */
+        "@typescript-eslint/no-shadow": ["error", { hoist: "all" }],
        "@typescript-eslint/no-explicit-any": "off", // Temporary
        "@typescript-eslint/array-type": "error",
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          /* https://eslint.org/docs/latest/rules/no-unused-expressions#allowshortcircuit-and-allowternary */
+          { allowShortCircuit: true, allowTernary: true },
+        ],
      },
    },
    {
      files: ["**/*.test.*", "**/__tests__/*"],
      plugins: ["@vitest"],
      extends: [
-        "plugin:@vitest/legacy-recommended",
        "plugin:testing-library/react",
+        /* Needed to support v8 eslint config-syntax */
+        "plugin:@vitest/legacy-recommended",
      ],
    },

@@ -6,7 +6,7 @@

 - [ ] JSDoc
 - [ ] Examples
- [ ] Documentation
+- [ ] Documentation / Decision Records
 - [ ] Storybook
 - [ ] Style mappings (`@navikt/core/css/config/_mappings.js`)
 - [ ] Component tokens (`@navikt/core/css/tokens.json`)
@@ -34,9 +34,6 @@ jobs:
      - name: Install dependencies
        run: yarn

-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -32,9 +32,6 @@ jobs:
          yarn boot
          yarn docgen

-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
      - name: Update sanity sync
        env:
          SANITY_WRITE: ${{ secrets.SANITY_WRITE }}
@@ -71,9 +68,6 @@ jobs:
      - name: Tests
        run: yarn workspace website test

-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -23,9 +23,6 @@ jobs:
      - name: Install dependencies
        run: cd aksel.nav.no/website && yarn

-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
      - name: Export dataset
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -56,20 +56,11 @@ jobs:
          buildScriptName: "build:storybook-chromatic"
          onlyChanged: true
          untraced: "**/package.json|yarn.lock|**/*.md"
-          externals: \@navikt/core/css/**/*.css
+          externals: "**/core/css/*.css|**/core/css/baseline/*.css|**/core/css/form/*.css|**/core/css/primitives/*.css"
          traceChanged: true
        env:
          STORYBOOK_GITHUB_SHA: ${{ github.sha }}

-      - name: replace storybook url
-        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
-        uses: frabert/replace-string-action@v2
-        id: storybook_url
-        with:
-          pattern: "(iframe.html)"
-          string: ${{ steps.chromatic_tests.outputs.storybookUrl }}
-          replace-with: ""
-
      - name: Get commit sha
        if: "!contains(github.event.head_commit.message, '[ci skip]') && github.event_name != 'push'"
        id: vars
@@ -93,7 +84,7 @@ jobs:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}})

            [${{ 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
@@ -105,9 +96,12 @@ jobs:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
-            ## [Storybook demo](${{steps.storybook_url.outputs.replaced}})
+            ## [Storybook demo](${{steps.chromatic_tests.outputs.storybookUrl}}) / [Chromatic](${{steps.chromatic_tests.outputs.url}})

-            ### [Endringer til review](${{steps.chromatic_tests.outputs.url}}): ${{steps.chromatic_tests.outputs.changeCount}}
+            ### 📝 Endringer til review: ${{steps.chromatic_tests.outputs.changeCount}}
+
+            ${{ steps.chromatic_tests.outputs.errorCount > 0 && format('### ❌ Stories med feil: {0}', steps.chromatic_tests.outputs.errorCount) || '' }}
+            ${{ steps.chromatic_tests.outputs.interactionTestFailuresCount > 0 && format('### ❌ Feilede interaksjonstester: {0}', steps.chromatic_tests.outputs.interactionTestFailuresCount) || '' }}

            [${{ 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
@@ -13,7 +13,7 @@ jobs:
  playwright:
    runs-on: ubuntu-latest
    container:
-      image: mcr.microsoft.com/playwright:v1.35.1-jammy
+      image: mcr.microsoft.com/playwright:v1.48.1-jammy
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
@@ -31,9 +31,6 @@ jobs:
        run: |
          yarn boot

-      - name: Create empty .env file (Can be removed when env-file-if-exists is implemented in node v22)
-        run: echo "" > ./aksel.nav.no/website/.env
-
      - name: Build application
        env:
          SANITY_READ: ${{ secrets.SANITY_READ }}
@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff $1 $2 --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi
@@ -0,0 +1,9 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+CHANGED=`git diff HEAD@{1} --stat -- yarn.lock | wc -l`
+if [ $CHANGED -gt 0 ];
+then
+    echo
+    echo "*** 🟡 yarn.lock has changed 🟡 ***"
+fi
@@ -136,34 +136,34 @@ import Setup from "./assets/setup.png";
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
-    grid-gap: var(--a-spacing-6);
+    grid-gap: 1.5rem;
  }

  .sb-link{
    text-decoration: underline;
-    color: var(--a-text-default);
+    color: #111;
  }

  img {
    object-fit: cover;
-    padding-bottom: var(--a-spacing-5);
+    padding-bottom: 1.25rem;
    border-radius: 8px;
  }

  .sb-section-title {
-    margin-bottom: var(--a-spacing-8);
+    margin-bottom: 2rem;
  }



  .sb-section-item-heading {
-    padding-bottom: var(--a-spacing-1);
+    padding-bottom: 0.25rem
    margin: 0 !important;
  }

  .sb-section-item-paragraph {
    margin: 0;
-    padding-bottom: var(--a-spacing-3);
+    padding-bottom: 0.75rem;
  }

  @media screen and (max-width: 768px) {
@@ -53,6 +53,7 @@ export default {
    "@storybook/addon-a11y",
    "@whitespace/storybook-addon-html",
    "@storybook/addon-interactions",
+    "@storybook/addon-themes",
    {
      name: "@storybook/addon-storysource",
      options: {
@@ -70,7 +71,11 @@ export default {
        },
      },
    },
-    "storybook-addon-pseudo-states",
+    /**
+     * https://github.com/chromaui/storybook-addon-pseudo-states/issues/101
+     * Currently disabled to avoid interference with darkmode update
+     */
+    /* "storybook-addon-pseudo-states", */
  ],
  framework: {
    name: "@storybook/react-vite",
@@ -1,59 +0,0 @@
-import React from "react";
-import "@navikt/ds-css/index.css";
-import "./layout.css";
-
-export const parameters = {
-  options: {
-    storySort: {
-      method: "alphabetical",
-      order: [
-        "Getting started",
-        "ds-react",
-        ["Primitives"],
-        ["Default", "Controls"],
-        "Aksel-icons",
-      ],
-    },
-  },
-  layout: "centered",
-  backgrounds: {
-    values: [
-      {
-        name: "Canvas",
-        value: "#ffffff",
-      },
-      {
-        name: "Darkmode",
-        value: "#23262a",
-      },
-    ],
-  },
-};
-
-export const globalTypes = {
-  theme: {
-    name: "Theme",
-    toolbar: {
-      icon: "circlehollow",
-      items: [
-        { value: "light", icon: "circlehollow", title: "light" },
-        { value: "dark", icon: "circle", title: "dark" },
-      ],
-      showName: true,
-    },
-  },
-};
-
-export const withTheme = (StoryFn, context) => {
-  return (
-    <div
-      data-theme={context.parameters.theme || context.globals.theme || "light"}
-      lang="no"
-      id="root"
-    >
-      <StoryFn />
-    </div>
-  );
-};
-
-export const decorators = [withTheme];
@@ -0,0 +1,128 @@
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { Preview } from "@storybook/react";
+import React, { useLayoutEffect } from "react";
+// @ts-expect-error - Temporary
+import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
+// @ts-expect-error - Temporary
+import defaultCss from "@navikt/ds-css/index.css?inline";
+import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
+import UNSAFE_AkselLanguageProvider from "../@navikt/core/react/src/provider/i18n/LanguageProvider";
+import en from "../@navikt/core/react/src/util/i18n/locales/en";
+import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
+import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
+import "./layout.css";
+
+const ModeDecorator = ({ children, mode, theme }) => {
+  useLayoutEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = mode === "darkside" ? darksideCss : defaultCss;
+    document.head.appendChild(style);
+
+    if (mode === "darkside") {
+      document.body.style.setProperty("background", "var(--ax-bg-default)");
+    }
+
+    return () => {
+      document.head.removeChild(style);
+      document.body.style.removeProperty("background");
+    };
+  }, [mode]);
+
+  return mode === "darkside" ? (
+    <UNSAFE_AkselTheme theme={theme || undefined} hasBackground={false}>
+      {children}
+    </UNSAFE_AkselTheme>
+  ) : (
+    children
+  );
+};
+
+const translations = {
+  nb,
+  nn,
+  en,
+};
+
+const LanguageDecorator = ({ children, language }) => {
+  if (language) {
+    return (
+      <UNSAFE_AkselLanguageProvider translations={translations[language]}>
+        {children}
+      </UNSAFE_AkselLanguageProvider>
+    );
+  }
+  return children;
+};
+
+export default {
+  parameters: {
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: [
+          "Getting started",
+          "ds-react",
+          ["Primitives"],
+          ["Default", "Controls"],
+          "Aksel-icons",
+        ],
+      },
+    },
+    layout: "centered",
+    backgrounds: { disable: true },
+  },
+
+  globalTypes: {
+    mode: {
+      name: "Darkside",
+      toolbar: {
+        items: [
+          {
+            value: "default",
+            icon: "hourglass",
+            title: "Default (old)",
+          },
+          { value: "darkside", icon: "beaker", title: "Darkside (new)" },
+        ],
+        showName: true,
+        dynamicTitle: true,
+      },
+    },
+    language: {
+      toolbar: {
+        icon: "globe",
+        items: [
+          { value: undefined, title: "Unset" },
+          { value: "nb", right: "🇳🇴", title: "Norsk bokmål" },
+          { value: "nn", right: "🇳🇴", title: "Norsk nynorsk" },
+          { value: "en", right: "🇬🇧", title: "English" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  initialGlobals: {
+    mode: "default",
+  },
+
+  decorators: [
+    (StoryFn, context) => (
+      <ModeDecorator mode={context.globals.mode} theme={context.globals.theme}>
+        <StoryFn />
+      </ModeDecorator>
+    ),
+    (StoryFn, context) => (
+      <LanguageDecorator language={context.globals.language}>
+        <StoryFn />
+      </LanguageDecorator>
+    ),
+    withThemeByClassName({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
+} satisfies Preview;
@@ -1,5 +1,8 @@
 {
-  "cssVariables.lookupFiles": ["@navikt/core/css/dist/index.css"],
+  "cssVariables.lookupFiles": [
+    "@navikt/core/tokens/dist/tokens.css",
+    "@navikt/core/tokens/dist/darkside/tokens.css"
+  ],
  "eslint.problems.shortenToSingleLine": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.watcherExclude": {
@@ -1,5 +1,29 @@
 # @navikt/aksel-icons

+## 7.5.2
+
+## 7.5.1
+
+## 7.5.0
+
+### Minor Changes
+
+- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. ([#3332](https://github.com/navikt/aksel/pull/3332))
+
+## 7.4.3
+
+## 7.4.2
+
+## 7.4.1
+
+## 7.4.0
+
+## 7.3.1
+
+## 7.3.0
+
+## 7.2.1
+
 ## 7.2.0

 ## 7.1.2
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+import { splitIntoParts } from "../config/figma/fetch-icons";
+
+describe("splitIntoParts", () => {
+  test("should split array into parts correctly with odd count array", () => {
+    const arr = ["a", "b", "c", "d", "e"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e"]);
+  });
+
+  test("should split array into parts correctly with even count array", () => {
+    const arr = ["a", "b", "c", "d", "e", "f"];
+    const result = splitIntoParts(arr, 4);
+    expect(result).toEqual(["a,b", "c,d", "e,f"]);
+  });
+});
@@ -1,9 +1,9 @@
-/* eslint-disable import/no-named-as-default-member */
 import fastglob from "fast-glob";
 import fs from "fs";
-import jsYaml from "js-yaml";
+import { JSON_SCHEMA, load } from "js-yaml";
 import path from "path";
 import { describe, expect, test } from "vitest";
+import { IconYml } from "../config/figma/make-configs";

 const basePath = path.resolve(__dirname, "../icons");

@@ -14,9 +14,10 @@ const ymlList = fastglob
 describe(`Each icons YML-config is valid`, () => {
  ymlList.forEach((file) => {
    test(`${file} has valid YML-config`, () => {
-      const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
-        schema: jsYaml.JSON_SCHEMA,
-      });
+      const ymlData = load(fs.readFileSync(`${basePath}/${file}`).toString(), {
+        schema: JSON_SCHEMA,
+      }) as IconYml;
+
      expect(ymlData.name).toBeTruthy();
      expect(ymlData.category).toBeTruthy();
      expect(ymlData.sub_category).toBeTruthy();
@@ -31,7 +32,7 @@ describe(`Each icons YML-config is valid`, () => {
  });
 });

-function isDate(dateStr) {
+function isDate(dateStr: string) {
  return !Number.isNaN(
    new Date(dateStr.split(".").reverse().join(".")).getDate(),
  );
@@ -21,8 +21,7 @@ describe(`Each icons has a valid code`, () => {

      test(`has valid attributes on root-node`, () => {
        const root = select(":root", iconAst);
-        const properties =
-          root && root.properties ? Object.keys(root.properties).sort() : [];
+        const properties = Object.keys(root?.properties ?? []).sort();

        expect(properties).toStrictEqual(
          ["viewBox", "xmlns", "height", "width", "fill"].sort(),
@@ -31,45 +30,41 @@ describe(`Each icons has a valid code`, () => {

      test(`has valid xml-attr`, () => {
        const root = select(":root", iconAst);
-        const xmlns = root && root.properties ? root.properties.xmlns : null;
-        expect(xmlns).toBe("http://www.w3.org/2000/svg");
+        expect(root?.properties?.xmlns).toBe("http://www.w3.org/2000/svg");
      });

      test(`has valid viewbox`, () => {
        const root = select(":root", iconAst);
-        const viewbox =
-          root && root.properties ? root.properties.viewBox : null;
-        expect(viewbox).toBe("0 0 24 24");
+        expect(root?.properties?.viewBox).toBe("0 0 24 24");
      });

      test(`root fill is none`, () => {
        const root = select(":root", iconAst);
-        const fill = root && root.properties ? root.properties.fill : null;
-        expect(fill).toBe("none");
+        expect(root?.properties?.fill).toBe("none");
      });

      test(`has valid width and height`, () => {
        const root = select(":root", iconAst);
-        const width = root && root.properties ? root.properties.width : null;
-        const height = root && root.properties ? root.properties.height : null;
-        expect(width).toBe("24");
-        expect(height).toBe("24");
+        expect(root?.properties?.width).toBe("24");
+        expect(root?.properties?.height).toBe("24");
      });

      test(`has valid stroke`, () => {
        const nodes = selectAll("*", iconAst);

        nodes.forEach((n) => {
-          n.properties?.stroke &&
+          if (n.properties?.stroke) {
            expect(n.properties.stroke).toEqual("#23262A");
+          }
        });
      });

      test(`has valid stroke-width`, () => {
        const nodes = selectAll("*", iconAst);
        nodes.forEach((n) => {
-          n.properties?.strokeWidth &&
+          if (n.properties?.strokeWidth) {
            expect(n.properties?.strokeWidth).toEqual("1.5");
+          }
        });
      });
    });
@@ -1,63 +0,0 @@
-const file_key = "wEdyFjCQSBR3U7FvrMbPXa";
-
-export const fetchIcons = async () => {
-  console.info("Fetching new icons from Figma...");
-  const data = await fetch(
-    `https://api.figma.com/v1/files/${file_key}/components`,
-    {
-      headers: {
-        "Content-type": "application/json",
-        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-      },
-    },
-  )
-    .then((x) => x.json())
-    .catch((e) => {
-      throw e.message;
-    });
-
-  if (data?.err) {
-    throw new Error(data.err);
-  }
-
-  if (!data?.meta?.components || data?.meta?.components.length === 0) {
-    throw new Error("Fant ingen publiserte ikoner");
-  }
-
-  return data?.meta?.components;
-};
-
-export const fetchDownloadUrls = async (idArray) => {
-  const urls = { images: null };
-
-  for (let ids of idArray) {
-    await fetch(
-      `https://api.figma.com/v1/images/${file_key}/?ids=${ids}&format=svg`,
-      {
-        headers: {
-          "Content-type": "application/json",
-          "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-        },
-      },
-    )
-      .then((x) => x.json())
-      .then((x) => {
-        urls.images = {
-          ...urls.images,
-          ...x.images,
-        };
-      })
-      .catch((e) => {
-        throw e.message;
-      });
-  }
-  return urls;
-};
-
-export const fetchIcon = async (url) => {
-  return await fetch(url)
-    .then((x) => x.text())
-    .catch((e) => {
-      throw e.message;
-    });
-};
@@ -0,0 +1,114 @@
+import {
+  BadRequestErrorResponseWithErrMessage,
+  ErrorResponsePayloadWithErrMessage,
+  GetFileComponentsResponse,
+  GetImagesResponse,
+  PublishedComponent,
+} from "@figma/rest-api-spec";
+
+/* https://www.figma.com/developers/api#library-items */
+const FIGMA_FILE_KEY = "wEdyFjCQSBR3U7FvrMbPXa";
+
+export const fetchIcons = async (): Promise<PublishedComponent[]> => {
+  console.group("Fetching list of published icons from Figma...");
+  const data:
+    | GetFileComponentsResponse
+    | BadRequestErrorResponseWithErrMessage = await fetch(
+    `https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/components`,
+    {
+      headers: {
+        "Content-type": "application/json",
+        "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+      },
+    },
+  )
+    .then((x) => x.json())
+    .catch((e) => {
+      throw e.message;
+    });
+
+  if (data.status !== 200) {
+    throw new Error(data.err);
+  }
+
+  if (data.meta.components.length === 0) {
+    throw new Error("No published icons found");
+  }
+
+  /* Filtes out any 'random' icons not meant for the icon-library */
+  const validIcons = data.meta.components.filter((icon) => {
+    const validIcon =
+      !!icon.containing_frame?.pageName && !!icon.containing_frame?.name;
+
+    if (!validIcon) {
+      console.warn(`Ignoring icon '${icon.name}' as it is missing metadata`);
+    }
+    return validIcon;
+  });
+
+  console.info(
+    `Found ${validIcons.length} published icons in Figma. ${
+      data.meta.components.length - validIcons.length
+    } icons were ignored due to missing metadata.`,
+  );
+
+  console.groupEnd();
+
+  return validIcons;
+};
+
+export const fetchDownloadUrls = async (
+  nodeIds: string[],
+): Promise<Record<string, string>> => {
+  /* Would just using Record be better here? Yes. But is a self-referencing return kinda cool? Also yes */
+  const idUrlPairs: Awaited<ReturnType<typeof fetchDownloadUrls>> = {};
+
+  /* Figma accepts a comma-separated list of ids: GET /v1/images/:key?ids=1:2,1:3,1:4 */
+  const paginatedNodeIds = splitIntoParts(nodeIds, 5);
+
+  for (const ids of paginatedNodeIds) {
+    const data: GetImagesResponse | ErrorResponsePayloadWithErrMessage =
+      await fetch(
+        `https://api.figma.com/v1/images/${FIGMA_FILE_KEY}/?ids=${ids}&format=svg`,
+        {
+          headers: {
+            "Content-type": "application/json",
+            "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN ?? "",
+          },
+        },
+      )
+        .then((x) => x.json())
+        .catch((e) => {
+          throw e.message;
+        });
+
+    if (data.err !== null) {
+      throw new Error(data.err);
+    }
+
+    for (const [key, value] of Object.entries(data.images)) {
+      if (!value) {
+        console.warn(`No image found for ${key}`);
+        continue;
+      }
+      idUrlPairs[key] = value;
+    }
+  }
+  return idUrlPairs;
+};
+
+/**
+ * Splits an array of strings into parts where each part is a comma-separated string of all the strings for that part.
+ * @returns An array of comma-separated strings.
+ */
+export function splitIntoParts(arr: string[], parts: number): string[] {
+  const partSize = Math.ceil(arr.length / parts);
+  const blocks: string[] = [];
+
+  for (let i = 0; i < parts && i * partSize < arr.length; i++) {
+    const part = arr.slice(i * partSize, (i + 1) * partSize);
+    blocks.push(part.join(","));
+  }
+
+  return blocks;
+}
@@ -1,15 +0,0 @@
-import camelCase from "lodash.camelCase";
-import startCase from "lodash.startcase";
-
-export const resolveName = (icon) => {
-  const isVariant = icon.name.startsWith("Variant=");
-
-  if (isVariant) {
-    const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
-    const actualName = icon["containing_frame"]?.["containingStateGroup"]?.name;
-    const name = `${actualName}${variant}`;
-    return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;
-  }
-
-  return `${startCase(camelCase(icon.name)).replace(/ /g, "")}.svg`;
-};
@@ -0,0 +1,17 @@
+import { PublishedComponent } from "@figma/rest-api-spec";
+import { camelCase, startCase } from "lodash";
+
+export const resolveName = (icon: PublishedComponent) => {
+  const isVariant = icon.name.startsWith("Variant=");
+
+  if (isVariant) {
+    const variant = icon.name.replace("Variant=", "").replace("Stroke", "");
+
+    /* @ts-expect-error Figma now includes the key:value pair `containingStateGroup: { name: string, nodeId: string }` */
+    const actualName = icon.containing_frame?.containingStateGroup?.name;
+    const name = `${actualName}${variant}`;
+    return `${startCase(camelCase(name)).replace(/ /g, "")}.svg`;
+  }
+
+  return `${startCase(camelCase(icon.name)).replace(/ /g, "")}.svg`;
+};
@@ -1,64 +0,0 @@
-import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
-import { resolve } from "path";
-import { fetchDownloadUrls, fetchIcon, fetchIcons } from "./fetch-icons.mjs";
-import { resolveName } from "./icon-name.mjs";
-import { makeConfig } from "./make-configs.mjs";
-import { paginate } from "./paginate.mjs";
-
-/* https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0 */
-
-const iconFolder = "./icons";
-
-if (!process.env.FIGMA_TOKEN) {
-  throw new Error("FIGMA_TOKEN not set in .env");
-}
-
-async function main() {
-  console.info("Started icon-update from Figma");
-  let icons = await fetchIcons();
-
-  const totalIcons = icons.length;
-
-  const { images } = await fetchDownloadUrls(
-    paginate(
-      icons.map((x) => x.node_id),
-      400,
-    ).map((x) => x.join(",")),
-  );
-
-  if (existsSync(iconFolder)) {
-    rmSync(iconFolder, { recursive: true, force: true });
-  }
-
-  mkdirSync(iconFolder);
-
-  console.info(`Laster ned ${Object.keys(images).length} ikoner`);
-
-  for (const [key, value] of Object.entries(images)) {
-    const icon = await fetchIcon(value).catch((e) => {
-      throw e;
-    });
-    await new Promise((r) => setTimeout(r, 20));
-
-    icon &&
-      writeFileSync(
-        resolve(iconFolder, resolveName(icons.find((x) => x.node_id === key))),
-        icon,
-        {
-          encoding: "utf8",
-        },
-      );
-  }
-
-  makeConfig(icons, iconFolder);
-
-  readdirSync(iconFolder, (_, files) => {
-    if (files.length * 2 !== totalIcons) {
-      throw new Error(`Ikoner mangler!`);
-    }
-  });
-
-  console.info(`Success! ${Object.keys(images).length} ikoner lastet ned`);
-}
-
-main();
@@ -0,0 +1,106 @@
+import { existsSync, mkdirSync, readdirSync, rmSync, writeFileSync } from "fs";
+import { resolve } from "path";
+import { fetchDownloadUrls, fetchIcons } from "./fetch-icons";
+import { resolveName } from "./icon-name";
+import { makeConfig } from "./make-configs";
+
+/**
+ * https://www.figma.com/file/wEdyFjCQSBR3U7FvrMbPXa/Core-Icons-Next?node-id=277%3A1221&t=mUJzFvnsceYYXNL5-0
+ * This is the current source for all icons we are working with.
+ */
+
+const iconFolder = "./icons";
+
+if (!process.env.FIGMA_TOKEN) {
+  throw new Error("FIGMA_TOKEN not set in .env");
+}
+
+main();
+
+async function main() {
+  console.info("Started icon-update from Figma");
+  /* Icons are published as 'components' in Figma */
+  const publishedIconComponents = await fetchIcons();
+
+  /* When we have all the published icons, we can ask figma for URL's for downloading them as assets */
+  const imagesUrls = await fetchDownloadUrls(
+    publishedIconComponents.map((x) => x.node_id),
+  );
+
+  /* Lets do a clean install */
+  if (existsSync(iconFolder)) {
+    rmSync(iconFolder, { recursive: true, force: true });
+  }
+  mkdirSync(iconFolder);
+
+  console.group(`Processing ${Object.keys(imagesUrls).length} icons...`);
+
+  const fileNames = new Set<string>();
+
+  await Promise.all(
+    Object.entries(imagesUrls).map(async ([nodeId, iconUrl]) => {
+      /* Each icon is now a raw string for a complete SVG */
+      const iconSvg = await fetch(iconUrl)
+        .then((x) => x.text())
+        .catch((e) => {
+          throw e.message;
+        });
+
+      const matchingIcon = publishedIconComponents.find(
+        (x) => x.node_id === nodeId,
+      );
+
+      if (!matchingIcon) {
+        throw new Error(
+          `No matching icon found for ${nodeId}. It should not be possible to dowload icon without a matching icon in the list of icons fetched from Figma.`,
+        );
+      }
+
+      const fileName = resolveName(matchingIcon);
+
+      /*
+       * In some cases if multiple icons are published in Figma with the same name,
+       * we will end up overwriting the icon with the same name.
+       */
+      if (fileNames.has(fileName)) {
+        console.warn(`Duplicate name detected: ${fileName}.`);
+      }
+
+      fileNames.add(fileName);
+
+      writeFileSync(resolve(iconFolder, resolveName(matchingIcon)), iconSvg, {
+        encoding: "utf8",
+      });
+    }),
+  );
+
+  if (fileNames.size !== publishedIconComponents.length) {
+    console.warn(
+      `Duplicate icon names from Figma leads to them being overwritten. This will cause the icon-library to be out of sync with Figma.`,
+    );
+  }
+
+  console.info(`Completed processing 🎉`);
+  console.groupEnd();
+
+  makeConfig(publishedIconComponents, iconFolder);
+
+  const filesInDir = readdirSync(iconFolder);
+  const svgFiles = filesInDir.filter((x) => x.endsWith(".svg"));
+  const ymlFiles = filesInDir.filter((x) => x.endsWith(".yml"));
+
+  if (
+    svgFiles.length !== publishedIconComponents.length ||
+    ymlFiles.length !== publishedIconComponents.length
+  ) {
+    throw new Error(
+      `Icons (${svgFiles.length}) and configs (${ymlFiles.length}) written to directory does not match the expected amount of icons located in Figma (${publishedIconComponents.length}).\nThis is most likely caused by duplicate icon names from figma.`,
+    );
+  }
+
+  console.info(
+    `Success! A total of ${
+      Object.keys(imagesUrls).length
+    } were fetched and downloaded from Figma 🎉`,
+  );
+}
@@ -1,17 +1,40 @@
+import { PublishedComponent } from "@figma/rest-api-spec";
 import { writeFileSync } from "fs";
-import jsYaml from "js-yaml";
+import { dump } from "js-yaml";
 import { resolve } from "path";
-import { resolveName } from "./icon-name.mjs";
+import { resolveName } from "./icon-name";

-export const makeConfig = (icons, folder) => {
-  icons.forEach((icon) => {
+export type IconYml = {
+  name: string;
+  category: string;
+  sub_category: string;
+  keywords: string[];
+  variant: string;
+  updated_at: string;
+  created_at: string;
+};
+
+export const makeConfig = (
+  icons: PublishedComponent[],
+  dirLocation: string,
+) => {
+  console.group("Creating icon yml...");
+
+  let counter = 0;
+  for (const icon of icons) {
    const name = resolveName(icon).replace(".svg", "");
    const keywords = icon.description
      .split(",")
      .map((x) => x.trim())
      .filter(Boolean);

-    const config = {
+    if (!icon.containing_frame?.pageName || !icon.containing_frame?.name) {
+      throw new Error(
+        `Missing containing_frame.pageName or containing_frame.name for icon ${name}`,
+      );
+    }
+
+    const config: IconYml = {
      name,
      category: icon.containing_frame.pageName,
      sub_category: icon.containing_frame.name,
@@ -33,14 +56,18 @@ export const makeConfig = (icons, folder) => {
        .join("."),
    };

-    const yml = jsYaml.dump(config, {
+    const yml = dump(config, {
      noRefs: true,
      skipInvalid: false,
      quotingType: '"',
    });

-    writeFileSync(resolve(folder, `${config.name}.yml`), yml, {
+    writeFileSync(resolve(dirLocation, `${config.name}.yml`), yml, {
      encoding: "utf8",
    });
-  });
+    counter++;
+  }
+
+  console.info(`Created ${counter} icon yml files`);
+  console.groupEnd();
 };
@@ -1,12 +0,0 @@
-export function paginate(arr, size) {
-  return arr.reduce((acc, val, i) => {
-    let idx = Math.floor(i / size);
-    if (!acc[idx]) {
-      acc[idx] = [];
-    }
-    let page = acc[idx];
-    page.push(val);
-
-    return acc;
-  }, []);
-}
@@ -15,6 +15,7 @@ ymlList.forEach((file) => {
  const ymlData = jsYaml.load(fs.readFileSync(`${basePath}/${file}`), {
    schema: jsYaml.JSON_SCHEMA,
  });
+  // biome-ignore lint/complexity/useOptionalChain: optional chain not supported in enviroment. Consider revriting to Typescript
  if (ymlData.keywords && ymlData.keywords.includes("[ignore-docs]")) {
    return;
  }
@@ -27,7 +27,7 @@
    "@vitejs/plugin-react": "^4.2.1",
    "postcss": "^8.4.31",
    "postcss-url": "^10.1.3",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
    "vite": "^5.4.6",
    "vite-plugin-singlefile": "^1.0.0",
    "vite-plugin-svgr": "^4.2.0"
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.20973 16.193H9.90274C10.1267 16.193 10.3041 16.1323 10.4347 16.011C10.5701 15.885 10.6377 15.7193 10.6377 15.514C10.6377 15.3087 10.5701 15.1453 10.4347 15.024C10.3041 14.898 10.1267 14.835 9.90274 14.835H9.20973V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.18047 19.077C4.6438 19.077 4.2168 18.9323 3.89947 18.643C3.5868 18.349 3.43047 17.9547 3.43047 17.46H4.48047C4.48047 17.6747 4.54347 17.8473 4.66947 17.978C4.79547 18.104 4.9658 18.167 5.18047 18.167C5.39514 18.167 5.56547 18.1063 5.69147 17.985C5.81747 17.859 5.88047 17.6887 5.88047 17.474V14.87H4.72547V13.89H6.93047V17.474C6.93047 17.9687 6.77414 18.3607 6.46147 18.65C6.1488 18.9347 5.7218 19.077 5.18047 19.077ZM8.15973 19V13.89H9.90274C10.2621 13.89 10.5747 13.9577 10.8407 14.093C11.1114 14.2283 11.3191 14.4173 11.4637 14.66C11.6131 14.9027 11.6877 15.1873 11.6877 15.514C11.6877 15.836 11.6131 16.1207 11.4637 16.368C11.3144 16.6107 11.1067 16.7997 10.8407 16.935C10.5747 17.0703 10.2621 17.138 9.90274 17.138H9.20973V19H8.15973ZM12.665 19V13.89H15.815V14.786H13.694V15.934H15.57V16.83H13.694V18.104H15.815V19H12.665ZM18.6403 19.07C18.2996 19.07 18.0009 19.007 17.7443 18.881C17.4876 18.7503 17.2869 18.5707 17.1423 18.342C17.0023 18.1087 16.9323 17.838 16.9323 17.53V15.36C16.9323 15.0473 17.0023 14.7767 17.1423 14.548C17.2869 14.3193 17.4876 14.142 17.7443 14.016C18.0009 13.8853 18.2996 13.82 18.6403 13.82C18.9856 13.82 19.2843 13.8853 19.5363 14.016C19.7929 14.142 19.9913 14.3193 20.1313 14.548C20.2759 14.7767 20.3483 15.0473 20.3483 15.36H19.2983C19.2983 15.1547 19.2399 14.9983 19.1233 14.891C19.0113 14.7837 18.8503 14.73 18.6403 14.73C18.4303 14.73 18.2669 14.7837 18.1503 14.891C18.0383 14.9983 17.9823 15.1547 17.9823 15.36V17.53C17.9823 17.7307 18.0383 17.887 18.1503 17.999C18.2669 18.1063 18.4303 18.16 18.6403 18.16C18.8503 18.16 19.0113 18.1063 19.1233 17.999C19.2399 17.887 19.2983 17.7307 19.2983 17.53V17.089H18.5423V16.2H20.3483V17.53C20.3483 17.838 20.2759 18.1087 20.1313 18.342C19.9913 18.5707 19.7929 18.7503 19.5363 18.881C19.2843 19.007 18.9856 19.07 18.6403 19.07Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,13 @@
+name: FileJpeg
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 3.25C13.1381 3.25 13.25 3.36193 13.25 3.5V7.5C13.25 8.19036 13.8096 8.75 14.5 8.75H18.5C18.6381 8.75 18.75 8.86193 18.75 9V10.5C18.75 10.6381 18.6381 10.75 18.5 10.75H5.5C5.36193 10.75 5.25 10.6381 5.25 10.5V4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H13ZM15.1768 4.11612C15.0193 3.95863 14.75 4.07017 14.75 4.29289V7C14.75 7.13807 14.8619 7.25 15 7.25H17.7071C17.9298 7.25 18.0414 6.98072 17.8839 6.82322L15.1768 4.11612Z" fill="#23262A"/>
+<path d="M9.90274 16.193H9.20973V14.835H9.90274C10.1267 14.835 10.3041 14.898 10.4347 15.024C10.5701 15.1453 10.6377 15.3087 10.6377 15.514C10.6377 15.7193 10.5701 15.885 10.4347 16.011C10.3041 16.1323 10.1267 16.193 9.90274 16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 12.25C2.58579 12.25 2.25 12.5858 2.25 13V20C2.25 20.4142 2.58579 20.75 3 20.75H21C21.4142 20.75 21.75 20.4142 21.75 20V13C21.75 12.5858 21.4142 12.25 21 12.25H3ZM3.89947 18.643C4.2168 18.9323 4.6438 19.077 5.18047 19.077C5.7218 19.077 6.1488 18.9347 6.46147 18.65C6.77414 18.3607 6.93047 17.9687 6.93047 17.474V13.89H4.72547V14.87H5.88047V17.474C5.88047 17.6887 5.81747 17.859 5.69147 17.985C5.56547 18.1063 5.39514 18.167 5.18047 18.167C4.9658 18.167 4.79547 18.104 4.66947 17.978C4.54347 17.8473 4.48047 17.6747 4.48047 17.46H3.43047C3.43047 17.9547 3.5868 18.349 3.89947 18.643ZM8.15973 13.89V19H9.20973V17.138H9.90274C10.2621 17.138 10.5747 17.0703 10.8407 16.935C11.1067 16.7997 11.3144 16.6107 11.4637 16.368C11.6131 16.1207 11.6877 15.836 11.6877 15.514C11.6877 15.1873 11.6131 14.9027 11.4637 14.66C11.3191 14.4173 11.1114 14.2283 10.8407 14.093C10.5747 13.9577 10.2621 13.89 9.90274 13.89H8.15973ZM12.665 13.89V19H15.815V18.104H13.694V16.83H15.57V15.934H13.694V14.786H15.815V13.89H12.665ZM17.7443 18.881C18.0009 19.007 18.2996 19.07 18.6403 19.07C18.9856 19.07 19.2843 19.007 19.5363 18.881C19.7929 18.7503 19.9913 18.5707 20.1313 18.342C20.2759 18.1087 20.3483 17.838 20.3483 17.53V16.2H18.5423V17.089H19.2983V17.53C19.2983 17.7307 19.2399 17.887 19.1233 17.999C19.0113 18.1063 18.8503 18.16 18.6403 18.16C18.4303 18.16 18.2669 18.1063 18.1503 17.999C18.0383 17.887 17.9823 17.7307 17.9823 17.53V15.36C17.9823 15.1547 18.0383 14.9983 18.1503 14.891C18.2669 14.7837 18.4303 14.73 18.6403 14.73C18.8503 14.73 19.0113 14.7837 19.1233 14.891C19.2399 14.9983 19.2983 15.1547 19.2983 15.36H20.3483C20.3483 15.0473 20.2759 14.7767 20.1313 14.548C19.9913 14.3193 19.7929 14.142 19.5363 14.016C19.2843 13.8853 18.9856 13.82 18.6403 13.82C18.2996 13.82 18.0009 13.8853 17.7443 14.016C17.4876 14.142 17.2869 14.3193 17.1423 14.548C17.0023 14.7767 16.9323 15.0473 16.9323 15.36V17.53C16.9323 17.838 17.0023 18.1087 17.1423 18.342C17.2869 18.5707 17.4876 18.7503 17.7443 18.881Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,13 @@
+name: FileJpegFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - jpg
+  - jpeg
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 4.5C5.25 3.80964 5.80964 3.25 6.5 3.25H14C14.1989 3.25 14.3897 3.32902 14.5303 3.46967L18.5303 7.46967C18.671 7.61032 18.75 7.80109 18.75 8V12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13C2.25 12.5858 2.58579 12.25 3 12.25H5.25V4.5ZM6.75 12.25H17.25V8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V4.75H6.75V12.25ZM14.75 5.81066L16.1893 7.25H14.75V5.81066ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,12 @@
+name: FilePng
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Stroke
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.25 3.5C13.25 3.36193 13.1381 3.25 13 3.25H6.5C5.80964 3.25 5.25 3.80964 5.25 4.5V10.5C5.25 10.6381 5.36193 10.75 5.5 10.75H18.5C18.6381 10.75 18.75 10.6381 18.75 10.5V9C18.75 8.86193 18.6381 8.75 18.5 8.75H14.5C13.8096 8.75 13.25 8.19036 13.25 7.5V3.5Z" fill="#23262A"/>
+<path d="M14.75 4.29289C14.75 4.07017 15.0193 3.95863 15.1768 4.11612L17.8839 6.82322C18.0414 6.98072 17.9298 7.25 17.7071 7.25H15C14.8619 7.25 14.75 7.13807 14.75 7V4.29289Z" fill="#23262A"/>
+<path d="M7.0061 16.193H7.6991C7.9231 16.193 8.10043 16.1323 8.2311 16.011C8.36644 15.885 8.4341 15.7193 8.4341 15.514C8.4341 15.3087 8.36644 15.1453 8.2311 15.024C8.10043 14.898 7.9231 14.835 7.6991 14.835H7.0061V16.193Z" fill="#23262A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 13C2.25 12.5858 2.58579 12.25 3 12.25H21C21.4142 12.25 21.75 12.5858 21.75 13V20C21.75 20.4142 21.4142 20.75 21 20.75H3C2.58579 20.75 2.25 20.4142 2.25 20V13ZM5.9561 19V13.89H7.6991C8.05843 13.89 8.3711 13.9577 8.6371 14.093C8.90777 14.2283 9.11544 14.4173 9.2601 14.66C9.40944 14.9027 9.4841 15.1873 9.4841 15.514C9.4841 15.836 9.40944 16.1207 9.2601 16.368C9.11077 16.6107 8.9031 16.7997 8.6371 16.935C8.3711 17.0703 8.05843 17.138 7.6991 17.138H7.0061V19H5.9561ZM10.3214 19V13.89H11.5464L12.8694 17.845C12.8554 17.6723 12.839 17.474 12.8204 17.25C12.8017 17.0213 12.7854 16.795 12.7714 16.571C12.762 16.3423 12.7574 16.1487 12.7574 15.99V13.89H13.6814V19H12.4564L11.1474 15.045C11.1614 15.1943 11.1754 15.3717 11.1894 15.577C11.2034 15.7823 11.215 15.99 11.2244 16.2C11.2384 16.41 11.2454 16.5967 11.2454 16.76V19H10.3214ZM16.4366 19.07C16.096 19.07 15.7973 19.007 15.5406 18.881C15.284 18.7503 15.0833 18.5707 14.9386 18.342C14.7986 18.1087 14.7286 17.838 14.7286 17.53V15.36C14.7286 15.0473 14.7986 14.7767 14.9386 14.548C15.0833 14.3193 15.284 14.142 15.5406 14.016C15.7973 13.8853 16.096 13.82 16.4366 13.82C16.782 13.82 17.0806 13.8853 17.3326 14.016C17.5893 14.142 17.7876 14.3193 17.9276 14.548C18.0723 14.7767 18.1446 15.0473 18.1446 15.36H17.0946C17.0946 15.1547 17.0363 14.9983 16.9196 14.891C16.8076 14.7837 16.6466 14.73 16.4366 14.73C16.2266 14.73 16.0633 14.7837 15.9466 14.891C15.8346 14.9983 15.7786 15.1547 15.7786 15.36V17.53C15.7786 17.7307 15.8346 17.887 15.9466 17.999C16.0633 18.1063 16.2266 18.16 16.4366 18.16C16.6466 18.16 16.8076 18.1063 16.9196 17.999C17.0363 17.887 17.0946 17.7307 17.0946 17.53V17.089H16.3386V16.2H18.1446V17.53C18.1446 17.838 18.0723 18.1087 17.9276 18.342C17.7876 18.5707 17.5893 18.7503 17.3326 18.881C17.0806 19.007 16.782 19.07 16.4366 19.07Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,12 @@
+name: FilePngFill
+category: Files and application
+sub_category: Files
+keywords:
+  - document
+  - dokument
+  - fil
+  - file
+  - png
+variant: Fill
+updated_at: 06.11.2024
+created_at: 06.11.2024
@@ -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="M15.7626 3.17678C16.446 2.49336 17.554 2.49336 18.2374 3.17678L20.8232 5.76257C21.5066 6.44598 21.5066 7.55402 20.8232 8.23744L13.409 15.6517C12.7057 16.3549 11.7519 16.75 10.7574 16.75H8.31066L7.03033 18.0303C6.73744 18.3232 6.26256 18.3232 5.96967 18.0303C5.67678 17.7374 5.67678 17.2626 5.96967 16.9697L7.25 15.6893V13.2426C7.25 12.2481 7.64509 11.2943 8.34835 10.591L15.7626 3.17678ZM17.1768 4.23744C17.0791 4.13981 16.9209 4.13981 16.8232 4.23744L9.40901 11.6517C8.98705 12.0736 8.75 12.6459 8.75 13.2426V15.25H10.7574C11.3541 15.25 11.9264 15.0129 12.3483 14.591L19.7626 7.17678C19.8602 7.07915 19.8602 6.92086 19.7626 6.82323L17.1768 4.23744ZM17.0303 6.96967C17.3232 7.26256 17.3232 7.73744 17.0303 8.03033L14.0303 11.0303C13.7374 11.3232 13.2626 11.3232 12.9697 11.0303C12.6768 10.7374 12.6768 10.2626 12.9697 9.96967L15.9697 6.96967C16.2626 6.67678 16.7374 6.67678 17.0303 6.96967ZM5.03033 18.9697C5.32322 19.2626 5.32322 19.7374 5.03033 20.0303L4.03033 21.0303C3.73744 21.3232 3.26256 21.3232 2.96967 21.0303C2.67678 20.7374 2.67678 20.2626 2.96967 19.9697L3.96967 18.9697C4.26256 18.6768 4.73744 18.6768 5.03033 18.9697Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,15 @@
+name: MedicalThermometer
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Stroke
+updated_at: 14.10.2024
+created_at: 07.03.2023
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2374 3.17687C17.554 2.49345 16.446 2.49345 15.7626 3.17687L8.34835 10.5911C7.64509 11.2943 7.25 12.2482 7.25 13.2427V15.6893L5.96967 16.9697C5.67678 17.2626 5.67678 17.7374 5.96967 18.0303C6.26256 18.3232 6.73744 18.3232 7.03033 18.0303L8.31057 16.7501H10.7574C11.7519 16.7501 12.7057 16.355 13.409 15.6517L20.8232 8.23753C21.5066 7.55411 21.5066 6.44608 20.8232 5.76266L18.2374 3.17687ZM17.0303 8.03033C17.3232 7.73744 17.3232 7.26256 17.0303 6.96967C16.7374 6.67678 16.2626 6.67678 15.9697 6.96967L12.9697 9.96967C12.6768 10.2626 12.6768 10.7374 12.9697 11.0303C13.2626 11.3232 13.7374 11.3232 14.0303 11.0303L17.0303 8.03033ZM5.03033 20.0303C5.32322 19.7374 5.32322 19.2626 5.03033 18.9697C4.73744 18.6768 4.26256 18.6768 3.96967 18.9697L2.96967 19.9697C2.67678 20.2626 2.67678 20.7374 2.96967 21.0303C3.26256 21.3232 3.73744 21.3232 4.03033 21.0303L5.03033 20.0303Z" fill="#23262A"/>
+</svg>
@@ -0,0 +1,15 @@
+name: MedicalThermometerFill
+category: Wellness
+sub_category: Equipment
+keywords:
+  - termometer
+  - lege
+  - umiddelbar hjelp
+  - helse
+  - health
+  - help
+  - doctor
+  - patient
+variant: Fill
+updated_at: 14.10.2024
+created_at: 07.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "7.2.0",
+  "version": "7.5.2",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -62,28 +62,30 @@
    "update-metadata": "node config/metadata.js",
    "write-packagejson": "echo '{\"type\": \"module\"}' > dist/react/esm/package.json",
    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
-    "fetch-new:icons": "tsx --env-file=.env config/figma/index.mjs",
+    "fetch-new:icons": "tsx --env-file=.env config/figma/index.ts",
    "zip:icons": "node config/zip.js",
    "test": "vitest run",
    "test:watch": "vitest watch"
  },
  "devDependencies": {
+    "@figma/rest-api-spec": "^0.19.0",
    "@svgr/cli": "8.1.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^18.3.11",
    "adm-zip": "^0.5.10",
-    "concurrently": "7.2.1",
+    "concurrently": "9.0.1",
    "copyfiles": "^2.4.1",
    "cross-zip-cli": "1.0.0",
    "fast-glob": "3.2.11",
    "hast-util-select": "5.0.5",
    "js-yaml": "^4.1.0",
-    "lodash.camelcase": "4.3.0",
-    "lodash.startcase": "4.4.0",
+    "lodash": "^4.17.21",
    "prettier": "3.1.1",
    "react": "^18.0.0",
    "rehype-parse": "8.0.4",
    "tsc-alias": "1.8.8",
    "tsx": "^4.7.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
    "unified": "10.1.2",
    "vitest": "^1.2.2"
  }
@@ -1,5 +1,25 @@
 # @navikt/aksel-stylelint

+## 7.5.2
+
+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
+## 7.4.2
+
+## 7.4.1
+
+## 7.4.0
+
+## 7.3.1
+
+## 7.3.0
+
+## 7.2.1
+
 ## 7.2.0

 ## 7.1.2
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "7.2.0",
+  "version": "7.5.2",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,14 +35,14 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^7.2.0",
-    "@navikt/ds-tokens": "^7.2.0",
-    "concurrently": "7.2.1",
+    "@navikt/ds-css": "^7.5.2",
+    "@navikt/ds-tokens": "^7.5.2",
+    "concurrently": "9.0.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
    "stylelint": "^14.8.5",
    "stylelint-test-rule-node": "^0.2.1",
    "tsx": "^4.7.1",
-    "typescript": "^5.1.6"
+    "typescript": "5.5.4"
  }
 }
@@ -1,5 +1,77 @@
 # @navikt/aksel

+## 7.5.2
+
+### Patch Changes
+
+- Updated dependencies [[`9c93342`](https://github.com/navikt/aksel/commit/9c9334289246103856c149f5ddcf93dc42087342)]:
+  - @navikt/ds-css@7.5.2
+
+## 7.5.1
+
+### Patch Changes
+
+- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.1
+
+## 7.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Updated dependencies [[`6d9f900`](https://github.com/navikt/aksel/commit/6d9f9001fed4ccfa4245ab97399b24012ceb9edf)]:
+  - @navikt/ds-css@7.4.3
+
+## 7.4.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.2
+
+## 7.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`81c79d8`](https://github.com/navikt/aksel/commit/81c79d8355e5533bb85081d58f82f37202ff812c)]:
+  - @navikt/ds-css@7.4.1
+
+## 7.4.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-css@7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`64aab73`](https://github.com/navikt/aksel/commit/64aab7361a512af93d93825c0b5c98a6fd39cf95)]:
+  - @navikt/ds-css@7.3.1
+
+## 7.3.0
+
+### Patch Changes
+
+- Updated dependencies [[`20ced9b`](https://github.com/navikt/aksel/commit/20ced9b084a1f4bb56a1e1c07ef92010c9f4d71c), [`536f088`](https://github.com/navikt/aksel/commit/536f088b97ab9ae139d6974deb2a3c69e4fb6db3)]:
+  - @navikt/ds-css@7.3.0
+
+## 7.2.1
+
+### Patch Changes
+
+- Updated dependencies [[`6ddea4eaf`](https://github.com/navikt/aksel/commit/6ddea4eaf2e37f20f93d75e1a3a327b038fb209b)]:
+  - @navikt/ds-css@7.2.1
+
 ## 7.2.0

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "7.2.0",
+  "version": "7.5.2",
  "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": "7.2.0",
+    "@navikt/ds-css": "7.5.2",
    "axios": "1.7.4",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -45,7 +45,7 @@
  },
  "devDependencies": {
    "rimraf": "6.0.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
    "vitest": "^1.2.2"
  },
  "sideEffects": false,
@@ -43,7 +43,7 @@ export function validateGit(options: any, program: Command) {
  try {
    clean = isGitClean.sync(process.cwd());
  } catch (err: any) {
-    if (err && err.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
+    if (err?.stderr && err.stderr.indexOf("Not a git repository") >= 0) {
      clean = true;
    }
  }
@@ -5,7 +5,7 @@ export async function getAllVersions() {
    const npmPackageData = await axios.get(
      `https://registry.npmjs.org/@navikt/ds-css`,
    );
-    return Object.keys(npmPackageData.data["versions"]);
+    return Object.keys(npmPackageData.data.versions);
  } catch (e) {
    console.error(e);
    return [];
@@ -137,7 +137,7 @@ export async function cssImportsCommand() {

  let foundComponents: string[] = [];

-  if (answers["autoscan"] === "yes") {
+  if (answers.autoscan === "yes") {
    foundComponents = await new Promise((resolve) => {
      exec(`node ${__dirname}/scan-code.js ${answers.scandir}`, (_, stdout) => {
        resolve(
@@ -1,5 +1,53 @@
 # @navikt/ds-css

+## 7.5.2
+
+### Patch Changes
+
+- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
+
+## 7.5.1
+
+## 7.5.0
+
+## 7.4.3
+
+### Patch Changes
+
+- Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
+
+## 7.4.2
+
+## 7.4.1
+
+### Patch Changes
+
+- Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))
+
+## 7.4.0
+
+## 7.3.1
+
+### Patch Changes
+
+- Updated to Selectors Level 4 syntax. ([#3250](https://github.com/navikt/aksel/pull/3250))
+
+## 7.3.0
+
+### Minor Changes
+
+- ActionMenu: :tada: New component! Replaces DropdownMenu as the go-to solution for floating menus. Includes support for grouping, sub-menus, checkboxes, radios and dividers. Read more in the [documentation](https://aksel.nav.no/komponenter/core/actionmenu). ([#3081](https://github.com/navikt/aksel/pull/3081))
+
+### Patch Changes
+
+- List.Item: Center icon horizontally inside it's container ([#3253](https://github.com/navikt/aksel/pull/3253))
+
+## 7.2.1
+
+### Patch Changes
+
+- Combobox: Support PageUp/PageDown in dropdown list. ([#3158](https://github.com/navikt/aksel/pull/3158))
+
 ## 7.2.0

 ## 7.1.2
@@ -0,0 +1,227 @@
+.navds-action-menu__content {
+  overflow: hidden;
+  box-shadow: var(--a-shadow-medium);
+  border-radius: var(--a-border-radius-large);
+}
+
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+.navds-action-menu__content > .navds-action-menu__content-inner {
+  --__ac-action-menu-content-p: var(--a-spacing-2);
+  --__ac-action-menu-item-pr: var(--a-spacing-3);
+  --__ac-action-menu-item-pl: var(--a-spacing-2);
+  --__ac-action-menu-item-height: 2rem;
+
+  border-radius: var(--a-border-radius-large);
+  background-color: var(--a-surface-default);
+  min-width: 128px;
+  max-width: min(95vw, 640px);
+  transform-origin: var(--__ac-action-menu-content-transform-origin);
+  animation-duration: 160ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  padding: var(--__ac-action-menu-content-p);
+  overflow: auto;
+  max-height: var(--__ac-action-menu-content-available-height);
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="bottom"]) {
+  animation-name: aksel-action-from-bottom, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="top"]) {
+  animation-name: aksel-action-from-top, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="left"]) {
+  animation-name: aksel-action-from-left, aksel-action-fade-in;
+}
+
+.navds-action-menu__content:where([data-state="open"]):where([data-side="right"]) {
+  animation-name: aksel-action-from-right, aksel-action-fade-in;
+}
+
+@keyframes aksel-action-from-bottom {
+  from {
+    transform: translateY(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-top {
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-left {
+  from {
+    transform: translateX(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-from-right {
+  from {
+    transform: translateX(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-action-fade-in {
+  from {
+    opacity: 0.01;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.navds-action-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-2);
+  min-height: var(--__ac-action-menu-item-height);
+  cursor: default;
+  border-radius: var(--a-border-radius-medium);
+  position: relative;
+  padding-left: var(--__ac-action-menu-item-pl);
+  padding-right: var(--__ac-action-menu-item-pr);
+  font-size: var(--a-font-size-medium);
+  scroll-margin-block: var(--__ac-action-menu-content-p);
+  line-height: 1.5;
+  color: var(--a-text-default);
+  text-decoration: none;
+}
+
+.navds-action-menu__item svg {
+  flex-shrink: 0;
+}
+
+.navds-action-menu__item--has-icon {
+  --__ac-action-menu-item-pl: var(--a-spacing-6);
+}
+
+.navds-action-menu__sub-trigger {
+  --__ac-action-menu-item-pr: var(--a-spacing-05);
+}
+
+.navds-action-menu__item:focus {
+  outline: none;
+  background-color: var(--a-surface-action-subtle-hover);
+  color: var(--a-text-default);
+}
+
+.navds-action-menu__item--danger {
+  color: var(--a-text-danger);
+}
+
+.navds-action-menu__item--danger:focus {
+  background-color: var(--a-surface-danger-subtle);
+}
+
+.navds-action-menu__marker {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-1);
+}
+
+.navds-action-menu__marker--right {
+  margin-left: auto;
+  padding-left: var(--a-spacing-4);
+}
+
+.navds-action-menu__marker--left {
+  position: absolute;
+  left: 0;
+  width: var(--__ac-action-menu-item-pl);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.navds-action-menu__marker-icon svg {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.navds-action-menu__shortcut {
+  background-color: var(--a-surface-neutral-subtle);
+  color: var(--a-text-default);
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__label {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--__ac-action-menu-item-height) - 6px);
+  padding-right: var(--__ac-action-menu-item-pr);
+  padding-left: var(--__ac-action-menu-item-pl);
+  color: var(--a-text-subtle);
+  border-radius: var(--a-border-radius-medium);
+  user-select: none;
+  cursor: default;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-action-menu__divider {
+  height: 1px;
+  margin-block: var(--a-spacing-2);
+  background-color: var(--a-border-divider);
+}
+
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
+}
+
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
+}
+
+.navds-action-menu__indicator-icon--unchecked,
+.navds-action-menu__indicator-icon--checked,
+.navds-action-menu__indicator-icon--indeterminate {
+  display: none;
+}
+
+.navds-action-menu__indicator[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="checked"]) .navds-action-menu__indicator-icon--checked {
+  display: block;
+}
+
+.navds-action-menu__indicator:where([data-state="indeterminate"]) .navds-action-menu__indicator-icon--indeterminate {
+  display: block;
+}
+
+.navds-action-menu__item:where([aria-disabled="true"]) {
+  color: var(--a-text-subtle);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.navds-action-menu__sub-trigger:where([data-state="open"]) {
+  background-color: var(--a-surface-neutral-subtle);
+}
@@ -47,6 +47,8 @@ legend {
  white-space: normal;
 }

+/* Make elements with the HTML hidden attribute stay hidden by default. */
+
 [hidden] {
-  display: none;
+  display: none !important;
 }
@@ -1,6 +1,6 @@
 /* https://web.dev/prefers-reduced-motion/ */
@media (prefers-reduced-motion: reduce) {
-  *:not(.navds-loader *):not(.navds-loader):not(.navds-progress-bar *):not(.navds-progress-bar),
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
  ::before,
  ::after {
    animation-delay: -1ms !important;
@@ -154,6 +154,7 @@
    inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--__ac-button-primary-focus-border, var(--a-surface-default))),
    var(--a-shadow-focus);
 }
+
@media (forced-colors: active) {
  .navds-button--primary:focus-visible {
    box-shadow: none;
@@ -69,6 +69,11 @@ const StyleMappings = {
      dependencies: [typoCss],
    },
    { component: "Alert", main: "alert.css", dependencies: [typoCss] },
+    {
+      component: "ActionMenu",
+      main: "action-menu.css",
+      dependencies: [typoCss],
+    },
    {
      component: "BodyLong",
      main: typoCss,
@@ -0,0 +1,25 @@
+# Template for writing new CSS
+
+## File setup
+
+1. Create new CSS-file for component: "alert.darkside.css", "button.darkside.css" etc. Remember to add `.darkside.` for easier lookup.
+2. Import file in "darkside/index.css": `@import "./alert.darkside.css`
+
+Files will not be included in `/dist` for now to avoid it potentially polluting production-code. This will need to be revisited when we want to expose the new systems outside the team.
+
+## Development
+
+1. Write new CSS for component. Use same prefix `.navds` as before.
+2. Run storybook and change from "Default (old)" to "Darkside (new)" in toolbar. You are now developing new CSS 🎉
+
+## Syntax
+
+- Test using outline + outline-offset for focus-markings.
+
+## Checklist
+
+- Add new CSS-files under `core/css/darkside`.
+- New files should include `.darkside.` for easier lookup.
+- Import new CSS-files in `core/css/darkside/index.css`
+- New CSS-selectors should have `.navds` as prefix, same as original code.
+- Test changes in Storybook by changing mode in toolbar from "default (old)" -> "darkside (new)"
@@ -0,0 +1,182 @@
+/* ---------------------------- Accordion header ---------------------------- */
+.navds-accordion__header {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--ax-spacing-3);
+  padding: var(--ax-spacing-3);
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  position: relative;
+  border-radius: var(--ax-border-radius-large);
+  background: transparent;
+  color: var(--ax-text-accent);
+
+  > * {
+    font-weight: var(--ax-font-weight-regular);
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid buttonborder;
+    background-color: canvas;
+    color: canvastext;
+  }
+
+  &:hover {
+    background-color: var(--ax-bg-accent-hoverA);
+    color: var(--ax-text-accent-strong);
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    > .navds-accordion__icon-wrapper {
+      background-color: var(--ax-bg-accent-strong-hover);
+      color: var(--ax-text-accent-contrast);
+    }
+
+    @media (forced-colors: active) {
+      background-color: canvas;
+      border: 1px solid highlight;
+      color: highlight;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+    z-index: 1;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.navds-accordion--small .navds-accordion__header {
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-accordion__header::before,
+.navds-accordion__header::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--ax-border-subtleA);
+}
+
+.navds-accordion__item:last-child > .navds-accordion__content {
+  border-bottom: 1px solid transparent;
+}
+
+.navds-accordion__header::after {
+  top: initial;
+  bottom: 0;
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header::after,
+.navds-accordion__item:not(:last-child) > .navds-accordion__header::after {
+  display: none;
+}
+
+.navds-accordion__item[data-expanded="false"]:has(.navds-accordion__header:where(:hover, :focus-visible))
+  + .navds-accordion__item
+  > .navds-accordion__header::before {
+  display: none;
+}
+
+/* ------------------------- Accordion chevron icon ------------------------- */
+.navds-accordion__icon-wrapper {
+  border-radius: var(--ax-border-radius-large);
+  width: 22px;
+  height: 22px;
+  align-self: center;
+  background-color: var(--ax-bg-accent-moderateA);
+  color: var(--ax-text-accent-strong);
+}
+
+.navds-accordion__header-chevron {
+  height: inherit;
+  width: inherit;
+  flex-shrink: 0;
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__header .navds-accordion__header-chevron {
+  transform: rotateX(-180deg);
+}
+
+/* ---------------------------- Accordion content --------------------------- */
+.navds-accordion__content {
+  --__acx-accordion-content-line-width: 2px;
+
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+  display: none;
+  overflow: hidden;
+  padding-block: 0;
+  max-height: 0;
+  border-color: transparent;
+  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) allow-discrete;
+  animation: navds-accordion-content-animation 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.navds-accordion__item--no-animation {
+  animation: none;
+}
+
+@keyframes navds-accordion-content-animation {
+  0% {
+    opacity: 0.01;
+  }
+
+  20% {
+    opacity: 0.01;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.navds-accordion--indent > .navds-accordion__item > .navds-accordion__content {
+  padding-inline: var(--ax-spacing-6) var(--ax-spacing-3);
+}
+
+.navds-accordion--indent > .navds-accordion__item .navds-accordion__content-inner {
+  box-shadow: -2px 0 0 0 var(--ax-border-subtleA);
+  padding-block: var(--ax-spacing-2);
+
+  /* Aligns content with heading-section */
+  padding-inline: calc(var(--ax-spacing-5) + 2px) var(--ax-spacing-5);
+
+  @media (forced-colors: active) {
+    border-left: 1px solid canvastext;
+  }
+}
+
+.navds-accordion__item[data-expanded="true"] > .navds-accordion__content {
+  display: block;
+  opacity: 1;
+  overflow: visible;
+  max-height: fit-content;
+  padding-block: var(--ax-spacing-2);
+  padding-block-end: var(--ax-spacing-6);
+  border-color: var(--ax-border-subtleA);
+}
+
+@starting-style {
+  .navds-accordion__item[data-expanded="true"]:not(.navds-accordion__item--no-animation) > .navds-accordion__content {
+    padding-block: 0;
+    max-height: 0;
+    border-color: transparent;
+  }
+}
@@ -0,0 +1,206 @@
+/* --------------------------- ActionMenu content --------------------------- */
+.navds-action-menu__content {
+  overflow: hidden;
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-subtleA);
+
+  /* TODO: Use token here when added */
+  box-shadow:
+    0 0 1px 0 rgb(7 9 13/ 0.02),
+    0 2px 5px 0 rgb(7 9 13/ 0.1),
+    0 10px 16px 0 rgb(7 9 13/ 0.12);
+  transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete;
+
+  &[data-state="open"] {
+    &[data-side="bottom"] {
+      @starting-style {
+        transform: translateY(-4px);
+      }
+    }
+
+    &[data-side="top"] {
+      @starting-style {
+        transform: translateY(4px);
+      }
+    }
+
+    &[data-side="right"] {
+      @starting-style {
+        transform: translateX(-4px);
+      }
+    }
+
+    &[data-side="left"] {
+      @starting-style {
+        transform: translateX(4px);
+      }
+    }
+  }
+}
+
+.navds-action-menu__content > .navds-action-menu__content-inner {
+  --__axc-action-menu-content-p: var(--ax-spacing-2);
+  --__axc-action-menu-item-pr: var(--ax-spacing-2);
+  --__axc-action-menu-item-pl: var(--ax-spacing-2);
+  --__axc-action-menu-item-height: 2rem;
+
+  border-radius: var(--ax-border-radius-large);
+  background-color: var(--ax-bg-raised);
+  min-width: 128px;
+  max-width: min(95vw, 640px);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  transform-origin: var(--__ac-action-menu-content-transform-origin);
+  animation-duration: 160ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  padding: var(--__axc-action-menu-content-p);
+  overflow: auto;
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  max-height: var(--__ac-action-menu-content-available-height);
+}
+
+/* ----------------------------- ActionMenu Item ---------------------------- */
+.navds-action-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-2);
+  min-height: var(--__axc-action-menu-item-height);
+  cursor: default;
+  border-radius: var(--ax-border-radius-medium);
+  position: relative;
+  padding-left: var(--__axc-action-menu-item-pl);
+  padding-right: var(--__axc-action-menu-item-pr);
+  font-size: var(--ax-font-size-medium);
+  scroll-margin-block: var(--__axc-action-menu-content-p);
+  line-height: 1.5;
+  color: var(--ax-text-default);
+  text-decoration: none;
+
+  & svg {
+    flex-shrink: 0;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+    color: var(--ax-text-default);
+  }
+
+  &[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.navds-action-menu__item--has-icon {
+  --__axc-action-menu-item-pl: var(--ax-spacing-6);
+}
+
+.navds-action-menu__sub-trigger {
+  --__axc-action-menu-item-pr: var(--ax-spacing-05);
+
+  &[data-state="open"] {
+    background-color: var(--ax-bg-neutral-moderate-pressed);
+  }
+
+  &:focus {
+    background-color: var(--ax-bg-accent-moderate-hoverA);
+  }
+}
+
+.navds-action-menu__item--danger {
+  color: var(--ax-text-danger);
+
+  &:focus {
+    background-color: var(--ax-bg-danger-moderate-hoverA);
+    color: var(--ax-text-danger-strong);
+  }
+}
+
+/* ---------------------------- ActionMenu marker --------------------------- */
+.navds-action-menu__marker {
+  display: flex;
+  align-items: center;
+  gap: var(--ax-spacing-1);
+}
+
+.navds-action-menu__marker--right {
+  margin-left: auto;
+  padding-left: var(--ax-spacing-4);
+}
+
+.navds-action-menu__marker--left {
+  position: absolute;
+  left: 0;
+  width: var(--__axc-action-menu-item-pl);
+  display: inline-flex;
+  justify-content: center;
+}
+
+.navds-action-menu__marker-icon svg {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+/* --------------------------- ActionMenu shortcut -------------------------- */
+.navds-action-menu__shortcut {
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-small);
+  padding: 0 var(--ax-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ax-font-size-small);
+}
+
+/* ---------------------------- ActionMenu Grouping ---------------------------- */
+.navds-action-menu__label {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--__axc-action-menu-item-height) - 6px);
+  padding-right: var(--__axc-action-menu-item-pr);
+  padding-left: var(--__axc-action-menu-item-pl);
+  color: var(--ax-text-subtle);
+  border-radius: var(--ax-border-radius-medium);
+  user-select: none;
+  cursor: default;
+  font-size: var(--ax-font-size-small);
+}
+
+.navds-action-menu__divider {
+  height: 1px;
+  margin-block: var(--ax-spacing-2);
+  background-color: var(--ax-border-subtleA);
+}
+
+/* -------------------------- ActionMenu indicator -------------------------- */
+
+.navds-action-menu__indicator-icon--unchecked,
+.navds-action-menu__indicator-icon--checked,
+.navds-action-menu__indicator-icon--indeterminate {
+  display: none;
+}
+
+.navds-action-menu__indicator {
+  display: grid;
+  place-content: center;
+
+  &[data-state="unchecked"] .navds-action-menu__indicator-icon--unchecked {
+    display: block;
+  }
+
+  &[data-state="checked"] .navds-action-menu__indicator-icon--checked {
+    display: block;
+  }
+
+  &[data-state="indeterminate"] .navds-action-menu__indicator-icon--indeterminate {
+    display: block;
+  }
+}
+
+.navds-action-menu__indicator-icon {
+  font-size: 14px;
+}
@@ -0,0 +1,115 @@
+.navds-alert {
+  border-radius: var(--ax-border-radius-xlarge);
+  border: 1px solid;
+  padding: var(--ax-spacing-4);
+  display: flex;
+  gap: var(--ax-spacing-3);
+  align-items: center;
+
+  @media (forced-colors: active) {
+    border: 1px solid canvastext;
+    background-color: canvas;
+    color: canvastext;
+  }
+}
+
+.navds-alert__wrapper--maxwidth {
+  max-width: 43.5rem;
+}
+
+.navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--ax-font-line-height-xlarge);
+}
+
+.navds-alert--small {
+  padding: var(--ax-spacing-2) var(--ax-spacing-4);
+  gap: var(--ax-spacing-2);
+
+  > .navds-alert__icon {
+    margin-block-start: 0;
+    height: var(--ax-font-line-height-large);
+  }
+}
+
+/* ----------------------------- Alert variants ----------------------------- */
+.navds-alert--info {
+  border-color: var(--ax-border-info);
+  background-color: var(--ax-bg-info-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-info-icon);
+  }
+}
+
+.navds-alert--success {
+  border-color: var(--ax-border-success);
+  background-color: var(--ax-bg-success-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-success-icon);
+  }
+}
+
+.navds-alert--warning {
+  border-color: var(--ax-border-warning);
+  background-color: var(--ax-bg-warning-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-warning-icon);
+  }
+}
+
+.navds-alert--error {
+  border-color: var(--ax-border-danger);
+  background-color: var(--ax-bg-danger-moderate);
+
+  > .navds-alert__icon {
+    color: var(--ax-text-danger-icon);
+  }
+}
+
+/* ----------------------------- Alert fullwidth ---------------------------- */
+.navds-alert--full-width {
+  border-radius: 0;
+}
+
+/* ------------------------------ Alert inline ------------------------------ */
+.navds-alert--inline {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+/* ------------------------- Alert with close button ------------------------ */
+.navds-alert__button-wrapper {
+  align-self: flex-start;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+}
+
+.navds-alert--close-button {
+  > .navds-alert__wrapper {
+    margin-block-start: var(--ax-spacing-05);
+  }
+
+  > .navds-alert__icon {
+    margin-block-start: var(--ax-spacing-05);
+  }
+
+  &.navds-alert--small {
+    align-items: flex-start;
+
+    > .navds-alert__wrapper {
+      margin-block-start: var(--ax-spacing-1);
+    }
+
+    > .navds-alert__icon {
+      margin-block-start: var(--ax-spacing-1);
+    }
+  }
+}
@@ -0,0 +1,129 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2");
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans 3";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Legacy support */
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400 600;
+  font-display: swap;
+  src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
@@ -0,0 +1,75 @@
+/* ==========================================================================
+   Print styles copied from https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+   Inlined to avoid the additional HTTP request:
+   https://www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: #fff !important;
+    color: #000 !important;
+
+    /* Black prints faster */
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /*
+     * Don't show links that are fragment identifiers,
+     * or use the `javascript:` pseudo protocol
+     */
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+
+  /*
+     * Printing Tables:
+     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+     */
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
@@ -0,0 +1,148 @@
+/* Modern-normalize: https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css */
+
+/* Better box-model */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.15; /* Correct the line height in all browsers. */
+  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
+  tab-size: 4; /* Use a more readable tab size (opinionated). */
+}
+
+body {
+  margin: 0; /* Remove the margin in all browsers. */
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+small {
+  font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+table {
+  border-color: currentColor;
+}
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+legend {
+  padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+progress {
+  vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+summary {
+  display: list-item;
+}
@@ -0,0 +1,15 @@
+.navds-theme {
+  color: var(--ax-text-default);
+
+  &[data-background="true"] {
+    background-color: var(--ax-bg-default);
+  }
+
+  &.light {
+    color-scheme: light;
+  }
+
+  &.dark {
+    color-scheme: dark;
+  }
+}
@@ -0,0 +1,65 @@
+[hidden] {
+  display: none !important;
+}
+
+/* https://web.dev/prefers-reduced-motion/ */
+@media (prefers-reduced-motion: reduce) {
+  *:not(.navds-loader *, .navds-loader, .navds-progress-bar *, .navds-progress-bar),
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
+
+/*
+ * From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+ *
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ *    causes content to wrap 1 word per line:
+ *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.sr-only,
+.navds-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/*
+* From https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css
+*
+* Extends the .sr-only class to allow the element
+* to be focusable when navigated to via the keyboard:
+* https://www.drupal.org/node/897638
+*/
+
+.sr-only.focusable:active,
+.sr-only.focusable:focus,
+.navds-sr-only.focusable:active,
+.navds-sr-only.focusable:focus {
+  clip: auto;
+  clip-path: none;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  white-space: inherit;
+  width: auto;
+}
@@ -0,0 +1,322 @@
+.navds-button {
+  padding: var(--ax-spacing-3) var(--ax-spacing-5);
+  border-radius: var(--ax-border-radius-medium);
+  display: inline-flex;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background: none;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-button--small {
+  padding: var(--ax-spacing-1) var(--ax-spacing-3);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+.navds-button--xsmall {
+  padding: var(--ax-spacing-05) var(--ax-spacing-2);
+  gap: var(--ax-spacing-1);
+}
+
+.navds-button--icon-only {
+  padding: var(--ax-spacing-3);
+}
+
+.navds-button--small.navds-button--icon-only {
+  padding: var(--ax-spacing-1);
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  padding: var(--ax-spacing-05);
+}
+
+.navds-button:focus-visible {
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: 2px;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-button:focus {
+    outline: 2px solid var(--ax-border-focus);
+  }
+}
+
+.navds-button__icon {
+  font-size: 1.5rem;
+  display: flex;
+
+  --__axc-button-icon-margin: -4px;
+}
+
+.navds-button__icon:first-child {
+  margin-left: var(--__axc-button-icon-margin);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--__axc-button-icon-margin);
+}
+
+:where(.navds-button--xsmall, .navds-button--small) .navds-button__icon {
+  --__axc-button-icon-margin: -2px;
+
+  font-size: 1.25rem;
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--ax-bg-accent-strong);
+  color: var(--ax-text-accent-contrast);
+}
+
+@media (forced-colors: active) {
+  .navds-button.navds-button--primary {
+    background-color: highlight;
+    color: highlighttext;
+  }
+
+  .navds-button.navds-button--primary span {
+    forced-color-adjust: none;
+  }
+}
+
+.navds-button--primary:hover {
+  background-color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-accent-strong);
+}
+
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ax-bg-neutral-strong);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ax-bg-neutral-strong-hover);
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-neutral-strong);
+}
+
+/**************************
+* .navds-button--secondary *
+ **************************/
+
+.navds-button--secondary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+  box-shadow: inset 0 0 0 2px var(--ax-border-accent);
+}
+
+.navds-button--secondary:hover {
+  background-color: var(--ax-bg-accent-moderate-hoverA);
+  color: var(--ax-text-accent-strong);
+  box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+}
+
+.navds-button--secondary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+  box-shadow: none;
+}
+
+.navds-button--secondary:where(:disabled, .navds-button--disabled),
+.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  background-color: transparent;
+  color: var(--ax-text-neutral);
+  box-shadow: inset 0 0 0 2px var(--ax-border-neutral);
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+  color: var(--ax-text-neutral-strong);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ax-text-neutral-contrast);
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-default);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--ax-border-strong);
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  background-color: transparent;
+  color: var(--ax-text-accent);
+}
+
+.navds-button--tertiary:hover {
+  background-color: var(--ax-bg-accent-hoverA);
+  color: var(--ax-text-accent-strong);
+}
+
+.navds-button--tertiary:active {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+}
+
+.navds-button--tertiary:active:hover {
+  background-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-button--tertiary:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-accent);
+  background: none;
+  box-shadow: none;
+}
+
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ax-text-neutral);
+}
+
+.navds-button--tertiary-neutral:hover {
+  background-color: var(--ax-bg-neutral-hoverA);
+  color: var(--ax-text-neutral-strong);
+}
+
+.navds-button--tertiary-neutral:active {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ax-text-default);
+  background: none;
+  box-shadow: none;
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--ax-bg-danger-strong);
+  color: var(--ax-text-danger-contrast);
+}
+
+.navds-button--danger:hover {
+  background-color: var(--ax-bg-danger-strong-hover);
+}
+
+.navds-button--danger:active {
+  background-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-button--danger:active:where(:disabled, .navds-button--disabled),
+.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ax-bg-danger-strong);
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:where(:disabled, .navds-button--disabled) {
+  cursor: not-allowed;
+}
+
+.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  opacity: 0.3;
+}
+
+/* Loader overrides */
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: currentColor;
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: rgb(255 255 255 / 0.3);
+}
+
+@media (forced-colors: active) {
+  .navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+
+  .navds-button {
+    border: 1px solid transparent;
+    color: ButtonText;
+    background-color: ButtonFace;
+  }
+
+  .navds-button:hover {
+    background-color: highlighttext;
+    border-color: highlight;
+    color: highlight;
+    box-shadow: none;
+  }
+
+  .navds-button:hover span {
+    forced-color-adjust: none;
+  }
+
+  .navds-button .navds-loader .navds-loader__foreground {
+    stroke: canvas;
+  }
+
+  .navds-button--primary .navds-loader .navds-loader__background,
+  .navds-button--danger .navds-loader .navds-loader__background {
+    stroke: canvastext;
+  }
+}
@@ -0,0 +1,115 @@
+.navds-chat {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--ax-spacing-3);
+  max-width: 40.75rem;
+}
+
+.navds-chat--right {
+  flex-direction: row-reverse;
+
+  & .navds-chat__bubble-wrapper {
+    align-items: flex-end;
+  }
+
+  & .navds-chat__bubble {
+    border-radius: var(--ax-border-radius-xlarge);
+    border-bottom-right-radius: var(--ax-border-radius-small);
+  }
+}
+
+/* ------------------------------- Chat avatar ------------------------------ */
+.navds-chat__avatar {
+  align-items: center;
+  background-color: var(--ax-bg-raised);
+  border-radius: var(--ax-border-radius-full);
+  border: 1px solid var(--ax-border-subtleA);
+  color: var(--ax-text-default);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 2.5rem;
+  width: 2.5rem;
+  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
+
+  & svg {
+    align-self: center;
+    width: 100%;
+    max-width: 1.5rem;
+    max-height: 1.5rem;
+  }
+}
+
+/* ------------------------------- Chat bubble ------------------------------ */
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ax-spacing-3);
+}
+
+.navds-chat__bubble {
+  padding: var(--ax-spacing-4);
+  width: fit-content;
+  background-color: var(--ax-bg-raised);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ax-spacing-2);
+  border-radius: var(--ax-border-radius-xlarge);
+  border-bottom-left-radius: var(--ax-border-radius-small);
+  border: 1px solid var(--ax-border-subtleA);
+}
+
+.navds-chat--small .navds-chat__bubble {
+  padding: var(--ax-spacing-3);
+}
+
+/* -------------------------- Chat bubble variants -------------------------- */
+.navds-chat--info {
+  & .navds-chat__bubble,
+  & .navds-chat__avatar {
+    background-color: var(--ax-bg-info-raised);
+  }
+}
+
+.navds-chat--neutral {
+  & .navds-chat__bubble,
+  & .navds-chat__avatar {
+    background-color: var(--ax-bg-neutral-raised);
+  }
+}
+
+/* ------------------------------ Chat top text ----------------------------- */
+.navds-chat__top-text {
+  color: var(--ax-text-default);
+  display: flex;
+  gap: var(--ax-spacing-2);
+  align-items: baseline;
+  font-weight: normal;
+  margin: 0;
+}
+
+.navds-chat--right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}
@@ -0,0 +1,176 @@
+.navds-chips {
+  display: flex;
+  gap: var(--ax-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.navds-chips li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.navds-chips__chip {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-05);
+  margin: 0;
+  padding: 0 var(--ax-spacing-3);
+  text-decoration: none;
+  border-radius: var(--ax-border-radius-full);
+  min-height: 2rem;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+.navds-chips--small {
+  .navds-chips__chip {
+    min-height: 1.5rem;
+    padding: 0 var(--ax-spacing-2);
+  }
+
+  .navds-chips__toggle-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .navds-chips__toggle--with-checkmark {
+    padding-left: var(--ax-spacing-1);
+  }
+
+  .navds-chips__removable-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .navds-chips__removable-icon > svg {
+    width: 1rem;
+  }
+
+  .navds-chips--icon-right {
+    padding-right: var(--ax-spacing-05);
+  }
+}
+
+/* ------------------------------ Chips Toggle ------------------------------ */
+.navds-chips__toggle--action {
+  box-shadow: inset 0 0 0 1px var(--ax-border-accent-subtleA);
+  background-color: var(--ax-bg-accent-moderate);
+  color: var(--ax-text-default);
+
+  &:hover {
+    background-color: var(--ax-bg-accent-moderate-hover);
+  }
+
+  &[data-pressed="true"] {
+    box-shadow: none;
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+
+    &:hover {
+      background-color: var(--ax-bg-accent-strong-hover);
+    }
+  }
+}
+
+.navds-chips__toggle--neutral {
+  box-shadow: inset 0 0 0 1px var(--ax-border-neutral-subtleA);
+  background-color: var(--ax-bg-neutral-moderate);
+  color: var(--ax-text-default);
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hover);
+  }
+
+  &[data-pressed="true"] {
+    box-shadow: none;
+    background-color: var(--ax-bg-neutral-strong-pressed);
+    color: var(--ax-text-neutral-contrast);
+
+    &:hover {
+      background-color: var(--ax-bg-neutral-strong-hover);
+    }
+  }
+}
+
+.navds-chips--medium .navds-chips__toggle--with-checkmark {
+  padding-left: var(--ax-spacing-1-alt);
+}
+
+/* -------------------------- start old CSS --------------------------  */
+
+/* ----------------------------- Chips removable ---------------------------- */
+.navds-chips__removable {
+  gap: 0;
+}
+
+.navds-chips__removable--action {
+  background: var(--ax-bg-accent-strong-pressed);
+  color: var(--ax-text-accent-contrast);
+
+  &:hover {
+    background: var(--ax-bg-accent-strong-hover);
+  }
+}
+
+.navds-chips__removable--neutral {
+  background: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+
+  &:hover {
+    background: var(--ax-bg-neutral-strong-hover);
+  }
+}
+
+.navds-chips__removable-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.25rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--ax-border-radius-full);
+}
+
+.navds-chips--icon-left {
+  padding-left: var(--ax-spacing-1-alt);
+}
+
+.navds-chips--icon-right {
+  padding-right: var(--ax-spacing-1-alt);
+}
+
+@media (forced-colors: active) {
+  .navds-chips__chip {
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: highlighttext;
+      color: highlight;
+    }
+  }
+
+  .navds-chips__chip:where([data-pressed="true"], :active, :hover) > span {
+    forced-color-adjust: none;
+  }
+
+  .navds-chips__toggle[data-pressed="true"] {
+    background-color: selecteditem;
+    color: selecteditemtext;
+    border: 1px solid selecteditem;
+
+    &:hover {
+      background-color: selecteditemtext;
+      color: selecteditem;
+    }
+  }
+}
@@ -0,0 +1,183 @@
+.navds-copybutton {
+  --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-5) var(--ax-spacing-3) var(--ax-spacing-4);
+
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  border-radius: var(--ax-border-radius-medium);
+  padding: var(--__axc-copybutton-padding);
+  display: grid;
+  place-content: center;
+  background-color: transparent;
+  transition: color 0.2s cubic-bezier(0.05, 0.7, 0.1, 1);
+
+  &.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-3);
+  }
+
+  &.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-3) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-5);
+  }
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &:disabled:hover {
+    background-color: transparent;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-copybutton {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+
+    &:disabled {
+      opacity: 1;
+      border-color: GrayText;
+    }
+  }
+}
+
+/* -------------------------- CopyButton small size ------------------------- */
+.navds-copybutton--small {
+  min-height: 2rem;
+  min-width: 2rem;
+
+  --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-3) var(--ax-spacing-1) var(--ax-spacing-2);
+
+  &.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-1) var(--ax-spacing-2) var(--ax-spacing-1) var(--ax-spacing-3);
+  }
+
+  &.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-1);
+  }
+
+  & .navds-copybutton__icon {
+    font-size: 1.25rem;
+  }
+
+  & > .navds-copybutton__content {
+    gap: var(--ax-spacing-1-alt);
+  }
+}
+
+/* ------------------------- CopyButton xsmall size ------------------------- */
+.navds-copybutton--xsmall {
+  min-height: 1.5rem;
+  min-width: 1.5rem;
+
+  --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-2) var(--ax-spacing-05) var(--ax-spacing-1);
+
+  &.navds-copybutton--icon-right {
+    --__axc-copybutton-padding: var(--ax-spacing-05) var(--ax-spacing-1) var(--ax-spacing-05) var(--ax-spacing-2);
+  }
+
+  &.navds-copybutton--icon-only {
+    --__axc-copybutton-padding: var(--ax-spacing-05);
+  }
+
+  & .navds-copybutton__icon {
+    font-size: 1.25rem;
+  }
+
+  & > .navds-copybutton__content {
+    gap: var(--ax-spacing-1);
+  }
+}
+
+/* ----------------------------- CopyButton Icon ---------------------------- */
+.navds-copybutton__icon {
+  font-size: 1.5rem;
+  display: flex;
+
+  &:first-of-type {
+    margin-left: -0.25rem;
+  }
+
+  &:last-of-type {
+    margin-right: -0.25rem;
+  }
+
+  &:only-child {
+    margin: 0;
+  }
+}
+
+.navds-copybutton--active .navds-copybutton__icon {
+  animation: akselCopyButtonIconAnimation 2s cubic-bezier(0.05, 0.7, 0.1, 1);
+}
+
+@keyframes akselCopyButtonIconAnimation {
+  8% {
+    transform: translateY(0);
+  }
+
+  17% {
+    transform: translateY(-10%);
+  }
+
+  25% {
+    transform: translateY(2%);
+  }
+
+  30% {
+    transform: translateY(0);
+  }
+}
+
+/* ---------------------------- CopyButton Action --------------------------- */
+.navds-copybutton--action {
+  color: var(--ax-text-accent);
+
+  &.navds-copybutton--active {
+    color: var(--ax-text-success);
+
+    &:hover {
+      color: var(--ax-text-success-strong);
+    }
+  }
+
+  &:hover {
+    color: var(--ax-text-accent-strong);
+  }
+
+  &:disabled {
+    color: var(--ax-text-accent);
+  }
+}
+
+/* --------------------------- CopyButton Neutral --------------------------- */
+.navds-copybutton--neutral {
+  color: var(--ax-text-subtle);
+
+  &:hover,
+  &.navds-copybutton--active {
+    color: var(--ax-text-default);
+  }
+
+  &:disabled {
+    color: var(--ax-text-subtle);
+  }
+}
+
+.navds-copybutton__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ax-spacing-2);
+}
@@ -0,0 +1,344 @@
+.navds-date {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+}
+
+.navds-date .rdp-day_range_middle.rdp-day_disabled {
+  color: var(--ac-date-middle-text, var(--a-text-on-action));
+  background: var(--ac-date-middle-bg, var(--a-surface-action-selected));
+}
+
+.navds-date .rdp-month,
+.navds-date.rdp-month {
+  display: grid;
+  gap: var(--a-spacing-5);
+}
+
+.navds-date__caption-label {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-head_cell {
+  text-transform: capitalize;
+  font-size: var(--a-font-size-small);
+}
+
+.navds-date .rdp-weeknumber {
+  font-size: var(--a-font-size-small);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--a-border-radius-medium);
+  margin: var(--a-spacing-2);
+  color: var(--a-text-subtle);
+}
+
+.navds-date .rdp-weeknumber.rdp-button {
+  width: 2rem;
+  height: 2rem;
+  box-shadow: 0 0 0 1px var(--a-border-default);
+  color: var(--a-text-subtle);
+  font-size: var(--a-font-size-small);
+}
+
+.navds-date .rdp-weeknumber.rdp-button:active {
+  background-color: var(--a-surface-action-active);
+  color: var(--a-text-on-action);
+  box-shadow: none;
+}
+
+.navds-date__caption__month .navds-select__container select {
+  text-transform: capitalize;
+}
+
+.navds-date .rdp-button {
+  all: unset;
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  text-align: center;
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start {
+  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
+    var(--a-border-radius-xlarge);
+}
+
+.navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
+    var(--a-border-radius-medium);
+}
+
+.navds-date .rdp-day_range_start.rdp-day_range_end {
+  border-radius: var(--a-border-radius-xlarge);
+}
+
+.navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus-visible,
+.navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus-visible {
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button:not(.rdp-day_selected, [disabled]):focus,
+  .navds-date .navds-date__month-button:not(.rdp-day_selected, [disabled]):focus {
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
+.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
+  .navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
+    box-shadow:
+      inset 0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Monthpicker */
+.navds-date__month-button {
+  all: unset;
+  text-align: center;
+  width: 3rem;
+  height: 3rem;
+  text-transform: capitalize;
+  border-radius: var(--a-border-radius-medium);
+  cursor: pointer;
+}
+
+.navds-date__month-button:focus-visible,
+.navds-monthpicker__caption-button:focus-visible {
+  box-shadow: var(--a-shadow-focus);
+  z-index: 1;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__month-button:focus,
+  .navds-monthpicker__caption-button:focus {
+    box-shadow: var(--a-shadow-focus);
+    z-index: 1;
+  }
+}
+
+.navds-date__year-label {
+  display: flex;
+  align-items: center;
+}
+
+.navds-date__wrapper,
+.navds-date__standalone-wrapper {
+  height: fit-content;
+  width: fit-content;
+}
+
+.navds-date .navds-date__field {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-date__field-wrapper {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  width: fit-content;
+}
+
+.navds-date .rdp-day_selected,
+.navds-monthpicker__month--selected {
+  color: var(--ac-date-selected-text, var(--a-text-on-action));
+  background: var(--ac-date-selected-bg, var(--a-surface-action-selected));
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_disabled {
+  cursor: not-allowed;
+  text-decoration: line-through;
+  background-color: var(--ac-date-disabled-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-date-disabled-text, var(--a-text-subtle));
+}
+
+.navds-date .rdp-button:where(:not(.rdp-day_selected, [disabled])):hover,
+.navds-date__month-button:where(:not(.rdp-day_selected, [disabled])):hover {
+  background: var(--ac-date-hover-bg, var(--a-surface-action-subtle-hover));
+  cursor: pointer;
+}
+
+.navds-date .rdp-day_today {
+  box-shadow: 0 0 0 1px var(--ac-date-today-border, var(--a-border-action-selected));
+  text-decoration: underline;
+}
+
+.navds-date__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--a-spacing-1);
+  padding-inline: var(--a-spacing-1);
+}
+
+.navds-date__caption-button,
+.navds-date__caption-button:disabled,
+.navds-date__caption-button:disabled:hover {
+  color: var(--ac-date-caption-text, var(--a-text-default));
+}
+
+.navds-date__field-input {
+  padding-right: var(--a-spacing-12);
+}
+
+.navds-form-field--small .navds-date__field-input {
+  padding-right: var(--a-spacing-8);
+}
+
+/* Error-handling */
+.navds-date__field--error .navds-date__field-input:not(:hover, :disabled) {
+  border-color: var(--ac-date-input-error-border, var(--a-border-danger));
+  box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
+}
+
+.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field--error .navds-date__field-input:focus:not(:hover, :disabled) {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)),
+      var(--a-shadow-focus);
+  }
+}
+
+.navds-date__field-button {
+  position: absolute;
+  right: 0.0625rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ac-date-input-button-text, var(--a-text-default));
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
+  padding: var(--a-spacing-3);
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  height: calc(100% - 0.125rem);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.navds-form-field--small .navds-date__field-button {
+  padding: var(--a-spacing-1);
+}
+
+.navds-date__field-button:hover:where(:not([disabled])) {
+  color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-form-field--disabled .navds-date__field-button {
+  opacity: 1;
+  cursor: not-allowed;
+}
+
+.navds-date__field-button:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-medium);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-date__field-button:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-date__caption__year {
+  width: 5rem;
+}
+
+.navds-date .rdp-day_outside {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Readonly */
+.navds-date__field--readonly .navds-date__field-button {
+  cursor: default;
+  color: var(--a-gray-500);
+}
+
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+}
+
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-05);
+}
+
+.navds-date__week-wrapper {
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.navds-date__modal.navds-date {
+  padding: 0;
+}
+
+.navds-date__modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  padding: var(--a-spacing-4);
+  gap: var(--a-spacing-2);
+}
+
+.navds-date__modal-body > .navds-date {
+  padding: 0;
+}
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
+
+@media (min-width: 480px) {
+  .navds-date {
+    padding: var(--a-spacing-5) var(--a-spacing-4);
+  }
+
+  .navds-date__modal-body {
+    padding: var(--a-spacing-6);
+  }
+
+  .navds-date__caption {
+    gap: var(--a-spacing-2);
+  }
+
+  .navds-date .rdp-button,
+  .navds-date__caption-button {
+    width: 3rem;
+    height: 3rem;
+  }
+}
@@ -0,0 +1,91 @@
+.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, .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));
+  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-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: 2px solid transparent;
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 2px var(--a-border-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-dropdown__item:focus {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    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;
+}
+
+@media (forced-colors: active) {
+  .navds-dropdown__item:hover {
+    color: highlight;
+  }
+
+  .navds-dropdown__item:disabled {
+    opacity: 1;
+    color: graytext;
+  }
+}
@@ -0,0 +1,183 @@
+.navds-expansioncard {
+  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-6);
+
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--ax-bg-raised);
+  height: fit-content;
+  border: 1px solid var(--ax-border-default);
+
+  &:has(.navds-expansioncard__header:hover) {
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
+  }
+}
+
+/* ------------------------ ExpansionCard Small-size ------------------------ */
+.navds-expansioncard--small {
+  --__axc-expansioncard-padding-block: var(--ax-spacing-3);
+  --__axc-expansioncard-padding-inline: var(--ax-spacing-4);
+
+  & > .navds-expansioncard__header .navds-expansioncard__title--small {
+    margin-top: var(--ax-spacing-05);
+  }
+
+  & :is(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+    margin-top: 0;
+  }
+
+  & > .navds-expansioncard__header > .navds-expansioncard__header-button {
+    min-height: 2rem;
+    min-width: 2rem;
+  }
+
+  & .navds-expansioncard__content {
+    --__axc-expansioncard-padding-block: var(--ax-spacing-4);
+  }
+}
+
+/* -------------------------- ExpansionCard Header -------------------------- */
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--ax-spacing-4);
+  padding: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+  border-radius: var(--__axc-expansioncard-border-radius);
+  background-color: transparent;
+  position: relative;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: var(--ax-bg-neutral-raised-hover);
+  }
+
+  &[data-open="true"] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    /* Divider between header and content */
+    &::after {
+      content: "";
+      background-color: var(--ax-border-subtle);
+      bottom: 0;
+      left: var(--__axc-expansioncard-padding-inline);
+      height: 1px;
+      width: calc(100% - 2 * var(--__axc-expansioncard-padding-inline));
+      position: absolute;
+      opacity: 1;
+    }
+
+    &:hover::after {
+      opacity: 0;
+    }
+  }
+}
+
+/* --------------------- ExpansionCard Header typography -------------------- */
+.navds-expansioncard__title--small {
+  margin-top: 0.625rem;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--ax-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--ax-spacing-1);
+}
+
+/* ----------------------- ExpansionCard Header Button ---------------------- */
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ax-border-radius-large);
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      outline: 2px solid var(--ax-border-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  /* Makes the whole header clickable */
+  &::after {
+    inset: 0;
+    z-index: 1;
+    position: absolute;
+    content: "";
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+  }
+}
+
+.navds-expansioncard__header:hover > .navds-expansioncard__header-button {
+  background-color: var(--ax-bg-neutral-moderate-hoverA);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.navds-expansioncard__header[data-open="true"] .navds-expansioncard__header-chevron {
+  transform: rotateX(-180deg);
+}
+
+/* Even if animation always takes 250ms, the perceived effect of current timing function makes the 'closing'-animation take longer */
+.navds-expansioncard__header[data-open="false"] .navds-expansioncard__header-chevron {
+  transition-duration: 400ms;
+}
+
+/* -------------------------- ExpansionCard Content ------------------------- */
+.navds-expansioncard__content {
+  --__axc-expansioncard-padding-block: var(--ax-spacing-5);
+
+  border-end-end-radius: var(--__axc-expansioncard-border-radius);
+  border-end-start-radius: var(--__axc-expansioncard-border-radius);
+  padding-inline: var(--__axc-expansioncard-padding-inline);
+  padding-block: 0;
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-property: visibility, padding-block, grid-template-rows;
+  overflow: hidden;
+
+  &[data-open="true"] {
+    grid-template-rows: 1fr;
+    visibility: visible;
+    padding-block: var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);
+
+    & .navds-expansioncard__content-inner {
+      opacity: 1;
+    }
+  }
+}
+
+.navds-expansioncard__content-inner {
+  min-height: 0;
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* ---------------- ExpansionCard No Animation (defaultOpen) ---------------- */
+.navds-expansioncard--no-animation {
+  & :is(.navds-expansioncard__content, .navds-expansioncard__content-inner) {
+    transition: none;
+  }
+}
@@ -0,0 +1,441 @@
+.navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.5rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-2);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-3);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-3);
+  --__ac-combobox-border-width: 1px;
+  --__ac-combobox-input-height: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+}
+
+.navds-form-field--small .navds-combobox__wrapper {
+  --__ac-combobox-icon-size: 1.25rem;
+  --__ac-combobox-wrapper-inner-padding: var(--a-spacing-1);
+  --__ac-combobox-list-item-padding-block: var(--a-spacing-1-alt);
+  --__ac-combobox-list-item-padding-inline: var(--a-spacing-2);
+  --__ac-combobox-input-height: 1.5rem;
+}
+
+.navds-combobox--disabled {
+  opacity: 0.3;
+}
+
+.navds-combobox--disabled .navds-combobox__wrapper *:hover {
+  cursor: not-allowed;
+}
+
+.navds-combobox--disabled .navds-text-field__input {
+  border: 1px solid var(--a-border-default);
+}
+
+.navds-combobox--disabled .navds-combobox__selected-options {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly {
+  pointer-events: none;
+}
+
+.navds-combobox--readonly .navds-combobox__button-toggle-list {
+  color: var(--a-gray-500);
+}
+
+.navds-combobox--readonly .navds-text-field__input,
+.navds-combobox--readonly .navds-combobox__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+}
+
+.navds-combobox__button-clear svg,
+.navds-combobox__button-toggle-list svg,
+.navds-combobox__list svg {
+  width: var(--__ac-combobox-icon-size);
+  height: var(--__ac-combobox-icon-size);
+}
+
+.navds-combobox__wrapper-inner.navds-text-field__input {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-block: calc(var(--__ac-combobox-wrapper-inner-padding) - var(--__ac-combobox-border-width));
+  padding-inline: var(--__ac-combobox-wrapper-inner-padding);
+}
+
+.navds-combobox__wrapper-inner > :first-child {
+  flex: 2;
+}
+
+.navds-combobox__wrapper-inner > :last-child {
+  display: flex;
+  flex-flow: row nowrap;
+}
+
+.navds-combobox__wrapper-inner:hover {
+  cursor: text;
+}
+
+.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
+}
+
+.navds-combobox--error
+  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
+    var(--a-shadow-focus);
+}
+
+.navds-combobox__selected-options {
+  gap: var(--__ac-combobox-wrapper-inner-padding);
+  align-items: center;
+}
+
+.navds-combobox__selected-options > li {
+  margin: auto 0;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-combobox__selected-options > li:last-of-type {
+  display: flex;
+  flex: 1;
+}
+
+.navds-combobox__selected-options--no-bg {
+  font-family: inherit;
+  font-size: var(--a-font-size-large);
+  font-weight: var(--a-font-weight-regular);
+  letter-spacing: 0;
+  line-height: var(--a-font-line-height-large);
+  margin: 0;
+  padding-left: 0.25rem;
+}
+
+.navds-combobox__input-wrapper {
+  width: 100%;
+}
+
+.navds-combobox__input {
+  flex: 1;
+  border: none;
+  padding: 0;
+  margin: 0;
+  margin-left: var(--a-spacing-1);
+  min-width: 10ch;
+  width: 100%;
+  height: var(--__ac-combobox-input-height);
+}
+
+.navds-combobox__input--hide-caret {
+  caret-color: transparent;
+}
+
+.navds-combobox__input:focus-visible {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+  box-shadow: var(--a-shadow-focus);
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+}
+
+.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
+  box-shadow: none;
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__input:focus {
+    outline: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+@supports not selector(:has) {
+  .navds-combobox--focused .navds-combobox__wrapper-inner {
+    box-shadow: var(--a-shadow-focus);
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
+    box-shadow: none;
+    outline: none;
+  }
+}
+
+.navds-combobox__button-clear {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-combobox-clear-icon, var(--a-text-subtle));
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.navds-combobox__button-toggle-list {
+  border-radius: var(--a-border-radius-medium);
+  color: var(--a-text-default);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1rem;
+  padding: 0;
+}
+
+.navds-combobox__button-clear:active:hover,
+.navds-combobox__button-toggle-list:active:hover {
+  color: var(--ac-combobox-clear-icon-active, var(--a-text-action));
+}
+
+.navds-combobox__button-clear:hover,
+.navds-combobox__button-toggle-list:hover {
+  color: var(--ac-combobox-clear-icon-hover, var(--a-text-action-selected));
+}
+
+.navds-combobox__button-toggle-list:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--a-surface-default) inset,
+    var(--a-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-combobox__button-toggle-list:focus {
+    box-shadow:
+      0 0 0 1px var(--a-surface-default) inset,
+      var(--a-shadow-focus);
+    box-shadow: var(--a-shadow-focus);
+    outline: none;
+  }
+}
+
+/* dropdown & non selectable dropdown items */
+
+.navds-combobox__list {
+  max-height: 290px;
+  overflow-y: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: var(--a-z-index-popover);
+  top: calc(100% + var(--a-spacing-2));
+  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--a-shadow-small);
+  border-radius: var(--a-border-radius-medium);
+  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
+  color: var(--ac-combobox-list-text, var(--a-text-default));
+  overscroll-behavior: contain;
+}
+
+.navds-combobox__list--closed {
+  display: none;
+}
+
+.navds-combobox__list_non-selectables {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.navds-combobox__list-item,
+.navds-combobox__list-item--loading,
+.navds-combobox__list-item--no-options,
+.navds-combobox__list-item--new-option,
+.navds-combobox__list-item--max-selected {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-block: var(--__ac-combobox-list-item-padding-block);
+  padding-inline: var(--__ac-combobox-list-item-padding-inline);
+  width: 100%;
+  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--loading {
+  justify-content: center;
+  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--max-selected {
+  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
+  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
+  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
+}
+
+.navds-combobox__list_non-selectables:hover {
+  cursor: default;
+}
+
+/* ul-list and selectable li-items */
+
+.navds-combobox__list-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  background-color: inherit;
+  align-items: flex-start;
+}
+
+.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover
+  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
+  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
+  cursor: pointer;
+  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
+  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
+}
+
+.navds-combobox__list-item[data-no-focus="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.navds-combobox__list-item--selected {
+  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
+}
+
+.navds-combobox__list-item--selected p {
+  font-weight: var(--a-font-weight-bold);
+}
+
+.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
+  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
+}
+
+.navds-combobox__list-item--new-option {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle);
+  cursor: pointer;
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+  border-bottom: 1px solid var(--a-border-divider);
+  background: var(--a-surface-neutral-subtle-hover);
+}
+
+.navds-combobox__list-item--new-option--focus {
+  box-shadow:
+    var(--a-shadow-focus) inset,
+    var(--a-border-action) 0 0 0 5px inset;
+  border-radius: calc(var(--a-border-radius-medium) - 1px);
+}
+
+.navds-combobox__list-item mark {
+  background-color: transparent;
+  font-weight: bold;
+}
+
+/* Mobile */
+
+@media (max-width: 479px) {
+  .navds-combobox__button-toggle-list {
+    right: 0.5rem;
+  }
+
+  /* add bigger click area for input */
+  .navds-combobox__input {
+    min-width: min-content;
+    padding: 0.75rem 0;
+  }
+
+  .navds-combobox__selected-options {
+    gap: var(--a-spacing-1);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-combobox__button-clear:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
+    outline-color: highlight;
+  }
+
+  .navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover
+    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list-item[data-no-focus="true"] {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .navds-combobox__list-item--selected {
+    background-color: selecteditem;
+    color: selecteditemtext;
+  }
+
+  .navds-combobox__list-item--selected > * {
+    forced-color-adjust: none;
+  }
+
+  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
+  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
+    border-left-color: highlight;
+    color: highlight;
+  }
+
+  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
+    color: highlight;
+  }
+
+  .navds-combobox__list-item--new-option--focus {
+    outline: 2px solid highlight;
+    outline-offset: -3px;
+  }
+}
@@ -0,0 +1,53 @@
+.navds-confirmation-panel__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
+  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
+  transition: background-color linear 100ms;
+  justify-self: stretch;
+  position: relative;
+}
+
+.navds-confirmation-panel__content {
+  max-width: 80ch;
+}
+
+.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
+  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
+  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
+}
+
+.navds-confirmation-panel--error .navds-confirmation-panel__inner {
+  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
+  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
+}
+
+.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
+  color: var(--a-text-default);
+}
+
+@media (forced-colors: active) {
+  .navds-confirmation-panel__inner::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    border-left: 8px solid;
+    border-color: orange;
+    forced-color-adjust: none;
+    border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+    border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  }
+
+  .navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
+    border-color: green;
+  }
+
+  .navds-confirmation-panel--error .navds-confirmation-panel__inner::before {
+    border-color: red;
+  }
+}
@@ -0,0 +1,49 @@
+.navds-error-summary {
+  background-color: var(--ax-bg-default);
+  padding: var(--ax-spacing-5);
+  border: 4px solid var(--ax-border-danger);
+  border-radius: var(--ax-border-radius-xlarge);
+  outline-offset: 2px;
+
+  &:focus-visible,
+  &:has(.navds-error-summary__heading:focus-visible) {
+    outline: 2px solid var(--ax-border-focus);
+  }
+}
+
+@supports not selector(:focus-visible) {
+  .navds-error-summary:focus {
+    outline: 2px solid var(--ax-border-focus);
+  }
+}
+
+.navds-error-summary--small {
+  padding: var(--ax-spacing-3);
+
+  & .navds-error-summary__heading {
+    scroll-margin-top: var(--ax-spacing-4);
+  }
+
+  & > .navds-error-summary__list {
+    margin: var(--ax-spacing-2) 0;
+    gap: var(--ax-spacing-2);
+    padding-left: var(--ax-spacing-5);
+  }
+}
+
+.navds-error-summary__heading {
+  scroll-margin-top: var(--ax-spacing-6);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.navds-error-summary__list {
+  margin: var(--ax-spacing-3) 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ax-spacing-3);
+  padding-left: var(--ax-spacing-6);
+  list-style: inherit;
+}
@@ -0,0 +1,43 @@
+.navds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.navds-fieldset > :not(:first-child, :empty) {
+  margin-top: var(--ax-spacing-2);
+}
+
+.navds-fieldset__description {
+  color: var(--ax-text-subtle);
+}
+
+.navds-fieldset > .navds-fieldset__description:not(:empty) {
+  margin-top: 0.125rem;
+}
+
+/* Applied when hideLegend is applied to fieldset */
+.navds-fieldset > .navds-sr-only + :not(:first-child, :empty) {
+  margin-top: 0;
+}
+
+.navds-fieldset__legend {
+  padding: 0;
+}
+
+.navds-fieldset--readonly > :where(.navds-fieldset__legend) {
+  display: inline-flex;
+}
+
+.navds-fieldset:disabled > .navds-fieldset__legend,
+.navds-fieldset:disabled > .navds-fieldset__description {
+  opacity: 0.3;
+}
+
+@media (forced-colors: active) {
+  .navds-fieldset:disabled > .navds-fieldset__legend,
+  .navds-fieldset:disabled > .navds-fieldset__description {
+    opacity: 1;
+  }
+}
@@ -0,0 +1,226 @@
+/* Makes it easier for user to use FileItem in semantic lists */
+.navds-file-upload {
+  & :is(ul, li) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+/* --------------------------- FileUpload Dropzone -------------------------- */
+.navds-dropzone__area {
+  --__axc-dropzone-background: var(--ax-bg-input);
+  --__axc-dropzone-padding: var(--ax-spacing-6);
+  --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+  --__axc-dropzone-animation-length-long: 400ms;
+  --__axc-dropzone-animation-length-short: 250ms;
+  --__axc-dropzone-animation-ease-out: cubic-bezier(0.3, 1, 0.3, 1);
+  --__axc-dropzone-animation-over-under: cubic-bezier(0.3, 1, 0.3, 1);
+
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--ax-spacing-4);
+  text-align: center;
+  padding: var(--__axc-dropzone-padding);
+  border: 1px dashed var(--ax-border-default);
+  border-radius: var(--ax-border-radius-xlarge);
+  background-color: var(--__axc-dropzone-background);
+  color: var(--ax-text-default);
+  transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
+  cursor: pointer;
+
+  &:hover:not([data-disabled="true"]) {
+    border-color: var(--ax-border-accent-strong);
+
+    & > .navds-dropzone__area-button {
+      color: var(--ax-text-accent-strong);
+      background-color: var(--ax-bg-accent-moderate-hover);
+      box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
+    }
+  }
+
+  &:active .navds-dropzone__area-button {
+    background-color: var(--ax-bg-accent-strong-pressed);
+    color: var(--ax-text-accent-contrast);
+    box-shadow: none;
+  }
+
+  &[data-disabled="true"] {
+    cursor: default;
+  }
+}
+
+.navds-dropzone--dragging {
+  & > .navds-dropzone__area {
+    --__axc-dropzone-background: var(--ax-bg-input);
+  }
+
+  & > .navds-dropzone__area::after {
+    color: var(--ax-text-accent-strong);
+    background-color: var(--ax-bg-accent-moderateA);
+    content: "";
+    inset: 0;
+    margin: -1px;
+    border: 1px dashed var(--ax-border-accent-strong);
+    position: absolute;
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+    border-radius: var(--ax-border-radius-xlarge);
+    animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
+      var(--__axc-dropzone-animation-ease-out);
+  }
+}
+
+@keyframes akselDropzoneDragoverAnimation {
+  0% {
+    -webkit-backdrop-filter: blur(0);
+    backdrop-filter: blur(0);
+    background-color: transparent;
+  }
+
+  70% {
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+  }
+
+  100% {
+    background-color: var(--ax-bg-accent-moderateA);
+  }
+}
+
+.navds-dropzone__area-icon {
+  display: grid;
+  padding: var(--__axc-dropzone-icon-padding);
+  visibility: hidden;
+}
+
+.navds-dropzone--error > .navds-dropzone__area {
+  border-color: transparent;
+  outline: 2px solid var(--ax-border-danger);
+  outline-offset: -1px;
+}
+
+.navds-dropzone__area-release {
+  top: var(--__axc-dropzone-padding);
+  display: grid;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  transition:
+    top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under),
+    transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
+}
+
+.navds-dropzone__area-release__icon {
+  display: grid;
+  padding: var(--__axc-dropzone-icon-padding);
+  border-radius: var(--ax-border-radius-full);
+  background-color: var(--ax-bg-neutral-moderateA);
+  transition:
+    background-color 300ms var(--__axc-dropzone-animation-ease-out),
+    font-size 300ms var(--__axc-dropzone-animation-ease-out);
+  font-size: 1.5rem;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__icon {
+  background-color: transparent;
+  font-size: 2rem;
+}
+
+.navds-dropzone__area-release__text {
+  visibility: hidden;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release > .navds-dropzone__area-release__text {
+  transition: visibility var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
+  visibility: visible;
+}
+
+.navds-dropzone--dragging .navds-dropzone__area-release {
+  color: var(--ax-text-accent-strong);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.navds-dropzone__area-disabled {
+  color: var(--ax-text-subtle);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--ax-spacing-2);
+}
+
+/* ----------------------------- FileUpload Item ---------------------------- */
+.navds-file-item__inner {
+  background-color: var(--ax-bg-raised);
+  border: 1px solid var(--ax-border-subtleA);
+  outline-offset: -1px;
+  transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+  border-radius: var(--ax-border-radius-xlarge);
+  padding: var(--ax-spacing-3);
+  display: flex;
+  gap: var(--ax-spacing-3);
+  align-items: flex-start;
+}
+
+.navds-file-item--error > .navds-file-item__inner {
+  outline: 2px solid var(--ax-border-danger);
+}
+
+.navds-file-item__icon {
+  background-color: var(--ax-bg-neutral-moderateA);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-full);
+  min-height: 2.5rem;
+  min-width: 2.5rem;
+  display: grid;
+  place-content: center;
+  transition: background-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
+
+  & > svg {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.navds-file-item__icon--loading {
+  background-color: transparent;
+}
+
+.navds-file-item__file-info {
+  word-break: break-word;
+}
+
+.navds-file-item__button {
+  margin-left: auto;
+}
+
+.navds-file-item__error {
+  color: var(--ax-text-danger);
+  display: grid;
+  transition-property: grid-template-rows, padding-top;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
+  overflow: hidden;
+  grid-template-rows: 0fr;
+
+  & .navds-file-item__error {
+    grid-template-rows: 1fr;
+    padding-top: var(--ax-spacing-1);
+  }
+}
+
+.navds-file-item__error-content {
+  min-height: 0;
+  display: flex;
+  gap: var(--ax-spacing-1);
+
+  & > svg {
+    flex-shrink: 0;
+    height: 1rem;
+    margin-top: 0.1rem;
+  }
+}
@@ -0,0 +1,57 @@
+.navds-form-progress__bar {
+  margin-bottom: var(--ax-spacing-2);
+}
+
+.navds-form-progress__button {
+  &:focus-visible {
+    z-index: 1;
+  }
+
+  &[data-state="open"] {
+    & svg {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
+.navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
+  display: none;
+}
+
+.navds-form-progress__collapsible {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: grid-template-rows 250ms cubic-bezier(0.2, 0, 0, 1);
+
+  &[hidden] {
+    display: grid !important;
+  }
+
+  &[data-state="open"] {
+    grid-template-rows: 1fr;
+  }
+}
+
+.navds-form-progress__collapsible-content {
+  min-height: 0;
+  opacity: 0.01;
+  visibility: hidden;
+  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  transition-duration: 250ms;
+  transition-property: opacity, visibility;
+}
+
+.navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
+  visibility: visible;
+  opacity: 1;
+}
+
+.navds-form-progress__stepper {
+  border: 1px solid var(--ax-border-subtle);
+  border-radius: var(--ax-border-radius-large);
+  padding: var(--ax-spacing-4);
+  margin-top: var(--ax-spacing-1);
+  background: var(--ax-bg-raised);
+}
@@ -0,0 +1,82 @@
+.navds-form-summary {
+  overflow: hidden;
+  border: 1px solid var(--ax-border-neutral-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  background: var(--ax-bg-raised);
+}
+
+.navds-form-summary__header {
+  background: var(--ax-bg-neutral-moderateA);
+  padding: var(--ax-spacing-4) var(--ax-spacing-6);
+  display: flex;
+  justify-content: space-between;
+  gap: 0 var(--ax-spacing-3);
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__header {
+    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    flex-direction: column;
+  }
+}
+
+.navds-form-summary__edit {
+  flex-shrink: 0;
+  margin-top: var(--ax-spacing-1);
+  align-self: flex-start;
+}
+
+.navds-form-summary > .navds-form-summary__answers {
+  border-top: 1px solid var(--ax-border-subtleA);
+}
+
+.navds-form-summary__answers {
+  padding: var(--ax-spacing-5) var(--ax-spacing-6) var(--ax-spacing-6);
+  margin: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answers {
+    padding: var(--ax-spacing-4);
+  }
+}
+
+.navds-form-summary__answer:not(:last-child) {
+  margin-bottom: var(--ax-spacing-4);
+  padding-bottom: var(--ax-spacing-4);
+  border-bottom: 1px solid var(--ax-border-subtleA);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer) {
+  padding-bottom: var(--ax-spacing-6);
+}
+
+.navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
+  padding-bottom: 0;
+}
+
+@media (max-width: 479px) {
+  .navds-form-summary__answer:not(:last-child) {
+    margin-bottom: var(--ax-spacing-3);
+    padding-bottom: var(--ax-spacing-3);
+  }
+
+  .navds-form-summary__answer:has(.navds-form-summary__answer) {
+    padding-bottom: var(--ax-spacing-5);
+  }
+}
+
+.navds-form-summary__value:first-of-type {
+  margin-top: var(--ax-spacing-1);
+}
+
+.navds-form-summary__value .navds-form-summary__answers {
+  margin-top: var(--ax-spacing-2);
+  padding: var(--ax-spacing-4);
+  background: var(--ax-bg-info-moderateA);
+  border-radius: var(--ax-border-radius-large);
+
+  & .navds-form-summary__answer {
+    border-color: var(--ax-border-info-subtleA);
+  }
+}
@@ -0,0 +1,53 @@
+.navds-form-field {
+  display: grid;
+  justify-items: start;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-form-field__description {
+  margin-top: -0.375rem;
+  color: var(--ax-text-subtle);
+}
+
+.navds-form-field .navds-error-message,
+.navds-fieldset .navds-error-message,
+.navds-file-item .navds-error-message {
+  display: flex;
+  gap: var(--ax-spacing-2);
+}
+
+.navds-form-field .navds-error-message::before,
+.navds-fieldset .navds-error-message::before,
+.navds-file-item .navds-error-message::before {
+  content: "•";
+}
+
+.navds-form-field--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.navds-form-field__error:empty {
+  display: none;
+}
+
+.navds-form-field__subdescription {
+  color: var(--ax-text-subtle);
+}
+
+.navds-form-field--readonly > :where(.navds-form-field__label) {
+  display: inline-flex;
+}
+
+.navds-form-field__readonly-icon {
+  margin-top: var(--ax-spacing-05);
+  margin-right: var(--ax-spacing-2);
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+
+@media (forced-colors: active) {
+  .navds-form-field--disabled {
+    opacity: 1;
+  }
+}
@@ -0,0 +1,16 @@
+@layer aksel.forms.base, aksel.forms.component;
+
+@import "./fieldset.darkside.css" layer(aksel.forms.base);
+@import "./file-upload.darkside.css" layer(aksel.forms.component);
+@import "./form.darkside.css" layer(aksel.forms.component);
+@import "./error-summary.darkside.css" layer(aksel.forms.component);
+@import "./confirmation-panel.darkside.css" layer(aksel.forms.component);
+@import "./radio-checkbox.darkside.css" layer(aksel.forms.component);
+@import "./select.darkside.css" layer(aksel.forms.component);
+@import "./switch.darkside.css" layer(aksel.forms.component);
+@import "./text-field.darkside.css" layer(aksel.forms.component);
+@import "./textarea.darkside.css" layer(aksel.forms.component);
+@import "./search.darkside.css" layer(aksel.forms.component);
+@import "./combobox.darkside.css" layer(aksel.forms.component);
+@import "./form-summary.darkside.css" layer(aksel.forms.component);
+@import "./form-progress.darkside.css" layer(aksel.forms.component);
@@ -0,0 +1,287 @@
+.navds-checkbox,
+.navds-radio {
+  position: relative;
+  width: fit-content;
+}
+
+.navds-checkbox__input,
+.navds-radio__input {
+  position: absolute;
+  width: 3rem;
+  height: 3rem;
+  top: 0;
+  left: -0.75rem;
+  z-index: 1;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.navds-checkbox__label,
+.navds-radio__label {
+  padding: var(--ax-spacing-3) 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--ax-spacing-2);
+
+  --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+  --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
+}
+
+.navds-checkbox__label::before,
+.navds-radio__label::before {
+  content: "";
+  border-radius: var(--ax-border-radius-medium);
+  background-color: var(--ax-bg-input);
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--ax-border-default);
+}
+
+.navds-radio__label::before {
+  border-radius: var(--ax-border-radius-full);
+}
+
+.navds-checkbox__content,
+.navds-radio__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.navds-checkbox--small > .navds-checkbox__input,
+.navds-radio--small > .navds-radio__input {
+  width: 2rem;
+  height: 2rem;
+  top: 0;
+  left: -0.375rem;
+}
+
+.navds-checkbox--small > .navds-checkbox__label,
+.navds-radio--small > .navds-radio__label {
+  padding: var(--ax-spacing-1-alt) 0;
+}
+
+.navds-checkbox--small > .navds-checkbox__label::before,
+.navds-radio--small > .navds-radio__label::before {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-checkbox__input:focus + .navds-checkbox__label::before,
+.navds-radio__input:focus + .navds-radio__label::before {
+  outline: 2px solid var(--ax-border-focus);
+  outline-offset: 2px;
+}
+
+.navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translate(var(--ax-spacing-1-alt), -50%);
+  background-color: var(--ax-bg-default);
+  width: 0.75rem;
+  height: 0.25rem;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+.navds-checkbox--small .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  transform: translate(0.25rem, -50%);
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  background-color: var(--ax-bg-accent-strong-pressed);
+  border-color: var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-checkbox__input:where(:checked, :indeterminate):not(:disabled):hover + .navds-checkbox__label::before {
+  border-color: var(--ax-bg-accent-strong-hover);
+  background-color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-checkbox__input:where(:not(:checked)) + .navds-checkbox__label > .navds-checkbox__icon {
+  display: none;
+}
+
+.navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ax-bg-default);
+  position: absolute;
+  height: 1.5rem;
+  transform: translate(var(--ax-spacing-1-alt));
+  pointer-events: none;
+
+  /* Fixed edcase where when using in shadow-dom, svg will not center */
+  display: flex;
+  align-items: center;
+}
+
+.navds-checkbox--small .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  transform: translate(0.25rem, -10%);
+}
+
+/* Tailwind sets all svg to block */
+.navds-checkbox__icon > svg {
+  display: inline;
+  vertical-align: initial;
+}
+
+.navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+  background-position: 0.25rem center;
+}
+
+.navds-radio__input:checked + .navds-radio__label::before {
+  background-color: var(--ax-bg-input);
+  border: 8px solid var(--ax-bg-accent-strong-pressed);
+}
+
+.navds-radio--small > .navds-radio__input:checked + .navds-radio__label::before {
+  border-width: 6px;
+}
+
+.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+  color: var(--ax-text-accent-strong);
+}
+
+.navds-checkbox__input:hover:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio__input:hover:not(:disabled, :checked) + .navds-radio__label::before {
+  border-color: var(--ax-border-accent-strong);
+  background-color: var(--ax-bg-accent-moderate-hoverA);
+}
+
+.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate) + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before {
+  border-color: var(--ax-border-danger);
+}
+
+.navds-checkbox--error > .navds-checkbox__input:not(:disabled, :checked, :indeterminate):hover + .navds-checkbox__label::before,
+.navds-radio--error > .navds-radio__input:not(:disabled, :checked):hover + .navds-radio__label::before {
+  background-color: var(--ax-bg-danger-moderate-hoverA);
+  border-color: var(--ax-border-danger-strong);
+}
+
+.navds-checkbox--error > .navds-checkbox__input:is(:checked, :indeterminate):not(:disabled) + .navds-checkbox__label::before {
+  background-color: var(--ax-bg-danger-strong-pressed);
+  border-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-radio--error > .navds-radio__input:checked + .navds-radio__label::before {
+  border-color: var(--ax-bg-danger-strong-pressed);
+}
+
+.navds-checkbox--disabled,
+.navds-radio--disabled {
+  opacity: 0.3;
+}
+
+.navds-checkbox--disabled > .navds-checkbox__input,
+.navds-checkbox--disabled > .navds-checkbox__label,
+.navds-radio--disabled > .navds-radio__input,
+.navds-radio--disabled > .navds-radio__label {
+  cursor: not-allowed;
+}
+
+/* Readonly */
+.navds-checkbox--readonly > :where(.navds-checkbox__input, .navds-checkbox__label),
+.navds-radio--readonly > :where(.navds-radio__input, .navds-radio__label) {
+  cursor: default;
+}
+
+.navds-checkbox--readonly .navds-checkbox__label-text {
+  display: inline-flex;
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:hover + .navds-checkbox__label,
+.navds-radio--readonly > .navds-radio__input:hover + .navds-radio__label {
+  color: var(--ax-text-default);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:not(:disabled) + .navds-checkbox__label::before,
+.navds-checkbox--readonly > .navds-checkbox__input:hover .navds-checkbox__label::before,
+.navds-radio--readonly > .navds-radio__input:not(:disabled, :checked) + .navds-radio__label::before,
+.navds-radio--readonly > .navds-radio__input:hover:not(:checked, :focus) + .navds-radio__label::before {
+  background-color: var(--__axc-radio-checkbox-readonly-bg);
+  border-color: var(--__axc-radio-checkbox-readonly-border);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:where(:checked, :indeterminate) + .navds-checkbox__label::before {
+  border-color: var(--__axc-radio-checkbox-readonly-border);
+  background-color: var(--__axc-radio-checkbox-readonly-bg);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+  color: var(--ax-text-subtle);
+}
+
+.navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+  background-color: var(--ax-bg-neutral-strong);
+  border-width: 0;
+  box-shadow:
+    inset 0 0 0 2px var(--ax-border-subtle),
+    inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+}
+
+.navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+  background-color: var(--ax-text-subtle);
+}
+
+@media (forced-colors: active) {
+  .navds-checkbox,
+  .navds-radio {
+    --__axc-radio-checkbox-high-contrast-bg: field;
+    --__axc-radio-checkbox-high-contrast-text: fieldtext;
+    --__axc-radio-checkbox-high-contrast-highlight: highlight;
+
+    /* TODO: Consider adding this to global scope */
+    --ax-border-focus: Highlight;
+  }
+
+  .navds-checkbox__label::before,
+  .navds-radio__label::before {
+    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
+    color: var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio__input:checked + .navds-radio__label::before {
+    border: 6px solid var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  :not(.navds-checkbox--readonly) > .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
+  :not(.navds-radio--readonly) > .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
+    color: highlight;
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:checked + .navds-checkbox__label::before {
+    border: 1px solid var(--__axc-radio-checkbox-high-contrast-text);
+    background-color: var(--__axc-radio-checkbox-high-contrast-bg);
+  }
+
+  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
+    background-color: var(--__axc-radio-checkbox-high-contrast-text);
+  }
+
+  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
+    border-width: 6px;
+  }
+
+  .navds-checkbox--disabled,
+  .navds-radio--disabled {
+    opacity: 1;
+
+    --__axc-radio-checkbox-high-contrast-bg: field;
+    --__axc-radio-checkbox-high-contrast-text: graytext;
+  }
+
+  :is(.navds-checkbox--disabled, .navds-radio--disabled) :is(.navds-checkbox__label, .navds-radio__label) {
+    color: graytext;
+  }
+}
@@ -0,0 +1,228 @@
+[data-theme="dark"] {
+  --__ac-search-button-border: var(--a-border-on-inverted);
+  --__ac-search-button-border-hover: var(--a-blue-200);
+  --__ac-search-clear-icon: var(--a-white);
+  --__ac-search-clear-icon-hover: var(--a-blue-200);
+  --__ac-search-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-search-button-border: initial;
+  --__ac-search-button-border-hover: initial;
+  --__ac-search-clear-icon: initial;
+  --__ac-search-clear-icon-hover: initial;
+  --__ac-search-error-border: initial;
+}
+
+.navds-search {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.navds-search__wrapper-inner {
+  position: relative;
+  width: 100%;
+}
+
+.navds-search--with-size :where(.navds-search__wrapper-inner) {
+  width: inherit;
+}
+
+.navds-search__wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.navds-search__input {
+  padding-right: var(--a-spacing-10);
+}
+
+.navds-form-field--small .navds-search__input {
+  padding-right: var(--a-spacing-8);
+}
+
+.navds-search__input--simple {
+  padding-left: var(--a-spacing-11);
+}
+
+.navds-form-field--small .navds-search__input--simple {
+  padding-left: var(--a-spacing-7);
+}
+
+.navds-search__input:not(.navds-search__input--simple) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--a-spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+}
+
+.navds-form-field--small .navds-search__search-icon {
+  left: var(--a-spacing-2);
+  font-size: 1rem;
+}
+
+.navds-search__button-clear {
+  position: absolute;
+  right: 0.75rem;
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
+  height: 32px;
+  width: 32px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  padding: 0;
+}
+
+.navds-form-field--small .navds-search__button-clear {
+  right: 0.5rem;
+  height: 24px;
+  width: 24px;
+}
+
+.navds-search__button-clear:hover {
+  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action-hover)));
+}
+
+.navds-search__button-clear:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search__button-clear:focus {
+    outline: 2px solid transparent;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-search__button-search {
+  flex-shrink: 0;
+  min-width: 4rem;
+  min-height: 2rem;
+  border-radius: 0;
+  border-top-right-radius: var(--a-border-radius-medium);
+  border-bottom-right-radius: var(--a-border-radius-medium);
+}
+
+.navds-form-field--small .navds-search__button-search svg {
+  font-size: 1rem;
+}
+
+.navds-form-field--small .navds-search__button-search {
+  min-width: 2.5rem;
+}
+
+.navds-search__button-search.navds-button--secondary {
+  box-shadow:
+    -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
+}
+
+.navds-search__button-search.navds-button--secondary:where(:hover, :active) {
+  box-shadow:
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover)));
+  z-index: 1;
+}
+
+.navds-search__wrapper-inner:focus-within + .navds-search__button-search.navds-button--secondary:hover {
+  z-index: auto;
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    var(--a-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible:hover {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action-hover))) inset,
+    var(--a-shadow-focus);
+}
+
+.navds-search__button-search.navds-button--secondary:focus-visible:active {
+  box-shadow:
+    0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search__button-search.navds-button--secondary:focus {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:hover {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__button-search.navds-button--secondary:focus:active {
+    box-shadow:
+      0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
+      var(--a-shadow-focus);
+  }
+}
+
+/* Error-handling */
+.navds-search--error .navds-search__input:not(:hover, :disabled) {
+  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+}
+
+.navds-search--error .navds-search__input:focus-visible:not(:hover, :disabled) {
+  box-shadow:
+    inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+    var(--a-shadow-focus);
+}
+
+/* Focus layering */
+.navds-search__input:focus-visible,
+.navds-search__button-clear,
+.navds-search__button-search:focus-visible {
+  z-index: 1;
+}
+
+@supports not selector(:focus-visible) {
+  .navds-search--error .navds-search__input:focus:not(:hover, :disabled) {
+    box-shadow:
+      inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+      var(--a-shadow-focus);
+  }
+
+  .navds-search__input:focus,
+  .navds-search__button-search:focus {
+    z-index: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+
+  .navds-search__button-clear:hover {
+    color: highlight;
+  }
+}
@@ -0,0 +1,115 @@
+.navds-select__input {
+  appearance: none;
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  color: var(--ac-select-text, var(--a-text-default));
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 3rem;
+  display: inline-block;
+  position: relative;
+  padding: 0.5rem;
+  padding-right: 2rem;
+}
+
+@media (forced-colors: active) {
+  .navds-select__input.navds-select__input.navds-select__input {
+    background-color: ButtonFace;
+    border-color: ButtonText;
+    color: ButtonText;
+    forced-color-adjust: none;
+    box-shadow: none;
+  }
+
+  .navds-select__input.navds-select__input.navds-select__input:focus-visible {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.navds-select__input:hover {
+  border-color: var(--ac-select-hover-border, var(--a-border-action-hover));
+  cursor: pointer;
+}
+
+.navds-select__input:focus-visible {
+  outline: none;
+  border-color: var(--ac-select-active-border, var(--a-border-action-selected));
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-select__input:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-select__container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  color: var(--a-text-default);
+}
+
+.navds-select__chevron {
+  position: absolute;
+  font-size: 1.5rem;
+  right: var(--a-spacing-2);
+  pointer-events: none;
+  align-self: center;
+  color: var(--ac-select-text, var(--a-text-default));
+}
+
+@media (forced-colors: active) {
+  .navds-select__chevron {
+    color: ButtonText;
+  }
+}
+
+.navds-form-field--small .navds-select__input {
+  min-height: 2rem;
+  padding: 0 var(--a-spacing-8) 0 var(--a-spacing-2);
+}
+
+.navds-form-field--small .navds-select__chevron {
+  right: var(--a-spacing-1-alt);
+}
+
+/**
+  Error handling
+*/
+.navds-select--error > * select:not(:hover, :focus, :disabled) {
+  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
+  border-color: var(--ac-select-error-border, var(--a-surface-danger));
+}
+
+/**
+  Disabled
+*/
+.navds-select__input:disabled {
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
+  box-shadow: none;
+  cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
+}
+
+.navds-select--readonly .navds-select__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+.navds-select--readonly .navds-select__chevron {
+  color: var(--a-gray-500);
+}
@@ -0,0 +1,269 @@
+.navds-switch {
+  position: relative;
+  min-height: 3rem;
+  width: fit-content;
+}
+
+.navds-switch--right {
+  width: auto;
+}
+
+.navds-switch--small {
+  position: relative;
+  min-height: 2rem;
+}
+
+/* Input */
+.navds-switch__input {
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  opacity: 0;
+  top: 0;
+}
+
+.navds-switch--small > .navds-switch__input {
+  height: 2rem;
+  top: 0;
+}
+
+/* Label */
+.navds-switch__label-wrapper {
+  cursor: pointer;
+  color: var(--a-text-default);
+}
+
+.navds-switch__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.75rem 0 0.75rem 3.25rem;
+}
+
+.navds-switch--right > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: 0.75rem 3.25rem 0.75rem 0;
+}
+
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 0 calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem;
+}
+
+.navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
+  padding: calc(var(--a-spacing-2) - var(--a-spacing-05)) 3.25rem calc(var(--a-spacing-2) - var(--a-spacing-05)) 0;
+}
+
+.navds-switch--with-description,
+.navds-switch--small > .navds-switch__label-wrapper > .navds-switch--with-description {
+  padding-bottom: 0;
+}
+
+.navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch__label-wrapper:hover {
+  color: var(--ac-switch-action, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+  color: inherit;
+}
+
+/* Track */
+.navds-switch__track {
+  width: 2.75rem;
+  height: 1.5rem;
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+  position: absolute;
+  top: var(--a-spacing-3);
+  left: 0;
+  border-radius: var(--a-border-radius-full);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navds-switch--small > .navds-switch__track {
+  top: var(--a-spacing-1);
+}
+
+.navds-switch--right > .navds-switch__input,
+.navds-switch--right > .navds-switch__track {
+  right: 0;
+  left: auto;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-action-selected));
+}
+
+.navds-switch__input:hover ~ .navds-switch__track {
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-switch__input:hover:checked ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-switch__input:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
+}
+
+.navds-switch__input:checked:disabled ~ .navds-switch__track {
+  background-color: var(--ac-switch-checked-bg, var(--a-border-action-selected));
+}
+
+.navds-switch__input:focus-visible ~ .navds-switch__track {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow:
+    0 0 0 1px var(--a-surface-default),
+    var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-switch__input:focus ~ .navds-switch__track {
+    outline: 2px solid transparent;
+    box-shadow:
+      0 0 0 1px var(--a-surface-default),
+      var(--a-shadow-focus);
+  }
+}
+
+/* Thumb */
+.navds-switch__thumb {
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
+  border-radius: var(--a-border-radius-full);
+  width: 1.25rem;
+  height: 1.25rem;
+  position: absolute;
+  transform: translateX(0);
+  left: var(--a-spacing-05);
+  top: var(--a-spacing-05);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-action-selected));
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0.125rem);
+  }
+
+  .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.125rem);
+  }
+}
+
+.navds-switch__input:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(0);
+}
+
+.navds-switch__input:checked:disabled:hover ~ .navds-switch__track > .navds-switch__thumb {
+  transform: translateX(1.25rem);
+}
+
+/* Disabled */
+.navds-switch__input:disabled {
+  appearance: none;
+}
+
+.navds-switch--disabled:not(.navds-switch--loading) {
+  opacity: 0.3;
+}
+
+.navds-switch__input:disabled,
+.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+  cursor: not-allowed;
+}
+
+/* Readonly */
+.navds-switch--readonly > .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track,
+.navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
+  background-color: var(--a-surface-neutral-moderate);
+}
+
+.navds-switch--readonly > .navds-switch__label-wrapper,
+.navds-switch--readonly > .navds-switch__input {
+  cursor: default;
+}
+
+.navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+.navds-switch--readonly .navds-switch__label-wrapper:hover {
+  color: var(--a-text-default);
+}
+
+.navds-switch--readonly .navds-switch__label {
+  display: inline-flex;
+}
+
+.navds-switch--readonly .navds-switch__thumb {
+  background-color: var(--a-surface-subtle);
+  box-shadow: 0 0 0 2px var(--a-border-default);
+}
+
+.navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  color: var(--a-icon-subtle);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(0);
+  }
+
+  .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    transform: translateX(1.25rem);
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
+  .navds-switch__label-wrapper:hover {
+    color: highlight;
+  }
+
+  .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__thumb {
+    background-color: fieldtext;
+  }
+
+  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
+  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+    color: field;
+  }
+
+  .navds-switch__track {
+    width: calc(2.75rem + 4px);
+    height: calc(1.5rem + 4px);
+    top: var(--a-spacing-3);
+    border: 2px solid fieldtext;
+  }
+
+  .navds-switch__input:focus-visible ~ .navds-switch__track {
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) {
+    opacity: 1;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+    background-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+    border-color: graytext;
+  }
+
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
+  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+    color: graytext !important;
+  }
+}
@@ -0,0 +1,69 @@
+.navds-text-field__input {
+  appearance: none;
+  padding: var(--ax-spacing-2);
+  background: var(--ax-bg-input);
+  border-radius: var(--ax-border-radius-medium);
+  border: 1px solid var(--ax-border-default);
+  min-height: 3rem;
+  width: 100%;
+  color: var(--ax-text-default);
+
+  &:hover {
+    border-color: var(--ax-border-accent-strong);
+  }
+
+  &:focus-visible {
+    border-color: var(--ax-border-accent-strong);
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    background-color: var(--ax-bg-input);
+    border-color: var(--ax-border-default);
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: var(--ax-text-subtle);
+  }
+
+  &[size] {
+    width: auto;
+  }
+}
+
+.navds-form-field--small .navds-text-field__input {
+  padding: 0 var(--ax-spacing-2);
+  min-height: 2rem;
+}
+
+.navds-text-field--error > .navds-text-field__input:not(:hover, :disabled) {
+  border-color: var(--ax-border-danger);
+  box-shadow: 0 0 0 1px var(--ax-border-danger);
+}
+
+.navds-text-field--readonly .navds-text-field__input {
+  background-color: var(--ax-bg-neutral-moderate);
+  border-color: var(--ax-border-neutral-subtleA);
+  cursor: default;
+}
+
+/**
+  * Removes default search icon
+  */
+.navds-text-field__input[type="search"] {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-text-field__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}
@@ -0,0 +1,144 @@
+[data-theme="dark"] {
+  --__ac-textarea-text: var(--a-text-on-inverted);
+  --__ac-textarea-bg: var(--a-transparent);
+  --__ac-textarea-border: var(--a-border-on-inverted);
+  --__ac-textarea-hover-border: var(--a-blue-200);
+  --__ac-textarea-placeholder: var(--a-gray-500);
+  --__ac-textarea-error-border: var(--a-red-300);
+  --__ac-textarea-counter-text: var(--a-gray-300);
+  --__ac-textarea-counter-error-text: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textarea-text: initial;
+  --__ac-textarea-bg: initial;
+  --__ac-textarea-border: initial;
+  --__ac-textarea-hover-border: initial;
+  --__ac-textarea-placeholder: initial;
+  --__ac-textarea-error-border: initial;
+  --__ac-textarea-counter-text: initial;
+  --__ac-textarea-counter-error-text: initial;
+}
+
+.navds-textarea__input {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  height: var(--__ac-textarea-height);
+  appearance: none;
+  padding: var(--a-spacing-2);
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  resize: none;
+  width: 100%;
+  display: block;
+  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
+}
+
+.navds-textarea__input::placeholder {
+  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
+}
+
+.navds-textarea__input:hover {
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action-hover)));
+}
+
+.navds-textarea__input:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+  border-color: var(--ac-textarea-active-border, var(--a-border-action-selected));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea__input:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-form-field--small .navds-textarea__input {
+  padding: var(--a-spacing-1-alt);
+}
+
+.navds-textarea__counter {
+  margin-top: -0.375rem;
+  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
+}
+
+.navds-textarea__counter--error {
+  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
+}
+
+.navds-textarea__sr-counter {
+  display: none;
+}
+
+.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
+  display: initial;
+}
+
+.navds-textarea--resize-both .navds-textarea__input {
+  resize: both;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-horizontal .navds-textarea__input {
+  resize: horizontal;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--resize-vertical .navds-textarea__input {
+  resize: vertical;
+  border-end-end-radius: 0;
+}
+
+.navds-textarea--autoscrollbar,
+.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  /* Makes the box-shadow visible even though overflow is hidden: */
+  padding: 3px;
+  margin: -3px;
+}
+
+.navds-textarea--autoscrollbar .navds-textarea__input {
+  scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
+}
+
+/**
+  Error handling
+*/
+.navds-textarea--error .navds-textarea__input:not(:hover, :focus-visible, :disabled) {
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+}
+
+@supports not selector(:focus-visible) {
+  .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  }
+}
+
+.navds-textarea__input:disabled {
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.navds-textarea--readonly .navds-textarea__input {
+  background-color: var(--a-surface-subtle);
+  border-color: var(--a-border-subtle);
+  cursor: default;
+}
+
+@media (forced-colors: active) {
+  .navds-textarea__input {
+    background-color: field;
+    color: fieldtext;
+  }
+}
@@ -0,0 +1,96 @@
+.navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
+  position: relative;
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
+}
+
+.navds-guide-panel__content {
+  background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
+  padding-top: var(--a-spacing-12);
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
+}
+
+/* not-poster */
+
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
+}
+
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+}
+
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
+}
+
+/* responsive-poster (on desktop) */
+
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
+}
@@ -0,0 +1,61 @@
+.navds-help-text__button {
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: var(--ax-border-radius-full);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ax-bg-accent-strong);
+  font-size: 1.25rem;
+  padding: calc(var(--ax-spacing-1) / 2);
+}
+
+.navds-help-text__icon {
+  border-radius: var(--ax-border-radius-full);
+}
+
+.navds-help-text__popover.navds-popover {
+  background-color: var(--ax-bg-info-moderate);
+  max-width: min(65ch, calc(100vw - var(--ax-spacing-6)));
+  border-radius: var(--ax-border-radius-large);
+  border: 1px solid var(--ax-border-info);
+  box-shadow:
+    0 0 1px 0 rgba(7 9 13/ 0.15),
+    0 1px 3px 0 rgba(7 9 13/ 0.1),
+    0 5px 12px 0 rgba(7 9 13/ 0.13),
+    0 0.5px 0 0 rgba(255 255 255/ 0) inset,
+    0 0 1px 0 rgba(255 255 255/ 0) inset;
+}
+
+.navds-help-text__icon--filled {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+  display: none;
+}
+
+.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+  display: inherit;
+  color: var(--ax-bg-accent-strong-hover);
+}
+
+.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+  color: var(--ax-bg-accent-strong-pressed);
+}
+
+@media (forced-colors: active) {
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+    display: inherit;
+  }
+
+  .navds-help-text__button:hover > .navds-help-text__icon {
+    color: highlight;
+  }
+
+  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+    display: none;
+  }
+}
@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@import "baseline/index.css";
+@import "typography.css";
+@import "accordion.css";
+@import "alert.css";
+@import "button.css";
+@import "chat.css";
+@import "chips.css";
+@import "copybutton.css";
+@import "dropdown.css";
+@import "action-menu.css";
+@import "expansioncard.css";
+@import "guide-panel.css";
+@import "form/index.css";
+@import "help-text.css";
+@import "internalheader.css";
+@import "link.css";
+@import "loader.css";
+@import "modal.css";
+@import "pagination.css";
+@import "popover.css";
+@import "date.css";
+@import "tag.css";
+@import "timeline.css";
+@import "tooltip.css";
+@import "toggle-group.css";
+@import "panel.css";
+@import "link-panel.css";
+@import "read-more.css";
+@import "progress-bar.css";
+@import "skeleton.css";
+@import "stepper.css";
+@import "table.css";
+@import "tabs.css";
+@import "list.css";
+@import "primitives/index.css";
@@ -0,0 +1,52 @@
+@charset "UTF-8";
+
+@layer aksel.reset, aksel.typography, aksel.theme, aksel.components, aksel.forms, aksel.layout, aksel.utilities;
+
+/* CSS foundations */
+@import "./baseline/reset.darkside.css" layer(aksel.reset);
+@import "./baseline/print.darkside.css" layer(aksel.reset);
+@import "./baseline/fonts.darkside.css" layer(aksel.typography);
+@import "./baseline/theme.darkside.css" layer(aksel.theme);
+@import "./typography.darkside.css" layer(aksel.typography);
+@import "./baseline/utilities.darkside.css" layer(aksel.utilities);
+
+/* Test: Handles layers itself */
+@import "./form/index.css";
+@import "./primitives/index.css";
+
+/* Theming */
+@import "@navikt/ds-tokens/dist/darkside/tokens.css" layer(aksel.theme);
+
+/* Components */
+@import "../primitives/stack.css" layer(aksel.components);
+@import "./accordion.darkside.css" layer(aksel.components);
+@import "./button.darkside.css" layer(aksel.components);
+@import "./alert.darkside.css" layer(aksel.components);
+@import "./chat.darkside.css" layer(aksel.components);
+@import "./chips.darkside.css" layer(aksel.components);
+@import "./copybutton.darkside.css" layer(aksel.components);
+@import "./dropdown.darkside.css" layer(aksel.components);
+@import "./action-menu.darkside.css" layer(aksel.components);
+@import "./expansioncard.darkside.css" layer(aksel.components);
+@import "./guide-panel.darkside.css" layer(aksel.components);
+@import "./help-text.darkside.css" layer(aksel.components);
+@import "./internalheader.darkside.css" layer(aksel.components);
+@import "./link.darkside.css" layer(aksel.components);
+@import "./loader.darkside.css" layer(aksel.components);
+@import "./modal.darkside.css" layer(aksel.components);
+@import "./pagination.darkside.css" layer(aksel.components);
+@import "./popover.darkside.css" layer(aksel.components);
+@import "./date.darkside.css" layer(aksel.components);
+@import "./tag.darkside.css" layer(aksel.components);
+@import "./timeline.darkside.css" layer(aksel.components);
+@import "./tooltip.darkside.css" layer(aksel.components);
+@import "./toggle-group.darkside.css" layer(aksel.components);
+@import "./panel.darkside.css" layer(aksel.components);
+@import "./link-panel.darkside.css" layer(aksel.components);
+@import "./read-more.darkside.css" layer(aksel.components);
+@import "./progress-bar.darkside.css" layer(aksel.components);
+@import "./skeleton.darkside.css" layer(aksel.components);
+@import "./stepper.darkside.css" layer(aksel.components);
+@import "./table.darkside.css" layer(aksel.components);
+@import "./tabs.darkside.css" layer(aksel.components);
+@import "./list.darkside.css" layer(aksel.components);
@@ -0,0 +1,105 @@
+.navds-internalheader {
+  display: flex;
+  align-self: stretch;
+  background: var(--ac-internalheader-bg, var(--a-surface-inverted));
+  min-height: 3rem;
+
+  --navds-internalheader-focus: inset 0 0 0 2px var(--a-border-focus-on-inverted);
+}
+
+@media (forced-colors: active) {
+  .navds-internalheader {
+    background-color: ButtonFace;
+    border: solid 1px ButtonText;
+    color: ButtonText;
+  }
+
+  .navds-internalheader a:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+
+  .navds-internalheader .navds-internalheader__button:focus-visible {
+    box-shadow: none;
+    outline: 2px solid highlight;
+    outline-offset: 2px;
+  }
+}
+
+.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);
+}
@@ -0,0 +1,47 @@
+.navds-link-panel {
+  text-decoration: none;
+  color: var(--ac-link-panel-text, var(--a-text-default));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--a-spacing-4);
+}
+
+.navds-link-panel:hover .navds-link-panel__title {
+  text-decoration: underline;
+  color: var(--ac-link-panel-hover-text, var(--a-text-action-hover));
+}
+
+.navds-link-panel:hover {
+  box-shadow: var(--a-shadow-small);
+  border-color: var(--ac-link-panel-hover-border, var(--a-border-action-hover));
+}
+
+.navds-link-panel:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--a-shadow-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .navds-link-panel:focus {
+    outline: 3px solid transparent;
+    outline-offset: 2px;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+
+.navds-link-panel__chevron {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  transition: transform 200ms;
+}
+
+.navds-link-panel:hover > .navds-link-panel__chevron,
+.navds-link-panel:focus-within > .navds-link-panel__chevron {
+  transform: translateX(4px);
+}
+
+.navds-link-panel__description {
+  margin-top: var(--a-spacing-1);
+}
@@ -0,0 +1,63 @@
+.navds-link {
+  color: var(--ax-text-accent);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ax-spacing-1);
+  text-decoration: underline;
+  text-underline-offset: 0.1em;
+  text-decoration-thickness: 0.05em;
+
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.111em;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--ax-border-focus);
+    outline-offset: 2px;
+  }
+
+  &.navds-link--inline-text {
+    display: inline;
+
+    & > svg {
+      /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
+      margin: 0.1em 0.1em -0.1em;
+      transform: translateY(0.05em);
+      display: inline;
+      vertical-align: baseline;
+    }
+  }
+
+  &.navds-link--remove-underline {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  & svg {
+    color: inherit;
+    flex-shrink: 0;
+  }
+}
+
+.navds-alert,
+.navds-confirmation-panel {
+  & .navds-link {
+    color: var(--ax-text-default);
+  }
+}
+
+.navds-link--action {
+  color: var(--ax-text-accent);
+}
+
+.navds-link--neutral {
+  color: var(--ax-text-default);
+}
+
+.navds-link--subtle {
+  color: var(--ax-text-subtle);
+}
@@ -0,0 +1,86 @@
+.navds-list ul,
+.navds-list ol {
+  padding: 0;
+  margin-block: var(--ax-spacing-4);
+}
+
+.navds-list--small ul,
+.navds-list--small ol {
+  margin-block: var(--ax-spacing-3);
+}
+
+.navds-list {
+  & .navds-list :where(ul, ol) {
+    margin-block: var(--ax-spacing-2) 0;
+  }
+
+  & ol {
+    list-style: decimal; /* This is the default value, but some frameworks have `ol,ul { list-style:none }` */
+    padding-left: 1.7rem;
+
+    & > .navds-list__item {
+      padding-left: 0.3rem;
+    }
+
+    & li::marker {
+      font-weight: var(--ax-font-weight-bold);
+    }
+  }
+
+  & ul {
+    & > .navds-list__item {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: var(--ax-spacing-2);
+    }
+
+    & > li > .navds-list__item-marker {
+      display: flex;
+      align-items: center;
+      height: var(--ax-font-line-height-xlarge);
+    }
+  }
+}
+
+/* SAFARI HACK START */
+/* stylelint-disable selector-type-no-unknown */
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol {
+  padding-left: 2.1rem;
+}
+
+_::-webkit-full-page-media,
+_:future,
+:root .navds-list ol .navds-list__item {
+  padding-left: 0;
+}
+
+/* SAFARI HACK END */
+/* stylelint-enable selector-type-no-unknown */
+
+.navds-list__item {
+  margin-block-end: var(--ax-spacing-2);
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}
+
+.navds-list__item-marker {
+  width: 1.5rem;
+}
+
+.navds-list--small ul > li > .navds-list__item-marker {
+  height: var(--ax-font-line-height-large);
+}
+
+.navds-list__item-marker--bullet {
+  padding-left: 0.8rem;
+}
+
+.navds-list__item-marker--icon {
+  font-size: 1.5rem;
+  justify-content: center;
+}
@@ -0,0 +1,133 @@
+.navds-loader {
+  width: 1.5rem;
+  display: inline-block;
+  position: relative;
+  animation: loader-rotate 1.8s linear infinite;
+  stroke-width: 6;
+
+  --__axc-loader-stroke-width: 5.9;
+
+  &.navds-loader--3xlarge {
+    width: 5.5rem;
+    stroke-width: 5;
+
+    --__axc-loader-stroke-width: 4.8;
+  }
+
+  &.navds-loader--2xlarge {
+    width: 4rem;
+    stroke-width: 6;
+
+    --__axc-loader-stroke-width: 5.8;
+  }
+
+  &.navds-loader--xlarge {
+    width: 2.5rem;
+    stroke-width: 6;
+
+    --__axc-loader-stroke-width: 5.8;
+  }
+
+  &.navds-loader--large {
+    width: 2rem;
+    stroke-width: 7;
+
+    --__axc-loader-stroke-width: 6.8;
+  }
+
+  &.navds-loader--medium {
+    width: 1.5rem;
+    stroke-width: 7;
+
+    --__axc-loader-stroke-width: 6.8;
+  }
+
+  &.navds-loader--small {
+    width: 1.25rem;
+    stroke-width: 8;
+
+    --__axc-loader-stroke-width: 7.8;
+  }
+
+  &.navds-loader--xsmall {
+    width: 1rem;
+    stroke-width: 8;
+
+    --__axc-loader-stroke-width: 7.8;
+  }
+}
+
+.navds-loader__foreground {
+  animation: loader-dasharray 1.5s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0;
+  stroke: var(--ax-border-strong);
+  stroke-linecap: round;
+  stroke-width: var(--__axc-loader-stroke-width);
+}
+
+.navds-loader__background {
+  stroke: var(--ax-border-neutral-subtleA);
+  stroke-width: var(--__axc-loader-stroke-width);
+}
+
+.navds-loader--neutral {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-strong);
+  }
+}
+
+.navds-loader--interaction {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-accent-strong);
+  }
+
+  & .navds-loader__background {
+    stroke: var(--ax-border-accent-subtleA);
+  }
+}
+
+.navds-loader--inverted {
+  & .navds-loader__foreground {
+    stroke: var(--ax-border-subtle);
+  }
+
+  & .navds-loader__background {
+    stroke: var(--ax-border-strong);
+  }
+}
+
+.navds-loader--transparent {
+  & .navds-loader__background {
+    stroke: transparent;
+  }
+}
+
+@keyframes loader-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-dasharray {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -120px;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-loader__background {
+    stroke: canvastext;
+  }
+}
@@ -0,0 +1,214 @@
+.navds-modal__document-body {
+  overflow: hidden;
+}
+
+.navds-modal {
+  --__axc-modal-bg: var(--ax-bg-raised);
+
+  background-color: var(--__axc-modal-bg);
+  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+  box-shadow:
+    0 0 1px 0 rgb(0 0 0/ 0.08),
+    0 2px 5px 0 rgb(0 0 0/ 0.15),
+    0 10px 24px 0 rgb(0 0 0/ 0.18);
+  padding: 0;
+  position: fixed;
+  max-height: 100%;
+  max-width: 100%;
+  color: var(--ax-text-default);
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+    animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+  }
+}
+
+.navds-modal--polyfilled {
+  top: 50%;
+  transform: translate(0, -50%);
+
+  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
+  left: 0;
+  right: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
+
+  &:not([open]) {
+    display: none; /* from polyfill */
+  }
+
+  & .navds-modal--polyfilled {
+    overflow: auto;
+  }
+}
+
+._dialog_overlay {
+  /* From polyfill */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal--medium {
+  width: 700px;
+}
+
+.navds-modal--small {
+  width: 450px;
+
+  & .navds-modal__header {
+    padding: var(--ax-spacing-4) var(--ax-spacing-4) var(--ax-spacing-3) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__body {
+    padding: var(--ax-spacing-2) var(--ax-spacing-4) var(--ax-spacing-4);
+  }
+
+  & .navds-modal__footer {
+    padding: var(--ax-spacing-4);
+  }
+}
+
+@media (min-width: 480px) {
+  .navds-modal {
+    max-width: calc(100% - 2em);
+  }
+
+  .navds-modal--autowidth {
+    max-width: min(700px, calc(100% - 2em));
+  }
+}
+
+@media (min-height: 480px) {
+  .navds-modal {
+    max-height: calc(100% - 2em);
+  }
+
+  .navds-modal--top {
+    margin-top: 2em;
+    max-height: calc(100% - 4em);
+  }
+}
+
+.navds-modal::backdrop {
+  /*
+   * Cannot use --ax-bg-overlay because ::backdrop does not inherit from anything but itself.
+   * TODO: Consider adding `::backdrop` to global token definitions.
+   * TODO: Check that overlay-color is correct after the new colors is set in stone.
+   */
+  background: #0214317d;
+  animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
+}
+
+.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
+  background: #0214317d;
+
+  /* From polyfill: */
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+  left: 0;
+}
+
+.navds-modal__button {
+  margin-left: var(--ax-spacing-4);
+  float: right;
+}
+
+.navds-modal__header {
+  padding: var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-4) var(--ax-spacing-6);
+}
+
+.navds-modal__header-icon {
+  & svg {
+    display: inline;
+    vertical-align: -0.25rem;
+    margin-right: var(--ax-spacing-1);
+  }
+}
+
+.navds-modal__label {
+  font-weight: var(--ax-font-weight-bold);
+  color: var(--ax-text-subtle);
+}
+
+.navds-modal__body {
+  padding: var(--ax-spacing-6);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+  background:
+    linear-gradient(var(--__axc-modal-bg) 30%, transparent) top,
+    linear-gradient(transparent, var(--__axc-modal-bg) 60%) bottom,
+    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
+    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
+  background-size:
+    100% 40px,
+    100% 50px,
+    100% 16px,
+    100% 16px;
+  background-attachment: local, local, scroll, scroll;
+  background-repeat: no-repeat;
+}
+
+.navds-modal__header + .navds-modal__body {
+  padding-top: var(--ax-spacing-0);
+}
+
+.navds-modal__footer {
+  display: flex;
+  flex-flow: row-reverse wrap;
+  gap: var(--ax-spacing-4);
+  padding: var(--ax-spacing-4) var(--ax-spacing-6) var(--ax-spacing-6) var(--ax-spacing-6);
+}
+
+.navds-modal__footer :nth-of-type(2) {
+  margin-left: auto;
+}
+
+/* When Datepicker is used nested inside a Modal */
+.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
+  min-width: fit-content;
+  max-width: 100vw;
+  max-height: 100vh;
+  animation: none;
+}
+
+@keyframes akselModalFadeIn {
+  0% {
+    opacity: 0.0001; /* Safari will not set focus inside the modal when it opens if we set this to 0 */
+    transform: translate3d(0, calc(2% + 4px), 0);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: none;
+  }
+}
+
+@keyframes akselModalBackdropFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  .navds-modal {
+    outline: 2px solid transparent;
+  }
+}
@@ -0,0 +1,41 @@
+.navds-pagination {
+  position: relative;
+}
+
+.navds-pagination__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: var(--ax-spacing-3);
+
+  & li {
+    list-style: none;
+    display: flex;
+  }
+}
+
+.navds-pagination__ellipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  cursor: default;
+}
+
+.navds-pagination--small .navds-pagination__ellipsis {
+  width: 2rem;
+}
+
+.navds-pagination--xsmall .navds-pagination__ellipsis {
+  width: 1.5rem;
+}
+
+.navds-pagination__item[data-selected="true"] {
+  background-color: var(--ax-bg-neutral-strong-pressed);
+  color: var(--ax-text-neutral-contrast);
+}
+
+.navds-pagination--invisible {
+  visibility: hidden;
+}
@@ -0,0 +1,10 @@
+.navds-panel {
+  background-color: var(--ac-panel-bg, var(--a-surface-default));
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-small);
+  border: 1px solid transparent;
+}
+
+.navds-panel--border {
+  border-color: var(--ac-panel-border, var(--a-border-default));
+}
@@ -0,0 +1,21 @@
+.navds-popover {
+  z-index: 1000;
+  background: var(--ax-bg-raised);
+  box-shadow:
+    0 0 1px 0 rgba(7 9 13/ 0.02),
+    0 2px 5px 0 rgba(7 9 13/ 0.1),
+    0 5px 12px 0 rgba(7 9 13/ 0.12);
+  border: 1px solid var(--ax-border-subtleA);
+  border-radius: var(--ax-border-radius-xlarge);
+
+  /* Creates a small gutter between screen-edges on smaller devices */
+  max-width: calc(100vw - var(--ax-spacing-6));
+}
+
+.navds-popover__content {
+  padding: var(--ax-spacing-4);
+}
+
+.navds-popover--hidden {
+  display: none;
+}
@@ -0,0 +1,809 @@
+.navds-r-p {
+  --__ac-r-p-xs: initial;
+  --__ac-r-p-sm: var(--__ac-r-p-xs);
+  --__ac-r-p-md: var(--__ac-r-p-sm);
+  --__ac-r-p-lg: var(--__ac-r-p-md);
+  --__ac-r-p-xl: var(--__ac-r-p-lg);
+  --__ac-r-p-2xl: var(--__ac-r-p-xl);
+  --__ac-r-padding: var(--__ac-r-p-xs);
+
+  padding: var(--__ac-r-padding);
+}
+
+.navds-r-pi {
+  --__ac-r-pi-xs: initial;
+  --__ac-r-pi-sm: var(--__ac-r-pi-xs);
+  --__ac-r-pi-md: var(--__ac-r-pi-sm);
+  --__ac-r-pi-lg: var(--__ac-r-pi-md);
+  --__ac-r-pi-xl: var(--__ac-r-pi-lg);
+  --__ac-r-pi-2xl: var(--__ac-r-pi-xl);
+  --__ac-r-pi: var(--__ac-r-pi-xs);
+
+  padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
+}
+
+.navds-r-pb {
+  --__ac-r-pb-xs: initial;
+  --__ac-r-pb-sm: var(--__ac-r-pb-xs);
+  --__ac-r-pb-md: var(--__ac-r-pb-sm);
+  --__ac-r-pb-lg: var(--__ac-r-pb-md);
+  --__ac-r-pb-xl: var(--__ac-r-pb-lg);
+  --__ac-r-pb-2xl: var(--__ac-r-pb-xl);
+  --__ac-r-pb: var(--__ac-r-pb-xs);
+
+  padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
+}
+
+.navds-r-m {
+  --__ac-r-m-xs: initial;
+  --__ac-r-m-sm: var(--__ac-r-m-xs);
+  --__ac-r-m-md: var(--__ac-r-m-sm);
+  --__ac-r-m-lg: var(--__ac-r-m-md);
+  --__ac-r-m-xl: var(--__ac-r-m-lg);
+  --__ac-r-m-2xl: var(--__ac-r-m-xl);
+  --__ac-r-margin: var(--__ac-r-m-xs);
+
+  margin: var(--__ac-r-margin);
+}
+
+.navds-r-mi {
+  --__ac-r-mi-xs: initial;
+  --__ac-r-mi-sm: var(--__ac-r-mi-xs);
+  --__ac-r-mi-md: var(--__ac-r-mi-sm);
+  --__ac-r-mi-lg: var(--__ac-r-mi-md);
+  --__ac-r-mi-xl: var(--__ac-r-mi-lg);
+  --__ac-r-mi-2xl: var(--__ac-r-mi-xl);
+  --__ac-r-mi: var(--__ac-r-mi-xs);
+
+  margin-inline: var(--__ac-r-mi, var(--__ac-r-margin));
+}
+
+.navds-r-mb {
+  --__ac-r-mb-xs: initial;
+  --__ac-r-mb-sm: var(--__ac-r-mb-xs);
+  --__ac-r-mb-md: var(--__ac-r-mb-sm);
+  --__ac-r-mb-lg: var(--__ac-r-mb-md);
+  --__ac-r-mb-xl: var(--__ac-r-mb-lg);
+  --__ac-r-mb-2xl: var(--__ac-r-mb-xl);
+  --__ac-r-mb: var(--__ac-r-mb-xs);
+
+  margin-block: var(--__ac-r-mb, var(--__ac-r-margin));
+}
+
+.navds-r-w {
+  --__ac-r-w-xs: initial;
+  --__ac-r-w-sm: var(--__ac-r-w-xs);
+  --__ac-r-w-md: var(--__ac-r-w-sm);
+  --__ac-r-w-lg: var(--__ac-r-w-md);
+  --__ac-r-w-xl: var(--__ac-r-w-lg);
+  --__ac-r-w-2xl: var(--__ac-r-w-xl);
+  --__ac-r-w: var(--__ac-r-w-xs);
+
+  width: var(--__ac-r-w);
+}
+
+.navds-r-minw {
+  --__ac-r-minw-xs: initial;
+  --__ac-r-minw-sm: var(--__ac-r-minw-xs);
+  --__ac-r-minw-md: var(--__ac-r-minw-sm);
+  --__ac-r-minw-lg: var(--__ac-r-minw-md);
+  --__ac-r-minw-xl: var(--__ac-r-minw-lg);
+  --__ac-r-minw-2xl: var(--__ac-r-minw-xl);
+  --__ac-r-minw: var(--__ac-r-minw-xs);
+
+  min-width: var(--__ac-r-minw);
+}
+
+.navds-r-maxw {
+  --__ac-r-maxw-xs: initial;
+  --__ac-r-maxw-sm: var(--__ac-r-maxw-xs);
+  --__ac-r-maxw-md: var(--__ac-r-maxw-sm);
+  --__ac-r-maxw-lg: var(--__ac-r-maxw-md);
+  --__ac-r-maxw-xl: var(--__ac-r-maxw-lg);
+  --__ac-r-maxw-2xl: var(--__ac-r-maxw-xl);
+  --__ac-r-maxw: var(--__ac-r-maxw-xs);
+
+  max-width: var(--__ac-r-maxw);
+}
+
+.navds-r-h {
+  --__ac-r-h-xs: initial;
+  --__ac-r-h-sm: var(--__ac-r-h-xs);
+  --__ac-r-h-md: var(--__ac-r-h-sm);
+  --__ac-r-h-lg: var(--__ac-r-h-md);
+  --__ac-r-h-xl: var(--__ac-r-h-lg);
+  --__ac-r-h-2xl: var(--__ac-r-h-xl);
+  --__ac-r-h: var(--__ac-r-h-xs);
+
+  height: var(--__ac-r-h);
+}
+
+.navds-r-minh {
+  --__ac-r-minh-xs: initial;
+  --__ac-r-minh-sm: var(--__ac-r-minh-xs);
+  --__ac-r-minh-md: var(--__ac-r-minh-sm);
+  --__ac-r-minh-lg: var(--__ac-r-minh-md);
+  --__ac-r-minh-xl: var(--__ac-r-minh-lg);
+  --__ac-r-minh-2xl: var(--__ac-r-minh-xl);
+  --__ac-r-minh: var(--__ac-r-minh-xs);
+
+  min-height: var(--__ac-r-minh);
+}
+
+.navds-r-maxh {
+  --__ac-r-maxh-xs: initial;
+  --__ac-r-maxh-sm: var(--__ac-r-maxh-xs);
+  --__ac-r-maxh-md: var(--__ac-r-maxh-sm);
+  --__ac-r-maxh-lg: var(--__ac-r-maxh-md);
+  --__ac-r-maxh-xl: var(--__ac-r-maxh-lg);
+  --__ac-r-maxh-2xl: var(--__ac-r-maxh-xl);
+  --__ac-r-maxh: var(--__ac-r-maxh-xs);
+
+  max-height: var(--__ac-r-maxh);
+}
+
+.navds-r-position {
+  --__ac-r-position-xs: initial;
+  --__ac-r-position-sm: var(--__ac-r-position-xs);
+  --__ac-r-position-md: var(--__ac-r-position-sm);
+  --__ac-r-position-lg: var(--__ac-r-position-md);
+  --__ac-r-position-xl: var(--__ac-r-position-lg);
+  --__ac-r-position-2xl: var(--__ac-r-position-xl);
+  --__ac-r-position: var(--__ac-r-position-xs);
+
+  position: var(--__ac-r-position);
+}
+
+.navds-r-inset {
+  --__ac-r-inset-xs: initial;
+  --__ac-r-inset-sm: var(--__ac-r-inset-xs);
+  --__ac-r-inset-md: var(--__ac-r-inset-sm);
+  --__ac-r-inset-lg: var(--__ac-r-inset-md);
+  --__ac-r-inset-xl: var(--__ac-r-inset-lg);
+  --__ac-r-inset-2xl: var(--__ac-r-inset-xl);
+  --__ac-r-inset: var(--__ac-r-inset-xs);
+
+  inset: var(--__ac-r-inset);
+}
+
+.navds-r-top {
+  --__ac-r-top-xs: initial;
+  --__ac-r-top-sm: var(--__ac-r-top-xs);
+  --__ac-r-top-md: var(--__ac-r-top-sm);
+  --__ac-r-top-lg: var(--__ac-r-top-md);
+  --__ac-r-top-xl: var(--__ac-r-top-lg);
+  --__ac-r-top-2xl: var(--__ac-r-top-xl);
+  --__ac-r-top: var(--__ac-r-top-xs);
+
+  top: var(--__ac-r-top);
+}
+
+.navds-r-right {
+  --__ac-r-right-xs: initial;
+  --__ac-r-right-sm: var(--__ac-r-right-xs);
+  --__ac-r-right-md: var(--__ac-r-right-sm);
+  --__ac-r-right-lg: var(--__ac-r-right-md);
+  --__ac-r-right-xl: var(--__ac-r-right-lg);
+  --__ac-r-right-2xl: var(--__ac-r-right-xl);
+  --__ac-r-right: var(--__ac-r-right-xs);
+
+  right: var(--__ac-r-right);
+}
+
+.navds-r-bottom {
+  --__ac-r-bottom-xs: initial;
+  --__ac-r-bottom-sm: var(--__ac-r-bottom-xs);
+  --__ac-r-bottom-md: var(--__ac-r-bottom-sm);
+  --__ac-r-bottom-lg: var(--__ac-r-bottom-md);
+  --__ac-r-bottom-xl: var(--__ac-r-bottom-lg);
+  --__ac-r-bottom-2xl: var(--__ac-r-bottom-xl);
+  --__ac-r-bottom: var(--__ac-r-bottom-xs);
+
+  bottom: var(--__ac-r-bottom);
+}
+
+.navds-r-left {
+  --__ac-r-left-xs: initial;
+  --__ac-r-left-sm: var(--__ac-r-left-xs);
+  --__ac-r-left-md: var(--__ac-r-left-sm);
+  --__ac-r-left-lg: var(--__ac-r-left-md);
+  --__ac-r-left-xl: var(--__ac-r-left-lg);
+  --__ac-r-left-2xl: var(--__ac-r-left-xl);
+  --__ac-r-left: var(--__ac-r-left-xs);
+
+  left: var(--__ac-r-left);
+}
+
+.navds-r-overflow {
+  --__ac-r-overflow-xs: initial;
+  --__ac-r-overflow-sm: var(--__ac-r-overflow-xs);
+  --__ac-r-overflow-md: var(--__ac-r-overflow-sm);
+  --__ac-r-overflow-lg: var(--__ac-r-overflow-md);
+  --__ac-r-overflow-xl: var(--__ac-r-overflow-lg);
+  --__ac-r-overflow-2xl: var(--__ac-r-overflow-xl);
+  --__ac-r-overflow: var(--__ac-r-overflow-xs);
+
+  overflow: var(--__ac-r-overflow);
+}
+
+.navds-r-overflowx {
+  --__ac-r-overflowx-xs: initial;
+  --__ac-r-overflowx-sm: var(--__ac-r-overflowx-xs);
+  --__ac-r-overflowx-md: var(--__ac-r-overflowx-sm);
+  --__ac-r-overflowx-lg: var(--__ac-r-overflowx-md);
+  --__ac-r-overflowx-xl: var(--__ac-r-overflowx-lg);
+  --__ac-r-overflowx-2xl: var(--__ac-r-overflowx-xl);
+  --__ac-r-overflowx: var(--__ac-r-overflowx-xs);
+
+  overflow-x: var(--__ac-r-overflowx);
+}
+
+.navds-r-overflowy {
+  --__ac-r-overflowy-xs: initial;
+  --__ac-r-overflowy-sm: var(--__ac-r-overflowy-xs);
+  --__ac-r-overflowy-md: var(--__ac-r-overflowy-sm);
+  --__ac-r-overflowy-lg: var(--__ac-r-overflowy-md);
+  --__ac-r-overflowy-xl: var(--__ac-r-overflowy-lg);
+  --__ac-r-overflowy-2xl: var(--__ac-r-overflowy-xl);
+  --__ac-r-overflowy: var(--__ac-r-overflowy-xs);
+
+  overflow-y: var(--__ac-r-overflowy);
+}
+
+.navds-r-flex-basis {
+  --__ac-r-flex-basis-xs: initial;
+  --__ac-r-flex-basis-sm: var(--__ac-r-flex-basis-xs);
+  --__ac-r-flex-basis-md: var(--__ac-r-flex-basis-sm);
+  --__ac-r-flex-basis-lg: var(--__ac-r-flex-basis-md);
+  --__ac-r-flex-basis-xl: var(--__ac-r-flex-basis-lg);
+  --__ac-r-flex-basis-2xl: var(--__ac-r-flex-basis-xl);
+  --__ac-r-flex-basis: var(--__ac-r-flex-basis-xs);
+
+  flex-basis: var(--__ac-r-flex-basis);
+}
+
+.navds-r-flex-grow {
+  --__ac-r-flex-grow-xs: initial;
+  --__ac-r-flex-grow-sm: var(--__ac-r-flex-grow-xs);
+  --__ac-r-flex-grow-md: var(--__ac-r-flex-grow-sm);
+  --__ac-r-flex-grow-lg: var(--__ac-r-flex-grow-md);
+  --__ac-r-flex-grow-xl: var(--__ac-r-flex-grow-lg);
+  --__ac-r-flex-grow-2xl: var(--__ac-r-flex-grow-xl);
+  --__ac-r-flex-grow: var(--__ac-r-flex-grow-xs);
+
+  flex-grow: var(--__ac-r-flex-grow);
+}
+
+.navds-r-flex-shrink {
+  --__ac-r-flex-shrink-xs: initial;
+  --__ac-r-flex-shrink-sm: var(--__ac-r-flex-shrink-xs);
+  --__ac-r-flex-shrink-md: var(--__ac-r-flex-shrink-sm);
+  --__ac-r-flex-shrink-lg: var(--__ac-r-flex-shrink-md);
+  --__ac-r-flex-shrink-xl: var(--__ac-r-flex-shrink-lg);
+  --__ac-r-flex-shrink-2xl: var(--__ac-r-flex-shrink-xl);
+  --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xs);
+
+  flex-shrink: var(--__ac-r-flex-shrink);
+}
+
+.navds-r-grid-column {
+  --__ac-r-grid-column-xs: initial;
+  --__ac-r-grid-column-sm: var(--__ac-r-grid-column-xs);
+  --__ac-r-grid-column-md: var(--__ac-r-grid-column-sm);
+  --__ac-r-grid-column-lg: var(--__ac-r-grid-column-md);
+  --__ac-r-grid-column-xl: var(--__ac-r-grid-column-lg);
+  --__ac-r-grid-column-2xl: var(--__ac-r-grid-column-xl);
+  --__ac-r-grid-column: var(--__ac-r-grid-column-xs);
+
+  grid-column: var(--__ac-r-grid-column);
+}
+
+@media (min-width: 480px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-sm);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-sm);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-sm);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-sm);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-sm);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-sm);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-sm);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-sm);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-sm);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-sm);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-sm);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-sm);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-sm);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-sm);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-sm);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-sm);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-sm);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-sm);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-sm);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-sm);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-sm);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-sm);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-sm);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-sm);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-md);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-md);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-md);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-md);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-md);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-md);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-md);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-md);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-md);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-md);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-md);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-md);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-md);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-md);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-md);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-md);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-md);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-md);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-md);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-md);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-md);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-md);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-md);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-md);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-lg);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-lg);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-lg);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-lg);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-lg);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-lg);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-lg);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-lg);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-lg);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-lg);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-lg);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-lg);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-lg);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-lg);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-lg);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-lg);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-lg);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-lg);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-lg);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-lg);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-lg);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-lg);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-lg);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-lg);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xl);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-r-p {
+    --__ac-r-padding: var(--__ac-r-p-2xl);
+  }
+
+  .navds-r-pi {
+    --__ac-r-pi: var(--__ac-r-pi-2xl);
+  }
+
+  .navds-r-pb {
+    --__ac-r-pb: var(--__ac-r-pb-2xl);
+  }
+
+  .navds-r-m {
+    --__ac-r-margin: var(--__ac-r-m-2xl);
+  }
+
+  .navds-r-mi {
+    --__ac-r-mi: var(--__ac-r-mi-2xl);
+  }
+
+  .navds-r-mb {
+    --__ac-r-mb: var(--__ac-r-mb-2xl);
+  }
+
+  .navds-r-w {
+    --__ac-r-w: var(--__ac-r-w-2xl);
+  }
+
+  .navds-r-minw {
+    --__ac-r-minw: var(--__ac-r-minw-2xl);
+  }
+
+  .navds-r-maxw {
+    --__ac-r-maxw: var(--__ac-r-maxw-2xl);
+  }
+
+  .navds-r-h {
+    --__ac-r-h: var(--__ac-r-h-2xl);
+  }
+
+  .navds-r-minh {
+    --__ac-r-minh: var(--__ac-r-minh-2xl);
+  }
+
+  .navds-r-maxh {
+    --__ac-r-maxh: var(--__ac-r-maxh-2xl);
+  }
+
+  .navds-r-position {
+    --__ac-r-position: var(--__ac-r-position-2xl);
+  }
+
+  .navds-r-inset {
+    --__ac-r-inset: var(--__ac-r-inset-2xl);
+  }
+
+  .navds-r-top {
+    --__ac-r-top: var(--__ac-r-top-2xl);
+  }
+
+  .navds-r-right {
+    --__ac-r-right: var(--__ac-r-right-2xl);
+  }
+
+  .navds-r-bottom {
+    --__ac-r-bottom: var(--__ac-r-bottom-2xl);
+  }
+
+  .navds-r-left {
+    --__ac-r-left: var(--__ac-r-left-2xl);
+  }
+
+  .navds-r-overflow {
+    --__ac-r-overflow: var(--__ac-r-overflow-2xl);
+  }
+
+  .navds-r-overflowx {
+    --__ac-r-overflowx: var(--__ac-r-overflowx-2xl);
+  }
+
+  .navds-r-overflowy {
+    --__ac-r-overflowy: var(--__ac-r-overflowy-2xl);
+  }
+
+  .navds-r-flex-basis {
+    --__ac-r-flex-basis: var(--__ac-r-flex-basis-2xl);
+  }
+
+  .navds-r-flex-grow {
+    --__ac-r-flex-grow: var(--__ac-r-flex-grow-2xl);
+  }
+
+  .navds-r-flex-shrink {
+    --__ac-r-flex-shrink: var(--__ac-r-flex-shrink-2xl);
+  }
+
+  .navds-r-grid-column {
+    --__ac-r-grid-column: var(--__ac-r-grid-column-2xl);
+  }
+}
@@ -0,0 +1,103 @@
+.navds-bleed {
+  --__ac-bleed-margin-inline-xs: initial;
+  --__ac-bleed-margin-inline-sm: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-inline-md: var(--__ac-bleed-margin-inline-sm);
+  --__ac-bleed-margin-inline-lg: var(--__ac-bleed-margin-inline-md);
+  --__ac-bleed-margin-inline-xl: var(--__ac-bleed-margin-inline-lg);
+  --__ac-bleed-margin-inline-2xl: var(--__ac-bleed-margin-inline-xl);
+  --__ac-bleed-margin-block-xs: initial;
+  --__ac-bleed-margin-block-sm: var(--__ac-bleed-margin-block-xs);
+  --__ac-bleed-margin-block-md: var(--__ac-bleed-margin-block-sm);
+  --__ac-bleed-margin-block-lg: var(--__ac-bleed-margin-block-md);
+  --__ac-bleed-margin-block-xl: var(--__ac-bleed-margin-block-lg);
+  --__ac-bleed-margin-block-2xl: var(--__ac-bleed-margin-block-xl);
+
+  /** defaults */
+  --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xs);
+  --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xs);
+
+  margin-inline: var(--__ac-bleed-margin-inline);
+  margin-block: var(--__ac-bleed-margin-block);
+}
+
+.navds-bleed--padding {
+  --__ac-bleed-padding-inline-xs: initial;
+  --__ac-bleed-padding-inline-sm: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-inline-md: var(--__ac-bleed-padding-inline-sm);
+  --__ac-bleed-padding-inline-lg: var(--__ac-bleed-padding-inline-md);
+  --__ac-bleed-padding-inline-xl: var(--__ac-bleed-padding-inline-lg);
+  --__ac-bleed-padding-inline-2xl: var(--__ac-bleed-padding-inline-xl);
+  --__ac-bleed-padding-block-xs: initial;
+  --__ac-bleed-padding-block-sm: var(--__ac-bleed-padding-block-xs);
+  --__ac-bleed-padding-block-md: var(--__ac-bleed-padding-block-sm);
+  --__ac-bleed-padding-block-lg: var(--__ac-bleed-padding-block-md);
+  --__ac-bleed-padding-block-xl: var(--__ac-bleed-padding-block-lg);
+  --__ac-bleed-padding-block-2xl: var(--__ac-bleed-padding-block-xl);
+
+  /** defaults */
+  --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xs);
+  --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xs);
+
+  padding-inline: var(--__ac-bleed-padding-inline);
+  padding-block: var(--__ac-bleed-padding-block);
+}
+
+@media (min-width: 480px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-sm);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-sm);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-sm);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-sm);
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-md);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-md);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-md);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-md);
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-lg);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-lg);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-lg);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-lg);
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-xl);
+  }
+}
+
+@media (min-width: 1440px) {
+  .navds-bleed {
+    --__ac-bleed-margin-inline: var(--__ac-bleed-margin-inline-2xl);
+    --__ac-bleed-margin-block: var(--__ac-bleed-margin-block-2xl);
+  }
+
+  .navds-bleed--padding {
+    --__ac-bleed-padding-inline: var(--__ac-bleed-padding-inline-2xl);
+    --__ac-bleed-padding-block: var(--__ac-bleed-padding-block-2xl);
+  }
+}