Version Packages (#1912 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
✨ Oppdatert ikoner (#1909 )
2026-10-13 09:12:03 +00:00 · 2023-04-03 18:49:10 +02:00 · 2023-04-03 16:08:52 +02:00 · 2023-03-31 13:41:44 +02:00 · 2023-03-31 13:26:53 +02:00 · 2023-03-31 12:47:17 +02:00
58 changed files with 379 additions and 309 deletions
@@ -1,5 +1,15 @@
 # @navikt/aksel-icons

+## 2.8.11
+
+### Patch Changes
+
+- [#1909](https://github.com/navikt/aksel/pull/1909) [`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Oppdatert ikoner
+
+## 2.8.10
+
+## 2.8.9
+
 ## 2.8.8

 ### Patch Changes
@@ -1,5 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 9.5H12V17.5" stroke="#262626" stroke-width="1.5" stroke-miterlimit="3.99933" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.75 6.5V6.5C11.75 6.63807 11.8619 6.75 12 6.75V6.75C12.1381 6.75 12.25 6.63807 12.25 6.5V6.5C12.25 6.36193 12.1381 6.25 12 6.25V6.25C11.8619 6.25 11.75 6.36193 11.75 6.5V6.5ZM11.75 6.5H12.01H12" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10 17.5H14" stroke="#262626" stroke-width="1.5" stroke-miterlimit="3.99933" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6.5C11 5.94772 11.4477 5.5 12 5.5C12.5523 5.5 13 5.94772 13 6.5C13 7.05228 12.5523 7.5 12 7.5C11.4477 7.5 11 7.05228 11 6.5ZM9.25 9.5C9.25 9.08579 9.58579 8.75 10 8.75H12C12.4142 8.75 12.75 9.08579 12.75 9.5V16.75H14C14.4142 16.75 14.75 17.0858 14.75 17.5C14.75 17.9142 14.4142 18.25 14 18.25H12H10C9.58579 18.25 9.25 17.9142 9.25 17.5C9.25 17.0858 9.58579 16.75 10 16.75H11.25V10.25H10C9.58579 10.25 9.25 9.91421 9.25 9.5Z" fill="#262626"/>
 </svg>
@@ -15,5 +15,5 @@ keywords:
  - beskrivelse
  - forklaring
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.03.2023
 created_at: 07.03.2023
@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.5 9.5C9.5 8 10.5 7 12 7C13.5 7 14.5 8 14.5 9.5C14.5 11 12 12 12 13.5V14" stroke="#262626" stroke-width="1.5" stroke-miterlimit="3.99933" stroke-linecap="round"/>
-<path d="M11.75 16.5V16.5C11.75 16.6381 11.8619 16.75 12 16.75V16.75C12.1381 16.75 12.25 16.6381 12.25 16.5V16.5C12.25 16.3619 12.1381 16.25 12 16.25V16.25C11.8619 16.25 11.75 16.3619 11.75 16.5V16.5ZM11.75 16.5H12.01H12" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.25 9.5C10.25 8.92044 10.4399 8.49575 10.7178 8.21783C10.9957 7.93991 11.4204 7.75 12 7.75C12.5796 7.75 13.0043 7.93991 13.2822 8.21783C13.5601 8.49575 13.75 8.92044 13.75 9.5C13.75 9.65777 13.6859 9.84934 13.4991 10.1109C13.3076 10.379 13.0426 10.6467 12.7197 10.9697L12.6985 10.9909C12.4009 11.2884 12.0511 11.6381 11.7803 12.0172C11.4984 12.4118 11.25 12.9078 11.25 13.5V14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14V13.5C12.75 13.3422 12.8141 13.1507 13.0009 12.8891C13.1924 12.621 13.4574 12.3533 13.7803 12.0303L13.8015 12.0091C14.0991 11.7116 14.4489 11.3619 14.7197 10.9828C15.0016 10.5882 15.25 10.0922 15.25 9.5C15.25 8.57956 14.9399 7.75425 14.3428 7.15717C13.7457 6.56009 12.9204 6.25 12 6.25C11.0796 6.25 10.2543 6.56009 9.65717 7.15717C9.06009 7.75425 8.75 8.57956 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5ZM12 15.5C11.4477 15.5 11 15.9477 11 16.5C11 17.0523 11.4477 17.5 12 17.5C12.5523 17.5 13 17.0523 13 16.5C13 15.9477 12.5523 15.5 12 15.5Z" fill="#262626"/>
 </svg>
@@ -13,5 +13,5 @@ keywords:
  - veiledning
  - spørsmålstegn
 variant: Stroke
-updated_at: 08.03.2023
+updated_at: 31.03.2023
 created_at: 07.03.2023
@@ -1,5 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.875 6H9.5H15C15.5523 6 16 6.44772 16 7V12V14.4M3 10.5V12V17C3 17.5523 3.44772 18 4 18H9.5H11.125" stroke="#262626" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16 9.6L21 8V16L16 14.4V9.6Z" stroke="#262626" stroke-width="1.5" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.96967 5.46967C3.26256 5.17678 3.73744 5.17678 4.03033 5.46967L16.0303 17.4697C16.3232 17.7626 16.3232 18.2374 16.0303 18.5303C15.7374 18.8232 15.2626 18.8232 14.9697 18.5303L2.96967 6.53033C2.67678 6.23744 2.67678 5.76256 2.96967 5.46967Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 5.25H7.875C7.46079 5.25 7.125 5.58579 7.125 6C7.125 6.41421 7.46079 6.75 7.875 6.75H15C15.1381 6.75 15.25 6.86193 15.25 7V9.6V14.4C15.25 14.5901 15.3207 14.7637 15.4373 14.8959C15.4739 14.9375 15.5152 14.975 15.5605 15.0078C15.6286 15.0571 15.7052 15.0952 15.7877 15.1195L20.7714 16.7143C20.9995 16.7873 21.2488 16.747 21.4422 16.6058C21.6356 16.4646 21.75 16.2395 21.75 16V8C21.75 7.76051 21.6356 7.53542 21.4422 7.39422C21.2488 7.25302 20.9995 7.21269 20.7714 7.28568L16.75 8.57254V7C16.75 6.0335 15.9665 5.25 15 5.25ZM20.25 14.9725L16.75 13.8525V10.1475L20.25 9.02746V14.9725ZM3.75 10.5C3.75 10.0858 3.41421 9.75 3 9.75C2.58579 9.75 2.25 10.0858 2.25 10.5V17C2.25 17.9665 3.0335 18.75 4 18.75H11.125C11.5392 18.75 11.875 18.4142 11.875 18C11.875 17.5858 11.5392 17.25 11.125 17.25H4C3.86193 17.25 3.75 17.1381 3.75 17V10.5ZM4.03033 5.46967C3.73744 5.17678 3.26256 5.17678 2.96967 5.46967C2.67678 5.76256 2.67678 6.23744 2.96967 6.53033L14.9697 18.5303C15.2626 18.8232 15.7374 18.8232 16.0303 18.5303C16.3232 18.2374 16.3232 17.7626 16.0303 17.4697L4.03033 5.46967Z" fill="#262626"/>
 </svg>
@@ -3,15 +3,24 @@ category: Media
 sub_category: Media
 keywords:
  - record
-  - capture
  - film
  - video
  - camera
+  - no camera
+  - no video
+  - no filming
+  - no recording
  - opptak
  - ta opp
  - filme
  - video
  - kamera
+  - ingen filming
+  - ingen video
+  - ingen kamera
+  - ingen opptak
+  - unavailable
+  - utilgjengelig
 variant: Stroke
-updated_at: 30.03.2023
+updated_at: 31.03.2023
 created_at: 30.03.2023
@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.6749 5.85688C2.41013 6.16353 2.25 6.56307 2.25 7V17C2.25 17.9665 3.0335 18.75 4 18.75H15C15.1725 18.75 15.3391 18.725 15.4966 18.6785L2.6749 5.85688ZM19.4845 16.3025L20.7714 16.7143C20.9995 16.7873 21.2488 16.747 21.4422 16.6058C21.6356 16.4646 21.75 16.2395 21.75 16V8.00001C21.75 7.76052 21.6356 7.53543 21.4422 7.39423C21.2488 7.25303 20.9995 7.2127 20.7714 7.28569L16.75 8.57254V7C16.75 6.0335 15.9665 5.25 15 5.25H8.43198L19.4845 16.3025Z" fill="#262626"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.46967 3.46967C3.76256 3.17678 4.23744 3.17678 4.53033 3.46967L19.5303 18.4697C19.8232 18.7626 19.8232 19.2374 19.5303 19.5303C19.2374 19.8232 18.7626 19.8232 18.4697 19.5303L3.46967 4.53033C3.17678 4.23744 3.17678 3.76256 3.46967 3.46967Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.67678 8.35876C2.51929 8.20127 2.25 8.31281 2.25 8.53553V17C2.25 17.9665 3.0335 18.75 4 18.75H12.4645C12.6872 18.75 12.7987 18.4807 12.6412 18.3232L2.67678 8.35876ZM16.3232 15.6412C16.4807 15.7987 16.75 15.6872 16.75 15.4645V7C16.75 6.0335 15.9665 5.25 15 5.25H6.53553C6.31281 5.25 6.20127 5.51929 6.35876 5.67678L16.3232 15.6412ZM18.25 15.725C18.25 15.8337 18.3203 15.93 18.4238 15.9631L20.7714 16.7143C20.9995 16.7873 21.2488 16.747 21.4422 16.6058C21.6356 16.4646 21.75 16.2395 21.75 16V8.00001C21.75 7.76052 21.6356 7.53543 21.4422 7.39423C21.2488 7.25303 20.9995 7.2127 20.7714 7.28569L18.4238 8.03692C18.3203 8.07006 18.25 8.16631 18.25 8.27503V15.725ZM4.03033 5.46967C3.73744 5.17678 3.26256 5.17678 2.96967 5.46967C2.67678 5.76256 2.67678 6.23744 2.96967 6.53033L14.9697 18.5303C15.2626 18.8232 15.7374 18.8232 16.0303 18.5303C16.3232 18.2374 16.3232 17.7626 16.0303 17.4697L4.03033 5.46967Z" fill="#262626"/>
 </svg>
@@ -3,15 +3,24 @@ category: Media
 sub_category: Media
 keywords:
  - record
-  - capture
  - film
  - video
  - camera
+  - no camera
+  - no video
+  - no filming
+  - no recording
  - opptak
  - ta opp
  - filme
  - video
  - kamera
+  - ingen filming
+  - ingen video
+  - ingen kamera
+  - ingen opptak
+  - unavailable
+  - utilgjengelig
 variant: Fill
-updated_at: 30.03.2023
+updated_at: 31.03.2023
 created_at: 30.03.2023
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/ds-codemod

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
 ## 2.8.8

 ## 2.8.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-codemod",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "Aksel codemods for NAVs designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -39,8 +39,8 @@
    "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.8.8",
-    "@navikt/ds-react": "^2.8.8",
+    "@navikt/ds-icons": "^2.8.11",
+    "@navikt/ds-react": "^2.8.11",
    "clsx": "^1.1.1"
  },
  "devDependencies": {
@@ -1,5 +1,15 @@
 # @navikt/ds-css

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
+### Patch Changes
+
+- [#1905](https://github.com/navikt/aksel/pull/1905) [`212194964`](https://github.com/navikt/aksel/commit/212194964c4dd576e1ffc031316dff8cbe5016a2) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Padding/border-radius tokens for button.css
+
 ## 2.8.8

 ## 2.8.7
@@ -16,38 +16,50 @@
 }

 .navds-button {
+  --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
+
  display: inline-flex;
  cursor: pointer;
  margin: 0;
  text-decoration: none;
  border: none;
  background: none;
-  border-radius: var(--a-border-radius-medium);
-  padding: var(--a-spacing-3) var(--a-spacing-5);
+  border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
+  padding: var(--ac-button-padding, var(--__ac-button-padding));
  align-items: center;
  justify-content: center;
  gap: var(--a-spacing-2);
 }

 .navds-button--small {
-  padding: 0.375rem var(--a-spacing-3);
+  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-small, var(--__ac-button-padding));
 }

 .navds-button--xsmall {
-  padding: var(--a-spacing-05) var(--a-spacing-2);
+  --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
+
+  padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
  gap: var(--a-spacing-1);
 }

 .navds-button--icon-only {
-  padding: var(--a-spacing-3);
+  --__ac-button-padding: var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
 }

 .navds-button--small.navds-button--icon-only {
-  padding: 0.375rem;
+  --__ac-button-padding: 0.375rem;
+
+  padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
 }

 .navds-button--xsmall.navds-button--icon-only {
-  padding: var(--a-spacing-1);
+  --__ac-button-padding: var(--a-spacing-1);
+
+  padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }

 .navds-button:focus {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.8",
+    "@navikt/ds-tokens": "^2.8.11",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -27,6 +27,13 @@
    "--ac-accordion-content-border-open": "--a-border-default"
  },
  "button": {
+    "--ac-button-border-radius": "--a-border-radius-medium",
+    "--ac-button-padding": "var(--a-spacing-3) var(--a-spacing-5)",
+    "--ac-button-padding-small": "0.375rem var(--a-spacing-3)",
+    "--ac-button-padding-xsmall": "var(--a-spacing-05) var(--a-spacing-2)",
+    "--ac-button-padding-icon-only": "var(--a-spacing-3)",
+    "--ac-button-padding-icon-only-small": "0.375rem",
+    "--ac-button-padding-icon-only-xsmall": "var(--a-spacing-1)",
    "--ac-button-primary-bg": "--a-surface-action",
    "--ac-button-primary-text": "--a-text-on-action",
    "--ac-button-primary-hover-bg": "--a-surface-action-hover",
@@ -1,5 +1,31 @@
 # @navikt/ds-react

+## 2.8.11
+
+### Patch Changes
+
+- Updated dependencies [[`270427910`](https://github.com/navikt/aksel/commit/2704279107a5fbf93048de37d014e78f6721438f)]:
+  - @navikt/aksel-icons@2.8.11
+  - @navikt/ds-icons@2.8.11
+
+## 2.8.10
+
+### Patch Changes
+
+- [#1907](https://github.com/navikt/aksel/pull/1907) [`63fdacf0f`](https://github.com/navikt/aksel/commit/63fdacf0f8fa09593c64b35b49381d6c8a1befd1) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :recycle: Refactor event-handling i datepicker-hooks
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.10
+  - @navikt/ds-icons@2.8.10
+
+## 2.8.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.9
+  - @navikt/ds-icons@2.8.9
+
 ## 2.8.8

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,8 +37,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.8.8",
-    "@navikt/ds-icons": "^2.8.8",
+    "@navikt/aksel-icons": "^2.8.11",
+    "@navikt/ds-icons": "^2.8.11",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -3,7 +3,7 @@ import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
 import { BodyShort, Button, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
-import { useDateInputContext } from "./hooks";
+import { useDateInputContext } from "./context";

 export interface DateInputProps
  extends FormFieldProps,
@@ -0,0 +1,5 @@
+export { useDateInputContext, DateContext } from "./useDateInputContext";
+export {
+  useSharedMonthContext,
+  SharedMonthProvider,
+} from "./useSharedMonthContext";
@@ -13,14 +13,14 @@ import {
 } from "react-day-picker";
 import { omit, Popover, useId } from "../..";
 import { DateInputType, DatePickerInput } from "../DateInput";
-import { DateContext } from "../hooks";
+import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
 import { Caption, DropdownCaption } from "./caption";
 import DatePickerStandalone, {
  DatePickerStandaloneType,
 } from "./DatePickerStandalone";
 import { DayButton } from "./DayButton";
-import { Head } from "./Head";
+import { TableHead } from "./TableHead";

 export type ConditionalModeProps =
  | {
@@ -221,7 +221,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                components={{
                  Caption: dropdownCaption ? DropdownCaption : Caption,
                  Day: DayButton,
-                  Head: Head,
+                  Head: TableHead,
                }}
                className={cl("navds-date", className)}
                classNames={{
@@ -13,7 +13,7 @@ import { omit } from "../..";
 import { getLocaleFromString, labels } from "../utils";
 import { Caption, DropdownCaption } from "./caption";
 import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
-import { Head } from "./Head";
+import { TableHead } from "./TableHead";

 interface DatePickerStandaloneDefaultProps
  extends Omit<
@@ -100,7 +100,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
          selected={selected ?? selectedDates}
          components={{
            Caption: dropdownCaption ? DropdownCaption : Caption,
-            Head: Head,
+            Head: TableHead,
          }}
          className="navds-date"
          classNames={{ vhidden: "navds-sr-only" }}
@@ -2,7 +2,7 @@ import React from "react";
 import { HeadRow, useDayPicker } from "react-day-picker";

 /** Render the table head. */
-export function Head(): JSX.Element {
+export function TableHead(): JSX.Element {
  const { classNames, styles, components } = useDayPicker();
  const HeadRowComponent = components?.HeadRow ?? HeadRow;
  return (
@@ -12,27 +12,6 @@ const disabledDays = [
 export default {
  title: "ds-react/Datepicker",
  component: DatePicker,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    locale: {
-      control: {
-        type: "radio",
-        options: ["nb", "nn", "en"],
-      },
-    },
-    mode: {
-      defaultValue: "single",
-      control: {
-        type: "radio",
-        options: ["single", "multiple", "range"],
-      },
-    },
-  },
 };

 export const Default = {
@@ -123,6 +102,27 @@ export const Default = {
    inputfield: true,
    standalone: false,
    openOnFocus: true,
+    mode: "single",
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    locale: {
+      control: {
+        type: "radio",
+        options: ["nb", "nn", "en"],
+      },
+    },
+    mode: {
+      control: {
+        type: "radio",
+        options: ["single", "multiple", "range"],
+      },
+    },
  },
 };

@@ -4,8 +4,3 @@ export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatep
 export type { RangeValidationT } from "./useRangeDatepicker";
 export { useMonthpicker as UNSAFE_useMonthpicker } from "./useMonthPicker";
 export type { MonthValidationT } from "./useMonthPicker";
-export { useDateInputContext, DateContext } from "./useDateInputContext";
-export {
-  useSharedMonthContext,
-  SharedMonthProvider,
-} from "./useSharedMonthContext";
@@ -1,6 +1,6 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
 import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -10,6 +10,8 @@ import {
  isValidDate,
  parseDate,
 } from "../utils";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseDatepickerOptions
  extends Pick<
@@ -134,7 +136,7 @@ export const useDatepicker = (
  const locale = getLocaleFromString(_locale);

  const inputRef = useRef<HTMLInputElement>(null);
-  const daypickerRef = useRef<HTMLDivElement>(null);
+  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -148,45 +150,21 @@ export const useDatepicker = (
    : "";
  const [inputValue, setInputValue] = useState(defaultInputValue);

+  useOutsideClickHandler(open, setOpen, [
+    daypickerRef,
+    inputRef.current,
+    inputRef.current?.nextSibling,
+  ]);
+
+  useEscape(open, setOpen, inputRef);
+
  const updateDate = (date?: Date) => {
    onDateChange?.(date);
    setSelectedDay(date);
  };

-  const updateValidation = (val: Partial<DateValidationT> = {}) => {
-    const msg = getValidationMessage(val);
-    onValidate?.(msg);
-  };
-
-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-
-      ![
-        daypickerRef.current,
-        inputRef.current,
-        inputRef.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
+  const updateValidation = (val: Partial<DateValidationT> = {}) =>
+    onValidate?.(getValidationMessage(val));

  const reset = () => {
    updateDate(defaultSelected);
@@ -300,24 +278,6 @@ export const useDatepicker = (
    setMonth(defaultMonth ?? day);
  };

-  const handleClose = useCallback(() => {
-    setOpen(false);
-    inputRef.current && inputRef.current.focus();
-  }, []);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
  const datepickerProps = {
    month,
    onMonthChange: (month) => setMonth(month),
@@ -331,7 +291,7 @@ export const useDatepicker = (
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
    disableWeekends,
-    ref: daypickerRef,
+    ref: setDaypickerRef,
  };

  const inputProps = {
@@ -0,0 +1,25 @@
+import React, { useCallback, useEffect } from "react";
+
+export const useEscape = (
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  focusRef: any
+) => {
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    focusRef?.current && focusRef.current.focus();
+  }, [focusRef, setOpen]);
+
+  const escape = useCallback(
+    (e) => open && e.key === "Escape" && handleClose(),
+    [handleClose, open]
+  );
+
+  useEffect(() => {
+    window.addEventListener("keydown", escape, false);
+
+    return () => {
+      window.removeEventListener("keydown", escape, false);
+    };
+  }, [escape]);
+};
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DateInputProps } from "../DateInput";
 import { MonthPickerProps } from "../monthpicker/MonthPicker";
 import {
@@ -8,6 +8,8 @@ import {
  isValidDate,
  parseDate,
 } from "../utils";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export interface UseMonthPickerOptions
  extends Pick<
@@ -118,7 +120,7 @@ export const useMonthpicker = (
  const locale = getLocaleFromString(_locale);

  const inputRef = useRef<HTMLInputElement>(null);
-  const monthpickerRef = useRef<HTMLDivElement>(null);
+  const [monthpickerRef, setMonthpickerRef] = useState<HTMLDivElement>();

  // Initialize states
  const [year, setYear] = useState(defaultSelected ?? defaultYear ?? today);
@@ -131,44 +133,21 @@ export const useMonthpicker = (

  const [inputValue, setInputValue] = useState(defaultInputValue);

+  useOutsideClickHandler(open, setOpen, [
+    monthpickerRef,
+    inputRef.current,
+    inputRef.current?.nextSibling,
+  ]);
+
+  useEscape(open, setOpen, inputRef);
+
  const updateMonth = (date?: Date) => {
    onMonthChange?.(date);
    setSelectedMonth(date);
  };

-  const updateValidation = (val: Partial<MonthValidationT> = {}) => {
-    const msg = getValidationMessage(val);
-    onValidate?.(msg);
-  };
-
-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      ![
-        monthpickerRef.current,
-        inputRef.current,
-        inputRef.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
+  const updateValidation = (val: Partial<MonthValidationT> = {}) =>
+    onValidate?.(getValidationMessage(val));

  const reset = () => {
    updateMonth(defaultSelected);
@@ -294,24 +273,6 @@ export const useMonthpicker = (
    setYear(month);
  };

-  const handleClose = useCallback(() => {
-    setOpen(false);
-    inputRef.current && inputRef.current.focus();
-  }, []);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
  const monthpickerProps = {
    year,
    onYearChange: (y?: Date) => setYear(y ?? today),
@@ -323,7 +284,7 @@ export const useMonthpicker = (
    open,
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
-    ref: monthpickerRef,
+    ref: setMonthpickerRef,
  };

  const inputProps = {
@@ -0,0 +1,34 @@
+import React, { useCallback, useEffect } from "react";
+
+export const useOutsideClickHandler = (
+  open: boolean,
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  refs: Array<any>
+) => {
+  const handleFocusIn = useCallback(
+    (e) => {
+      const composed = e.composedPath?.()?.[0];
+      if (!e?.target || !e?.target?.nodeType || !composed) {
+        return;
+      }
+      if (
+        !refs.some(
+          (element) =>
+            element?.contains(e.target) || element?.contains(composed)
+        )
+      ) {
+        open && setOpen(false);
+      }
+    },
+    [open, refs, setOpen]
+  );
+
+  useEffect(() => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("pointerdown", handleFocusIn);
+    return () => {
+      window?.removeEventListener?.("focusin", handleFocusIn);
+      window?.removeEventListener?.("pointerdown", handleFocusIn);
+    };
+  }, [handleFocusIn]);
+};
@@ -1,7 +1,7 @@
 import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
 import isBefore from "date-fns/isBefore";
 import isWeekend from "date-fns/isWeekend";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
 import { DateInputProps } from "../DateInput";
 import { DatePickerProps } from "../datepicker/DatePicker";
@@ -12,6 +12,8 @@ import {
  parseDate,
 } from "../utils";
 import { DateValidationT, UseDatepickerOptions } from "./useDatepicker";
+import { useEscape } from "./useEscape";
+import { useOutsideClickHandler } from "./useOutsideClickHandler";

 export type RangeValidationT = {
  from: DateValidationT;
@@ -211,7 +213,7 @@ export const useRangeDatepicker = (

  const inputRefTo = useRef<HTMLInputElement>(null);
  const inputRefFrom = useRef<HTMLInputElement>(null);
-  const datePickerRef = useRef<HTMLDivElement | null>(null);
+  const [daypickerRef, setDaypickerRef] = useState<HTMLDivElement>();

  const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);

@@ -241,6 +243,20 @@ export const useRangeDatepicker = (

  const [open, setOpen] = useState(false);

+  useOutsideClickHandler(open, setOpen, [
+    daypickerRef,
+    inputRefTo.current,
+    inputRefFrom.current,
+    inputRefTo.current?.nextSibling,
+    inputRefFrom.current?.nextSibling,
+  ]);
+
+  useEscape(
+    open,
+    setOpen,
+    selectedRange?.from && !selectedRange?.to ? inputRefTo : inputRefFrom
+  );
+
  const updateRange = (range?: DateRange) => {
    onRangeChange?.(range);
    setSelectedRange(range);
@@ -255,37 +271,6 @@ export const useRangeDatepicker = (
    onValidate?.(msg);
  };

-  const handleFocusIn = useCallback(
-    (e) => {
-      /* Workaround for shadow-dom users (open) */
-      const composed = e.composedPath?.()?.[0];
-      if (!e?.target || !e?.target?.nodeType || !composed) {
-        return;
-      }
-      ![
-        datePickerRef.current,
-        inputRefTo.current,
-        inputRefFrom.current,
-        inputRefTo.current?.nextSibling,
-        inputRefFrom.current?.nextSibling,
-      ].some(
-        (element) => element?.contains(e.target) || element?.contains(composed)
-      ) &&
-        open &&
-        setOpen(false);
-    },
-    [open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("focusin", handleFocusIn);
-    window.addEventListener("pointerdown", handleFocusIn);
-    return () => {
-      window?.removeEventListener?.("focusin", handleFocusIn);
-      window?.removeEventListener?.("pointerdown", handleFocusIn);
-    };
-  }, [handleFocusIn]);
-
  const reset = () => {
    updateRange(defaultSelected ?? { from: undefined, to: undefined });
    setMonth(defaultSelected ? defaultSelected?.from : defaultMonth ?? today);
@@ -527,28 +512,6 @@ export const useRangeDatepicker = (
      : toChange(e.target.value, day, isBefore, isAfter);
  };

-  const handleClose = useCallback(() => {
-    setOpen(false);
-    if (selectedRange?.from && !selectedRange?.to) {
-      inputRefTo?.current?.focus();
-    } else {
-      inputRefFrom?.current?.focus();
-    }
-  }, [selectedRange]);
-
-  const escape = useCallback(
-    (e) => open && e.key === "Escape" && handleClose(),
-    [handleClose, open]
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", escape, false);
-
-    return () => {
-      window.removeEventListener("keydown", escape, false);
-    };
-  }, [escape]);
-
  const datepickerProps = {
    month: month,
    onMonthChange: (month) => setMonth(month),
@@ -563,7 +526,7 @@ export const useRangeDatepicker = (
    onOpenToggle: () => setOpen((x) => !x),
    disabled,
    disableWeekends,
-    ref: datePickerRef,
+    ref: setDaypickerRef,
  };

  const fromInputProps = {
@@ -6,7 +6,7 @@ import isSameMonth from "date-fns/isSameMonth";
 import setYear from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { useDayPicker } from "react-day-picker";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { dateIsInCurrentMonth, isMatch, nextEnabled } from "../utils";

 interface MonthType {
@@ -6,7 +6,7 @@ import startOfYear from "date-fns/startOfYear";
 import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Button, Select } from "../..";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { hasNextYear, labelNextYear, labelPrevYear } from "../utils";

 export const MonthCaption = () => {
@@ -3,7 +3,7 @@ import React, { forwardRef, useRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
 import { Popover, useId } from "../..";
 import { DateInputType, MonthPickerInput } from "../DateInput";
-import { DateContext, SharedMonthProvider } from "../hooks";
+import { DateContext, SharedMonthProvider } from "../context";
 import { getLocaleFromString, Matcher } from "../utils";
 import MonthCaption from "./MonthCaption";
 import MonthPickerStandalone, {
@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { RootProvider } from "react-day-picker";
-import { SharedMonthProvider } from "../hooks";
+import { SharedMonthProvider } from "../context";
 import { getLocaleFromString } from "../utils";
 import MonthCaption from "./MonthCaption";
 import { MonthPickerProps } from "./MonthPicker";
@@ -4,7 +4,7 @@ import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React, { useState } from "react";
 import { BodyShort } from "../..";
-import { useSharedMonthContext } from "../hooks";
+import { useSharedMonthContext } from "../context";
 import { isMatch } from "../utils";
 import MonthButton from "./MonthButton";

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

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
 ## 2.8.8

 ## 2.8.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "Tailwind config based on @navikt/ds-tokens",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -22,7 +22,7 @@
    "directory": "@navikt/core/tailwind"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.8",
+    "@navikt/ds-tokens": "^2.8.11",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
 ## 2.8.8

 ## 2.8.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,11 @@
 # @navikt/ds-icons

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
 ## 2.8.8

 ## 2.8.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,11 @@
 # @navikt/ds-css-internal

+## 2.8.11
+
+## 2.8.10
+
+## 2.8.9
+
 ## 2.8.8

 ## 2.8.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css-internal",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "CSS for NAV internal Designsystem-components",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,29 @@
 # @navikt/ds-react-internal

+## 2.8.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.11
+  - @navikt/ds-icons@2.8.11
+
+## 2.8.10
+
+### Patch Changes
+
+- Updated dependencies [[`63fdacf0f`](https://github.com/navikt/aksel/commit/63fdacf0f8fa09593c64b35b49381d6c8a1befd1)]:
+  - @navikt/ds-react@2.8.10
+  - @navikt/ds-icons@2.8.10
+
+## 2.8.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.9
+  - @navikt/ds-icons@2.8.9
+
 ## 2.8.8

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.8.8",
+  "version": "2.8.11",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.8.8",
-    "@navikt/ds-react": "^2.8.8",
+    "@navikt/ds-icons": "^2.8.11",
+    "@navikt/ds-react": "^2.8.11",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -15,15 +15,15 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^2.8.8",
-    "@navikt/ds-codemod": "^2.8.8",
-    "@navikt/ds-css": "^2.8.8",
-    "@navikt/ds-css-internal": "^2.8.8",
-    "@navikt/ds-icons": "^2.8.8",
-    "@navikt/ds-react": "^2.8.8",
-    "@navikt/ds-react-internal": "^2.8.8",
-    "@navikt/ds-tailwind": "^2.8.8",
-    "@navikt/ds-tokens": "^2.8.8"
+    "@navikt/aksel-icons": "^2.8.11",
+    "@navikt/ds-codemod": "^2.8.11",
+    "@navikt/ds-css": "^2.8.11",
+    "@navikt/ds-css-internal": "^2.8.11",
+    "@navikt/ds-icons": "^2.8.11",
+    "@navikt/ds-react": "^2.8.11",
+    "@navikt/ds-react-internal": "^2.8.11",
+    "@navikt/ds-tailwind": "^2.8.11",
+    "@navikt/ds-tokens": "^2.8.11"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -1,4 +1,4 @@
-import { ExternalLink } from "@navikt/ds-icons";
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
 import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
 import BlockContent from "@sanity/block-content-to-react";
 import cl from "clsx";
@@ -220,7 +220,7 @@ const serializers = {
            )
          }
        >
-          {children} <ExternalLink title="åpner lenken i ny fane" />
+          {children} <ExternalLinkIcon title="åpner lenken i ny fane" />
        </Link>
      ) : (
        <NextLink href={href} passHref legacyBehavior>
@@ -1,4 +1,5 @@
-import { Close, Hamburger as HamburgerIcon } from "@navikt/ds-icons";
+import { MenuHamburgerIcon, XMarkIcon } from "@navikt/aksel-icons";
+
 import { Button } from "@navikt/ds-react";
 import cl from "clsx";
 import Link from "next/link";
@@ -53,8 +54,9 @@ export const Hamburger = () => {
          aria-expanded={open}
          className="focus-visible:shadow-focus hover:bg-surface-neutral-subtle-hover ml-2 flex aspect-square items-center justify-center rounded px-3 py-3 focus:outline-none"
        >
-          <HamburgerIcon
-            className="pointer-events-none text-2xl"
+          <MenuHamburgerIcon
+            fontSize="2rem"
+            className="pointer-events-none"
            aria-label="Åpne meny"
          />
        </button>
@@ -75,7 +77,7 @@ export const Hamburger = () => {
                  styles.akselTertiaryButton,
                  "absolute top-2 right-2"
                )}
-                icon={<Close title="lukk meny" className="h-5 w-5" />}
+                icon={<XMarkIcon title="lukk meny" fontSize="1.5rem" />}
              />
              <LinkElement
                onClick={() => setOpen(false)}
@@ -1,5 +1,4 @@
 import { SearchLogT, useDebounce, logSearch } from "@/utils";
-import { Search as SearchIcon } from "@navikt/ds-icons";
 import {
  Button,
  Checkbox,
@@ -15,6 +14,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import ReactModal from "react-modal";
 import { Group, GroupComponent } from "./Group";
 import styles from "../header.module.css";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";

 /**
 * https://www.figma.com/file/71Sm1h6VV23lbBbQ3CJJ9t/Aksel-v2?node-id=1861%3A186079&t=ARKgZcA6B7ysmG3V-0
@@ -195,8 +195,8 @@ export const GlobalSearch = () => {
        className="hover:bg-deepblue-700 bg-deepblue-600 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
        aria-keyshortcuts="Control+b"
        icon={
-          <SearchIcon
-            className="pointer-events-none -mt-[1px] shrink-0 text-xl"
+          <MagnifyingGlassIcon
+            className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
            aria-label="Åpne meny"
            aria-hidden
          />
@@ -1,7 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT, urlFor } from "@/lib";
-import { ErrorFilled, SuccessFilled, WarningFilled } from "@navikt/ds-icons";
+import {
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import React from "react";
@@ -10,23 +14,26 @@ const GetIcon = (s: string) => {
  switch (s) {
    case "do":
      return (
-        <SuccessFilled
+        <CheckmarkCircleFillIcon
          aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-green-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-green-500"
        />
      );
    case "dont":
      return (
-        <ErrorFilled
+        <XMarkOctagonFillIcon
          aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-red-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-red-500"
        />
      );
    case "warning":
      return (
-        <WarningFilled
+        <ExclamationmarkTriangleFillIcon
          aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-orange-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-orange-500"
        />
      );
    default:
@@ -60,14 +67,18 @@ const Element = ({
          {
            "border-t-border-success": block.variant === "do",
            "border-t-border-danger": block.variant === "dont",
-            "border-t-border-warning": block.variant === "warning",
+            "border-t-surface-warning": block.variant === "warning",
          }
        )}
      />
      <figcaption data-variant={block.variant}>
        <div className="mt-3">
          {block.description && (
-            <BodyShort size="small" as="span" className="inline-flex gap-2">
+            <BodyShort
+              size="small"
+              as="span"
+              className="inline-flex items-center gap-2"
+            >
              {GetIcon(block.variant)}
              {block.description}
            </BodyShort>
@@ -1,8 +1,8 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
+import { ChevronDownCircleIcon } from "@navikt/aksel-icons";
 import internal from "@navikt/ds-css-internal/tokens.json";
 import core from "@navikt/ds-css/tokens.json";
-import { Expand } from "@navikt/ds-icons";
 import { BodyLong, Label, Link } from "@navikt/ds-react";
 import cl from "classnames";
 import CopyButton from "components/sanity-modules/code/CopyButton";
@@ -94,14 +94,15 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
      {!open && showMore && (
        <button
          onClick={() => setOpen(true)}
-          className="text-medium group mx-auto flex shrink-0 -translate-y-3/4 flex-col items-center focus:outline-none"
+          className="text-medium group mx-auto flex shrink-0 -translate-y-3/4 flex-col items-center gap-1 focus:outline-none"
        >
          <span className="group-focus-visible:bg-border-focus group-focus-visible:text-text-on-action group-focus-visible:shadow-focus">
            Se alle tokens
          </span>
-          <Expand
-            className="h-4 w-4 transition-all group-hover:translate-y-1"
+          <ChevronDownCircleIcon
+            className="transition-all group-hover:translate-y-1"
            aria-hidden
+            fontSize="1.5rem"
          />
        </button>
      )}
@@ -1,4 +1,4 @@
-import { Edit } from "@navikt/ds-icons";
+import { PencilIcon } from "@navikt/aksel-icons";
 import { getParameters } from "codesandbox/lib/api/define";

 const indexTsx = `import React from 'react';
@@ -29,6 +29,7 @@ export const CodeSandbox = ({ code }: { code: string }) => {
            "@navikt/ds-react-internal": "latest",
            "@navikt/ds-css-internal": "latest",
            "@navikt/ds-icons": "latest",
+            "@navikt/aksel-icons": "latest",
          },
        } as any,
        isBinary: false,
@@ -58,9 +59,9 @@ export const CodeSandbox = ({ code }: { code: string }) => {
      <input type="hidden" name="query" value="module=App.js" />
      <button
        type="submit"
-        className="flex items-center justify-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100 focus:outline-none focus-visible:shadow-focus-inset active:bg-gray-200"
+        className="focus-visible:shadow-focus-inset flex items-center justify-center gap-1 rounded-sm px-3 py-2 hover:bg-gray-100 focus:outline-none active:bg-gray-200"
      >
-        <Edit aria-hidden />
+        <PencilIcon aria-hidden fontSize="1.5rem" />
        CodeSandbox
      </button>
    </form>
@@ -1,11 +1,8 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
-import { Edit, LightBulb } from "@navikt/ds-icons";
-import { Detail, Link } from "@navikt/ds-react";
-import cl from "clsx";
-import React from "react";
-import style from "./tips.module.css";
+import { LightBulbIcon, PencilIcon } from "@navikt/aksel-icons";
+import { BodyShort, Detail, Link } from "@navikt/ds-react";

 const Tips = ({ node }: { node: SanityT.Schema.tips }) => {
  if (!node || !node.body) {
@@ -14,12 +11,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }) => {

  if (node.eksperiment) {
    return (
-      <div
-        className={cl(
-          style.tips,
-          "linear my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4 sm:px-8"
-        )}
-      >
+      <div className="linear my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4 sm:px-8">
        <Detail
          className="text-text-subtle flex items-center gap-1 font-semibold uppercase"
          spacing
@@ -57,10 +49,10 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }) => {
          }}
        >
          Send feedback
-          <Edit
+          <PencilIcon
            aria-hidden
            aria-label="send inn feedback"
-            className="text-base"
+            fontSize="1.5rem"
          />
        </Link>
      </div>
@@ -68,19 +60,15 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }) => {
  }

  return (
-    <div
-      className={cl(
-        style.tips,
-        "my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)] sm:px-6"
-      )}
-    >
-      <Detail
-        className="override-text-no-max text-text-subtle -ml-[2px] flex items-center gap-1 font-semibold"
+    <div className="border-l-deepblue-500 bg-deepblue-50 my-7 max-w-2xl border-l-4 px-4 py-3 sm:px-6">
+      <BodyShort
+        className="override-text-no-max text-deepblue-800 -ml-[2px] flex items-center gap-1 font-semibold"
        spacing
+        size="small"
      >
-        <LightBulb className="text-large" title="tips" aria-hidden />
+        <LightBulbIcon fontSize="1.5rem" title="tips" aria-hidden />
        Tips
-      </Detail>
+      </BodyShort>
      <SanityBlockContent blocks={node.body} noLastMargin size="small" />
    </div>
  );
@@ -1,7 +0,0 @@
-.tips {
-  @apply bg-gray-50;
-}
-
-:global(.aksel-artikkel) .tips {
-  @apply bg-white;
-}
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "2.8.8",
-    "@navikt/ds-react": "2.8.8",
+    "@navikt/ds-css": "2.8.11",
+    "@navikt/ds-react": "2.8.11",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	fcec29fd60	Version Packages (#1912 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-04-03 18:49:10 +02:00
Ken	2704279107	✨ Oppdatert ikoner (#1909 )	2023-04-03 16:08:52 +02:00
github-actions[bot]andgithub-actions[bot]	46cbb4ba87	Version Packages (#1908 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-31 13:41:44 +02:00
Ken	63fdacf0f8	♻️ Refactor eventhandling i datepicker-hooks (#1907 )	2023-03-31 13:26:53 +02:00
github-actions[bot]andgithub-actions[bot]	b5c8a94378	Version Packages (#1906 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-31 12:47:17 +02:00
Ken	212194964c	✨ Bedre tokens-utvalg for button (#1905 )	2023-03-31 11:58:30 +02:00
Ken	d151cf4c07	🐛 Fikset bakgrunn på tips-modul	2023-03-30 15:30:14 +02:00
Ken	44ba7a3a79	♻️ Bruker flere nye aksel-icons på nettside, refactor Tips-modul	2023-03-30 15:26:36 +02:00