Version Packages (#3170 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Modify changeset text for Accordion change
2026-10-18 19:52:02 +00:00 · 2024-09-25 09:36:07 +02:00 · 2024-09-24 17:17:18 +02:00 · 2024-09-24 16:53:46 +02:00 · 2024-09-24 16:43:04 +02:00 · 2024-09-24 16:31:30 +02:00
89 changed files with 6066 additions and 7542 deletions
@@ -73,8 +73,11 @@ module.exports = {
    },
    {
      files: ["**/*.test.*", "**/__tests__/*"],
-      plugins: ["vitest"],
-      extends: ["plugin:vitest/recommended", "plugin:testing-library/react"],
+      plugins: ["@vitest"],
+      extends: [
+        "plugin:@vitest/legacy-recommended",
+        "plugin:testing-library/react",
+      ],
    },

    {
@@ -0,0 +1,37 @@
+name: Deploy referansesider SPA
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: "read"
+      id-token: "write"
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: yarn
+
+      - run: yarn install
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.READER_TOKEN }}
+      - run: yarn boot
+      - run: cd ./examples/referansesider && yarn && yarn build
+      - uses: navikt/frontend/actions/spa-deploy/v2@main
+        with:
+          app: aksel-referansesider
+          team: designsystem
+          source: ./examples/referansesider/dist
+          ingress: https://aksel-referansesider.ansatt.dev.nav.no
+          environment: dev
+          project_id: ${{ vars.NAIS_MANAGEMENT_PROJECT_ID }}
+          identity_provider: ${{ secrets.NAIS_WORKLOAD_IDENTITY_PROVIDER }}
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 7.1.0
+
 ## 7.0.1

 ## 7.0.0
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-named-as-default-member */
 import fastglob from "fast-glob";
 import fs from "fs";
 import jsYaml from "js-yaml";
@@ -28,7 +28,7 @@
    "postcss": "^8.4.31",
    "postcss-url": "^10.1.3",
    "typescript": "^5.1.6",
-    "vite": "^5.1.7",
+    "vite": "^5.4.6",
    "vite-plugin-singlefile": "^1.0.0",
    "vite-plugin-svgr": "^4.2.0"
  }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "7.0.1",
+  "version": "7.1.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/aksel-stylelint

+## 7.1.0
+
+### Minor Changes
+
+- Pagination: :boom: Added some classNames to list of deprecated (removed) classes. ([#3164](https://github.com/navikt/aksel/pull/3164))
+
 ## 7.0.1

 ## 7.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "7.0.1",
+  "version": "7.1.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^7.0.1",
-    "@navikt/ds-tokens": "^7.0.1",
+    "@navikt/ds-css": "^7.1.0",
+    "@navikt/ds-tokens": "^7.1.0",
    "concurrently": "7.2.1",
    "postcss-selector-parser": "^6.0.13",
    "postcss-value-parser": "^4.2.0",
@@ -60,4 +60,12 @@ export const deprecations: DeprecatedList = [
    classes: ["navds-textarea__wrapper"],
    message: "Removed in v6.0.0",
  },
+  {
+    classes: [
+      "navds-pagination__prev-next-icon",
+      "navds-pagination__next-text",
+      "navds-pagination__prev-text",
+    ],
+    message: "These classes had no effect and were removed in v7.1.0",
+  },
 ];
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 7.1.0
+
+### Patch Changes
+
+- Updated dependencies [[`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc)]:
+  - @navikt/ds-css@7.1.0
+
 ## 7.0.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "7.0.1",
+  "version": "7.1.0",
  "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.0.1",
+    "@navikt/ds-css": "7.1.0",
    "axios": "1.7.4",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,6 +1,7 @@
 import { applyTransform } from "jscodeshift/dist/testUtils";
 import fs from "node:fs";
 import path from "node:path";
+// eslint-disable-next-line import/default
 import prettier from "prettier";
 import { describe, expect, test } from "vitest";

@@ -1,5 +1,11 @@
 # @navikt/ds-css

+## 7.1.0
+
+### Patch Changes
+
+- Accordion: Remove 'relative' positioning when focused. This resolves some issues where floating elements like popover ended up clipping. ([`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc))
+
 ## 7.0.1

 ### Patch Changes
@@ -2,10 +2,6 @@
  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
 }

-.navds-accordion__item:focus-within {
-  position: relative;
-}
-
 /*************************
 * Header *
 *************************/
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "7.0.1",
+  "version": "7.1.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.0.1",
+    "@navikt/ds-tokens": "^7.1.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -1,5 +1,21 @@
 # @navikt/ds-react

+## 7.1.0
+
+### Minor Changes
+
+- Pagination: :lipstick: Updated font-weight to 600 and marked 'page'-prop on 'Item' as deprecated. ([#3164](https://github.com/navikt/aksel/pull/3164))
+
+### Patch Changes
+
+- Combobox: :label: Better typing for maxSelected prop ([#3169](https://github.com/navikt/aksel/pull/3169))
+
+- ErrorSummary: Remove aria-attributes. ([#3171](https://github.com/navikt/aksel/pull/3171))
+
+- Updated dependencies []:
+  - @navikt/ds-tokens@7.1.0
+  - @navikt/aksel-icons@7.1.0
+
 ## 7.0.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "7.0.1",
+  "version": "7.1.0",
  "description": "React components from the Norwegian Labour and Welfare Administration.",
  "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
  "license": "MIT",
@@ -594,8 +594,8 @@
  "dependencies": {
    "@floating-ui/react": "0.25.4",
    "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.0.1",
-    "@navikt/ds-tokens": "^7.0.1",
+    "@navikt/aksel-icons": "^7.1.0",
+    "@navikt/ds-tokens": "^7.1.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.0.0",
    "react-day-picker": "8.10.0"
@@ -19,7 +19,7 @@ const App = () => {
 };

 describe("Render datepicker", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("Should not crash when e.target is window", async () => {
    render(<App />);

@@ -4,29 +4,29 @@ import { describe, expect, test } from "vitest";
 import { isValidDate, parseDate } from "..";

 const check = (inp: string) =>
-  // eslint-disable-next-line vitest/valid-expect
+  // eslint-disable-next-line @vitest/valid-expect
  expect(isValidDate(parseDate(inp, new Date(), nb, "date", false)));

 const checkTwoDigit = (inp: string) =>
-  // eslint-disable-next-line vitest/valid-expect
+  // eslint-disable-next-line @vitest/valid-expect
  expect(isValidDate(parseDate(inp, new Date(), nb, "date", true)));

 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);

 describe("Parse date-inputs with 4-digit years", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("No spaces", () => {
    check("11052022").toBeTruthy();
    check("15052022").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test(". divider", () => {
    check("1.5.2022").toBeTruthy();
    check("11.05.2022").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("/ divider", () => {
    check("1/5/2022").toBeTruthy();
    check("10/5/2022").toBeTruthy();
@@ -34,7 +34,7 @@ describe("Parse date-inputs with 4-digit years", () => {
    check("10/05/2022").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("- divider", () => {
    check("1-5-2022").toBeTruthy();
    check("10-5-2022").toBeTruthy();
@@ -44,19 +44,19 @@ describe("Parse date-inputs with 4-digit years", () => {
 });

 describe("Parse date-inputs with 2-digit years", () => {
-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("No spaces", () => {
    checkTwoDigit("110522").toBeTruthy();
    checkTwoDigit("150522").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test(". divider", () => {
    checkTwoDigit("1.5.22").toBeTruthy();
    checkTwoDigit("11.05.22").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("/ divider", () => {
    checkTwoDigit("1/5/22").toBeTruthy();
    checkTwoDigit("10/5/22").toBeTruthy();
@@ -64,7 +64,7 @@ describe("Parse date-inputs with 2-digit years", () => {
    checkTwoDigit("10/05/22").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("- divider", () => {
    checkTwoDigit("1-5-22").toBeTruthy();
    checkTwoDigit("10-5-22").toBeTruthy();
@@ -72,14 +72,14 @@ describe("Parse date-inputs with 2-digit years", () => {
    checkTwoDigit("10-05-22").toBeTruthy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("Dissallow 1 and 3 digit years", () => {
    checkTwoDigit("11052").toBeFalsy();
    checkTwoDigit("1105222").toBeFalsy();
    checkTwoDigit("1105999").toBeFalsy();
  });

-  // eslint-disable-next-line vitest/expect-expect
+  // eslint-disable-next-line @vitest/expect-expect
  test("Dissallow date before year 1000", () => {
    checkTwoDigit("11050999").toBeFalsy();
    checkTwoDigit("11050010").toBeFalsy();
@@ -4,7 +4,7 @@ import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/Input.context";
 import { isInList } from "../combobox-utils";
 import { useComboboxCustomOptions } from "../customOptionsContext";
-import { ComboboxOption, ComboboxProps, MaxSelected } from "../types";
+import { ComboboxOption, ComboboxProps } from "../types";

 type SelectedOptionsContextValue = {
  addSelectedOption: (option: ComboboxOption) => void;
@@ -12,7 +12,7 @@ type SelectedOptionsContextValue = {
  removeSelectedOption: (option: ComboboxOption) => void;
  prevSelectedOptions?: ComboboxOption[];
  selectedOptions: ComboboxOption[];
-  maxSelected?: MaxSelected & { isLimitReached: boolean };
+  maxSelected?: ComboboxProps["maxSelected"] & { isLimitReached: boolean };
  setSelectedOptions: (any) => void;
  toggleOption: (
    option: ComboboxOption,
@@ -7,7 +7,7 @@ import { VStack } from "../../layout/stack";
 import { Modal } from "../../modal";
 import { BodyLong } from "../../typography";
 import { TextField } from "../textfield";
-import { UNSAFE_Combobox } from "./index";
+import { ComboboxProps, UNSAFE_Combobox } from "./index";

 export default {
  title: "ds-react/Combobox",
@@ -38,14 +38,16 @@ const options = [
  "grapefruit",
 ];

-export const Default: StoryFunction = (props) => (
+export const Default: StoryFn<ComboboxProps & { maxSelected?: number }> = ({
+  maxSelected,
+  ...rest
+}) => (
  <UNSAFE_Combobox
-    {...props}
-    maxSelected={{ limit: Number(props.maxSelected) }}
+    {...rest}
+    maxSelected={maxSelected && { limit: maxSelected }}
    id="combobox"
  />
 );
-
 Default.args = {
  options,
  label: "Hva er din favorittfrukt?",
@@ -16,17 +16,6 @@ export type ComboboxOption = {
  value: string;
 };

-export type MaxSelected = {
-  /**
-   * The limit for maximum selected options
-   */
-  limit: number;
-  /**
-   * Override the message to display when the limit for maximum selected options has been reached
-   */
-  message?: string;
-};
-
 export interface ComboboxProps
  extends FormFieldProps,
    Omit<
@@ -135,7 +124,16 @@ export interface ComboboxProps
  /**
   * Options for the maximum number of selected options.
   */
-  maxSelected?: MaxSelected;
+  maxSelected?: {
+    /**
+     * The limit for maximum selected options
+     */
+    limit: number;
+    /**
+     * Override the message to display when the limit for maximum selected options has been reached
+     */
+    message?: string;
+  };
  /**
   * Set to `true` to enable inline autocomplete.
   *
@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useId, useMergeRefs } from "../../util/hooks";
+import { useMergeRefs } from "../../util/hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";

 export interface ErrorSummaryProps
@@ -33,13 +33,13 @@ interface ErrorSummaryComponent
    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
  > {
  /**
-   * Link to error.
+   * Error message with link to field.
   *
   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
   *
   * @example
   * ```jsx
-   * <ErrorSummary.Item href="#1">
+   * <ErrorSummary.Item href="#id-til-alderfelt">
   *   Felt må fylles ut med alder
   * </ErrorSummary.Item>
   * ```
@@ -48,7 +48,7 @@ interface ErrorSummaryComponent
 }

 /**
- * A component that displays a summary of errors.
+ * Summary of errors in a form.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/errorsummary)
 * @see 🏷️ {@link ErrorSummaryProps}
@@ -77,15 +77,13 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
    },
    ref,
  ) => {
-    const headingId = useId();
-
-    const sectionRef = useRef<HTMLDivElement>(null);
+    const wrapperRef = useRef<HTMLDivElement>(null);
    const headingRef = useRef<HTMLHeadingElement>(null);

-    const mergedRef = useMergeRefs(ref, sectionRef);
+    const mergedRef = useMergeRefs(ref, wrapperRef);

    return (
-      <section
+      <div
        ref={mergedRef}
        {...rest}
        className={cl(
@@ -94,11 +92,8 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
          `navds-error-summary--${size}`,
        )}
        tabIndex={-1}
-        aria-live="polite"
-        aria-relevant="all"
-        aria-labelledby={headingId}
        onFocus={composeEventHandlers(rest.onFocus, (event) => {
-          if (event.target === sectionRef.current) {
+          if (event.target === wrapperRef.current) {
            headingRef?.current?.focus();
          }
        })}
@@ -107,7 +102,6 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
          className="navds-error-summary__heading"
          as={headingTag}
          size="small"
-          id={headingId}
          ref={headingRef}
          tabIndex={-1}
        >
@@ -116,7 +110,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
        <BodyShort as="ul" size={size} className="navds-error-summary__list">
          {children}
        </BodyShort>
-      </section>
+      </div>
    );
  },
 ) as ErrorSummaryComponent;
@@ -22,14 +22,17 @@ export interface FormSummaryEditProps
 export const FormSummaryEditLink: OverridableComponent<
  FormSummaryEditProps,
  HTMLAnchorElement
-> = forwardRef(({ children = "Endre svar", className, ...rest }, ref) => (
-  <Link
-    ref={ref}
-    {...rest}
-    className={cl("navds-form-summary__edit", className)}
-  >
-    {children}
-  </Link>
-));
+> = forwardRef(
+  ({ children = "Endre svar", className, as = "a", ...rest }, ref) => (
+    <Link
+      ref={ref}
+      as={as}
+      {...rest}
+      className={cl("navds-form-summary__edit", className)}
+    >
+      {children}
+    </Link>
+  ),
+);

 export default FormSummaryEditLink;
@@ -63,7 +63,7 @@ export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
          {...rest}
          className={cl(
            "navds-pageblock",
-            `navds-pageblock--${width}`,
+            width && `navds-pageblock--${width}`,
            className,
            { "navds-pageblock--gutters": gutters },
          )}
@@ -26,8 +26,8 @@ export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
 * </HStack>
 */
 export const HStack: OverridableComponent<HStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="row" />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return <Stack as={as} {...rest} ref={ref} direction="row" />;
  });

 export default HStack;
@@ -27,8 +27,10 @@ export type VStackProps = PrimitiveAsChildProps &
 * </VStack>
 */
 export const VStack: OverridableComponent<VStackProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    return <Stack {...props} ref={ref} direction="column" wrap={false} />;
+  forwardRef(({ as = "div", ...rest }, ref) => {
+    return (
+      <Stack as={as} {...rest} ref={ref} direction="column" wrap={false} />
+    );
  });

 export default VStack;
@@ -189,21 +189,13 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
              size={size}
              icon={
                <ChevronLeftIcon
-                  className="navds-pagination__prev-next-icon"
                  {...(prevNextTexts
                    ? { "aria-hidden": true }
                    : { title: "Forrige" })}
                />
              }
            >
-              {prevNextTexts && (
-                <BodyShort
-                  size={size === "xsmall" ? "small" : size}
-                  className="navds-pagination__prev-text"
-                >
-                  Forrige
-                </BodyShort>
-              )}
+              {prevNextTexts && `Forrige`}
            </Item>
          </li>
          {getSteps({ page, count, siblingCount, boundaryCount }).map(
@@ -211,7 +203,10 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
              const n = Number(step);
              return Number.isNaN(n) ? (
                <li className="navds-pagination__ellipsis" key={`${step}${i}`}>
-                  <BodyShort size={size === "xsmall" ? "small" : size}>
+                  <BodyShort
+                    size={size === "xsmall" ? "small" : size}
+                    as="span"
+                  >
                    ...
                  </BodyShort>
                </li>
@@ -223,9 +218,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                    page={n}
                    size={size}
                  >
-                    <BodyShort size={size === "xsmall" ? "small" : size}>
-                      {n}
-                    </BodyShort>
+                    {n}
                  </Item>
                </li>
              );
@@ -243,7 +236,6 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
              size={size}
              icon={
                <ChevronRightIcon
-                  className="navds-pagination__prev-next-icon"
                  {...(prevNextTexts
                    ? { "aria-hidden": true }
                    : { title: "Neste" })}
@@ -251,14 +243,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
              }
              iconPosition="right"
            >
-              {prevNextTexts && (
-                <BodyShort
-                  size={size === "xsmall" ? "small" : size}
-                  className="navds-pagination__next-text"
-                >
-                  Neste
-                </BodyShort>
-              )}
+              {prevNextTexts && `Neste`}
            </Item>
          </li>
        </ul>
@@ -11,9 +11,10 @@ export interface PaginationItemProps extends ButtonProps {
   */
  selected?: boolean;
  /**
-   * The page the item represents
+   * Currently only sets `data-page` attribute.
+   * @deprecated Use `data-page` instead if you need to access the items page number in the future.
   */
-  page: number;
+  page?: number;
  /**
   * Changes padding, height and font-size
   * @default "medium"
@@ -48,7 +49,7 @@ export const Item: PaginationItemType = forwardRef(
          "navds-pagination__item--selected": selected,
        })}
        data-page={page}
-        /* TODO: Breaking change to remove. Add to future major version. */
+        /* TODO: Breaking change to remove since it's in use by some applications. Add to future major version. */
        page={page}
        {...(Component === "button" && { type: "button" })}
        {...rest}
@@ -40,8 +40,8 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
   * We use forwardRef to allow `ref` to be used as a regular context value
   * @see https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components
   */
-  const Provider = forwardRef(
-    ({ children, ...context }: ProviderProps<T>, ref) => {
+  const Provider = forwardRef<unknown, ProviderProps<T>>(
+    ({ children, ...context }, ref) => {
      // Only re-memoize when prop values change
      // eslint-disable-next-line react-hooks/exhaustive-deps
      const value = React.useMemo(() => context, Object.values(context)) as T;
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 7.1.0
+
 ## 7.0.1

 ## 7.0.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "7.0.1",
+  "version": "7.1.0",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -25,7 +25,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^7.0.1",
+    "@navikt/ds-tokens": "^7.1.0",
    "color": "4.2.3",
    "lodash": "^4.17.21",
    "tailwindcss": "^3.3.3",
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens

+## 7.1.0
+
 ## 7.0.1

 ## 7.0.0
@@ -25,66 +25,65 @@ export const globalColorConfig: Record<
  /* Core */
  neutral: {
    colorKeys: ["#838c9a"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: false,
  },
  accent: {
-    colorKeys: ["#0090ff"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
-    smooth: false,
+    colorKeys: ["#e6f0ff", "#0067c5"],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
+    smooth: true,
  },
  /* Status */
  success: {
-    colorKeys: ["#2aa77d", "#e6ffeb"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    colorKeys: ["#2aa758", "#e6ffeb"],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: false,
  },
+  /**
+   * TODO: This is currently just a copy of brandThree
+   * - Should info still exist as a global color?
+   * - If not, should the semantic colors be generated for info based on brandThree?
+   */
  info: {
-    colorKeys: ["#ebfcff", "#66cbec", "#144852"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
-    smooth: false,
+    colorKeys: ["#005b82", "#e6f1f8", "#00243a"],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
+    smooth: true,
  },
  warning: {
-    colorKeys: ["#ffeccc", "#ff9100", "#c77300", "#ffcc66"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    colorKeys: ["#ffbe4d", "#f56e00", "#cc5200"],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: true,
  },
  danger: {
-    colorKeys: ["#ffb3cd", "#fa4456"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    colorKeys: ["#f93448", "#ffb3cd"],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: false,
  },
  /* Brand */
  brandOne: {
    colorKeys: ["#99185e", "#7a134b"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: false,
  },
  brandTwo: {
-    colorKeys: ["#cc7566", "#fff3ec"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    colorKeys: ["#cc8066", "#fff3ec"],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: true,
  },
  brandThree: {
    colorKeys: ["#005b82", "#e6f1f8", "#00243a"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: true,
  },
  /* Data */
  dataOne: {
    colorKeys: ["#8269a2"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: false,
  },
  dataTwo: {
    colorKeys: ["#d9e61e"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
-
-    smooth: false,
-  },
-  dataThree: {
-    colorKeys: ["#ffe45c"],
-    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.19, 4.89, 5.75, 7.2, 15],
+    ratios: [1.08, 1.16, 1.28, 1.5, 3.5, 4.5, 5.85, 6.6, 8, 15],
    smooth: false,
  },
 };
@@ -140,10 +139,10 @@ const getColorScaleFromLeonardo = (
  /**
   * @example colorContrastRole format
   * {
-   *  name: 'dataThree',
+   *  name: 'dataTwo',
   *  values: [
-   *    { name: 'dataThree100', contrast: 1.08, value: '#200500' },
-   *    { name: 'dataThree200', contrast: 1.16, value: '#2b0f00' },
+   *    { name: 'dataTwo100', contrast: 1.08, value: '#200500' },
+   *    { name: 'dataTwo200', contrast: 1.16, value: '#2b0f00' },
   *    ...
   *  ]
   *}
@@ -60,11 +60,6 @@ export const contrastTokenConfig = (): {
      type: "color",
      group: "contrast",
    },
-    dataThree: {
-      value: "white",
-      type: "color",
-      group: "contrast",
-    },
    dataTwo: {
      value: "white",
      type: "color",
@@ -41,22 +41,22 @@ const configForRole = (
    },
    /* Should match role-strong */
    [`${role}-moderate-selected`]: {
-      value: `{a.${role}.700.value}`,
+      value: `{a.${role}.600.value}`,
      type: "color",
      group: `background.${role}`,
    },
    [`${role}-strong`]: {
-      value: `{a.${role}.700.value}`,
+      value: `{a.${role}.600.value}`,
      type: "color",
      group: `background.${role}`,
    },
    [`${role}-strong-hover`]: {
-      value: `{a.${role}.800.value}`,
+      value: `{a.${role}.700.value}`,
      type: "color",
      group: `background.${role}`,
    },
    [`${role}-strong-active`]: {
-      value: `{a.${role}.900.value}`,
+      value: `{a.${role}.800.value}`,
      type: "color",
      group: `background.${role}`,
    },
@@ -73,12 +73,12 @@ const configForRole = (
  },
  text: {
    [role]: {
-      value: `{a.${role}.1000.value}`,
+      value: `{a.${role}.900.value}`,
      type: "color",
      group: `text.${role}`,
    },
    [`${role}-subtle`]: {
-      value: `{a.${role}.900.value}`,
+      value: `{a.${role}.700.value}`,
      type: "color",
      group: `text.${role}`,
    },
@@ -90,7 +90,7 @@ const configForRole = (
  },
  border: {
    [role]: {
-      value: `{a.${role}.500.value}`,
+      value: `{a.${role}.600.value}`,
      type: "color",
      group: `border.${role}`,
    },
@@ -100,7 +100,7 @@ const configForRole = (
      group: `border.${role}`,
    },
    [`${role}-strong`]: {
-      value: `{a.${role}.600.value}`,
+      value: `{a.${role}.700.value}`,
      type: "color",
      group: `border.${role}`,
    },
@@ -48,7 +48,7 @@ export const semanticTokenConfig = (): StyleDictionaryTokenConfig<"color"> => ({
  },
  border: {
    default: {
-      value: "{a.neutral.500.value}",
+      value: "{a.neutral.600.value}",
      type: "color",
      group: "border",
    },
@@ -58,8 +58,7 @@ export const semanticTokenConfig = (): StyleDictionaryTokenConfig<"color"> => ({
      group: "border",
    },
    strong: {
-      /* TODO: Consider 700 scale here? */
-      value: "{a.neutral.600.value}",
+      value: "{a.neutral.700.value}",
      type: "color",
      group: "border",
    },
@@ -15,7 +15,6 @@ export const globalColorRoles = [
  "brandThree",
  "dataOne",
  "dataTwo",
-  "dataThree",
 ] as const;

 export type GlobalColorRoles = (typeof globalColorRoles)[number];
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "7.0.1",
+  "version": "7.1.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,23 @@
 # Changelog

+## 7.1
+
+### @navikt/aksel-stylelint
+
+- Pagination: :boom: Added some classNames to list of deprecated (removed) classes. ([#3164](https://github.com/navikt/aksel/pull/3164))
+
+### @navikt/ds-react
+
+- Pagination: :lipstick: Updated font-weight to 600 and marked 'page'-prop on 'Item' as deprecated. ([#3164](https://github.com/navikt/aksel/pull/3164))
+
+* Combobox: :label: Better typing for maxSelected prop ([#3169](https://github.com/navikt/aksel/pull/3169))
+
+* ErrorSummary: Remove aria-attributes. ([#3171](https://github.com/navikt/aksel/pull/3171))
+
+### @navikt/ds-css
+
+- Accordion: Remove 'relative' positioning when focused. This resolves some issues where floating elements like popover ended up clipping. ([`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc))
+
 ## 7.0

 ### @navikt/aksel-icons
@@ -15,10 +15,10 @@
    "playroom"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^7.0.1",
-    "@navikt/ds-css": "^7.0.1",
-    "@navikt/ds-react": "^7.0.1",
-    "@navikt/ds-tailwind": "^7.0.1",
-    "@navikt/ds-tokens": "^7.0.1"
+    "@navikt/aksel-icons": "^7.1.0",
+    "@navikt/ds-css": "^7.1.0",
+    "@navikt/ds-react": "^7.1.0",
+    "@navikt/ds-tailwind": "^7.1.0",
+    "@navikt/ds-tokens": "^7.1.0"
  }
 }
@@ -1,4 +1,5 @@
 public/sandbox
 test-results/
 tsconfig.tsbuildinfo
-___temp
+___temp
+next-env.d.ts
@@ -1,4 +1,4 @@
-import { getParameters } from "codesandbox/lib/api/define";
+import { getParameters } from "codesandbox-import-utils/lib/api/define";
 import { Button } from "@navikt/ds-react";
 import { CodeSandboxLogo } from "@/assets/Icons";

@@ -38,7 +38,12 @@ type MenuListProps = {

 export function MenuUl({ children, id, className }: MenuListProps) {
  return (
-    <ul className={cl(styles.menuList, className)} id={id}>
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    <ul
+      className={cl(styles.menuList, className)}
+      id={id}
+      role="list" // WebKit browsers remove list semantics when list-style-type is none
+    >
      {children}
    </ul>
  );
@@ -8,7 +8,11 @@ test.describe("Axe a11y", () => {
      await page.goto(`http://localhost:3000${url}`);
      await page.waitForLoadState("domcontentloaded");
      const accessibilityScanResults = await new AxeBuilder({ page })
-        .disableRules(["definition-list", "scrollable-region-focusable"])
+        .disableRules([
+          "definition-list",
+          "scrollable-region-focusable",
+          "landmark-complementary-is-top-level",
+        ])
        .exclude("iframe")
        .exclude("#aksel-expansioncard")
        .exclude("#toc-scroll")
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
@@ -47,13 +47,13 @@
    "@slack/web-api": "^7.0.2",
    "boring-avatars": "1.10.1",
    "clsx": "^2.1.0",
-    "codesandbox": "^2.2.3",
+    "codesandbox-import-utils": "^2.2.3",
    "date-fns": "^3.0.0",
    "fuse.js": "^7.0.0",
    "jscodeshift": "^0.15.1",
    "lodash": "^4.17.21",
    "lz-string": "^1.5.0",
-    "next": "^14.2.3",
+    "next": "^14.2.12",
    "next-logger": "^4.0.0",
    "next-sanity": "9.4.5",
    "node-cache": "^5.1.2",
@@ -2,6 +2,7 @@ import { namedTypes } from "ast-types";
 import fs from "fs";
 import jscodeshift, { ASTPath, Collection } from "jscodeshift";
 import path from "path";
+// eslint-disable-next-line import/default
 import prettier from "prettier";

 const j = jscodeshift.withParser("tsx");
@@ -10,15 +10,15 @@
    "astro": "astro"
  },
  "dependencies": {
-    "@astrojs/check": "^0.4.1",
-    "@astrojs/node": "^8.1.0",
-    "@astrojs/react": "^3.0.9",
+    "@astrojs/check": "^0.9.3",
+    "@astrojs/node": "^8.3.4",
+    "@astrojs/react": "^3.6.2",
    "@navikt/aksel-icons": "file:./../../@navikt/aksel-icons",
    "@navikt/ds-css": "file:./../../@navikt/core/css",
    "@navikt/ds-react": "file:./../../@navikt/core/react",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
-    "astro": "^4.2.6",
+    "astro": "^4.15.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.3.3"
@@ -13,7 +13,7 @@
    "@navikt/ds-css": "file:./../../@navikt/core/css",
    "@navikt/ds-react": "file:./../../@navikt/core/react",
    "@next/bundle-analyzer": "^14.1.0",
-    "next": "14.1.0",
+    "next": "14.2.12",
    "react": "^18",
    "react-dom": "^18"
  },
@@ -2,9 +2,16 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Aksel darkside (referansesider)</title>
  </head>
  <body>
    <div id="root"></div>
@@ -5,11 +5,12 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build && tsc -b",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
+    "@navikt/aksel-icons": "../../@navikt/aksel-icons",
    "@navikt/ds-css": "../../@navikt/core/css",
    "@navikt/ds-tokens": "../../@navikt/core/tokens",
    "@tanstack/react-router": "^1.57.17",
@@ -26,6 +27,7 @@
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/eslint-plugin": "^1.1.4",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
@@ -0,0 +1,34 @@
+<svg
+  width="32"
+  height="32"
+  viewBox="0 0 32 32"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <style>
+    path[data-path="1"] {
+      fill: #00243a;
+    }
+    path[data-path="2"] {
+      fill: #ffd799;
+    }
+    @media (prefers-color-scheme: dark) {
+      path[data-path="1"] {
+        fill: #00243a;
+      }
+      path[data-path="2"] {
+        fill: #ffd799;
+      }
+    }
+  </style>
+  <path
+    data-path="1"
+    d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z"
+  />
+  <path
+    data-path="2"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.43934 9.93931C4.1476 10.2311 4.00115 10.6131 4.00001 10.9955C3.99885 11.3808 4.14527 11.7666 4.43929 12.0606C5.02505 12.6464 5.9748 12.6465 6.56061 12.0607L11.3112 7.31056C11.7029 6.93797 12.3226 6.94391 12.7071 7.3284L24.6716 19.2929C25.0621 19.6834 25.0621 20.3166 24.6716 20.7071L19.9393 25.4393C19.3536 26.0251 19.3536 26.9748 19.9393 27.5606C20.2083 27.8296 20.5539 27.975 20.9058 27.997C21.3206 28.0231 21.7442 27.8776 22.0611 27.5607L26.8289 22.7929C27.5791 22.0427 28.0005 21.0253 28.0005 19.9644L28.0001 7.99987C28 5.79078 26.2092 4 24.0001 4H12.036C10.9753 4 9.95813 4.42124 9.20803 5.17108C9.19582 5.18298 9.18367 5.19498 9.17157 5.20708L4.43934 9.93931ZM25.0003 15.379L16.6214 7H24.0001C24.5524 7 25.0001 7.4477 25.0001 7.99997L25.0003 15.379ZM14.5607 19.5606C15.1464 18.9749 15.1464 18.0251 14.5607 17.4393C13.9749 16.8535 13.0251 16.8535 12.4393 17.4393L4.43934 25.4393C3.85355 26.0251 3.85355 26.9749 4.43934 27.5606C5.02513 28.1464 5.97487 28.1464 6.56066 27.5606L14.5607 19.5606Z"
+  />
+</svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -1,21 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-export const Ikon = ({
-  className,
-  colorStroke = "stroke-black",
-  colorFill = "fill-black",
-}: {
-  className?: string;
-  colorStroke?: string;
-  colorFill?: string;
-}) => {
-  return (
-    <span className={twMerge(`w-4 h-4 block`, className)} aria-hidden="true">
-      <svg className={twMerge(colorFill, colorStroke)} viewBox="0 0 24 24">
-        <path d="M6.5 11.25c-.69 0-1.25-.56-1.25-1.25V4a.75.75 0 0 0-1.5 0v6a2.75 2.75 0 0 0 2.75 2.75h10.69l-3.22 3.22a.75.75 0 1 0 1.06 1.06l4.5-4.5a.75.75 0 0 0 0-1.06l-4.5-4.5a.75.75 0 0 0-1.06 1.06l3.22 3.22z"></path>
-      </svg>
-    </span>
-  );
-};
-
-export default Ikon;
@@ -1,31 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-export const Ikon = ({
-  className,
-  colorStroke = "stroke-black",
-  colorFill = "fill-black",
-}: {
-  className?: string;
-  colorStroke?: string;
-  colorFill?: string;
-}) => {
-  return (
-    <span className={twMerge(`w-5 h-5 block`, className)} aria-hidden="true">
-      <svg
-        className={twMerge(colorFill, colorStroke)}
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        focusable="false"
-        role="img"
-        aria-hidden="true"
-        fontSize="1.25rem"
-      >
-        <path d="M14.087 6.874a.752.752 0 0 0-.117 1.156l3.22 3.22H5a.75.75 0 0 0 0 1.5h12.19l-3.22 3.22a.75.75 0 0 0 1.06 1.06l4.5-4.5a.75.75 0 0 0 0-1.06l-4.5-4.5a.75.75 0 0 0-.943-.096"></path>
-      </svg>
-    </span>
-  );
-};
-
-export default Ikon;
@@ -1,26 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-export const Ikon = ({ className }: { className?: string }) => {
-  return (
-    <span
-      className={twMerge(`w-4 h-4 block fill-black stroke-black`, className)}
-      aria-hidden="true"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1em"
-        height="1em"
-        viewBox="0 0 24 24"
-        focusable="false"
-        role="img"
-        aria-labelledby="title-Ra6oqmm"
-        aria-hidden="true"
-      >
-        <title>Vis mer</title>
-        <path d="M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06"></path>
-      </svg>
-    </span>
-  );
-};
-
-export default Ikon;
@@ -1,25 +1,34 @@
+import styled from "styled-components";
 import { twMerge } from "tailwind-merge";
+import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";

-export const Ikon = ({
-  className,
-  colorFill = "fill-red-500",
-  colorStroke = "stroke-red-500",
-}: {
-  className?: string;
-  colorFill?: string;
-  colorStroke?: string;
-}) => {
+/**
+ * @note
+ * - Unsure of token use here.
+ */
+const ScSVG = styled.svg`
+  stroke: ${tokens.TextBrandOne};
+`;
+
+/**
+ * @note
+ * - BgBrandOneModerate virker litt rart å bruke her.
+ */
+const ScPlusSVG = styled.svg`
+  fill: ${tokens.BgBrandOneModerate};
+`;
+
+export const Ikon = ({ className }: { className?: string }) => {
  return (
    <span className={twMerge(`absolute block`, className)} aria-hidden="true">
      <span className="absolute">
-        <svg
+        <ScPlusSVG
          role="img"
          width="96"
          height="96"
          viewBox="0 0 96 96"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
-          className={twMerge(`opacity-20`, colorFill)}
        >
          <rect x="16" y="36" width="64" height="24"></rect>
          <rect
@@ -29,17 +38,16 @@ export const Ikon = ({
            height="24"
            transform="rotate(90 60 16)"
          ></rect>
-        </svg>
+        </ScPlusSVG>
      </span>
      <span className="absolute" id=":R8imm:">
-        <svg
+        <ScSVG
          role="img"
          width="96"
          height="96"
          viewBox="0 0 96 96"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
-          className={`${colorStroke}`}
        >
          <circle
            cx="50.3637"
@@ -94,7 +102,7 @@ export const Ikon = ({
          ></path>
          <path d="M86 38L82 38" strokeWidth="3" strokeLinecap="round"></path>
          <path d="M82 2L82 14" strokeWidth="3" strokeLinecap="round"></path>
-        </svg>
+        </ScSVG>
      </span>
    </span>
  );
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
+
+const ScButton = styled.button`
+  display: inline-block;
+  font-size: 18px;
+  border-radius: 4px;
+  padding-inline: 1.25rem;
+  padding-block: 0.25rem;
+  min-height: 48px;
+  width: fit-content;
+
+  &[data-variant="primary"] {
+    color: ${tokens.ContrastAccent};
+    background-color: ${tokens.BgAccentStrong};
+
+    &:hover {
+      background-color: ${tokens.BgAccentStrongHover};
+    }
+
+    &:active {
+      background-color: ${tokens.BgAccentStrongActive};
+    }
+  }
+
+  &[data-variant="secondary"] {
+    color: ${tokens.TextAccentSubtle};
+    box-shadow: inset 0 0 0 2px ${tokens.BorderAccent};
+
+    &:hover {
+      background-color: ${tokens.BgAccentHover};
+    }
+
+    &:active {
+      background-color: ${tokens.BgAccentModerateActive};
+    }
+  }
+`;
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary";
+};
+
+export const Button = ({
+  children,
+  variant = "primary",
+  ...rest
+}: ButtonProps) => {
+  return (
+    <ScButton {...rest} data-variant={variant}>
+      {children}
+    </ScButton>
+  );
+};
@@ -0,0 +1,66 @@
+import { ReactNode } from "@tanstack/react-router";
+import styled from "styled-components";
+import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
+import { Link } from "./Link";
+
+export const Dekoratoren = ({ children }: { children: ReactNode }) => {
+  const _link = styled(Link)`
+    font-weight: 500;
+    border-radius: 6px;
+    padding-block: 14px;
+    padding-inline: 12px;
+    &:hover {
+      background-color: ${tokens.Accent300};
+    }
+    && {
+      text-decoration: none;
+    }
+  `;
+
+  const __link = styled(Link)`
+    font-weight: 500;
+    padding-block: 14px;
+    padding-inline: 12px;
+    &:hover {
+      border-bottom: 4px solid ${tokens.BorderSubtle};
+    }
+    && {
+      color: ${tokens.TextDefault};
+      text-decoration: none;
+    }
+    &[data-active] {
+      border-bottom: 4px solid ${tokens.Accent900};
+    }
+  `;
+
+  const _footer = styled.footer`
+    background-color: ${tokens.BrandThree900};
+  `;
+
+  return (
+    <div>
+      <div className="flex flex-nowrap justify-between max-w-[1440px] m-auto px-4">
+        <div className="flex gap-4 items-baseline h-12">
+          <span className="text-red-600 font-bold">NAV</span>
+          <div className="flex gap-4">
+            <__link data-active>Privat</__link>
+            <__link>Arbeidsgiver</__link>
+            <__link>Samarbeidspartner</__link>
+          </div>
+        </div>
+
+        <div className="flex gap-4">
+          <_link>Logg inn</_link>
+          <_link>Meny</_link>
+          <_link>Søk</_link>
+        </div>
+      </div>
+      {children}
+      <_footer>
+        <span>this</span>
+        <div>is</div>
+        <Link>the footer</Link>
+      </_footer>
+    </div>
+  );
+};
@@ -0,0 +1,34 @@
+import { ReactNode } from "@tanstack/react-router";
+import styled from "styled-components";
+import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
+
+const ScLink = styled.a`
+  color: ${tokens.TextAccentSubtle};
+
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &[data-inverted="true"] {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+
+export const Link = ({
+  href = "#",
+  inverted = false,
+  ...rest
+}: {
+  children: ReactNode;
+  inverted?: boolean;
+  href?: string;
+  className?: string;
+}) => {
+  return <ScLink href={href} {...rest} data-inverted={inverted} />;
+};
@@ -1,8 +1,26 @@
 import { ReactNode } from "@tanstack/react-router";
+import clsx from "clsx";

-export const Page = ({ children }: { children: ReactNode }) => {
+export const Page = ({
+  children,
+  options,
+}: {
+  children: ReactNode;
+  options?: { width?: "large" | "medium" };
+}) => {
+  const _options = options ?? {
+    width: "medium",
+  };
+  const width = _options.width;
  return (
-    <div className="flex flex-col lg:w-[72ch] w-full m-auto mb-20">
+    <div
+      className={clsx(
+        "flex flex-col px-2 w-full m-auto mb-20 min-h-screen",
+        "lg:px-0",
+        { [`lg:w-[72ch]`]: width === "medium" },
+        { [`lg:w-[921px]`]: width === "large" },
+      )}
+    >
      {children}
    </div>
  );
@@ -0,0 +1,12 @@
+import { ReactNode } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+export const PlainText = ({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) => {
+  return <p className={twMerge("text-xl", className, `mb-9`)}>{children}</p>;
+};
@@ -4,49 +4,7 @@

 #root {
  width: 100%;
-  font-family: "Source Sans Pro";
+  font-family: "Source Sans 3", system-ui;
  font-size: 18px;
-}
-
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-Regular.otf");
-}
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-Bold.otf");
-  font-weight: bold;
-}
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-Light.otf");
-  font-weight: 300;
-}
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-ExtraLight.otf");
-  font-weight: 200;
-}
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-It.otf");
-  font-style: italic;
-}
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-BoldIt.otf");
-  font-weight: bold;
-  font-style: italic;
-}
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-LightIt.otf");
-  font-weight: 300;
-  font-style: italic;
-}
-@font-face {
-  font-family: "Source Sans Pro";
-  src: url("./assets/SourceSansPro-ExtraLightIt.otf");
-  font-weight: 200;
-  font-style: italic;
+  color: var(--a-text-default);
 }
@@ -5,7 +5,7 @@ import "@navikt/ds-tokens/dist/darkside/tokens.css";
 import "./index.css";
 import { routeTree } from "./routeTree.gen";

-const router = createRouter({ routeTree });
+const router = createRouter({ routeTree, trailingSlash: "always" });

 declare module "@tanstack/react-router" {
  interface Register {
@@ -4,7 +4,7 @@ import {
  ReactNode,
  createRootRoute,
 } from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import React from "react";

 const RouteLink = ({ children, to }: { children: ReactNode; to: string }) => {
  return (
@@ -14,15 +14,30 @@ const RouteLink = ({ children, to }: { children: ReactNode; to: string }) => {
  );
 };

+const TanStackRouterDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        // Lazy load in development
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+          // For Embedded Mode
+          // default: res.TanStackRouterDevtoolsPanel
+        })),
+      );
+
 export const Route = createRootRoute({
  component: () => (
    <>
      <div className="p-2 flex gap-6">
-        <RouteLink to="/sykepenger">Sykepenger</RouteLink>{" "}
+        <RouteLink to="/sykepenger">Sykepenger</RouteLink>
        <RouteLink to="/minside">Min Side</RouteLink>
+        <RouteLink to="/komponenter">Komponenter</RouteLink>
      </div>
      <hr />
-      <Outlet />
+      <div className="overflow-x-clip">
+        <Outlet />
+      </div>
      <TanStackRouterDevtools />
    </>
  ),
@@ -0,0 +1,31 @@
+import { createFileRoute } from "@tanstack/react-router";
+import styled from "styled-components";
+import { Button } from "../components/Button";
+import { Link } from "../components/Link";
+
+export const Route = createFileRoute("/komponenter")({
+  component: ComponentPage,
+});
+
+const Section = styled.section`
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+`;
+
+function ComponentPage() {
+  return (
+    <div className="py-12 flex flex-col items-center gap-8">
+      <Section aria-label="Buttons">
+        <Button>Button</Button>
+        <Button variant="secondary">Button</Button>
+      </Section>
+      <Section aria-label="Link">
+        <Link href="#">Når du har sykepenger</Link>
+        <Link href="#" inverted>
+          Når du har sykepenger
+        </Link>
+      </Section>
+    </div>
+  );
+}
@@ -1,10 +1,147 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { ReactNode, createFileRoute } from "@tanstack/react-router";
+import styled from "styled-components";
+import {
+  BellFillIcon,
+  ChevronRightIcon,
+  HeartIcon,
+  PencilFillIcon,
+} from "@navikt/aksel-icons";
+import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
+import { Dekoratoren } from "../components/Dekoratoren";
+import { Page } from "../components/Page";

 const Component = () => {
+  const GrayPanel = styled.div`
+    background-color: ${tokens.BgNeutral};
+    margin-inline: calc(-1 * 50vw);
+    padding-inline: 50vw;
+  `;
+
+  const Header2 = styled.h2`
+    font-size: 32px;
+    font-weight: 600;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  `;
+
+  const NotificationsPanel = styled.div`
+    background-color: ${tokens.BrandThree900};
+    margin-top: calc(-1 * 44px);
+    margin-bottom: 44px;
+
+    svg {
+      color: ${tokens.BrandThree900};
+    }
+
+    #pencil {
+      color: white;
+    }
+  `;
+
+  const Card = ({
+    title,
+    children,
+  }: {
+    title?: string;
+    children: ReactNode;
+  }) => {
+    const _card = styled.div`
+      border-radius: 8px;
+      background-color: ${tokens.BgDefault};
+      box-shadow:
+        rgba(0, 0, 0, 0.15) 0px 1px 3px 0px,
+        rgba(0, 0, 0, 0.2) 0px 0px 1px 0px;
+    `;
+
+    return (
+      <_card>
+        <div className="flex flex-col h-full justify-center">
+          {title && (
+            <span className="font-semibold text-xl border-b border-b-gray-300 px-5 pt-4 pb-2">
+              {title}
+            </span>
+          )}
+          <div> {children}</div>
+        </div>
+      </_card>
+    );
+  };
+
  return (
-    <div>
-      <h3>hello from minside</h3>
-    </div>
+    <Dekoratoren>
+      <Page options={{ width: "large" }}>
+        <div className="flex flex-col">
+          <div>
+            <Header2>Hei, Navn Navnesen</Header2>
+          </div>
+          <GrayPanel className="mt-11">
+            <NotificationsPanel className="rounded-xl flex justify-between p-2 text-white">
+              <div className="flex justify-start m-2 gap-4">
+                <div className="bg-orange-500 w-14 h-14 rounded-lg flex justify-center items-center">
+                  <BellFillIcon className="size-6" />
+                </div>
+                <div className="flex flex-col">
+                  <span className="font-bold">Varsler</span>
+                  <span>3 oppgaver og 6 beskjeder</span>
+                </div>
+              </div>
+              <div className="flex justify-start m-2 gap-4">
+                <div className="bg-blue-500 w-14 h-14 rounded-lg flex justify-center items-center">
+                  <PencilFillIcon id="pencil" className="size-6" />
+                </div>
+                <div className="flex flex-col">
+                  <span className="font-bold">Utkast</span>
+                  <span>Du har 2 påbegynte søknader</span>
+                </div>
+              </div>
+              <div></div>
+            </NotificationsPanel>
+            <span>Din oversikt</span>
+            <div className="grid grid-cols-2 gap-6 mb-8">
+              <Card title="Meldekort">
+                <p className="m-5 text-gray-500">
+                  Du har fått vedtak for en periode du ikke har sendt meldekort.
+                </p>
+                <p className="m-5">Du må sende 2 meldekort</p>
+              </Card>
+              <Card title="Meldekort">
+                <p className="m-5 text-gray-500">
+                  Du har fått vedtak for en periode du ikke har sendt meldekort.
+                </p>
+                <p className="m-5">Du må sende 2 meldekort</p>
+              </Card>
+              <Card>
+                <div className="flex justify-between align-middle items-center h-full">
+                  <div className="flex items-center">
+                    <HeartIcon className="m-4" />
+                    <div className="flex flex-col">
+                      <span className="font-semibold text-xl pt-1">
+                        AAP (Arbeidsavklaringspenger)
+                      </span>
+                      <span>Oversikt over saken din</span>
+                    </div>
+                  </div>
+                  <ChevronRightIcon className="mx-3 mt-1" />
+                </div>
+              </Card>
+              <Card title="Dialogmøte med NAV">
+                <p className="m-5 text-gray-500">
+                  Du har fått vedtak for en periode du ikke har sendt meldekort.
+                </p>
+                <p className="m-5">Du må sende 2 meldekort</p>
+              </Card>
+              <Card title="Aktivitetsplan">
+                <p className="m-5 text-gray-500">
+                  Du har fått vedtak for en periode du ikke har sendt meldekort.
+                </p>
+                <p className="m-5">Du må sende 2 meldekort</p>
+              </Card>
+            </div>
+          </GrayPanel>
+          <div>c</div>
+        </div>
+      </Page>
+    </Dekoratoren>
  );
 };

@@ -2,38 +2,48 @@ import { ReactNode, createFileRoute } from "@tanstack/react-router";
 import clsx from "clsx";
 import styled from "styled-components";
 import { twMerge } from "tailwind-merge";
+import {
+  ArrowDownRightIcon,
+  ArrowRightIcon,
+  ChevronDownIcon,
+} from "@navikt/aksel-icons";
 import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
-import ArrowDownRightIcon from "../assets/ArrowDownRightIcon";
-import ArrowRightIcon from "../assets/ArrowRightIcon";
-import ChevronDownIcon from "../assets/ChevronDownIcon";
 import SykepengerIcon from "../assets/SykepengerIcon";
+import { Button } from "../components/Button";
+import { Dekoratoren } from "../components/Dekoratoren";
+import { Link } from "../components/Link";
 import { Page } from "../components/Page";

-const Detail = styled.span`
+const EyeBrowText = styled.span`
  color: ${tokens.TextSubtle};
  font-size: 20px;
-  font-weight: 300;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 1.2px;
  font-variant-caps: all-small-caps;
 `;

-const Header1 = styled.h1`
-  position: relative;
-  color: ${tokens.BrandOne900};
+const H1 = styled.h1`
+  color: ${tokens.TextBrandOne};
  font-size: 48px;
-  font-weight: 400;
+  font-weight: 700;
  margin-bottom: 1rem;
+  line-height: 52px;
+  letter-spacing: -0.48px;
 `;

-const Header2 = styled.h1`
+const H2 = styled.h2`
  position: relative;
-  color: ${tokens.BrandOne900};
+  color: ${tokens.TextBrandOne};
  font-size: 36px;
-  font-weight: 600;
+  font-weight: 700;
  margin-bottom: 1rem;
  margin-top: 5rem;
+  line-height: 40px;
+  letter-spacing: -0.288px;
+
  &::before {
-    background-color: #99185e;
-    opacity: 0.4;
+    background-color: ${tokens.BorderBrandOneSubtle};
    content: "";
    height: 7px;
    left: 0;
@@ -43,86 +53,29 @@ const Header2 = styled.h1`
  }
 `;

-const Header3 = styled.h3`
-  position: relative;
-  color: ${tokens.TextDefault};
+const H3 = styled.h3`
  font-size: 24px;
-  font-weight: 650;
+  font-weight: 700;
  margin-bottom: 1rem;
+  line-height: 32px;
+  letter-spacing: -0.048px;
 `;

-const Header4 = styled.h4`
-  position: relative;
-  color: ${tokens.TextDefault};
+const H4 = styled.h4`
  font-size: 20px;
-  font-weight: 600;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: -0.02px;
  margin-bottom: 0.5rem;
 `;

-const InfoSummary = styled.span`
+const PreAmble = styled.p`
  font-size: 22px;
+  font-weight: 400;
+  line-height: 38.5px;
+  letter-spacing: -0.029px;
 `;

-const FancyHeader = () => {
-  return (
-    <div className={clsx("mt-16 relative")}>
-      <SykepengerIcon
-        className="-translate-x-32 translate-y-1"
-        colorStroke="stroke-[#99185e]"
-        colorFill="fill-[#99185e]"
-      />
-      <Detail>PENGESTØTTE — FOR ARBEIDSGIVERE</Detail>
-      <Header1>Sykepenger</Header1>
-      <InfoSummary>
-        Erstatter inntekten din når du ikke kan jobbe på grunn av sykdom eller
-        skade.
-      </InfoSummary>
-    </div>
-  );
-};
-
-const Link = ({
-  href = "#",
-  ...rest
-}: {
-  children: ReactNode;
-  inverted?: boolean;
-  href?: string;
-  className?: string;
-}) => {
-  const _Link = styled.a<{ inverted?: boolean }>`
-    color: ${tokens.Accent900};
-    text-decoration: ${(props) => (props.inverted ? "none" : "underline")};
-    &:hover {
-      text-decoration: ${(props) => (props.inverted ? "underline" : "none")};
-    }
-  `;
-
-  return <_Link href={href} {...rest} />;
-};
-
-const ArrowLink = ({
-  children,
-  ...rest
-}: {
-  children: ReactNode;
-  href?: string;
-}) => {
-  return (
-    <Link
-      className="flex flex-row gap-2 items-center text-xl no-underline hover:underline"
-      inverted
-      {...rest}
-    >
-      <ArrowDownRightIcon
-        colorStroke="stroke-[#0056b4]"
-        colorFill="fill-[#0056b4]"
-      />
-      {children}
-    </Link>
-  );
-};
-
 const PillLink = ({ children }: { children: ReactNode }) => {
  const _anchor = styled.a`
    border: 1px solid #b0b0b0;
@@ -159,7 +112,7 @@ const PillLink = ({ children }: { children: ReactNode }) => {
  );
 };

-const PlainText = ({
+const Paragraph = ({
  children,
  className,
 }: {
@@ -171,11 +124,11 @@ const PlainText = ({

 const LinkList = ({
  title,
-  children,
+  links,
  borderTop = false,
 }: {
  title: string;
-  children: ReactNode;
+  links: string[];
  borderTop?: boolean;
 }) => {
  return (
@@ -184,14 +137,28 @@ const LinkList = ({
        ["border-t-[#99185e] border-t-[5px]"]: borderTop,
      })}
    >
-      <h2 className="mb-4 text-xl font-bold" id="heading-page-navigation-menu">
+      <h2
+        className="mb-4 text-xl font-semibold"
+        id="heading-page-navigation-menu"
+      >
        {title}
      </h2>
      <ul
        className="flex flex-col gap-3"
        aria-labelledby="heading-page-navigation-menu"
      >
-        {children}
+        {links.map((link) => (
+          <li key={link}>
+            <Link
+              className="flex gap-[6px] items-center text-xl no-underline hover:underline"
+              inverted
+              href={`#${link}`}
+            >
+              <ArrowDownRightIcon aria-hidden />
+              {link}
+            </Link>
+          </li>
+        ))}
      </ul>
    </div>
  );
@@ -250,16 +217,19 @@ const AccordionItem = ({
          "border-opacity-0 border-x-black border",
        )}
      >
+        {/* TODO: use tokens here */}
        <div className="bg-blue-100 group-hover/summary:bg-[#0056b4] w-5 h-5 rounded-lg">
-          <ChevronDownIcon
-            className={clsx([
-              "group-open/details:-rotate-180",
-              "group-hover/summary:fill-white group-hover/summary:stroke-white",
-              "transition-transform",
-              "w-5 h-5",
-              "stroke-[#0056b4] fill-[#0056b4]",
-            ])}
-          />
+          <span className="w-4 h-4 block" aria-hidden="true">
+            <ChevronDownIcon
+              className={clsx([
+                "group-open/details:-rotate-180",
+                "group-hover/summary:text-white",
+                "transition-transform",
+                "w-5 h-5",
+                "text-[#0056b4]",
+              ])}
+            />
+          </span>
        </div>
        <span className="text-[#0056b4]">{title}</span>
      </summary>
@@ -310,7 +280,10 @@ const MiniCard = ({
        <_title className="group-hover:underline">{title}</_title>
        <_subtitle>{subtitle}</_subtitle>
      </div>
-      <ArrowRightIcon colorFill="fill-gray-500" colorStroke="stroke-gray-500" />
+      <span className="w-5 h-5 block" aria-hidden="true">
+        {/* TODO: use token here */}
+        <ArrowRightIcon className="fill-gray-500" />
+      </span>
    </a>
  );
 };
@@ -335,14 +308,17 @@ const ExpandoPill = ({
          "border-opacity-0 border-x-black border",
        )}
      >
-        <ChevronDownIcon
-          className={clsx([
-            "group-open/details:-rotate-180",
-            "transition-transform",
-            "w-5 h-5",
-            "stroke-[#0056b4] fill-[#0056b4]",
-          ])}
-        />
+        {/* TODO: use tokens here */}
+        <span className="w-4 h-4 block" aria-hidden="true">
+          <ChevronDownIcon
+            className={clsx([
+              "group-open/details:-rotate-180",
+              "transition-transform",
+              "w-5 h-5",
+              "text--[#0056b4]",
+            ])}
+          />
+        </span>
        <span className="text-[#0056b4]">{title}</span>
      </summary>
      <div className="border-l-[0.125rem] border-l-[#aaa] ml-[1.35rem] mr-12 pl-5 pt-3">
@@ -352,57 +328,43 @@ const ExpandoPill = ({
  );
 };

-const Button = styled.button`
-  display: inline-block;
-  color: ${tokens.Accent900};
-  border: 2px solid ${tokens.Accent900};
-  font-size: 20px;
-  border-radius: 4px;
-  padding-inline: 1rem;
-  padding-block: 0.4rem;
-  width: fit-content;
-  &:hover {
-    background-color: ${tokens.Accent200};
-  }
-`;
+export const Route = createFileRoute("/sykepenger")({
+  component: SykepengerPage,
+});

-const Component = () => {
+function SykepengerPage() {
  return (
-    <>
+    <Dekoratoren>
      <Page>
-        <FancyHeader />
-        <PlainText className="my-6 text-lg">
+        <div className="mt-16 relative">
+          <SykepengerIcon className="-translate-x-32 translate-y-1" />
+          <EyeBrowText>PENGESTØTTE — FOR ARBEIDSGIVERE</EyeBrowText>
+          <H1>Sykepenger</H1>
+          <PreAmble>
+            Erstatter inntekten din når du ikke kan jobbe på grunn av sykdom
+            eller skade.
+          </PreAmble>
+        </div>
+        <Paragraph className="my-6 text-lg">
          Det finnes også informasjon om sykepenger til{" "}
          <Link>arbeidsgivere</Link> og{" "}
          <Link>leger og tannleger eller andre behandlere</Link>.
-        </PlainText>
-        <LinkList title="Innhold på siden" borderTop>
-          <li>
-            <ArrowLink href="#hvem">
-              <span>Hvem kan få?</span>
-            </ArrowLink>
-          </li>
-          <li>
-            <ArrowLink href="#hva">
-              <span>Hva kan du få?</span>
-            </ArrowLink>
-          </li>
-          <li>
-            <ArrowLink href="#sok">
-              <span>Søke, ettersende eller klage</span>
-            </ArrowLink>
-          </li>
-          <li>
-            <ArrowLink href="#har">
-              <span>Når du har sykepenger</span>
-            </ArrowLink>
-          </li>
-        </LinkList>
-        <Header2 id="hvem">Hvem kan få?</Header2>
-        <PlainText>
+        </Paragraph>
+        <LinkList
+          title="Innhold på siden"
+          borderTop
+          links={[
+            "Hvem kan få?",
+            "Hva kan du få?",
+            "Søke, ettersende eller klage",
+            "Når du har sykepenger",
+          ]}
+        />
+        <H2 id="hvem">Hvem kan få?</H2>
+        <Paragraph>
          Du kan ha rett til sykepenger hvis du oppfyller disse generelle
          vilkårene:
-        </PlainText>
+        </Paragraph>
        <PlainList>
          <li>
            Du er <Link>medlem av folketrygden</Link> eller er EU/EØS-borger og
@@ -421,53 +383,53 @@ const Component = () => {
            som lønn og betaler skatt av.
          </li>
        </PlainList>
-        <PlainText>
+        <Paragraph>
          Det er NAV som avgjør om sykmeldingen gir deg rett til sykepenger. Det
          er ulike regler avhengig av hva slags arbeid du har eller hvilken
          situasjon du er i.
-        </PlainText>
-        <PlainText>
+        </Paragraph>
+        <Paragraph>
          Får du <Link>fosterhjemsgodtgjørelse</Link>? Da regnes du som
          frilanser. Det samme gjelder hvis du får <Link>omsorgsstønad</Link> og
          du ikke er ansatt hos en arbeidsgiver. Se egen informasjon for
          frilansere.
-        </PlainText>
-        <PlainText>Se hvilke regler som gjelder for deg:</PlainText>
+        </Paragraph>
+        <Paragraph>Se hvilke regler som gjelder for deg:</Paragraph>
        <Accordion>
          <AccordionItem title="Arbeidstaker">
-            <PlainText>
+            <Paragraph>
              For å ha rett til sykepenger fra NAV må du ha jobbet minst fire
              uker rett før du ble sykmeldt. Du må også ha en årsinntekt som
              tilsvarer femti prosent av grunnbeløpet i folketrygden, det vil si
              62&nbsp;014 kroner. For å beregne årsinntekten din bruker NAV
              gjennomsnittet av de tre siste månedene.
-            </PlainText>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <Paragraph>
              Det samme gjelder hvis du kombinerer arbeid med uføretrygd.
-            </PlainText>{" "}
-            <Header4>Hvis du er kronisk syk eller gravid</Header4>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <H4>Hvis du er kronisk syk eller gravid</H4>{" "}
+            <Paragraph>
              Har du en&nbsp;langvarig eller kronisk sykdom&nbsp;som kan føre
              til hyppige sykefravær?&nbsp;Eller er du sykmeldt på grunn av
              årsaker som henger sammen med graviditeten?
-            </PlainText>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <Paragraph>
              Vanligvis utbetaler arbeidsgiveren din sykepengene for de første
              16 dagene du er syk. Dette kalles arbeidsgiverperioden.
-            </PlainText>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <Paragraph>
              Hvis du har hyppige og/eller uforutsigbare sykefravær, kan du
              eller arbeidsgiveren din søke om at NAV dekker sykepengene
              arbeidsgiveren har utbetalt i arbeidsgiverperioden.
-            </PlainText>{" "}
+            </Paragraph>{" "}
            <PillLink>Dekking av sykepenger i arbeidsgiverperioden</PillLink>
-            <Header4>Hvis du er arbeidstaker på skip</Header4>{" "}
-            <PlainText>
+            <H4>Hvis du er arbeidstaker på skip</H4>{" "}
+            <Paragraph>
              Sykepenger for arbeidstakere på skip beregnes i hovedsak på samme
              måte som for arbeidstakere, men det er i tillegg noen særskilte
              regler for deg som jobber på skip&nbsp;i utenriksfart som er
              registrert i Norsk internasjonalt skipsregister (NIS).
-            </PlainText>{" "}
+            </Paragraph>{" "}
            <PlainList>
              <li>
                Du kan få sykepenger fra den dagen arbeidsgiveren din har fått
@@ -498,14 +460,14 @@ const Component = () => {
                dermed ikke rett til sykepenger.
              </li>{" "}
            </PlainList>{" "}
-            <Header4>Tilkallingsvikar</Header4>{" "}
-            <PlainText>
+            <H4>Tilkallingsvikar</H4>{" "}
+            <Paragraph>
              Du kan ha rett til sykepenger, men det avhenger blant annet på
              hvor mye og ofte du har jobbet før du ble sykmeldt.
-            </PlainText>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <Paragraph>
              Hvis du er tilkallingsvikar, er det viktig å avgjøre om
-            </PlainText>{" "}
+            </Paragraph>{" "}
            <PlainList>
              {" "}
              <li>
@@ -517,45 +479,45 @@ const Component = () => {
                avtalt noen vakter med arbeidsgiveren din framover.
              </li>{" "}
            </PlainList>{" "}
-            <Header4>Hvis du er mellom 67 og 70 år</Header4>{" "}
-            <PlainText>
+            <H4>Hvis du er mellom 67 og 70 år</H4>{" "}
+            <Paragraph>
              Du kan få sykepenger fra NAV i opptil 60 dager hvis gjennomsnittet
              av inntekten din de siste 3 månedene før du ble syk omgjort til
              årsinntekt overstiger 248&nbsp;056 kroner (2 ganger grunnbeløpet i
              folketrygden). Dette gjelder hvis du er mellom 67 og 70 år,
              uavhengig av om du har tatt ut alderspensjon.
-            </PlainText>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <Paragraph>
              60-dagersregelen gjelder fra og med dagen etter du fylte 67 år og
              til og med dagen før&nbsp;du fyller 70 år. Hvis du har fylt 70 år,
              har du ikke rett til sykepenger.
-            </PlainText>{" "}
-            <Header4>Friskmelding til arbeidsformidling</Header4>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <H4>Friskmelding til arbeidsformidling</H4>{" "}
+            <Paragraph>
              Hvis alle muligheter for å komme tilbake til arbeidsplassen din er
              forsøkt, kan du få <Link>sykepenger i inntil 12 uker</Link> mens
              du søker ny jobb.
-            </PlainText>{" "}
+            </Paragraph>{" "}
            <PillLink>Friskmelding til arbeidsformidling</PillLink>
            <h4>Dette gjør du når du blir syk</h4>{" "}
-            <PlainText>
+            <Paragraph>
              Du kan få sykepenger fra den dagen arbeidsgiveren din har fått
              beskjed om at du er syk, derfor må du gi beskjed til
              arbeidsgiveren din så snart som mulig. Du leverer enten
              egenmelding eller sykmelding.
-            </PlainText>{" "}
-            <PlainText>
+            </Paragraph>{" "}
+            <Paragraph>
              Hvis du er syk lenger enn egenmeldingsdagene, må du kontakte lege.
-            </PlainText>{" "}
+            </Paragraph>{" "}
          </AccordionItem>
          <AccordionItem title="Fisker">
            <div>
-              <PlainText>
+              <Paragraph>
                Sykepenger til deg som fisker beregnes&nbsp; på samme måte som
                for arbeidstakere og/eller selvstendig&nbsp; næringsdrivende,
                men det er noen særskilte regler for deg som er fisker på blad B
                i fiskermanntallet:
-              </PlainText>{" "}
+              </Paragraph>{" "}
              <PlainList>
                {" "}
                <li>
@@ -567,69 +529,56 @@ const Component = () => {
                  sykefraværsdag.
                </li>{" "}
              </PlainList>{" "}
-              <Header4>
+              <H4>
                <strong>På lott eller hyre</strong>
-              </Header4>{" "}
-              <PlainText>
+              </H4>{" "}
+              <Paragraph>
                Hvis du mottar lott, regnes du som&nbsp;selvstendig
                næringsdrivende.
-              </PlainText>{" "}
-              <PlainText>
+              </Paragraph>{" "}
+              <Paragraph>
                Hvis du har hyre, regnes du som arbeidstaker.
-              </PlainText>{" "}
+              </Paragraph>{" "}
              <h4>Hvis du er mellom 67 og 70 år</h4>{" "}
-              <PlainText>
+              <Paragraph>
                Du kan få sykepenger fra NAV i opptil 60 dager hvis
                gjennomsnittet av inntekten din de siste 3 månedene før du ble
                syk omgjort til årsinntekt overstiger 248&nbsp;056 kroner (2
                ganger grunnbeløpet i folketrygden). Dette gjelder hvis du er
                mellom 67 og 70 år, uavhengig av om du har tatt ut
                alderspensjon.
-              </PlainText>{" "}
-              <PlainText>
+              </Paragraph>{" "}
+              <Paragraph>
                60-dagersregelen gjelder fra og med dagen etter du fylte 67 år
                og til og med dagen før&nbsp;du fyller 70 år. Hvis du har fylt
                70 år, har du ikke rett til sykepenger.
-              </PlainText>{" "}
+              </Paragraph>{" "}
            </div>
          </AccordionItem>
        </Accordion>
        <div className="flex flex-col gap-6 mb-6">
-          <Header2 id="hva">Hva kan du få?</Header2>
-          <LinkList title="I dette kapittelet" borderTop>
-            <li>
-              <ArrowLink href="#hvem">
-                <span>Hvor mye kan du få?</span>
-              </ArrowLink>
-            </li>
-            <li>
-              <ArrowLink href="#hva">
-                <span>Hvor lenge kan du få?</span>
-              </ArrowLink>
-            </li>
-            <li>
-              <ArrowLink href="#sok">
-                <span>Reisetilskudd som alternativ til sykepenger</span>
-              </ArrowLink>
-            </li>
-            <li>
-              <ArrowLink href="#har">
-                <span>Andre tilbud</span>
-              </ArrowLink>
-            </li>
-          </LinkList>
+          <H2 id="hva">Hva kan du få?</H2>
+          <LinkList
+            title="I dette kapittelet"
+            links={[
+              "Hvor mye kan du få?",
+              "Hvor lenge kan du få?",
+              "Reisetilskudd som alternativ til sykepenger",
+              "Andre tilbud",
+            ]}
+          />
        </div>
        <div className="mb-10">
-          <Header3>Reisetilskudd som alternativ til sykepenger</Header3>
-          <PlainText>
+          <H3>Reisetilskudd som alternativ til sykepenger</H3>
+          <Paragraph>
            Klarer du å jobbe, men har problemer med å reise til og fra
            arbeidsstedet? Da kan du ha rett til reisetilskudd i stedet for
            sykepenger fra 17. dag etter at du ble sykmeldt.
-          </PlainText>
+          </Paragraph>
          <MiniCard title="Reisetilskudd" subtitle="pengestøtte" />
        </div>
-        <Header3>Andre tilbud</Header3>
-        <PlainText>Mer informasjon til deg som</PlainText>
+        <H3>Andre tilbud</H3>
+        <Paragraph>Mer informasjon til deg som</Paragraph>
        <div className="flex flex-col gap-4">
          <MiniCard
            title="Har blitt sykmeldt"
@@ -648,36 +597,36 @@ const Component = () => {
            subtitle="Dette kan du ha rett til"
          />
        </div>
-        <Header2 id="sok">Søke, ettersende eller klage</Header2>
+        <H2 id="sok">Søke, ettersende eller klage</H2>
        <ExpandoPill title="Hvis du mangler BankId">
-          <PlainText>
+          <Paragraph>
            Hvis du mangler BankID, ikke har legitimasjon på høyeste
            sikkerhetsnivå eller har fortrolig adresse i Folkeregisteret, må du
            bruke del D av papirsykmeldingen til å søke om sykepenger. Finn
            riktig adresse.
-          </PlainText>
-          <PlainText>
+          </Paragraph>
+          <Paragraph>
            Hvis du har en arbeidsgiver, må du levere del C av sykmeldingen til
            arbeidsgiveren din. Del D – søknaden – leverer du til den som skal
            utbetale sykepenger.
-          </PlainText>
+          </Paragraph>
        </ExpandoPill>
-        <Header2 id="har">Når du har sykepenger</Header2>
-        <Header4>Klage på vedtak</Header4>
-        <PlainText>
+        <H2 id="har">Når du har sykepenger</H2>
+        <H4>Klage på vedtak</H4>
+        <Paragraph>
          I vedtaket står det hvordan du går fram hvis du skal klage, hvem du
          skal klage til og klagefrist. Hvis du har spørsmål om vedtaket, kan du
          kontakte oss.
-        </PlainText>
+        </Paragraph>
        <div className="flex gap-2 mb-10">
-          <Button>Send klage</Button>
-          <Button>Ettersend dokumentasjon</Button>
+          <Button variant="secondary">Send klage</Button>
+          <Button variant="secondary">Ettersend dokumentasjon</Button>
        </div>
-        <Header3>Reise eller flytte til utlandet</Header3>
-        <PlainText>
+        <H3>Reise eller flytte til utlandet</H3>
+        <Paragraph>
          Hvis du vurderer å reise mens du er sykmeldt, er det noen ting du må
          sjekke på forhånd.
-        </PlainText>
+        </Paragraph>
        <PlainOrderedList>
          <li>
            Du må sjekke med arbeidsgiveren din om reisen vil hindre planlagt
@@ -695,8 +644,6 @@ const Component = () => {
          </li>
        </PlainOrderedList>
      </Page>
-    </>
+    </Dekoratoren>
  );
-};
-
-export const Route = createFileRoute("/sykepenger")({ component: Component });
+}
@@ -732,17 +732,24 @@ __metadata:
  languageName: node
  linkType: hard

+"@navikt/aksel-icons@file:../../@navikt/aksel-icons::locator=referansesider%40workspace%3A.":
+  version: 7.0.1
+  resolution: "@navikt/aksel-icons@file:../../@navikt/aksel-icons#../../@navikt/aksel-icons::hash=aeadaa&locator=referansesider%40workspace%3A."
+  checksum: 10/d383d1e5bd18e41d07a552db164e6a3f46542da12a5ea482de5218887d3c0b4d2635afb813f26a07baa59ce6051ca460c20ad47aea1d83c93a328b4dd274a810
+  languageName: node
+  linkType: hard
+
 "@navikt/ds-css@file:../../@navikt/core/css::locator=referansesider%40workspace%3A.":
-  version: 7.0.0
-  resolution: "@navikt/ds-css@file:../../@navikt/core/css#../../@navikt/core/css::hash=51229e&locator=referansesider%40workspace%3A."
-  checksum: 10/bc0b3114505867f60b92f02d6cf8c1db525b1a5a4de679c3956cf7fe081507c46326f33a9644a89bdcb75eed97adcbfe6659b321c3eddf16aa51c0f5a22158e9
+  version: 7.0.1
+  resolution: "@navikt/ds-css@file:../../@navikt/core/css#../../@navikt/core/css::hash=e0fe77&locator=referansesider%40workspace%3A."
+  checksum: 10/5f272e25d3e848d78cfc721e93e401693c54e48a857ffb940b0eff46d48bc461ba5c65d8011dcc9432a36dd6f0ebb7cbe9da7646b4cdacda516f0360a55344eb
  languageName: node
  linkType: hard

 "@navikt/ds-tokens@file:../../@navikt/core/tokens::locator=referansesider%40workspace%3A.":
-  version: 7.0.0
-  resolution: "@navikt/ds-tokens@file:../../@navikt/core/tokens#../../@navikt/core/tokens::hash=eb1c65&locator=referansesider%40workspace%3A."
-  checksum: 10/f348d87b0c185f2391e8cd9a5b5164caf07dbc00e763b0d41d1af73072b4599c2a0c2dedb83a82202124397287074f801e1b19ab5d22c9072f7a05d8f7ca8469
+  version: 7.0.1
+  resolution: "@navikt/ds-tokens@file:../../@navikt/core/tokens#../../@navikt/core/tokens::hash=a3b163&locator=referansesider%40workspace%3A."
+  checksum: 10/00253b4d5cb206b33f22e5813a8c4185fcbe0c598e75e0ef3227e26d706f9ea0c142445e25d8aed7f2c2ba4906c31b5ecd3cada4e27cc511e47f32024e95ea4a
  languageName: node
  linkType: hard

@@ -802,114 +809,114 @@ __metadata:
  languageName: node
  linkType: hard

-"@rollup/rollup-android-arm-eabi@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.21.3"
+"@rollup/rollup-android-arm-eabi@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.22.4"
  conditions: os=android & cpu=arm
  languageName: node
  linkType: hard

-"@rollup/rollup-android-arm64@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-android-arm64@npm:4.21.3"
+"@rollup/rollup-android-arm64@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-android-arm64@npm:4.22.4"
  conditions: os=android & cpu=arm64
  languageName: node
  linkType: hard

-"@rollup/rollup-darwin-arm64@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.21.3"
+"@rollup/rollup-darwin-arm64@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.22.4"
  conditions: os=darwin & cpu=arm64
  languageName: node
  linkType: hard

-"@rollup/rollup-darwin-x64@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-darwin-x64@npm:4.21.3"
+"@rollup/rollup-darwin-x64@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-darwin-x64@npm:4.22.4"
  conditions: os=darwin & cpu=x64
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-arm-gnueabihf@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.21.3"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.22.4"
  conditions: os=linux & cpu=arm & libc=glibc
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-arm-musleabihf@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.21.3"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.22.4"
  conditions: os=linux & cpu=arm & libc=musl
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-arm64-gnu@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.21.3"
+"@rollup/rollup-linux-arm64-gnu@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.22.4"
  conditions: os=linux & cpu=arm64 & libc=glibc
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-arm64-musl@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.21.3"
+"@rollup/rollup-linux-arm64-musl@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.22.4"
  conditions: os=linux & cpu=arm64 & libc=musl
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-powerpc64le-gnu@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.21.3"
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.22.4"
  conditions: os=linux & cpu=ppc64 & libc=glibc
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-riscv64-gnu@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.21.3"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.22.4"
  conditions: os=linux & cpu=riscv64 & libc=glibc
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-s390x-gnu@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.21.3"
+"@rollup/rollup-linux-s390x-gnu@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.22.4"
  conditions: os=linux & cpu=s390x & libc=glibc
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-x64-gnu@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.21.3"
+"@rollup/rollup-linux-x64-gnu@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.22.4"
  conditions: os=linux & cpu=x64 & libc=glibc
  languageName: node
  linkType: hard

-"@rollup/rollup-linux-x64-musl@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.21.3"
+"@rollup/rollup-linux-x64-musl@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.22.4"
  conditions: os=linux & cpu=x64 & libc=musl
  languageName: node
  linkType: hard

-"@rollup/rollup-win32-arm64-msvc@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.21.3"
+"@rollup/rollup-win32-arm64-msvc@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.22.4"
  conditions: os=win32 & cpu=arm64
  languageName: node
  linkType: hard

-"@rollup/rollup-win32-ia32-msvc@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.21.3"
+"@rollup/rollup-win32-ia32-msvc@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.22.4"
  conditions: os=win32 & cpu=ia32
  languageName: node
  linkType: hard

-"@rollup/rollup-win32-x64-msvc@npm:4.21.3":
-  version: 4.21.3
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.21.3"
+"@rollup/rollup-win32-x64-msvc@npm:4.22.4":
+  version: 4.22.4
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.22.4"
  conditions: os=win32 & cpu=x64
  languageName: node
  linkType: hard
@@ -1370,6 +1377,25 @@ __metadata:
  languageName: node
  linkType: hard

+"@vitest/eslint-plugin@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "@vitest/eslint-plugin@npm:1.1.4"
+  peerDependencies:
+    "@typescript-eslint/utils": ">= 8.0"
+    eslint: ">= 8.57.0"
+    typescript: ">= 5.0.0"
+    vitest: "*"
+  peerDependenciesMeta:
+    "@typescript-eslint/utils":
+      optional: true
+    typescript:
+      optional: true
+    vitest:
+      optional: true
+  checksum: 10/becfa0d0c67c06f19f77e409e067e38499e4ceb0c19a4e3a928c727a95372c3918056edddf11632d0e20773d0aa9ea27b68ff8692daf22f115f4e065812be09c
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:^2.0.0":
  version: 2.0.0
  resolution: "abbrev@npm:2.0.0"
@@ -3340,6 +3366,7 @@ __metadata:
  resolution: "referansesider@workspace:."
  dependencies:
    "@eslint/js": "npm:^9.9.0"
+    "@navikt/aksel-icons": ../../@navikt/aksel-icons
    "@navikt/ds-css": ../../@navikt/core/css
    "@navikt/ds-tokens": ../../@navikt/core/tokens
    "@tanstack/react-router": "npm:^1.57.17"
@@ -3348,6 +3375,7 @@ __metadata:
    "@types/react": "npm:^18.3.3"
    "@types/react-dom": "npm:^18.3.0"
    "@vitejs/plugin-react-swc": "npm:^3.5.0"
+    "@vitest/eslint-plugin": "npm:^1.1.4"
    autoprefixer: "npm:^10.4.20"
    clsx: "npm:^2.1.1"
    eslint: "npm:^9.9.0"
@@ -3421,25 +3449,25 @@ __metadata:
  linkType: hard

 "rollup@npm:^4.20.0":
-  version: 4.21.3
-  resolution: "rollup@npm:4.21.3"
+  version: 4.22.4
+  resolution: "rollup@npm:4.22.4"
  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.21.3"
-    "@rollup/rollup-android-arm64": "npm:4.21.3"
-    "@rollup/rollup-darwin-arm64": "npm:4.21.3"
-    "@rollup/rollup-darwin-x64": "npm:4.21.3"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.21.3"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.21.3"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.21.3"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.21.3"
-    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.21.3"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.21.3"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.21.3"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.21.3"
-    "@rollup/rollup-linux-x64-musl": "npm:4.21.3"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.21.3"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.21.3"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.21.3"
+    "@rollup/rollup-android-arm-eabi": "npm:4.22.4"
+    "@rollup/rollup-android-arm64": "npm:4.22.4"
+    "@rollup/rollup-darwin-arm64": "npm:4.22.4"
+    "@rollup/rollup-darwin-x64": "npm:4.22.4"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.22.4"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.22.4"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.22.4"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.22.4"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.22.4"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.22.4"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.22.4"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.22.4"
+    "@rollup/rollup-linux-x64-musl": "npm:4.22.4"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.22.4"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.22.4"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.22.4"
    "@types/estree": "npm:1.0.5"
    fsevents: "npm:~2.3.2"
  dependenciesMeta:
@@ -3479,7 +3507,7 @@ __metadata:
      optional: true
  bin:
    rollup: dist/bin/rollup
-  checksum: 10/60a1d6548fa1e612209f9f98f83c73a213f27569abddcbfb246af08455d730f367d95f6bd541b58c9e1e643c181463db27326c712aa81efd4071372a4d3481b9
+  checksum: 10/0fbee8c14d9052624c76a09fe79ed4d46024832be3ceea86c69f1521ae84b581a64c6e6596fdd796030c206835987e1a0a3be85f4c0d35b71400be5dce799d12
  languageName: node
  linkType: hard

@@ -20,6 +20,6 @@
    "@types/react-dom": "^18.2.18",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "^5.1.6",
-    "vite": "^5.1.7"
+    "vite": "^5.4.6"
  }
 }
@@ -98,8 +98,6 @@
    ],
    "rules": {
      "plugin/declaration-block-no-ignored-properties": true,
-      "value-list-comma-newline-after": null,
-      "declaration-colon-newline-after": null,
      "no-descending-specificity": null,
      "selector-class-pattern": null,
      "custom-property-pattern": null,
@@ -160,8 +158,9 @@
    "@storybook/theming": "^8.3.0",
    "@svitejs/changesets-changelog-github-compact": "^1.1.0",
    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitest/eslint-plugin": "^1.1.4",
    "@whitespace/storybook-addon-html": "^6.1.1",
    "chromatic": "11.5.4",
    "concurrently": "7.2.1",
@@ -174,7 +173,6 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.8.0",
    "eslint-plugin-testing-library": "^6.0.2",
-    "eslint-plugin-vitest": "^0.3.22",
    "fast-glob": "3.2.11",
    "husky": "^8.0.0",
    "lint-staged": "13.0.3",
@@ -192,10 +190,9 @@
    "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
    "stylelint-value-no-unknown-custom-properties": "^4.0.0",
    "typescript": "^5.1.6",
-    "vite": "^5.1.7",
+    "vite": "^5.4.6",
    "vite-plugin-turbosnap": "^1.0.3",
-    "vite-tsconfig-paths": "^4.3.2",
-    "yarn": "^1.22.10"
+    "vite-tsconfig-paths": "^4.3.2"
  },
  "_notes": "react-syntax-highlighter is a dependency of @whitespace/storybook-addon-html",
  "packageManager": "yarn@4.4.0"
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	62bcab1ab0	Version Packages (#3170 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-09-25 09:36:07 +02:00
Halvor Haugan	61e60d9556	Modify changeset text for Accordion change	2024-09-24 17:17:18 +02:00
Halvor Haugan	9c1eba4450	Accordion: Remove position:relative to fix popover clipping	2024-09-24 16:53:46 +02:00
Julian Nymark	63986d9872	💄 [referansesider] remove overflow	2024-09-24 16:43:04 +02:00
Ken	761c8ef64f	refactor: Update tokens use in Piktogram for sykepenger page	2024-09-24 16:31:30 +02:00
Ken	4b86b555d8	feat: Referansesider now properly handles nested routing	2024-09-24 16:10:58 +02:00
Julian Nymark	8e1e294fda	💄 [referansesider] minside add icons	2024-09-24 15:51:55 +02:00
Halvor Haugan	f71594e477	ErrorSummary: Remove aria-attributes. (#3171 )	2024-09-24 15:41:49 +02:00
Julian Nymark	d2a89851cd	💄 [referansesider] responsive design fix	2024-09-24 15:31:25 +02:00
Ken	d27da71304	feat: Refactored to use more tokens in referansesider	2024-09-24 15:26:19 +02:00
Julian Nymark	fcf17fc750	💄 [referansesider] minside card CSS	2024-09-24 15:24:41 +02:00
Julian Nymark	e1b091358b	🎨 [referansesider] add content to minside	2024-09-24 15:15:15 +02:00
dependabot[bot]	988ad39ad1	build(deps): Bump rollup in /examples/referansesider (#3173 ) Bumps [rollup](https://github.com/rollup/rollup) from 4.21.3 to 4.22.4. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v4.21.3...v4.22.4) --- updated-dependencies: - dependency-name: rollup dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-09-24 14:00:52 +02:00
Ken	524c87e3bd	feat: Update referansesider header fontsize	2024-09-24 13:54:48 +02:00
Ken	8cf6123656	feat: Created /komponenter route for component-testing, refactored button-component feat: Use func for sykepenger function	2024-09-24 13:32:24 +02:00
Julian Nymark	866e6a168c	💄 [referansesider] make sykepenger more responsive	2024-09-24 13:16:47 +02:00
Ken	bc2be15c55	Update referansesider - feat: Refactor to use aksel-icons package - refactor: use google import for font instead of inline files	2024-09-24 13:06:55 +02:00
Julian Nymark	4e6fc073fe	🐛 [referansesider] only have tanstack router devtools in dev mode	2024-09-24 12:59:56 +02:00
Ken	e895c691ce	[Referansesider] SPA deploy to aksel-referansesider.ansatt.dev.nav.no (#3174 ) * bug: Fix build-script * feat: Workflow for SPA deploy of referansesider * feat: Add workflow dispatch to SPA deploy	2024-09-24 12:40:08 +02:00
Halvor Haugan	186c0fec07	🆙 Upgrade some packages (#3165 )	2024-09-23 17:24:04 +02:00
Ken	746a58b663	feat: Updated darkside tokens with figma	2024-09-23 16:30:13 +02:00
Julian Nymark	d767aadde3	🎨 [referansesider] add crude dekoratør	2024-09-23 14:02:30 +02:00
KenandHalvor Haugan	4359428b40	[Pagination] Deprecated `page`-prop, synced design with Figma (#3164 ) * feat: Mark page-prop as deprecated in pagination * feat: Mark page-prop as deprecated in pagination with better comment * feat: Synced pagination with Figma * memo: Changeset * memo: Add classes to deprecationlist in stylelint config * memo: changeset for stylelint * memo: changeset for stylelint * Update @navikt/aksel-stylelint/src/deprecations.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> * Update .changeset/thirty-snakes-doubt.md --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>	2024-09-23 12:28:52 +02:00
Halvor Haugan	d583276428	Combobox: 🏷️ Better typing for maxSelected prop (#3169 )	2024-09-23 10:07:06 +02:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>