Version Packages (#1845)

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

.github/workflows/aksel-dev.yml

@@ -40,6 +40,10 @@ jobs:
   build_and_deploy:
     name: Build and deploy to dev-gcp
     runs-on: ubuntu-20.04
+    permissions:
+      packages: "write"
+      contents: "read"
+      id-token: "write"
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -51,6 +55,7 @@ jobs:
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -68,6 +73,13 @@ jobs:
           yarn boot
           yarn workspace aksel.nav.no build:next
 
+      - name: Upload static files to NAV CDN
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./aksel.nav.no/website/.next/static
+          destination: "/website/_next"
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:

.github/workflows/aksel-prod.yml

@@ -72,6 +72,10 @@ jobs:
   build_and_deploy:
     name: Build and deploy to prod-gcp
     runs-on: ubuntu-latest
+    permissions:
+      packages: "write"
+      contents: "read"
+      id-token: "write"
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -83,6 +87,7 @@ jobs:
           echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PREVIEW_TOKEN=${{ secrets.SANITY_PREVIEW_TOKEN }}" >> aksel.nav.no/website/.env
           echo "SANITY_PRIVATE_NO_DRAFTS=${{ secrets.SANITY_PRIVATE_NO_DRAFTS }}" >> aksel.nav.no/website/.env
+          echo "USE_CDN_ASSETS=true" >> aksel.nav.no/website/.env
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -104,6 +109,13 @@ jobs:
       - name: Build application
         run: yarn workspace aksel.nav.no build:next
 
+      - name: Upload static files to NAV CDN
+        uses: navikt/frontend/actions/cdn-upload/v1@main
+        with:
+          cdn-team-name: aksel
+          source: ./aksel.nav.no/website/.next/static
+          destination: "/website/_next"
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a # Use commit-sha1 instead of tag for security concerns
         with:

.github/workflows/codeql.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [main, next]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [main]
-  schedule:
-    - cron: "41 8 * * 6"
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: ["javascript"]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
-        with:
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-
-          # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-          # queries: security-extended,security-and-quality
-
-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-      #   If the Autobuild fails above, remove it and uncomment the following three lines.
-      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-      # - run: |
-      #   echo "Run, Build Application using script"
-      #   ./location_of_script_within_repo/buildscript.sh
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-codemod
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
 ## 2.4.3
 
 ## 2.4.2

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.4.3",
-    "@navikt/ds-react": "^2.4.3",
+    "@navikt/ds-icons": "^2.6.1",
+    "@navikt/ds-react": "^2.6.1",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
 ## 2.4.3
 
 ### Patch Changes

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "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.4.3",
+    "@navikt/ds-tokens": "^2.6.1",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @navikt/ds-react
 
+## 2.6.1
+
+### Patch Changes
+
+- [`1c5e06438`](https://github.com/navikt/aksel/commit/1c5e06438ce9ff8225d5b2b2bf1f94348dfefe9c) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Ny onSearchClick-prop i Search for lettere submit-handling
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.1
+
+## 2.6.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.0
+
+## 2.5.1
+
+### Patch Changes
+
+- [`ac1e69b34`](https://github.com/navikt/aksel/commit/ac1e69b342ae207db2e80e3058555c56902e5832) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :recycle: Refaktorert nested-list logikk
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.1
+
+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.0
+
 ## 2.4.3
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.4.3",
+    "@navikt/ds-icons": "^2.6.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/react/src/button/button.stories.tsx

@@ -148,7 +148,8 @@ export const Loading = {
     </div>
   ),
 
-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };
 
 export const Icon = () => (
@@ -274,5 +275,6 @@ export const LoadingWithAs = {
     </div>
   ),
 
-  args: { chromatic: { delay: 300 } },
+  args: { chromatic: { disableSnapshot: true } },
+  chromatic: { disableSnapshot: true },
 };

@navikt/core/react/src/form/search/Search.tsx

@@ -48,6 +48,10 @@ export interface SearchProps
    * Callback for click on clear-button or Escape keydown
    */
   onClear?: (e: SearchClearEvent) => void;
+  /**
+   * Callback for Search-button submit
+   */
+  onSearchClick?: (value: string) => void;
   /**
    * aria-label on clear button
    * @default "Tøm"
@@ -76,6 +80,7 @@ export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
   variant: "primary" | "secondary" | "simple";
+  handleClick: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -106,6 +111,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       variant = "primary",
       defaultValue,
       onChange,
+      onSearchClick,
       ...rest
     } = props;
 
@@ -146,6 +152,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       wrapperRef
     );
 
+    const handleClick = () => {
+      onSearchClick?.(`${value ?? internalValue}`);
+    };
+
     return (
       <div
         ref={setWrapperRef}
@@ -221,6 +231,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               size,
               disabled: inputProps.disabled,
               variant,
+              handleClick,
             }}
           >
             {children ? children : variant !== "simple" && <SearchButton />}

@navikt/core/react/src/form/search/SearchButton.tsx

@@ -17,7 +17,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 >;
 
 const SearchButton: SearchButtonType = forwardRef(
-  ({ className, children, disabled, ...rest }, ref) => {
+  ({ className, children, disabled, onClick, ...rest }, ref) => {
     const context = useContext(SearchContext);
 
     if (context === null) {
@@ -25,7 +25,7 @@ const SearchButton: SearchButtonType = forwardRef(
       return null;
     }
 
-    const { size, variant } = context;
+    const { size, variant, handleClick } = context;
 
     return (
       <Button
@@ -36,6 +36,10 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
+        onClick={(e) => {
+          handleClick();
+          onClick?.(e);
+        }}
         icon={
           <Search
             {...(children ? { "aria-hidden": true } : { title: "Søk" })}

@navikt/core/react/src/form/search/search.stories.tsx

@@ -46,6 +46,7 @@ export const Default = {
           variant={props.variant}
           hideLabel={props.hideLabel}
           error={props.error}
+          onSearchClick={console.log}
         />
       </div>
     );

@navikt/core/react/src/list/List.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem, ListItemContext, ListItemType } from "./ListItem";
+import { ListItem, ListItemType } from "./ListItem";
 
 export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -29,15 +29,16 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
 export interface ListComponent
   extends React.ForwardRefExoticComponent<ListProps> {
   Item: ListItemType;
-  componentType: string;
 }
 
 interface ListContextProps {
   listType: "ul" | "ol";
+  isNested: boolean | null;
 }
 
 export const ListContext = createContext<ListContextProps>({
   listType: "ul",
+  isNested: null,
 });
 
 export const List = forwardRef<HTMLDivElement, ListProps>(
@@ -55,20 +56,20 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
   ) => {
     const ariaId = useId();
 
-    const { isNested } = useContext(ListItemContext);
-
+    const { isNested } = useContext(ListContext);
 
     return (
       <ListContext.Provider
         value={{
           listType: ListTag,
+          isNested: isNested === null ? false : true,
         }}
       >
         <div
           {...rest}
           ref={ref}
           className={cl("navds-list", className, {
-            "navds-list--nested": isNested,
+            "navds-list--nested": isNested === null ? false : true,
           })}
         >
           {title && (
@@ -92,6 +93,5 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 ) as ListComponent;
 
 List.Item = ListItem;
-List.componentType = "list";
 
 export default List;

@navikt/core/react/src/list/ListItem.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useContext } from "react";
+import React, { forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
 import { ListContext } from "./List";
 
@@ -23,17 +23,9 @@ export interface ListItemType
     ListItemProps & React.RefAttributes<HTMLLIElement>
   > {}
 
-interface ListItemContextProps {
-  isNested: boolean;
-}
-
-export const ListItemContext = createContext<ListItemContextProps>({
-  isNested: false,
-});
-
 export const ListItem: ListItemType = forwardRef(
   ({ className, children, title, icon, ...rest }, ref) => {
-    const { listType } = useContext(ListContext);
+    const { listType, isNested } = useContext(ListContext);
 
     if (listType === "ol" && icon) {
       console.warn(
@@ -41,55 +33,49 @@ export const ListItem: ListItemType = forwardRef(
       );
     }
 
-    const hasNestedList = React.Children.toArray(children)?.some(
-      (child: any) => child?.type?.componentType === "list"
-    );
-
     return (
-      <ListItemContext.Provider value={{ isNested: hasNestedList }}>
-        <li
-          {...rest}
-          ref={ref}
-          className={cl("navds-list__item", className, {
-            "navds-list__item--noMargin": hasNestedList,
-          })}
-        >
-          {listType === "ul" && (
-            <div
-              className={cl({
-                "navds-list__item-marker--icon": icon,
-                "navds-list__item-marker--bullet": !icon,
-              })}
-            >
-              {icon ? (
-                icon
-              ) : (
-                <svg
-                  width="6"
-                  height="6"
-                  viewBox="0 0 6 6"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  aria-hidden
-                  focusable={false}
-                  role="img"
-                >
-                  <rect width="6" height="6" rx="3" fill="currentColor" />
-                </svg>
-              )}
-            </div>
-          )}
-
-          <BodyShort as="div" size="small" className="navds-list__item-content">
-            {title && (
-              <Label as="p" size="small">
-                {title}
-              </Label>
+      <li
+        {...rest}
+        ref={ref}
+        className={cl("navds-list__item", className, {
+          "navds-list__item--noMargin": isNested,
+        })}
+      >
+        {listType === "ul" && (
+          <div
+            className={cl({
+              "navds-list__item-marker--icon": icon,
+              "navds-list__item-marker--bullet": !icon,
+            })}
+          >
+            {icon ? (
+              icon
+            ) : (
+              <svg
+                width="6"
+                height="6"
+                viewBox="0 0 6 6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden
+                focusable={false}
+                role="img"
+              >
+                <rect width="6" height="6" rx="3" fill="currentColor" />
+              </svg>
             )}
-            {children}
-          </BodyShort>
-        </li>
-      </ListItemContext.Provider>
+          </div>
+        )}
+
+        <BodyShort as="div" size="small" className="navds-list__item-content">
+          {title && (
+            <Label as="p" size="small">
+              {title}
+            </Label>
+          )}
+          {children}
+        </BodyShort>
+      </li>
     );
   }
 );

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-tailwind
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
 ## 2.4.3
 
 ## 2.4.2

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "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.4.3",
+    "@navikt/ds-tokens": "^2.6.1",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tailwind/src/getBreakpoints.ts

@@ -0,0 +1,11 @@
+import Reducer from "./reducer";
+
+export const getBreakpoints = (tokens: { [key: string]: string | number }) => {
+  const breakpoints = Reducer(tokens, ["breakpoint"]);
+
+  return Object.keys(breakpoints)
+    .filter((key) => !key.includes("xs") && !key.includes("-down"))
+    .reduce((cur, key) => {
+      return Object.assign(cur, { [key]: breakpoints[key] });
+    }, {});
+};

@navikt/core/tailwind/src/index.ts

@@ -2,6 +2,7 @@
 import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
 import { writeFileSync } from "fs";
 import { getColors } from "./colors";
+import { getBreakpoints } from "./getBreakpoints";
 import kebabCase from "./kebabCase";
 import Reducer from "./reducer";
 
@@ -16,6 +17,7 @@ const tokens = Object.entries(TokensBuild).reduce(
 const config = {
   theme: {
     colors: getColors(tokens),
+    screen: getBreakpoints(tokens),
     extend: {
       spacing: Reducer(tokens, ["spacing"]),
       zIndex: Reducer(tokens, ["z-index"]),

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-tokens
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
+### Minor Changes
+
+- [#1832](https://github.com/navikt/aksel/pull/1832) [`8893b5c82`](https://github.com/navikt/aksel/commit/8893b5c82daf7c23897019fda912e702a1f05eaa) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Breakpoint-tokens for ds-tokens og ds-tailwind
+
 ## 2.4.3
 
 ## 2.4.2

@navikt/core/tokens/docs.json

@@ -1,4 +1,47 @@
 {
+  "breakpoints": [
+    { "name": "--a-breakpoint-xs", "value": "0" },
+    {
+      "name": "--a-breakpoint-sm",
+      "value": "480px",
+      "description": "@media (min-width: 480px)"
+    },
+    {
+      "name": "--a-breakpoint-sm-down",
+      "value": "479px",
+      "description": "@media (max-width: 479px)"
+    },
+    {
+      "name": "--a-breakpoint-md",
+      "value": "768px",
+      "description": "@media (min-width: 768px)"
+    },
+    {
+      "name": "--a-breakpoint-md-down",
+      "value": "767px",
+      "description": "@media (max-width: 767px)"
+    },
+    {
+      "name": "--a-breakpoint-lg",
+      "value": "1024px",
+      "description": "@media (min-width: 1024px)"
+    },
+    {
+      "name": "--a-breakpoint-lg-down",
+      "value": "1023px",
+      "description": "@media (max-width: 1023px)"
+    },
+    {
+      "name": "--a-breakpoint-xl",
+      "value": "1280px",
+      "description": "@media (min-width: 1280px)"
+    },
+    {
+      "name": "--a-breakpoint-xl-down",
+      "value": "1279px",
+      "description": "@media (max-width: 1279px)"
+    }
+  ],
   "font": [
     {
       "name": "--a-font-family",

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/core/tokens/src/index.js

@@ -3,6 +3,17 @@ const getFontSize = (size) => `${size / baseFontSize}rem`;
 
 module.exports = {
   a: {
+    breakpoint: {
+      xs: { value: "0" },
+      sm: { value: "480px" },
+      "sm-down": { value: "479px" },
+      md: { value: "768px" },
+      "md-down": { value: "767px" },
+      lg: { value: "1024px" },
+      "lg-down": { value: "1023px" },
+      xl: { value: "1280px" },
+      "xl-down": { value: "1279px" },
+    },
     font: {
       family: { value: '"Source Sans Pro", Arial, sans-serif' },
       line: {

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-icons
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
 ## 2.4.3
 
 ## 2.4.2

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css-internal
 
+## 2.6.1
+
+## 2.6.0
+
+## 2.5.1
+
+## 2.5.0
+
 ## 2.4.3
 
 ## 2.4.2

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @navikt/ds-react-internal
 
+## 2.6.1
+
+### Patch Changes
+
+- [`e8b5b44f2`](https://github.com/navikt/aksel/commit/e8b5b44f28fbce79e2b17afb14c0978c2708f9ab) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Sender med onClick-event i onSelectPeriod
+
+- Updated dependencies [[`1c5e06438`](https://github.com/navikt/aksel/commit/1c5e06438ce9ff8225d5b2b2bf1f94348dfefe9c)]:
+  - @navikt/ds-react@2.6.1
+  - @navikt/ds-icons@2.6.1
+
+## 2.6.0
+
+### Minor Changes
+
+- [#1835](https://github.com/navikt/aksel/pull/1835) [`b575816e7`](https://github.com/navikt/aksel/commit/b575816e736d440f224e1e70abf851262a976981) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Controlled og defaultOpen-states for Dropdown
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.6.0
+  - @navikt/ds-icons@2.6.0
+
+## 2.5.1
+
+### Patch Changes
+
+- Updated dependencies [[`ac1e69b34`](https://github.com/navikt/aksel/commit/ac1e69b342ae207db2e80e3058555c56902e5832)]:
+  - @navikt/ds-react@2.5.1
+  - @navikt/ds-icons@2.5.1
+
+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.5.0
+  - @navikt/ds-icons@2.5.0
+
 ## 2.4.3
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.4.3",
+  "version": "2.6.1",
   "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.4.3",
-    "@navikt/ds-react": "^2.4.3",
+    "@navikt/ds-icons": "^2.6.1",
+    "@navikt/ds-react": "^2.6.1",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

@navikt/internal/react/src/dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import Menu, { MenuType } from "./Menu";
 export interface DropdownProps {
   children: React.ReactNode;
   /**
-   * Handler that is called when an item is selected.
+   * Handler called when an item is selected.
    */
   onSelect?: (element: React.MouseEvent) => void;
   /**
@@ -13,6 +13,14 @@ export interface DropdownProps {
    * @default true
    */
   closeOnSelect?: boolean;
+  /**
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
+   */
+  open?: boolean;
 }
 
 export interface DropdownType extends React.FC<DropdownProps> {
@@ -22,7 +30,7 @@ export interface DropdownType extends React.FC<DropdownProps> {
 
 export interface DropdownContextType {
   readonly isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleToggle: (v: boolean) => void;
   readonly anchorEl: Element | null;
   setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
   onSelect: (element: React.MouseEvent) => void;
@@ -30,20 +38,34 @@ export interface DropdownContextType {
 
 export const DropdownContext = createContext<DropdownContextType | null>(null);
 
-export const Dropdown = (({ children, onSelect, closeOnSelect = true }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+export const Dropdown = (({
+  children,
+  onSelect,
+  closeOnSelect = true,
+  defaultOpen = false,
+  open,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
+  const handleToggle = (v: boolean) => {
+    if (open === undefined) {
+      setIsOpen(v);
+    }
+  };
+
   return (
     <DropdownContext.Provider
       value={{
-        isOpen,
-        setIsOpen,
+        isOpen: open ?? isOpen,
+        handleToggle,
         anchorEl,
         setAnchorEl,
         onSelect: (event) => {
           onSelect?.(event);
-          closeOnSelect && setIsOpen(false);
+          if (closeOnSelect) {
+            open === undefined && setIsOpen(false);
+          }
         },
       }}
     >

@navikt/internal/react/src/dropdown/Menu/GroupedList/Item.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { OverridableComponent } from "@navikt/ds-react";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../../Dropdown";
 
 export interface GroupedItemProps
@@ -19,6 +19,7 @@ export type GroupedItemType = OverridableComponent<
 export const GroupedItem: GroupedItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <dd className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/List/Item.tsx

@@ -18,6 +18,7 @@ export type ListItemType = OverridableComponent<
 export const ListItem: ListItemType = forwardRef(
   ({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
+
     return (
       <li className="navdsi-dropdown__list-item">
         <Component

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "clsx";
 import { Popover } from "@navikt/ds-react";
-import List, { ListType } from "./List";
-import GroupedList, { GroupedListType } from "./GroupedList";
-import Divider, { DividerType } from "./Divider";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { DropdownContext } from "../Dropdown";
+import Divider, { DividerType } from "./Divider";
+import GroupedList, { GroupedListType } from "./GroupedList";
+import List, { ListType } from "./List";
 
 interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -57,7 +57,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
       return null;
     }
 
-    const { isOpen, anchorEl, setIsOpen } = context;
+    const { isOpen, anchorEl, handleToggle } = context;
 
     return (
       <Popover
@@ -70,7 +70,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(
         anchorEl={anchorEl}
         open={isOpen}
         onClose={() => {
-          setIsOpen(false);
+          handleToggle(false);
           onClose && onClose();
         }}
       />

@navikt/internal/react/src/dropdown/Toggle.tsx

@@ -23,15 +23,23 @@ export const Toggle: ToggleType = forwardRef(
       return null;
     }
 
-    const { setAnchorEl, setIsOpen, isOpen } = context;
+    const { setAnchorEl, handleToggle, isOpen } = context;
 
     return (
       <button
         {...rest}
-        ref={ref}
+        ref={(el) => {
+          setAnchorEl(el);
+
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref != null) {
+            ref.current = el;
+          }
+        }}
         onClick={(e) => {
           setAnchorEl(e.currentTarget);
-          setIsOpen((isOpen) => !isOpen);
+          handleToggle(!isOpen);
           onClick && onClick(e);
         }}
         aria-expanded={isOpen}

@navikt/internal/react/src/dropdown/dropdown.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Dropdown } from "..";
 import { Meta } from "@storybook/react";
+import { Button } from "@navikt/ds-react";
 
 export default {
   title: "ds-react-internal/Dropdown",
@@ -34,3 +35,57 @@ export const Default = () => {
     </Dropdown>
   );
 };
+
+export const DefaultOpen = {
+  render: () => (
+    <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
+      <Button as={Dropdown.Toggle}>Toggle</Button>
+      <Dropdown.Menu
+        strategy="fixed"
+        onClose={() => console.log("ONCLOSE default")}
+      >
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+  args: { chromatic: { delay: 300 } },
+};
+
+export const ControlledOpen = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [openState, setOpenState] = useState(true);
+    return (
+      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+          Toggle
+        </Button>
+        <Dropdown.Menu
+          strategy="fixed"
+          onClose={() => console.log("ONCLOSE CONTROLLED")}
+        >
+          <Dropdown.Menu.GroupedList>
+            <Dropdown.Menu.GroupedList.Heading>
+              Systemer og oppslagsverk
+            </Dropdown.Menu.GroupedList.Heading>
+            <Dropdown.Menu.GroupedList.Item
+              onClick={() => console.log("GroupedList.Item-click")}
+            >
+              Gosys
+            </Dropdown.Menu.GroupedList.Item>
+          </Dropdown.Menu.GroupedList>
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
+  args: { chromatic: { delay: 300 } },
+};

@navikt/internal/react/src/timeline/period/ClickablePeriod.tsx

@@ -8,7 +8,7 @@ import { ariaLabel, getConditionalClasses } from "../utils/period";
 import { PeriodProps } from "./index";
 
 interface TimelineClickablePeriodProps extends PeriodProps {
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   isActive?: boolean;
   periodRef: React.ForwardedRef<HTMLButtonElement>;
 }
@@ -49,9 +49,9 @@ const ClickablePeriod = React.memo(
             firstFocus && addFocusable(r, index);
             mergedRef(r);
           }}
-          onClick={() => {
+          onClick={(e) => {
             children && setSelected((x) => !x);
-            onSelectPeriod?.();
+            onSelectPeriod?.(e);
           }}
           aria-label={ariaLabel(start, end, status, statusLabel)}
           className={cl(

@navikt/internal/react/src/timeline/period/index.tsx

@@ -32,7 +32,7 @@ export interface TimelinePeriodProps
   /**
    * Callback when selecting a period.
    */
-  onSelectPeriod?: () => void;
+  onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   /**
    * Content displayed in Popover on click.
    */

README.md

@@ -35,8 +35,7 @@
 └── codemod         # @navikt/ds-codemod, migrerings-scripts
 
 aksel.nav.no/
-├── website        # NEXT.JS app (v12)
-└── website/sanity # Sanity CMS-app (v3)
+└── website        # NEXT.JS app (v12) website/sanity # Sanity CMS-app (v3)
 ```
 
 ## Commands

aksel.nav.no/package.json

@@ -15,14 +15,14 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/ds-codemod": "^2.4.3",
-    "@navikt/ds-css": "^2.4.3",
-    "@navikt/ds-css-internal": "^2.4.3",
-    "@navikt/ds-icons": "^2.4.3",
-    "@navikt/ds-react": "^2.4.3",
-    "@navikt/ds-react-internal": "^2.4.3",
-    "@navikt/ds-tailwind": "^2.4.3",
-    "@navikt/ds-tokens": "^2.4.3"
+    "@navikt/ds-codemod": "^2.6.1",
+    "@navikt/ds-css": "^2.6.1",
+    "@navikt/ds-css-internal": "^2.6.1",
+    "@navikt/ds-icons": "^2.6.1",
+    "@navikt/ds-react": "^2.6.1",
+    "@navikt/ds-react-internal": "^2.6.1",
+    "@navikt/ds-tailwind": "^2.6.1",
+    "@navikt/ds-tokens": "^2.6.1"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/SanityBlockContent.tsx

@@ -67,7 +67,7 @@ const serializers = {
             <Ingress
               spacing
               {...textProps}
-              className={cl("algolia-index-body", {
+              className={cl({
                 "last:mb-0": context.noLastMargin,
               })}
             />
@@ -76,27 +76,20 @@ const serializers = {
               size={context.size}
               spacing
               {...textProps}
-              className={cl("algolia-index-body", {
+              className={cl({
                 "last:mb-0": context.noLastMargin,
               })}
             />
           );
 
         case "detail":
-          return (
-            <Detail
-              spacing
-              size="small"
-              {...textProps}
-              className="algolia-index-detail"
-            />
-          );
+          return <Detail spacing {...textProps} />;
         case "h2":
           return <LevelTwoHeading {...textProps} id={`h${node._key}`} />;
         case "h3":
           return (
             <Heading
-              className="algolia-index-lvl3 max-w-text text-deepblue-800 mt-8 scroll-mt-20 focus:outline-none"
+              className="max-w-text text-deepblue-800 mt-8 scroll-mt-20 focus:outline-none"
               spacing
               level="3"
               size="medium"
@@ -108,7 +101,7 @@ const serializers = {
         case "h4":
           return (
             <Heading
-              className="algolia-index-lvl4 max-w-text text-deepblue-800 mt-6"
+              className="max-w-text text-deepblue-800 mt-6"
               spacing
               level="4"
               size="small"
@@ -117,7 +110,7 @@ const serializers = {
           );
         case "ingress":
           return (
-            <Ingress spacing className="algolia-index-ingress max-w-text">
+            <Ingress spacing className="max-w-text">
               {children}
             </Ingress>
           );
@@ -127,7 +120,7 @@ const serializers = {
               size={context.size}
               spacing
               {...textProps}
-              className="algolia-index-body max-w-text"
+              className="max-w-text"
             />
           );
       }

aksel.nav.no/website/components/assets/Icons.tsx

@@ -97,3 +97,54 @@ export const YarnIcon = () => (
     />
   </svg>
 );
+
+export const StorybookIcon = ({ ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width="18.2"
+    height="22.4"
+    version="1.1"
+    viewBox="0 0 52 64"
+    focusable={false}
+    aria-hidden
+    {...props}
+  >
+    <defs>
+      <path
+        id="path-1"
+        d="M1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 Z"
+      />
+    </defs>
+    <g
+      id="icon-storybook-monochrome"
+      fill="none"
+      fillRule="evenodd"
+      stroke="none"
+      strokeWidth="1"
+    >
+      <g id="storybook-icon" transform="translate(1.000000, 1.000000)">
+        <path
+          id="Combined-Shape"
+          fill="var(--a-gray-600)"
+          fillRule="nonzero"
+          d="M50.2729096,2.92285771 C50.2769973,2.98759391 50.2790429,3.05244063 50.2790429,3.11730315 L50.2790429,58.8828028 C50.2790429,60.6043831 48.8689636,62 47.1295431,62 C47.0824212,62 47.0353056,61.9989534 46.9882313,61.9968606 L4.94876437,60.1280997 C3.31149338,60.0553189 2.00425692,58.751918 1.94279175,57.1309472 L0.0022554267,5.95476663 C-0.0618328758,4.26461814 1.24754196,2.83223697 2.95307926,2.72673418 L37.427,0.594 L37.1272753,7.62078766 C37.1238721,7.70179664 37.1419373,7.78178731 37.179031,7.85305525 L37.2223772,7.92113026 C37.3791917,8.12573637 37.6738999,8.16578288 37.880626,8.0105767 L37.880626,8.0105767 L40.6382617,5.94019678 L42.9673936,7.75618537 C43.0546693,7.82423279 43.1634862,7.85946584 43.2745216,7.85562813 C43.5338374,7.84666553 43.7367132,7.6313391 43.7276576,7.37468316 L43.7276576,7.37468316 L43.467,0.22 L46.9330824,0.00617628491 C48.6691159,-0.10121296 50.1644074,1.2046298 50.2729096,2.92285771 Z"
+        />
+        <path
+          id="S"
+          fill="#fff"
+          fillRule="nonzero"
+          d="M29.4029796,23.368648 C29.4029796,24.58142 37.6567008,24.00017 38.7646901,23.1482813 C38.7646901,14.8895929 34.2873503,10.5497821 26.0885852,10.5497821 C17.88982,10.5497821 13.2961856,14.9571143 13.2961856,21.5681161 C13.2961856,33.0822778 28.9959487,33.3026444 28.9959487,39.5830962 C28.9959487,41.3460299 28.1237396,42.3927719 26.2048797,42.3927719 C23.7045471,42.3927719 22.7160434,41.1289316 22.832338,36.8317805 C22.832338,35.8995698 13.2961856,35.6089448 13.0054493,36.8317805 C12.2651161,47.2453073 18.8201763,50.248968 26.3211742,50.248968 C33.5895831,50.248968 39.2880157,46.4144645 39.2880157,39.4729126 C39.2880157,27.132376 23.3556634,27.4629261 23.3556634,21.3477494 C23.3556634,18.8686237 25.2163761,18.5380737 26.3211742,18.5380737 C27.4841196,18.5380737 29.5774214,18.7409467 29.4029796,23.368648 Z"
+          mask="url(#mask-2)"
+        />
+        <path
+          id="bookmark"
+          fill="#fff"
+          fillRule="nonzero"
+          d="M37.1272753,7.62078766 L37.4276823,0.591583333 L43.4674595,0.218291667 L43.7276576,7.37468316 C43.7367132,7.6313391 43.5338374,7.84666553 43.2745216,7.85562813 C43.1634862,7.85946584 43.0546693,7.82423279 42.9673936,7.75618537 L40.6382617,5.94019678 L37.880626,8.0105767 C37.6738999,8.16578288 37.3791917,8.12573637 37.2223772,7.92113026 C37.1563661,7.83500129 37.1227378,7.72879963 37.1272753,7.62078766 Z"
+          mask="url(#mask-2)"
+        />
+      </g>
+    </g>
+  </svg>
+);

aksel.nav.no/website/components/layout/footer/Footer.tsx

@@ -10,7 +10,7 @@ const Footer = () => {
       id="aksel-footer"
       data-hj-suppress
       data-theme="dark"
-      className="algolia-ignore-index text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
+      className="toc-ignore text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
     >
       <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-16 px-4 pt-12 pb-16 md:px-6">
         <div className="grid gap-12 xl:grid-cols-3 xl:gap-6">

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -63,7 +63,7 @@ export const Hamburger = () => {
           aria={{ modal: true }}
           overlayClassName="header-modal__overlay"
           contentLabel="Meny"
-          className="bg-surface-default xs:max-w-[90%] xs:right-6 xs:left-auto xs:w-96 absolute left-4 top-0 right-4 block rounded py-14 px-11 md:hidden"
+          className="bg-surface-default absolute left-4 top-0 right-4 block rounded py-14 px-11 sm:right-6 sm:left-auto sm:w-96 sm:max-w-[90%] md:hidden"
         >
           <nav aria-label="hovedmeny">
             <ul>

aksel.nav.no/website/components/layout/header/Header.tsx

@@ -55,7 +55,7 @@ export const Header = ({
         })}
       >
         <div className="mx-auto flex h-full max-w-screen-2xl items-center  pr-4 pt-3 lg:pr-6">
-          <div className="xs:pr-6 xs:pl-4 flex h-11 items-center pr-4 pl-4">
+          <div className="flex h-11 items-center pr-4 pl-4 sm:pr-6 sm:pl-4">
             <Link
               href="/"
               passHref

aksel.nav.no/website/components/layout/page-templates/AkselArtikkel.tsx

@@ -119,7 +119,7 @@ const AkselArtikkelTemplate = ({
           <Heading
             level="1"
             size="large"
-            className="algolia-index-lvl1 text-deepblue-800 mt-4 md:text-5xl"
+            className="text-deepblue-800 mt-4 md:text-5xl"
           >
             {data.heading}
           </Heading>
@@ -159,7 +159,7 @@ const AkselArtikkelTemplate = ({
                     <BodyShort
                       size="small"
                       as="a"
-                      className="algolia-index-lvl5 min-h-8 text-deepblue-800 focus-visible:shadow-focus flex items-center justify-center gap-[2px] rounded-full bg-gray-200 pl-4 pr-1 capitalize no-underline hover:underline focus:outline-none"
+                      className="min-h-8 text-deepblue-800 focus-visible:shadow-focus flex items-center justify-center gap-[2px] rounded-full bg-gray-200 pl-4 pr-1 capitalize no-underline hover:underline focus:outline-none"
                     >
                       {title}
                       <Next aria-hidden />

aksel.nav.no/website/components/layout/page-templates/AkselPrinsipp.tsx

@@ -73,7 +73,7 @@ const AkselPrinsippTemplate = ({
       >
         <article className="overflow-x-clip">
           <div
-            className={cl("max-w-aksel xs:w-[90%] mx-auto px-4", {
+            className={cl("max-w-aksel mx-auto px-4 sm:w-[90%]", {
               "pb-32": mainPage,
             })}
           >
@@ -88,7 +88,7 @@ const AkselPrinsippTemplate = ({
                 <Heading
                   level="1"
                   size="large"
-                  className="algolia-index-lvl1 text-deepblue-700 mt-4 md:text-5xl"
+                  className="text-deepblue-700 mt-4 md:text-5xl"
                 >
                   {data.heading}
                 </Heading>
@@ -123,7 +123,7 @@ const AkselPrinsippTemplate = ({
               "bg-gray-100": mainPage,
             })}
           >
-            <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+            <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
               <div className="pb-16 md:pb-32">
                 <div className="relative mx-auto mt-4 max-w-prose lg:ml-0 lg:grid lg:max-w-none lg:grid-flow-row-dense lg:grid-cols-3 lg:items-start lg:gap-x-12">
                   <TableOfContents
@@ -135,7 +135,7 @@ const AkselPrinsippTemplate = ({
                     {data?.hero_bilde && (
                       <Bilde
                         node={data.hero_bilde as any}
-                        className="xs:-mt-72 -mt-36 mb-10"
+                        className="-mt-36 mb-10 sm:-mt-72"
                       />
                     )}
                     <SanityBlockContent

aksel.nav.no/website/components/layout/page-templates/KomponentArtikkel.tsx

@@ -62,7 +62,7 @@ const KomponentArtikkelTemplate = ({
             size="xlarge"
             level="1"
             spacing
-            className="algolia-index-lvl1 text-deepblue-800 flex flex-wrap items-center gap-4"
+            className="text-deepblue-800 flex flex-wrap items-center gap-4"
           >
             {data.heading}
           </Heading>

aksel.nav.no/website/components/layout/page-templates/WithSidebar.tsx

@@ -77,7 +77,7 @@ export const WithSidebar = ({
             <main
               tabIndex={-1}
               id="hovedinnhold"
-              className="min-h-screen-header md:max-w-screen-sidebar xs:pl-6 xs:pr-6 relative w-full px-4 focus:outline-none md:pl-0"
+              className="min-h-screen-header md:max-w-screen-sidebar relative w-full px-4 focus:outline-none sm:pl-6 sm:pr-6 md:pl-0"
             >
               <div
                 className={cl(
@@ -145,12 +145,12 @@ export const WithSidebar = ({
                   </div>
                 )}
                 {variant === "landingPage" && (
-                  <div className="xs:block pointer-events-none absolute top-0 right-0 hidden">
+                  <div className="pointer-events-none absolute top-0 right-0 hidden sm:block">
                     <HeaderCube className="text-deepblue-300 z-0 max-h-full" />
                   </div>
                 )}
               </div>
-              <div className={cl("xs:px-6 md:px-10", { flex: withToc })}>
+              <div className={cl("sm:px-6 md:px-10", { flex: withToc })}>
                 {withToc && (
                   <TableOfContentsv2
                     changedState={pageProps["content"]}

aksel.nav.no/website/components/layout/page-templates/wrappers/NoSidebar.tsx

@@ -19,7 +19,7 @@ export const NoSidebarLayout = ({
         id="hovedinnhold"
         className="aksel-artikkel bg-gray-50 pt-4 focus:outline-none"
       >
-        <div className="max-w-aksel xs:w-[90%] mx-auto px-4">
+        <div className="max-w-aksel mx-auto px-4 sm:w-[90%]">
           <article className="pt-12 pb-16 md:pb-32">{children}</article>
         </div>
         {aside}

aksel.nav.no/website/components/layout/sidebar/Sidebar.tsx

@@ -156,7 +156,7 @@ export const Sidebar = ({
   return (
     <div
       data-testid="ds-sidebar"
-      className="algolia-ignore-index w-sidebar bg-surface-default z-[1002] hidden shrink-0 self-start pb-4 md:block"
+      className="toc-ignore w-sidebar bg-surface-default z-[1002] hidden shrink-0 self-start pb-4 md:block"
     >
       <nav aria-label={kategori} className={cl("overflow-x-auto")}>
         <ul className="pb-4 pl-6">

aksel.nav.no/website/components/sanity-modules/Accordion.tsx

@@ -20,10 +20,7 @@ const Accordion = ({
           <DsAccordion.Item key={el._key}>
             <DsAccordion.Header>{el.title}</DsAccordion.Header>
             <DsAccordion.Content>
-              <SanityBlockContent
-                blocks={el.content}
-                className="algolia-ignore-index"
-              />
+              <SanityBlockContent blocks={el.content} className="toc-ignore" />
             </DsAccordion.Content>
           </DsAccordion.Item>
         ))}

aksel.nav.no/website/components/sanity-modules/DoDont.tsx

@@ -43,7 +43,7 @@ const Element = ({
   return (
     <figure
       className={cl(
-        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[440px]",
+        "flex min-w-full flex-1 flex-col rounded-t sm:min-w-[320px]",
         {
           "basis-full": block?.fullwidth,
           "max-w-sm": !block?.fullwidth,

aksel.nav.no/website/components/sanity-modules/IntroSeksjon.tsx

@@ -23,7 +23,7 @@ const Intro = ({
       <div>
         <>
           <Label as="p" className="mb-3">
-            Egnet til å:
+            Egnet til:
           </Label>
           <ul className="mb-7 list-disc">
             {node.brukes_til.map((x) => (
@@ -39,7 +39,7 @@ const Intro = ({
         {node?.brukes_ikke_til && (
           <>
             <Label as="p" className="mb-3">
-              Vurder noe annet:
+              Uegnet til:
             </Label>
             <ul className="list-disc">
               {node.brukes_ikke_til.map((x) => (

aksel.nav.no/website/components/sanity-modules/Tabell.tsx

@@ -38,8 +38,7 @@ const TableComponent = ({
         </Table.Body>
       </Table>
       <style global jsx>{`
-        .algolia-index-body.navds-body-long.navds-typo--spacing
-          + .table-heading-margin {
+        .navds-body-long.navds-typo--spacing + .table-heading-margin {
           margin-top: -1rem;
         }
         .table-heading-margin + .navds-heading {

aksel.nav.no/website/components/sanity-modules/TokenTable.tsx

@@ -100,13 +100,21 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
               Komponent-tokens gir deg muligheten til å sette opp theming eller
               justere styling uten å måtte overskrive css-klasser. Les gjennom{" "}
               <NextLink
-                href="https://aksel.nav.no/grunnleggende/styling/design-tokens#hec62d38bc813"
+                href="/grunnleggende/styling/design-tokens#hec62d38bc813"
                 passHref
                 legacyBehavior
               >
                 <Link>guiden vår</Link>
               </NextLink>{" "}
-              for mer info.
+              eller utforsk alle{" "}
+              <NextLink
+                href="/grunnleggende/styling/design-tokens"
+                passHref
+                legacyBehavior
+              >
+                <Link>design tokens</Link>
+              </NextLink>
+              .
             </BodyLong>
           </div>
         )}

aksel.nav.no/website/components/sanity-modules/bilde/Bilde.tsx

@@ -28,7 +28,7 @@ const Bilde = ({
     <>
       <figure
         className={cl("m-0 mb-8 flex flex-col", style.figure, className, {
-          "sm:max-w-text": node?.small,
+          "md:max-w-text": node?.small,
         })}
       >
         <div

aksel.nav.no/website/components/sanity-modules/cards/InnholdsKort.tsx

@@ -15,13 +15,13 @@ const InnholdsKort = ({
   }
 
   return (
-    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium xs:p-8 group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring">
+    <article className="shadow-small last-of-type:mb-18 focus-within:ring-border-focus hover:shadow-medium group relative mb-7 rounded-lg bg-white p-4 ring-1 ring-gray-900/10 focus-within:ring sm:p-8">
       <Heading
         spacing
         size="small"
         level="3"
         id={node._key}
-        className="algolia-index-lvl3 text-deepblue-500 scroll-mt-28 focus:outline-none group-hover:underline"
+        className="text-deepblue-500 scroll-mt-28 focus:outline-none group-hover:underline"
       >
         <NextLink
           href={`/${node?.lenke}`}

aksel.nav.no/website/components/sanity-modules/cards/RelatertInnhold.tsx

@@ -27,7 +27,7 @@ const RelatertInnhold = ({
       className={cl(
         "relatedCard",
         "mb-8 max-w-4xl gap-4",
-        "xs:grid-cols-2 grid w-full"
+        "grid w-full sm:grid-cols-2"
       )}
     >
       {node.lenker.map((x) => (
@@ -42,7 +42,7 @@ const RelatertInnhold = ({
               e.currentTarget.getAttribute("href")
             )
           }
-          className="algolia-ignore-index shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
+          className="toc-ignore shadow-small focus-visible:shadow-focus bg-surface-default ring-border-subtle group grid rounded border-2 border-transparent px-4 py-3 ring-1 focus:outline-none"
         >
           <Heading
             as="span"

aksel.nav.no/website/components/sanity-modules/code-examples/Examples.tsx

@@ -19,6 +19,7 @@ const ComponentExamples = ({
 }): JSX.Element => {
   const [activeExample, setActiveExample] = useState(null);
   const [frameState, setFrameState] = useState(300);
+  const [unloaded, setUnloaded] = useState(true);
 
   const handleExampleLoad = () => {
     let attempts = 0;
@@ -32,6 +33,7 @@ const ComponentExamples = ({
         const newHeight = iframePadding + exampleWrapper.offsetHeight;
         clearInterval(waitForExampleContentToRender);
         setFrameState(newHeight < 300 ? 300 : newHeight);
+        setUnloaded(false);
       }
 
       attempts++;
@@ -77,7 +79,10 @@ const ComponentExamples = ({
                 key={fil._key}
                 value={fil.navn}
                 selected={active === fil.navn}
-                onClick={() => setActiveExample(fil.navn)}
+                onClick={() => {
+                  setActiveExample(fil.navn);
+                  setUnloaded(true);
+                }}
               >
                 {fixName(fil.navn)}
               </Chips.Toggle>
@@ -100,7 +105,15 @@ const ComponentExamples = ({
 
             {active === fil.navn && (
               <>
-                <div className="overflow-hidden rounded-t border border-b-0 border-gray-300 bg-gray-50">
+                <div
+                  className={cl(
+                    "overflow-hidden rounded-t border border-b-0 border-gray-300 ",
+                    {
+                      "relative animate-pulse": unloaded,
+                      "bg-gray-50": !unloaded,
+                    }
+                  )}
+                >
                   <iframe
                     src={`/eksempler/${node.dir.title}/${fil.navn.replace(
                       ".tsx",
@@ -111,12 +124,21 @@ const ComponentExamples = ({
                     id={iframeId}
                     aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                     className={cl(
-                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]"
+                      "min-w-80 block w-full max-w-full resize-x overflow-auto bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
+                      { invisible: unloaded }
                     )}
                     title="Kode-eksempler"
                   />
+                  {unloaded && (
+                    <div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
+                      <div className="grid w-3/5 gap-2">
+                        <div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
+                        <div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
+                      </div>
+                    </div>
+                  )}
                 </div>
-                <div className="xs:justify-end mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base ">
+                <div className="mb-2 flex justify-center gap-2 rounded-b border border-gray-300 px-2 py-1 text-base sm:justify-end ">
                   <CodeSandbox code={fil.innhold.trim()} />
                   <Link
                     href={`/eksempler/${node.dir.title}/${fil.navn.replace(

aksel.nav.no/website/components/sanity-modules/icon-search/ModalContent.tsx

@@ -74,7 +74,7 @@ import ${icon} from "@navikt/ds-icons/svg/${icon}.svg";`,
 
   return (
     <div className="flex min-w-[300px] max-w-xl shrink flex-col">
-      <div className="xs:flex-row mr-16 inline-flex flex-col justify-between gap-4">
+      <div className="mr-16 inline-flex flex-col justify-between gap-4 sm:flex-row">
         <div>
           <Heading
             spacing

aksel.nav.no/website/components/sanity-modules/props/PropTabell.tsx

@@ -63,7 +63,7 @@ const PropTable = ({ komponent }: { komponent: PropT }): JSX.Element => {
         {komponent?.title ? komponent.title : "Props"}
       </Heading>
 
-      <div className="algolia-ignore-index relative mb-8">
+      <div className="toc-ignore relative mb-8">
         {komponent?.propref?.proplist?.length === 0 && (
           <div className="mb-8 rounded-b border border-gray-300 p-2">
             <BodyShort>Fant ingen props for denne komponenten.</BodyShort>

aksel.nav.no/website/components/sanity-modules/tips/index.tsx

@@ -17,7 +17,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
       <div
         className={cl(
           style.tips,
-          "linear xs:px-8 my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4"
+          "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
@@ -71,7 +71,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }): JSX.Element => {
     <div
       className={cl(
         style.tips,
-        "xs:px-6 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)]"
+        "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

aksel.nav.no/website/components/sanity-modules/token-view/Frame.tsx

@@ -5,10 +5,12 @@ export const Frame = ({
   tokens,
   styles,
   element: Element,
+  showHex,
 }: {
   tokens: { name: string; value: string; description?: string }[];
-  styles: string;
+  styles?: string;
   element?: ({ token, name }: { token: string; name?: string }) => JSX.Element;
+  showHex?: boolean;
 }) => {
   const hasDescription = !!tokens.find((x) => x?.description);
   return (
@@ -45,7 +47,7 @@ export const Frame = ({
               {c.value}
             </td>
             <Detail as="td" className="mt-1">
-              {c.description}
+              {showHex ? getHex(c.value) : c.description}
             </Detail>
           </tr>
         ))}
@@ -53,3 +55,23 @@ export const Frame = ({
     </table>
   );
 };
+
+function getHex(value: string) {
+  return RGBAToHexA(value.replace(", 1)", ""));
+}
+
+/* https://stackoverflow.com/a/73401564 */
+function RGBAToHexA(rgba, forceRemoveAlpha = false) {
+  return (
+    "#" +
+    rgba
+      .replace(/^rgba?\(|\s+|\)$/g, "") // Get's rgba / rgb string values
+      .split(",") // splits them at ","
+      .filter((string, index) => !forceRemoveAlpha || index !== 3)
+      .map((string) => parseFloat(string)) // Converts them to numbers
+      .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
+      .map((number) => number.toString(16)) // Converts numbers to hex
+      .map((string) => (string.length === 1 ? "0" + string : string)) // Adds 0 when length of one number is 1
+      .join("")
+  ); // Puts the array to togehter to a string
+}

aksel.nav.no/website/components/sanity-modules/token-view/categories/Breakpoints.tsx

@@ -0,0 +1,128 @@
+import docs from "@navikt/ds-tokens/docs.json";
+import { Frame } from "../Frame";
+
+export const BreakpointsView = ({ cat }: { cat: string }) => {
+  const breakpoints = docs[cat];
+
+  return (
+    <Frame
+      tokens={breakpoints}
+      element={({ name }: { token: string; name?: string }) => {
+        const Svg = getSvg(name);
+        return (
+          <div
+            className="min-h-16 bg-surface-default flex h-full w-full items-center justify-start rounded-md px-4 text-5xl font-semibold"
+            aria-hidden
+          >
+            {Svg}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+function getSvg(token: string) {
+  switch (true) {
+    case token.includes("xs"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7.75 5.77778C7.75 5.16382 8.20527 4.75 8.66667 4.75H15.3333C15.7947 4.75 16.25 5.16382 16.25 5.77778V18.2222C16.25 18.8362 15.7947 19.25 15.3333 19.25H8.66667C8.20527 19.25 7.75 18.8362 7.75 18.2222V5.77778ZM8.66667 3.25C7.28712 3.25 6.25 4.42806 6.25 5.77778V18.2222C6.25 19.5719 7.28712 20.75 8.66667 20.75H15.3333C16.7129 20.75 17.75 19.5719 17.75 18.2222V5.77778C17.75 4.42806 16.7129 3.25 15.3333 3.25H8.66667ZM12 16.75C11.5858 16.75 11.25 17.0858 11.25 17.5C11.25 17.9142 11.5858 18.25 12 18.25H12.01C12.4242 18.25 12.76 17.9142 12.76 17.5C12.76 17.0858 12.4242 16.75 12.01 16.75H12Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+    case token.includes("sm"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.75 5C6.75 4.30964 7.30964 3.75 8 3.75H16C16.6904 3.75 17.25 4.30964 17.25 5V19C17.25 19.6904 16.6904 20.25 16 20.25H8C7.30964 20.25 6.75 19.6904 6.75 19V5ZM8 2.25C6.48122 2.25 5.25 3.48122 5.25 5V19C5.25 20.5188 6.48122 21.75 8 21.75H16C17.5188 21.75 18.75 20.5188 18.75 19V5C18.75 3.48122 17.5188 2.25 16 2.25H8ZM11.5 4.75C11.0858 4.75 10.75 5.08579 10.75 5.5C10.75 5.91421 11.0858 6.25 11.5 6.25H12.5C12.9142 6.25 13.25 5.91421 13.25 5.5C13.25 5.08579 12.9142 4.75 12.5 4.75H11.5Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    case token.includes("md"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.75 6C3.75 5.30964 4.30964 4.75 5 4.75H19C19.6904 4.75 20.25 5.30964 20.25 6V18C20.25 18.6904 19.6904 19.25 19 19.25H5C4.30964 19.25 3.75 18.6904 3.75 18V6ZM5 3.25C3.48122 3.25 2.25 4.48122 2.25 6V18C2.25 19.5188 3.48122 20.75 5 20.75H19C20.5188 20.75 21.75 19.5188 21.75 18V6C21.75 4.48122 20.5188 3.25 19 3.25H5ZM10.5 5.75C10.0858 5.75 9.75 6.08579 9.75 6.5C9.75 6.91421 10.0858 7.25 10.5 7.25H13.5C13.9142 7.25 14.25 6.91421 14.25 6.5C14.25 6.08579 13.9142 5.75 13.5 5.75H10.5Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    case token.includes("lg"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.5 4.25C4.5335 4.25 3.75 5.0335 3.75 6V15C3.75 15.9665 4.5335 16.75 5.5 16.75H18.5C19.4665 16.75 20.25 15.9665 20.25 15V6C20.25 5.0335 19.4665 4.25 18.5 4.25H5.5ZM5.25 6C5.25 5.86193 5.36193 5.75 5.5 5.75H18.5C18.6381 5.75 18.75 5.86193 18.75 6V15C18.75 15.1381 18.6381 15.25 18.5 15.25H5.5C5.36193 15.25 5.25 15.1381 5.25 15V6ZM3 18.25C2.58579 18.25 2.25 18.5858 2.25 19C2.25 19.4142 2.58579 19.75 3 19.75H21C21.4142 19.75 21.75 19.4142 21.75 19C21.75 18.5858 21.4142 18.25 21 18.25H3Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+    case token.includes("xl"):
+      return (
+        <svg
+          width="1em"
+          height="1em"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.25 4.5C2.25 3.80964 2.80964 3.25 3.5 3.25H20.5C21.1904 3.25 21.75 3.80964 21.75 4.5V15.5C21.75 16.1904 21.1904 16.75 20.5 16.75H12.75V19.25H19C19.4142 19.25 19.75 19.5858 19.75 20C19.75 20.4142 19.4142 20.75 19 20.75H6C5.58579 20.75 5.25 20.4142 5.25 20C5.25 19.5858 5.58579 19.25 6 19.25H11.25V16.75H3.5C2.80964 16.75 2.25 16.1904 2.25 15.5V4.5ZM3.75 4.75V15.25H20.25V4.75H3.75Z"
+            fill="#262626"
+          />
+        </svg>
+      );
+
+    default:
+      return null;
+  }
+}

aksel.nav.no/website/components/sanity-modules/token-view/categories/Global.tsx

@@ -5,5 +5,5 @@ import { Frame } from "../Frame";
 export const GlobalView = ({ cat }: { cat: string }) => {
   const colors = docs[cat];
 
-  return <Frame tokens={colors} styles="background" />;
+  return <Frame tokens={colors} styles="background" showHex />;
 };

aksel.nav.no/website/components/sanity-modules/token-view/categories/Semantic.tsx

@@ -1,6 +1,6 @@
 import { PeopleInCircle } from "@navikt/ds-icons";
 import docs from "@navikt/ds-tokens/docs.json";
-import color from "color";
+import color from "tinycolor2";
 import { Frame } from "../Frame";
 
 export const SemanticView = ({ cat }: { cat: string }) => {
@@ -11,9 +11,10 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
-          const isLigth = c.luminosity() > 0.9;
+          const isLigth = c.getLuminance() > 0.9;
 
           return (
             <div
@@ -38,9 +39,10 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
-          const isLigth = c.luminosity() > 0.9;
+          const isLigth = c.getLuminance() > 0.9;
 
           return (
             <div
@@ -66,9 +68,10 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       <Frame
         tokens={colors}
         styles="color"
+        showHex
         element={({ token }: { token: string }) => {
           const c = color(token);
-          const isLigth = c.luminosity() > 0.9;
+          const isLigth = c.getLuminance() > 0.7;
 
           return (
             <div
@@ -92,5 +95,5 @@ export const SemanticView = ({ cat }: { cat: string }) => {
       />
     );
   }
-  return <Frame tokens={colors} styles="background" />;
+  return <Frame tokens={colors} styles="background" showHex />;
 };

aksel.nav.no/website/components/sanity-modules/token-view/index.tsx

@@ -1,4 +1,5 @@
 import { withErrorBoundary } from "@/error-boundary";
+import { BreakpointsView } from "components/sanity-modules/token-view/categories/Breakpoints";
 import { FontView } from "./categories/Font";
 import { GlobalView } from "./categories/Global";
 import { SemanticView } from "./categories/Semantic";
@@ -27,6 +28,8 @@ const TokenView = ({
       return <SpacingView cat={token.title} />;
     case token.title === "z-index":
       return <ZindexView cat={token.title} />;
+    case token.title === "breakpoints":
+      return <BreakpointsView cat={token.title} />;
     default:
       return null;
   }

aksel.nav.no/website/components/website-modules/H2.tsx

@@ -20,7 +20,7 @@ export const LevelTwoHeading = ({
         level="2"
         size="large"
         className={cl(
-          "algolia-index-lvl2 max-w-text text-deepblue-800 group mb-4 mt-12 scroll-mt-20 first-of-type:mt-0 focus:outline-none",
+          "max-w-text text-deepblue-800 group mb-4 mt-12 scroll-mt-20 first-of-type:mt-0 focus:outline-none",
           {
             hidden: hidden,
             block: !hidden,

aksel.nav.no/website/components/website-modules/LatestBloggs.tsx

@@ -44,7 +44,7 @@ export const LatestBloggposts = ({
         level={level}
         size="xlarge"
         className={cl(
-          "algolia-index-lvl1 text-deepblue-800 mx-auto w-full md:mx-0 md:max-w-none",
+          "text-deepblue-800 mx-auto w-full md:mx-0 md:max-w-none",
           { "text-5xl": variant === "blogg" }
         )}
       >

aksel.nav.no/website/components/website-modules/TOC.tsx

@@ -42,9 +42,9 @@ export function TableOfContents({
 
       const filtered = Array.from(newTree)?.filter(
         (x) =>
-          !Array.from(
-            main.getElementsByClassName("algolia-ignore-index")
-          )?.some((y) => y.contains(x))
+          !Array.from(main.getElementsByClassName("toc-ignore"))?.some((y) =>
+            y.contains(x)
+          )
       );
       const toc: {
         heading: string;
@@ -132,7 +132,7 @@ export function TableOfContents({
     <aside
       aria-labelledby="toc-heading"
       className={cl(
-        "algolia-ignore-index sticky top-20 z-[1] order-1 my-0 mb-16 hidden w-72 flex-col items-start pl-4",
+        "toc-ignore sticky top-20 z-[1] order-1 my-0 mb-16 hidden w-72 flex-col items-start pl-4",
         {
           hidden: !renderToc,
           "col-start-3 max-w-prose md:sticky md:top-20 lg:flex":

aksel.nav.no/website/components/website-modules/TOCv2.tsx

@@ -42,9 +42,9 @@ export function TableOfContentsv2({
 
       const filtered = Array.from(newTree)?.filter(
         (x) =>
-          !Array.from(
-            main.getElementsByClassName("algolia-ignore-index")
-          )?.some((y) => y.contains(x))
+          !Array.from(main.getElementsByClassName("toc-ignore"))?.some((y) =>
+            y.contains(x)
+          )
       );
       const toc: {
         heading: string;
@@ -131,7 +131,7 @@ export function TableOfContentsv2({
   return (
     <aside
       className={cl(
-        "algolia-ignore-index xs:-mr-6 sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start md:-mr-10",
+        "toc-ignore sticky top-20 z-[1] order-1 my-0 ml-6 mb-16 mr-auto h-full w-full max-w-[160px] flex-col items-start sm:-mr-6 md:-mr-10",
         {
           hidden: !renderToc,
           "hidden xl:flex": renderToc,

aksel.nav.no/website/components/website-modules/feedback/index.tsx

@@ -149,8 +149,8 @@ const Feedback = ({
   if (!docId || !docType) return null;
 
   const classes = akselFeedback
-    ? "algolia-ignore-index scroll-my-[30vh]"
-    : cl("scroll-my-[30vh] algolia-ignore-index mt-44 mb-28", {
+    ? "toc-ignore scroll-my-[30vh]"
+    : cl("scroll-my-[30vh] toc-ignore mt-44 mb-28", {
         "mx-auto": center,
       });
 

aksel.nav.no/website/next.config.js

@@ -5,16 +5,18 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
+const cdnUrl = "https://cdn.nav.no";
+
 const ContentSecurityPolicy = `
-  default-src 'self' 'unsafe-inline';
-  font-src 'self' https://cdn.nav.no data:;
-  img-src 'self' cdn.sanity.io https://avatars.githubusercontent.com data:;
-  script-src 'self' https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
-  style-src 'self' 'unsafe-inline';
+  default-src 'self' 'unsafe-inline' ${cdnUrl};
+  font-src 'self' ${cdnUrl} data:;
+  img-src 'self' cdn.sanity.io https://avatars.githubusercontent.com data: ${cdnUrl};
+  script-src 'self' ${cdnUrl} https://in2.taskanalytics.com/tm.js 'nonce-4e1aa203a32e' 'unsafe-eval';
+  style-src 'self' ${cdnUrl} 'unsafe-inline';
   report-uri https://sentry.gc.nav.no/api/113/envelope/?sentry_key=d35bd60e413c489ca0f2fd389b4e6e5e&sentry_version=7;
-  connect-src 'self' https://raw.githubusercontent.com/navikt/ wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://sentry.gc.nav.no https://*.algolia.net https://*.algolianet.com https://in2.taskanalytics.com/03346;
+  connect-src 'self' ${cdnUrl} https://raw.githubusercontent.com/navikt/ wss://hnbe3yhs.api.sanity.io cdn.sanity.io *.api.sanity.io https://amplitude.nav.no https://sentry.gc.nav.no https://in2.taskanalytics.com/03346;
   frame-ancestors localhost:3333 'self' localhost:3000 https://verktoykasse.sanity.studio/;
-  media-src 'self' cdn.sanity.io;
+  media-src 'self' ${cdnUrl} cdn.sanity.io;
   frame-src 'self' https://web.microsoftstream.com localhost:3000 https://aksel.dev.nav.no/;
 `;
 
@@ -49,6 +51,8 @@ const securityHeaders = [
   },
 ];
 
+const useCdn = process.env.USE_CDN_ASSETS === "true";
+
 const config = () =>
   withBundleAnalyzer({
     transpilePackages: ["@navikt/ds-tokens"],
@@ -63,6 +67,7 @@ const config = () =>
     publicRuntimeConfig: {
       NEXT_PUBLIC_TEST: process.env.NEXT_PUBLIC_TEST,
     },
+    assetPrefix: useCdn ? "https://cdn.nav.no/aksel/website" : undefined,
     async headers() {
       return [
         {

aksel.nav.no/website/package.json

@@ -26,43 +26,41 @@
   "dependencies": {
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/client": "^5.2.2",
-    "@sanity/code-input": "4.0.0",
+    "@sanity/code-input": "4.1.0",
     "@sanity/color-input": "^3.0.2",
     "@sanity/icons": "2.2.2",
     "@sanity/image-url": "1.0.2",
     "@sanity/preview-kit": "^1.3.4",
     "@sanity/table": "1.0.1",
-    "@sanity/ui": "^1.2.5",
-    "@sanity/vision": "3.5.0",
+    "@sanity/ui": "^1.3.0",
+    "@sanity/vision": "3.5.1",
     "@svgr/webpack": "^5.5.0",
     "amplitude-js": "^8.21.5",
     "boring-avatars": "1.7.0",
     "clsx": "^1.2.1",
     "codesandbox": "^2.2.3",
-    "color": "4.2.3",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "2.29.3",
     "fuse.js": "^6.6.2",
     "jose": "4.10.0",
-    "jwt-decode": "3.1.2",
     "lodash": "^4.17.21",
     "next": "^13.2.1",
-    "next-sanity": "^4.1.2",
-    "prettier": "2.7.1",
+    "next-sanity": "^4.1.5",
     "prism-react-renderer": "^1.3.0",
     "prismjs": "^1.27.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-modal": "3.15.1",
     "recharts": "^2.2.0",
-    "sanity": "3.5.0",
+    "sanity": "3.5.1",
     "sanity-plugin-asset-source-unsplash": "^1.0.6",
-    "sanity-plugin-iframe-pane": "^2.1.1",
+    "sanity-plugin-iframe-pane": "^2.2.0",
     "sanity-plugin-media": "^2.0.5",
     "sitemap": "^7.0.0",
     "styled-components": "^5.2",
     "swr": "^1.1.2",
-    "tailwindcss": "^3.2.0"
+    "tailwindcss": "^3.2.0",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.5.2",

aksel.nav.no/website/pages/god-praksis/[slug].tsx

@@ -94,15 +94,11 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
               <Heading
                 level="1"
                 size="xlarge"
-                className="algolia-index-lvl1 mt-8 hidden md:block md:text-5xl"
+                className="mt-8 hidden md:block md:text-5xl"
               >
                 {page.title}
               </Heading>
-              <Heading
-                level="1"
-                size="large"
-                className="algolia-index-lvl1 mt-8 block md:hidden"
-              >
+              <Heading level="1" size="large" className="mt-8 block md:hidden">
                 {page.title}
               </Heading>
 
@@ -115,7 +111,7 @@ const Page = ({ tema: page }: PageProps): JSX.Element => {
                 />
                 <div
                   className={cl(
-                    "max-w xs:w-96 relative z-10 mb-2 h-fit xl:mt-[10px]",
+                    "max-w relative z-10 mb-2 h-fit sm:w-96 xl:mt-[10px]",
                     { invisible: !hasAnsvarlig }
                   )}
                   aria-hidden={!hasAnsvarlig}

aksel.nav.no/website/pages/god-praksis/artikler/index.tsx

@@ -61,7 +61,7 @@ const Artikler = ({ articles }: ArtiklerProps) => {
               <Heading
                 level="1"
                 size="xlarge"
-                className="algolia-index-lvl1 text-deepblue-800 my-20 md:text-[3rem]"
+                className="text-deepblue-800 my-20 md:text-[3rem]"
               >
                 Artikler
               </Heading>

aksel.nav.no/website/pages/god-praksis/index.tsx

@@ -66,7 +66,7 @@ const Page = ({ temaer, page, resent }: PageProps): JSX.Element => {
             <Heading
               level="1"
               size="xlarge"
-              className="algolia-index-lvl1 text-deepblue-800 text-5xl"
+              className="text-deepblue-800 text-5xl"
             >
               God praksis
             </Heading>

aksel.nav.no/website/pages/index.tsx

@@ -37,48 +37,18 @@ const introcards = [
     desc: "Farger, spacing, shadows, etc.",
     icon: (props) => (
       <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
+        width="25"
+        height="25"
+        {...props}
+        viewBox="0 0 25 25"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        {...props}
       >
         <path
-          d="M12 3L19.7942 7.5V16.5L12 21L4.20576 16.5V7.5L12 3Z"
-          stroke="#262626"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12 15L12 21"
-          stroke="#262626"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M19.7942 7.5L14.598 10.5"
-          stroke="#262626"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M9.40196 10.5L4.2058 7.50001"
-          stroke="#262626"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <circle
-          cx="12.0001"
-          cy="11.9999"
-          r="3"
-          stroke="#262626"
-          strokeWidth="1.5"
-          strokeLinecap="round"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.43701 12.5C5.43701 7.94365 9.13066 4.25 13.687 4.25C15.2739 4.25 16.4265 4.57516 17.3491 5.17306C18.2711 5.77061 19.0319 6.6847 19.7603 7.98893C20.2701 9.23986 20.4558 11.0729 19.1409 12.2863C18.6392 12.7493 18.012 12.982 17.3192 13.2391L17.3189 13.2393L17.3181 13.2396L17.3177 13.2397C17.2103 13.2796 17.1013 13.32 16.991 13.362C16.6196 13.5033 16.1837 13.6826 15.843 13.9598C15.4601 14.2712 15.187 14.7148 15.187 15.3125C15.187 15.7706 15.294 16.175 15.5132 16.5199C15.7288 16.859 16.02 17.089 16.3057 17.2548C16.5851 17.417 16.8886 17.5343 17.1497 17.6302C17.2102 17.6524 17.2682 17.6734 17.3244 17.6938L17.3247 17.6939C17.5288 17.7678 17.7074 17.8326 17.8824 17.9104C18.0341 17.9778 18.2347 18.2218 18.199 18.6447C18.1669 19.0253 17.9217 19.5564 17.1694 19.9814C16.1123 20.4743 14.9329 20.75 13.687 20.75C9.13066 20.75 5.43701 17.0563 5.43701 12.5ZM13.687 2.75C8.30224 2.75 3.93701 7.11522 3.93701 12.5C3.93701 17.8848 8.30224 22.25 13.687 22.25C15.1673 22.25 16.5725 21.9196 17.8311 21.3278C17.8463 21.3207 17.8613 21.313 17.876 21.3048C19.0194 20.6701 19.6136 19.7207 19.6937 18.7707C19.7706 17.8595 19.3524 16.9222 18.4916 16.5396C18.2631 16.4381 18.0201 16.3502 17.8105 16.2744L17.8102 16.2743L17.809 16.2738C17.7595 16.2559 17.712 16.2387 17.6669 16.2222C17.4112 16.1282 17.2155 16.0486 17.0589 15.9577C16.9087 15.8704 16.8273 15.791 16.7792 15.7153C16.7347 15.6454 16.687 15.5294 16.687 15.3125C16.687 15.2352 16.6995 15.1966 16.7895 15.1234C16.9218 15.0158 17.1463 14.9078 17.5245 14.7639C17.6117 14.7307 17.7061 14.6962 17.8063 14.6597C18.4827 14.4126 19.4192 14.0706 20.1581 13.3887C22.1944 11.5095 21.7328 8.82247 21.1293 7.37404C21.1186 7.34823 21.1064 7.32304 21.0928 7.2986C20.2923 5.85597 19.3781 4.70059 18.1649 3.9143C16.9434 3.12266 15.4886 2.75 13.687 2.75ZM17.6898 8.82978C16.8896 8.61536 16.0671 9.09024 15.8527 9.89044C15.6383 10.6906 16.1131 11.5131 16.9133 11.7276C17.7135 11.942 18.536 11.4671 18.7505 10.6669C18.9649 9.8667 18.49 9.04419 17.6898 8.82978ZM8.6083 7.94928C8.82271 7.14908 9.64522 6.6742 10.4454 6.88862C11.2456 7.10303 11.7205 7.92553 11.5061 8.72573C11.2917 9.52593 10.4692 10.0008 9.66896 9.78639C8.86876 9.57198 8.39388 8.74947 8.6083 7.94928ZM14.7147 5.44428C13.9145 5.22987 13.092 5.70474 12.8776 6.50494C12.6632 7.30514 13.138 8.12764 13.9382 8.34206C14.7384 8.55647 15.5609 8.0816 15.7754 7.2814C15.9898 6.4812 15.5149 5.65869 14.7147 5.44428Z"
+          fill="#262626"
         />
       </svg>
     ),
@@ -111,7 +81,7 @@ const introcards = [
 
 const IntroCards = () => {
   return (
-    <ul className="centered-layout xs:mb-36 mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 md:gap-6">
+    <ul className="centered-layout mb-40 grid w-full max-w-screen-md grid-cols-2 gap-4 sm:mb-36 md:gap-6">
       {introcards.map(({ icon: Icon, title, desc, href }) => (
         <li key={title} className="grid">
           <Link
@@ -126,7 +96,7 @@ const IntroCards = () => {
               )
             }
           >
-            <span className="xs:flex items-center gap-2">
+            <span className="items-center gap-2 sm:flex">
               <Icon aria-hidden className="shrink-0 text-2xl" role="img" />
               <span className="text-xl font-semibold group-hover:underline">
                 {title}
@@ -175,7 +145,7 @@ const GetStarted = ({
         style={{
           gridTemplateColumns: `repeat(${links.length}, minmax(0, 1fr))`,
         }}
-        className="xs:grid mx-auto mt-6 flex w-fit flex-col place-items-center justify-evenly gap-4 md:gap-8"
+        className="mx-auto mt-6 flex w-fit flex-col place-items-center justify-evenly gap-4 sm:grid md:gap-8"
       >
         {links.map((x) => (
           <li key={x.title}>
@@ -270,11 +240,11 @@ const Forside = ({
 
         <main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
           <div className="z-20 pb-8">
-            <div className="centered-layout xs:mt-36 xs:mb-18 xs:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center">
+            <div className="centered-layout sm:mb-18 relative mb-16 mt-20 grid max-w-xs place-items-center text-center sm:mt-36 sm:max-w-[648px]">
               <Heading
                 level="1"
                 size="xlarge"
-                className="text-deepblue-800 xs:text-[3.5rem] leading-[1.2]"
+                className="text-deepblue-800 leading-[1.2] sm:text-[3.5rem]"
               >
                 {page.title}
               </Heading>
@@ -291,7 +261,7 @@ const Forside = ({
                 <Heading
                   level="2"
                   size="xlarge"
-                  className="text-deepblue-800 xs:text-[3.25rem] mb-8 text-center"
+                  className="text-deepblue-800 mb-8 text-center sm:text-[3.25rem]"
                 >
                   God praksis
                 </Heading>

aksel.nav.no/website/pages/komponenter/index.tsx

@@ -9,6 +9,7 @@ import {
   YarnIcon,
   FigmaIcon,
   ChangelogIcon,
+  StorybookIcon,
 } from "components/assets";
 import { WithSidebar } from "components/layout/page-templates/WithSidebar";
 import ComponentOverview from "components/sanity-modules/component-overview";
@@ -84,6 +85,20 @@ function Links() {
       >
         <FigmaIcon /> Figma
       </a>
+      <a
+        target="_blank"
+        rel="noreferrer noopener"
+        href="/storybook"
+        className="hover:text-text-default focus:text-text-on-inverted focus:shadow-focus group flex items-center gap-1 underline hover:no-underline focus:bg-blue-800 focus:no-underline focus:outline-none"
+        onClick={() =>
+          logAmplitudeEvent("link", {
+            kilde: "intro-lenker ikonside",
+            til: "storybook",
+          })
+        }
+      >
+        <StorybookIcon className="mr-1 group-focus:invert" /> Storybook
+      </a>
     </BodyShort>
   );
 }

aksel.nav.no/website/pages/produktbloggen/[slug].tsx

@@ -88,14 +88,14 @@ const Page = ({
       <main
         tabIndex={-1}
         id="hovedinnhold"
-        className="aksel-artikkel xs:pb-32 #FEFCE9 overflow-hidden bg-[#FEFCE9] pt-[8vw] pb-16 focus:outline-none"
+        className="aksel-artikkel #FEFCE9 overflow-hidden bg-[#FEFCE9] pt-[8vw] pb-16 focus:outline-none sm:pb-32"
       >
         <div className="px-4">
           <div className="dynamic-wrapper-prose text-center">
             <Heading
               level="1"
               size="xlarge"
-              className="algolia-index-lvl1 hyphen text-deepblue-800 mt-1 break-words text-5xl leading-[1.2]"
+              className="hyphen text-deepblue-800 mt-1 break-words text-5xl leading-[1.2]"
             >
               {blogg.heading}
             </Heading>
@@ -195,7 +195,7 @@ const Page = ({
               <Heading level="2" size="large">
                 Flere blogginnlegg
               </Heading>
-              <ul className="mt-12 grid gap-x-6 gap-y-6 sm:grid-cols-2 sm:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+              <ul className="mt-12 grid gap-x-6 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
                 {morePosts.map((post) => (
                   <BloggCard key={post._id} blog={post} />
                 ))}

aksel.nav.no/website/pages/produktbloggen/index.tsx

@@ -72,7 +72,7 @@ const Page = (props: PageProps): JSX.Element => {
                 <Heading level="2" size="xlarge" className="text-deepblue-800">
                   Flere blogginnlegg
                 </Heading>
-                <ul className="mt-12 grid gap-x-3 gap-y-6 sm:grid-cols-2 sm:gap-y-10 md:gap-x-6 lg:grid-cols-3">
+                <ul className="mt-12 grid gap-x-3 gap-y-6 md:grid-cols-2 md:gap-y-10 md:gap-x-6 lg:grid-cols-3">
                   {remainingPosts.map((blog) => (
                     <BloggCard key={blog._id} blog={blog} />
                   ))}

aksel.nav.no/website/pages/side/[slug].tsx

@@ -41,15 +41,11 @@ const Page = ({
       <main
         tabIndex={-1}
         id="hovedinnhold"
-        className="aksel-artikkel xs:pb-32 bg-gray-50 pt-[8vw] pb-16 focus:outline-none"
+        className="aksel-artikkel bg-gray-50 pt-[8vw] pb-16 focus:outline-none sm:pb-32"
       >
         <div className="px-4">
           <div className="dynamic-wrapper-prose">
-            <Heading
-              level="1"
-              size="xlarge"
-              className="algolia-index-lvl1 mt-1"
-            >
+            <Heading level="1" size="xlarge" className="mt-1">
               {page.heading}
             </Heading>
           </div>

aksel.nav.no/website/public/images/list-dot.svg

@@ -1,16 +0,0 @@
-<svg
-  width="11"
-  height="10"
-  viewBox="0 0 11 10"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect
-    y="5"
-    width="8"
-    height="8"
-    rx="2"
-    transform="rotate(-45 0 5)"
-    fill="#005B82"
-  />
-</svg>

aksel.nav.no/website/sanity/schema/objects/komponent/intro.tsx

@@ -17,14 +17,14 @@ export const KomponentIntro = defineType({
     defineField({
       type: "array",
       name: "brukes_til",
-      title: "Egnet til å:",
+      title: "Egnet til:",
       of: [{ type: "string" }],
       validation: (Rule) => Rule.required().min(1),
     }),
     defineField({
       type: "array",
       name: "brukes_ikke_til",
-      title: "Vurder noe annet: (optional)",
+      title: "Uegnet til: (optional)",
       of: [{ type: "string" }],
     }),
   ],

aksel.nav.no/website/sanity/util.tsx

@@ -104,7 +104,7 @@ export const serializers = {
         case "h2":
           return (
             <Heading
-              className="algolia-index-lvl3 max-w-text mt-8 scroll-mt-20 focus:outline-none"
+              className="max-w-text mt-8 scroll-mt-20 focus:outline-none"
               spacing
               level="2"
               size="medium"
@@ -116,7 +116,7 @@ export const serializers = {
         case "h3":
           return (
             <Heading
-              className="algolia-index-lvl3 max-w-text mt-8 scroll-mt-20 first:mt-0 focus:outline-none group-first:mt-0"
+              className="max-w-text mt-8 scroll-mt-20 first:mt-0 focus:outline-none group-first:mt-0"
               spacing
               level="3"
               size="small"
@@ -128,7 +128,7 @@ export const serializers = {
         case "h4":
           return (
             <Heading
-              className="algolia-index-lvl4 max-w-text mt-6"
+              className="max-w-text mt-6"
               spacing
               level="4"
               size="xsmall"
@@ -141,7 +141,7 @@ export const serializers = {
               size="medium"
               spacing
               {...textProps}
-              className="algolia-index-body max-w-text"
+              className="max-w-text"
             />
           );
       }

aksel.nav.no/website/styles/layout.css

@@ -7,13 +7,13 @@
 }
 
 .content-box {
-  @apply max-w-content-w-padding xs:mx-auto xs:px-6 w-full px-4 pb-4 md:mx-0 md:mr-auto md:px-12;
+  @apply max-w-content-w-padding w-full px-4 pb-4 sm:mx-auto sm:px-6 md:mx-0 md:mr-auto md:px-12;
 }
 
 .content-box--full {
-  @apply xs:mx-auto xs:px-6 w-full px-4 pb-4 md:mx-0 md:mr-auto md:px-12;
+  @apply w-full px-4 pb-4 sm:mx-auto sm:px-6 md:mx-0 md:mr-auto md:px-12;
 }
 
 .centered-layout {
-  @apply xs:px-6 mx-auto w-full px-4;
+  @apply mx-auto w-full px-4 sm:px-6;
 }

aksel.nav.no/website/styles/utilities.css

@@ -15,23 +15,23 @@ p.override-text-no-max {
 }
 
 .dynamic-wrapper {
-  @apply max-w-aksel xs:w-[90%] mx-auto;
+  @apply max-w-aksel mx-auto sm:w-[90%];
 }
 
 .dynamic-wrapper-prose {
-  @apply xs:w-[90%] mx-auto max-w-prose;
+  @apply mx-auto max-w-prose sm:w-[90%];
 }
 
 .dynamic-wrapper-left {
-  @apply xs:w-[90%] max-w-prose;
+  @apply max-w-prose sm:w-[90%];
 }
 
 .dynamic-wrapper-2xl {
-  @apply xs:w-[90%] mx-auto max-w-2xl;
+  @apply mx-auto max-w-2xl sm:w-[90%];
 }
 
 .card-grid-3-1 {
-  @apply grid gap-3 sm:grid-cols-2 md:gap-6 lg:grid-cols-3;
+  @apply grid gap-3 md:grid-cols-2 md:gap-6 lg:grid-cols-3;
 }
 
 .card-grid-2-1 {
@@ -39,7 +39,7 @@ p.override-text-no-max {
 }
 
 .aksel-artikkel .aksel-list-ul li::before {
-  content: url("/images/list-dot.svg");
+  content: url("data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxMSIKICBoZWlnaHQ9IjEwIgogIHZpZXdCb3g9IjAgMCAxMSAxMCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxyZWN0CiAgICB5PSI1IgogICAgd2lkdGg9IjgiCiAgICBoZWlnaHQ9IjgiCiAgICByeD0iMiIKICAgIHRyYW5zZm9ybT0icm90YXRlKC00NSAwIDUpIgogICAgZmlsbD0iIzAwNUI4MiIKICAvPgo8L3N2Zz4K");
   position: absolute;
   left: 0;
 }

aksel.nav.no/website/tailwind.config.js

@@ -8,16 +8,10 @@ module.exports = {
     "./stories/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    /* Flytt ut fra extend og refactor bruk av screen */
-    screens: {
-      xs: "480px",
-      sm: "648px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px",
-      "2xl": "1440px",
-    },
     extend: {
+      screen: {
+        "2xl": "1440px",
+      },
       colors: {
         pink: {
           50: "#fdf2f8",

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.4.3",
-    "@navikt/ds-react": "2.4.3",
+    "@navikt/ds-css": "2.6.1",
+    "@navikt/ds-react": "2.6.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

yarn.lock

@@ -2626,10 +2626,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@floating-ui/core@npm:1.2.1"
-  checksum: 7a263e15abad4cd98ce3938075c90f76bafef71c67964c83dd7cf1e1916c92ccfa46a4f2b95b403bb180f70b3e7ded118db1cbc3426269ec70e948edf0d19ae2
+"@floating-ui/core@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "@floating-ui/core@npm:1.2.2"
+  checksum: 0728efcb3f57c0bbeaf940e3ca8dfbecb659afec8943dff79169b8191b8c4aa14b54a33dc66599e624dfa791920010ebd9f860cfa7f47df94ad75b32c1e44883
   languageName: node
   linkType: hard
 
@@ -2642,12 +2642,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@floating-ui/dom@npm:1.2.1"
+"@floating-ui/dom@npm:^1.1.0":
+  version: 1.2.3
+  resolution: "@floating-ui/dom@npm:1.2.3"
   dependencies:
-    "@floating-ui/core": ^1.2.1
-  checksum: ad6928d5dd934ca8b3dcffdfcacde9d147afc0db4db0c0294b23d5f897224d73c7f0ae578b46d813f0d7ae22a86e7a3f8914fdbcdf4a8d42a1b430d0518f45be
+    "@floating-ui/core": ^1.2.2
+  checksum: b2428e1fda01d5cba59960bb8c04d7a5f2400200855f206267589533a67303a62fbdf85dc7747fe83c21bb15f4eda67feaaf51ef4a41bb132fd2b785612f1bb4
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@floating-ui/react-dom@npm:1.1.1"
+  dependencies:
+    "@floating-ui/dom": ^1.1.0
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: bb7d09583c743af90507609400e0446eb0a3913ea081875ba534acb543b5098719602643aa54d3a2f394d93faf213ae2f664eba52bcbaec06d487c0e21a00024
   languageName: node
   linkType: hard
 
@@ -2663,18 +2675,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:1.3.0":
-  version: 1.3.0
-  resolution: "@floating-ui/react-dom@npm:1.3.0"
-  dependencies:
-    "@floating-ui/dom": ^1.2.1
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: ce0ad3e3bbe43cfd15a6a0d5cccede02175c845862bfab52027995ab99c6b29630180dc7d146f76ebb34730f90a6ab9bf193c8984fe8d7f56062308e4ca98f77
-  languageName: node
-  linkType: hard
-
 "@floating-ui/react@npm:0.17.0":
   version: 0.17.0
   resolution: "@floating-ui/react@npm:0.17.0"
@@ -3351,7 +3351,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/ds-codemod@^2.4.0, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^2.6.0, @navikt/ds-codemod@workspace:@navikt/codemod":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
   dependencies:
@@ -3378,7 +3378,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css-internal@^2.4.0, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^2.6.0, @navikt/ds-css-internal@workspace:@navikt/internal/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
   dependencies:
@@ -3389,11 +3389,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@2.4.0, @navikt/ds-css@^2.4.0, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@2.6.0, @navikt/ds-css@^2.6.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^2.4.0
+    "@navikt/ds-tokens": ^2.6.0
     normalize.css: ^8.0.1
     postcss: ^8.4.0
     postcss-cli: ^9.0.0
@@ -3402,7 +3402,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-icons@^2.4.0, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^2.6.0, @navikt/ds-icons@workspace:@navikt/icons":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-icons@workspace:@navikt/icons"
   dependencies:
@@ -3438,8 +3438,8 @@ __metadata:
     "@babel/preset-env": 7.19.4
     "@babel/preset-react": 7.18.6
     "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.4.0
-    "@navikt/ds-react": ^2.4.0
+    "@navikt/ds-icons": ^2.6.0
+    "@navikt/ds-react": ^2.6.0
     "@rollup/plugin-babel": 6.0.2
     "@rollup/plugin-commonjs": 23.0.2
     "@rollup/plugin-node-resolve": ^15.0.1
@@ -3464,12 +3464,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react-internal@^2.4.0, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^2.6.0, @navikt/ds-react-internal@workspace:@navikt/internal/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
   dependencies:
-    "@navikt/ds-icons": ^2.4.0
-    "@navikt/ds-react": ^2.4.0
+    "@navikt/ds-icons": ^2.6.0
+    "@navikt/ds-react": ^2.6.0
     clsx: ^1.1.1
     concurrently: 7.2.1
     copy-to-clipboard: ^3.3.1
@@ -3485,12 +3485,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@2.4.0, @navikt/ds-react@^2.4.0, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@2.6.0, @navikt/ds-react@^2.6.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.17.0
-    "@navikt/ds-icons": ^2.4.0
+    "@navikt/ds-icons": ^2.6.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3526,11 +3526,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^2.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^2.6.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^2.4.0
+    "@navikt/ds-tokens": ^2.6.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3541,7 +3541,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^2.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^2.6.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -4193,19 +4193,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/block-tools@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/block-tools@npm:3.5.0"
+"@sanity/block-tools@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/block-tools@npm:3.5.1"
   dependencies:
     get-random-values-esm: ^1.0.0
     lodash: ^4.17.21
-  checksum: 814774bc759f32183dbf8ad33ad747b821d395a9d70a341eb5be4523d569bfa7269bde72c322e0946cc3798e9e54555cd9c9d911fe85782b3636862c829be512
+  checksum: d737be83beb7eb0d6f5378523ccfe8ed02782ed21c56f2130e796b377afe29807b323741e3463a312acad1e7ab87dd6673b8bcb69eb8f85cea56ef3abf21a95d
   languageName: node
   linkType: hard
 
-"@sanity/cli@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/cli@npm:3.5.0"
+"@sanity/cli@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/cli@npm:3.5.1"
   dependencies:
     "@babel/traverse": ^7.19.0
     chalk: ^4.1.2
@@ -4215,11 +4215,11 @@ __metadata:
     pkg-dir: ^5.0.0
   bin:
     sanity: bin/sanity
-  checksum: db04df75cac020b8a936985e9cffdd80bff1d92dba378362f02e012db8f97675424cf2ff40d8138568909efecebdd43e49abb9eb070bb36c0014603744c2014b
+  checksum: 32c16c3ac3ba43b9d9c8c7e5d66761e87cb97f1cb0f75ae904804712fe0cefb78117c5af2d10bc9ad2e75510fd4413ee5cbe9965471f1dc0c6fe8705cd737fdc
   languageName: node
   linkType: hard
 
-"@sanity/client@npm:^4, @sanity/client@npm:^4.0.1":
+"@sanity/client@npm:^4.0.1":
   version: 4.0.1
   resolution: "@sanity/client@npm:4.0.1"
   dependencies:
@@ -4231,7 +4231,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/client@npm:^5.2.0, @sanity/client@npm:^5.2.2":
+"@sanity/client@npm:^5, @sanity/client@npm:^5.2.0, @sanity/client@npm:^5.2.2":
   version: 5.2.2
   resolution: "@sanity/client@npm:5.2.2"
   dependencies:
@@ -4242,9 +4242,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/code-input@npm:4.0.0":
-  version: 4.0.0
-  resolution: "@sanity/code-input@npm:4.0.0"
+"@sanity/code-input@npm:4.1.0":
+  version: 4.1.0
+  resolution: "@sanity/code-input@npm:4.1.0"
   dependencies:
     "@codemirror/autocomplete": ^6.1.0
     "@codemirror/commands": ^6.0.1
@@ -4272,7 +4272,7 @@ __metadata:
     react-dom: ^18
     sanity: ^3
     styled-components: ^5.2
-  checksum: f9c45fa5a3fc8dcf9eaa0fdfa7405d3d2f234338a887055edd4b35185e30ece8893a2b26c96d382c0708e5510fc0aa27db8db2b3f02df8d1b2b35a0ac4cea18d
+  checksum: 39c3f3edcd8f326d52a73f41f52398c383fc6c56f9903f80a6b9526038112cc426a559b0499695914dd4f915e8bbc5c982269c33f35f6cf46d1b7b6efcf59a61
   languageName: node
   linkType: hard
 
@@ -4307,12 +4307,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/diff@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/diff@npm:3.5.0"
+"@sanity/diff@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/diff@npm:3.5.1"
   dependencies:
     diff-match-patch: ^1.0.4
-  checksum: a97afb26edc4c294627960a369025098c0d585c4924031844de2f8667e337d2d6d205a4c2541e64abf403e78a4ed1ba0859487f4ddf4808d350321ce0f0b9cb2
+  checksum: 4ced6af821bc8857c7d83d3f38f19ece751e490481c1eee03e03cd3bde7273d8b789197041a5a95038d407162e54d2de386876f8652a0ec46d01c2cd66cbf139
   languageName: node
   linkType: hard
 
@@ -4336,9 +4336,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/export@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/export@npm:3.5.0"
+"@sanity/export@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/export@npm:3.5.1"
   dependencies:
     archiver: ^5.0.0
     debug: ^3.2.7
@@ -4348,7 +4348,7 @@ __metadata:
     p-queue: ^2.3.0
     rimraf: ^3.0.2
     split2: ^3.2.2
-  checksum: 862127cc733e90a2c6ff72abdb00773c90fa61d5a06f90c68b03abe36fd0a7d8fbc98255269d9b3c3b51afd518b29161ed34062fba49a17036835b5bc2b7610f
+  checksum: 3febc69b9df04943cd0b72eb3ea26d3678064ffa2604969b6e398de13fe439b8994e5bb842d39205ba794f2870da1f31f20322196ad404882b9332d215ac6da8
   languageName: node
   linkType: hard
 
@@ -4432,13 +4432,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/import@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/import@npm:3.5.0"
+"@sanity/import@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/import@npm:3.5.1"
   dependencies:
     "@sanity/asset-utils": ^1.2.5
     "@sanity/generate-help-url": ^3.0.0
-    "@sanity/mutator": 3.5.0
+    "@sanity/mutator": 3.5.1
     "@sanity/uuid": ^3.0.1
     debug: ^3.2.7
     file-url: ^2.0.2
@@ -4454,7 +4454,7 @@ __metadata:
     rimraf: ^3.0.2
     split2: ^3.2.2
     tar-fs: ^2.1.1
-  checksum: 68d840282cce13d4149904ab8defa0ce4ca4afbf3c0e83f78c9acdf132f895fd99c00c22612a4e453403bd6e55524a61f7c79be94cdafdd3f3be439c11bd4985
+  checksum: 6c5e3b4e85d51028f8a05a1a74e795fb3913e86f5d13b0309359ea96fc2ce5fcfcec3b7f9cd07053c586769c0337ef060f8e1297bcf2e21924220bdc9c51f819
   languageName: node
   linkType: hard
 
@@ -4481,28 +4481,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/mutator@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/mutator@npm:3.5.0"
+"@sanity/mutator@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/mutator@npm:3.5.1"
   dependencies:
     "@sanity/uuid": ^3.0.1
     "@types/diff-match-patch": ^1.0.32
     debug: ^3.2.7
     diff-match-patch: ^1.0.4
     lodash: ^4.17.21
-  checksum: 6fc6283dc18c62bbc81d1552bdb32b0ef468ffd9881be8658e92cee10d5a794c6a30b0fb921cb1e83c777b8a77141f88169f3ca36b42ac06d2c7984db3bf084a
+  checksum: bfe8358aea62629a69bfef44abaa50fddbe91f082f5f9a18d42141d05da1736d1e7eef9361842cdec573896b35a84eccd703349d55648375a11142a0053cbc2e
   languageName: node
   linkType: hard
 
-"@sanity/portable-text-editor@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/portable-text-editor@npm:3.5.0"
+"@sanity/portable-text-editor@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/portable-text-editor@npm:3.5.1"
   dependencies:
-    "@sanity/block-tools": 3.5.0
-    "@sanity/schema": 3.5.0
+    "@sanity/block-tools": 3.5.1
+    "@sanity/schema": 3.5.1
     "@sanity/slate-react": 2.30.1
-    "@sanity/types": 3.5.0
-    "@sanity/util": 3.5.0
+    "@sanity/types": 3.5.1
+    "@sanity/util": 3.5.1
     debug: ^3.2.7
     is-hotkey: ^0.1.6
     lodash: ^4.17.21
@@ -4511,7 +4511,7 @@ __metadata:
     react: ^16.9 || ^17 || ^18
     rxjs: ">=6.5.3 || ^7.0.0"
     styled-components: ^5.2
-  checksum: 3704e81d09c1449ab2461f43b7b2d4f65ece4940ee0fea9d17ae470e09d16962a56a0abbbc77337b1e1033446167f304e3a42151a8e4c85055d3cc7902a6bcbd
+  checksum: d3815e82e3e3e7333edf0f6995892393e30bc566fafc4932b8edd24a690074eb4230ea6af379118cf73396c375eadde79b62e8a743c8cf45e82646cfcac75225
   languageName: node
   linkType: hard
 
@@ -4543,18 +4543,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/schema@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/schema@npm:3.5.0"
+"@sanity/schema@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/schema@npm:3.5.1"
   dependencies:
     "@sanity/generate-help-url": ^3.0.0
-    "@sanity/types": 3.5.0
+    "@sanity/types": 3.5.1
     arrify: ^1.0.1
     humanize-list: ^1.0.1
     leven: ^3.1.0
     lodash: ^4.17.21
     object-inspect: ^1.6.0
-  checksum: 2d4b462fe1236a6ee4379b08fc923d4f1ff1497c16e01ae1832243039949040ba02c9fa2f59293fd0d48652b963b8ddf3342b5b0743585984fcd01ccab241923
+  checksum: 7f744d22495a9d58d9cd2c9b7d1cbba4ee891bcf749c9a2d55e231e30cb88e028634580ec5a214bebbab832dd85abf50daa0389e9b14695eb723e4063f46b249
   languageName: node
   linkType: hard
 
@@ -4600,13 +4600,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/types@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/types@npm:3.5.0"
+"@sanity/types@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/types@npm:3.5.1"
   dependencies:
     "@sanity/client": ^5.2.0
     "@types/react": ^18.0.25
-  checksum: 5b94ec56217224e66cf2fe9666efecda1ad7ec8cc81a8653a9744a4e30f8743fabccdc59bde0094d192853c36a5a8ef7a164f15f4b356993758a9a5280980daa
+  checksum: 0b43a4508f74f563d3d2634ef0ecd85b9b76de1b5029c18fa6ed49d3373ff82d74c8f8c7f026e81c01b7367e66cf9d2b1382f8d955133a9e9769ba4894ccd412
   languageName: node
   linkType: hard
 
@@ -4639,11 +4639,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/ui@npm:^1.2.5":
-  version: 1.2.5
-  resolution: "@sanity/ui@npm:1.2.5"
+"@sanity/ui@npm:^1.2.0, @sanity/ui@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@sanity/ui@npm:1.3.0"
   dependencies:
-    "@floating-ui/react-dom": 1.3.0
+    "@floating-ui/react-dom": 1.1.1
     "@sanity/color": ^2.2.3
     "@sanity/icons": ^2.2.2
     csstype: ^3.1.1
@@ -4654,18 +4654,18 @@ __metadata:
     react-dom: ^18
     react-is: ^18
     styled-components: ^5.2
-  checksum: 6ee438edade26dda51c0404cab347815abc9838ba6f2e749c08ce27eff6642f555b1c66d9f65eb56b2de564133636215c2cbccdea45211dd31c5a9ba621b7316
+  checksum: b6cb21ff08815fb96a404df917c9a1c9439cce949f71d199ca9c42c7e28d4fcc229ebfc9efd2118c945d7470f65df893919ce29e7eee09c68c0e8138e06db636
   languageName: node
   linkType: hard
 
-"@sanity/util@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/util@npm:3.5.0"
+"@sanity/util@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/util@npm:3.5.1"
   dependencies:
-    "@sanity/types": 3.5.0
+    "@sanity/types": 3.5.1
     get-random-values-esm: ^1.0.0
     moment: ^2.29.4
-  checksum: 7a49f587058b3547bf14a39b77bdd22f0e760359065bc2b2b2a8ad7e20275db545b1cb0b65df072832f8f8e862551f66b7dba50663493642f1d4ee572c2c3e0e
+  checksum: 9752a5c1025168978b9a485b24c56e7b04a1ab4ace40001b3f14c258375bf838447d7f0ec7b7b6092608e2679ab7b772f31bdc74f92b744753799852bee7f1eb
   languageName: node
   linkType: hard
 
@@ -4679,21 +4679,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sanity/validation@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/validation@npm:3.5.0"
+"@sanity/validation@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/validation@npm:3.5.1"
   dependencies:
-    "@sanity/types": 3.5.0
+    "@sanity/types": 3.5.1
     date-fns: ^2.26.1
     lodash: ^4.17.21
     rxjs: ^7.8.0
-  checksum: 17d7be758050170c40893b7c18d8446f064f0cc675e055838cb601a831ef1c813cd130ceba9630146d2a1f667cb324933e34ccced994a3cf1fae0c2237755df7
+  checksum: c7ff5da2a86e0350e2d155f6aee0ed0d355649e413c35cbe2ed3eefa88bc7f3b0ae51f480aa16cefce273fde2a0f3d3c3f9ee2bcf7c3d08c5734463017f86e2e
   languageName: node
   linkType: hard
 
-"@sanity/vision@npm:3.5.0":
-  version: 3.5.0
-  resolution: "@sanity/vision@npm:3.5.0"
+"@sanity/vision@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@sanity/vision@npm:3.5.1"
   dependencies:
     "@codemirror/autocomplete": ^6.1.0
     "@codemirror/commands": ^6.0.1
@@ -4707,7 +4707,7 @@ __metadata:
     "@rexxars/react-split-pane": ^0.1.93
     "@sanity/color": ^2.1.20
     "@sanity/icons": ^2.1.0
-    "@sanity/ui": ^1.0.0
+    "@sanity/ui": ^1.2.0
     "@uiw/react-codemirror": ^4.11.4
     hashlru: ^2.3.0
     is-hotkey: ^0.1.6
@@ -4716,7 +4716,7 @@ __metadata:
   peerDependencies:
     react: ^18
     styled-components: ^5.2
-  checksum: 89e2637e8a5df5d93ff7cf2b56fd5f6043c8515107a8f5ad47ef51888038e1686aecd8944f5076348f2a504950e4f68f460a9976156c49aa8b50d5658d711733
+  checksum: a9ebbf5f9b9a785b4695b7304e4d0aea955c175b69d80f33e01dff4dc429c26cf4f58ff0d0be3c90075c4a11a5594cb4553ec6ff9a96d94b1324ea9507f62a3b
   languageName: node
   linkType: hard
 
@@ -7390,14 +7390,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/ds-codemod": ^2.4.0
-    "@navikt/ds-css": ^2.4.0
-    "@navikt/ds-css-internal": ^2.4.0
-    "@navikt/ds-icons": ^2.4.0
-    "@navikt/ds-react": ^2.4.0
-    "@navikt/ds-react-internal": ^2.4.0
-    "@navikt/ds-tailwind": ^2.4.0
-    "@navikt/ds-tokens": ^2.4.0
+    "@navikt/ds-codemod": ^2.6.0
+    "@navikt/ds-css": ^2.6.0
+    "@navikt/ds-css-internal": ^2.6.0
+    "@navikt/ds-icons": ^2.6.0
+    "@navikt/ds-react": ^2.6.0
+    "@navikt/ds-react-internal": ^2.6.0
+    "@navikt/ds-tailwind": ^2.6.0
+    "@navikt/ds-tokens": ^2.6.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -16225,13 +16225,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jwt-decode@npm:3.1.2":
-  version: 3.1.2
-  resolution: "jwt-decode@npm:3.1.2"
-  checksum: 20a4b072d44ce3479f42d0d2c8d3dabeb353081ba4982e40b83a779f2459a70be26441be6c160bfc8c3c6eadf9f6380a036fbb06ac5406b5674e35d8c4205eeb
-  languageName: node
-  linkType: hard
-
 "keyv@npm:3.0.0":
   version: 3.0.0
   resolution: "keyv@npm:3.0.0"
@@ -17587,11 +17580,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next-sanity@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "next-sanity@npm:4.1.2"
+"next-sanity@npm:^4.1.5":
+  version: 4.1.5
+  resolution: "next-sanity@npm:4.1.5"
   dependencies:
-    "@sanity/client": ^4
+    "@sanity/client": ^5
     "@sanity/preview-kit": ^1.3
     "@sanity/webhook": ^2
     groq: ^3
@@ -17603,7 +17596,7 @@ __metadata:
     react: ^18
     sanity: ^3
     styled-components: ^5.2
-  checksum: 57d8ac839ba68f6e1e3af9c0ab505a5ba808e151cb44ac311ee20686692f9d99133a733ea50b0f51ac7777d4788b386d7483a2bed87adfebd0bf0ea90a1d7123
+  checksum: 39e8caf86c72a0bfb5e95f5901559d24544a6a634ad2e400c0316dcd4645242a26e11324b4f6b2acb80a4efe065db0602ead05a89ba88573c4c022d8abc9772c
   languageName: node
   linkType: hard
 
@@ -21392,9 +21385,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sanity-plugin-iframe-pane@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "sanity-plugin-iframe-pane@npm:2.1.1"
+"sanity-plugin-iframe-pane@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "sanity-plugin-iframe-pane@npm:2.2.0"
   dependencies:
     "@sanity/icons": ^2.0.0
     "@sanity/incompatible-plugin": ^1.0.4
@@ -21403,7 +21396,7 @@ __metadata:
   peerDependencies:
     react: ^18
     sanity: ^3.0.0
-  checksum: 9e622e719f14332781196e48f5622ea7bde950ef289e9527f9108d881591b7017d3194c0b713f9ae455ea9e95c07225bb1ba45fbb47f51e9688ce777b3523e26
+  checksum: 8c43256afe20b0c8d045753bde39c2477ce37300b242a878c1f0affb6e59bd3271ae6b5c2a122d07e9a49fa0683d023d9ea583f9fa63adf3ce471b8e1172e3da
   languageName: node
   linkType: hard
 
@@ -21444,9 +21437,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sanity@npm:3.5.0":
-  version: 3.5.0
-  resolution: "sanity@npm:3.5.0"
+"sanity@npm:3.5.1":
+  version: 3.5.1
+  resolution: "sanity@npm:3.5.1"
   dependencies:
     "@dnd-kit/core": ^6.0.5
     "@dnd-kit/modifiers": ^6.0.0
@@ -21458,26 +21451,26 @@ __metadata:
     "@rexxars/react-json-inspector": ^8.0.1
     "@sanity/asset-utils": ^1.2.5
     "@sanity/bifur-client": ^0.3.1
-    "@sanity/block-tools": 3.5.0
-    "@sanity/cli": 3.5.0
+    "@sanity/block-tools": 3.5.1
+    "@sanity/cli": 3.5.1
     "@sanity/client": ^5.2.0
     "@sanity/color": ^2.1.20
-    "@sanity/diff": 3.5.0
+    "@sanity/diff": 3.5.1
     "@sanity/eventsource": ^3.0.1
-    "@sanity/export": 3.5.0
+    "@sanity/export": 3.5.1
     "@sanity/generate-help-url": ^3.0.0
     "@sanity/icons": ^2.1.0
     "@sanity/image-url": ^1.0.2
-    "@sanity/import": 3.5.0
+    "@sanity/import": 3.5.1
     "@sanity/logos": ^2.0.2
-    "@sanity/mutator": 3.5.0
-    "@sanity/portable-text-editor": 3.5.0
-    "@sanity/schema": 3.5.0
-    "@sanity/types": 3.5.0
-    "@sanity/ui": ^1.0.0
-    "@sanity/util": 3.5.0
+    "@sanity/mutator": 3.5.1
+    "@sanity/portable-text-editor": 3.5.1
+    "@sanity/schema": 3.5.1
+    "@sanity/types": 3.5.1
+    "@sanity/ui": ^1.2.0
+    "@sanity/util": 3.5.1
     "@sanity/uuid": ^3.0.1
-    "@sanity/validation": 3.5.0
+    "@sanity/validation": 3.5.1
     "@tanstack/react-virtual": 3.0.0-beta.29
     "@types/is-hotkey": ^0.1.7
     "@types/react-copy-to-clipboard": ^5.0.2
@@ -21557,7 +21550,7 @@ __metadata:
     styled-components: ^5.2
   bin:
     sanity: bin/sanity
-  checksum: 1070c8cbb9dd5557f5ca5d17334c307b1d9c3ccd39032b6bc55de11c754979103d78c495f45a1549ae4c344eca9e90c2a9c37d87622ae25494c0477ab0e9c970
+  checksum: b7e5b10b8dc938bb4efe37db59f96bb29b03038f31fd02c282000edc42028b7d57c1c52584f554903a140853aa35d1f01e3fe40a02cdca97d0bba38e99e15c4e
   languageName: node
   linkType: hard
 
@@ -21749,8 +21742,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 2.4.0
-    "@navikt/ds-react": 2.4.0
+    "@navikt/ds-css": 2.6.0
+    "@navikt/ds-react": 2.6.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0
@@ -23294,7 +23287,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinycolor2@npm:^1.4.1":
+"tinycolor2@npm:^1.4.1, tinycolor2@npm:^1.6.0":
   version: 1.6.0
   resolution: "tinycolor2@npm:1.6.0"
   checksum: 6df4d07fceeedc0a878d7bac47e2cd47c1ceeb1078340a9eb8a295bc0651e17c750f73d47b3028d829f30b85c15e0572c0fd4142083e4c21a30a597e47f47230
@@ -24525,14 +24518,14 @@ __metadata:
     "@sanity-codegen/types": 1.0.0-alpha.13
     "@sanity/block-content-to-react": ^3.0.0
     "@sanity/client": ^5.2.2
-    "@sanity/code-input": 4.0.0
+    "@sanity/code-input": 4.1.0
     "@sanity/color-input": ^3.0.2
     "@sanity/icons": 2.2.2
     "@sanity/image-url": 1.0.2
     "@sanity/preview-kit": ^1.3.4
     "@sanity/table": 1.0.1
-    "@sanity/ui": ^1.2.5
-    "@sanity/vision": 3.5.0
+    "@sanity/ui": ^1.3.0
+    "@sanity/vision": 3.5.1
     "@svgr/webpack": ^5.5.0
     "@testing-library/jest-dom": ^5.16.0
     "@testing-library/react": ^13.3.0
@@ -24545,7 +24538,6 @@ __metadata:
     boring-avatars: 1.7.0
     clsx: ^1.2.1
     codesandbox: ^2.2.3
-    color: 4.2.3
     copy-to-clipboard: ^3.3.1
     cross-env: ^7.0.0
     date-fns: 2.29.3
@@ -24555,29 +24547,28 @@ __metadata:
     jest-environment-jsdom: ^29.0.0
     jose: 4.10.0
     json5: 2.2.1
-    jwt-decode: 3.1.2
     lodash: ^4.17.21
     next: ^13.2.1
-    next-sanity: ^4.1.2
+    next-sanity: ^4.1.5
     postcss: ^8.4.0
     postcss-import: ^14.1.0
     postcss-loader: 7.0.0
-    prettier: 2.7.1
     prism-react-renderer: ^1.3.0
     prismjs: ^1.27.0
     react: ^18.0.0
     react-dom: ^18.0.0
     react-modal: 3.15.1
     recharts: ^2.2.0
-    sanity: 3.5.0
+    sanity: 3.5.1
     sanity-plugin-asset-source-unsplash: ^1.0.6
-    sanity-plugin-iframe-pane: ^2.1.1
+    sanity-plugin-iframe-pane: ^2.2.0
     sanity-plugin-media: ^2.0.5
     sitemap: ^7.0.0
     start-server-and-test: ^1.14.0
     styled-components: ^5.2
     swr: ^1.1.2
     tailwindcss: ^3.2.0
+    tinycolor2: ^1.6.0
     ts-jest: ^29.0.0
     ts-node: 10.9.0
     typescript: ^4.8.0