Version Packages (#1833 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🎨 Breakpoints dokumentasjon og token-visning
2026-10-15 10:12:03 +00:00 · 2023-03-01 18:07:06 +01:00 · 2023-03-01 17:38:09 +01:00 · 2023-03-01 17:10:01 +01:00 · 2023-03-01 14:13:34 +01:00 · 2023-03-01 14:06:43 +01:00
58 changed files with 591 additions and 148 deletions
@@ -1,5 +1,15 @@
 # @navikt/ds-codemod

+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

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

+## 2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- [`f962bc781`](https://github.com/navikt/aksel/commit/f962bc7816027c24e334d9754c3e07cda951cf56) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset disabled-opacity bug i select for Chrome
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -49,9 +49,21 @@
  border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }

+/**
+  Disabled
+*/
 .navds-select__input:disabled {
  background-color: var(--ac-select-bg, var(--a-surface-default));
  border: 1px solid var(--ac-select-border, var(--a-border-default));
  box-shadow: none;
  cursor: not-allowed;
+
+  /* Chrome-fix */
+  opacity: 1;
+  color: var(--a-text-default);
+}
+
+/* Chrome-fix */
+.navds-select__input:disabled > option {
+  color: var(--a-text-default);
 }
@@ -3,8 +3,17 @@
  padding: 0;
 }

-.navds-list li:not(:first-child) {
-  margin-top: var(--a-spacing-5);
+.navds-list--nested {
+  margin: var(--a-spacing-4) 0 var(--a-spacing-8) 0;
+}
+
+.navds-list li:not(.navds-list__item--noMargin) {
+  margin-bottom: var(--a-spacing-5);
+}
+
+.navds-list:last-child > ul > li:last-child,
+.navds-list:last-child > ol > li:last-child {
+  margin-bottom: 0;
 }

 .navds-list ul .navds-list__item {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.4.1",
+  "version": "2.5.0",
  "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.1",
+    "@navikt/ds-tokens": "^2.5.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -1,5 +1,28 @@
 # @navikt/ds-react

+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-icons@2.4.2
+
 ## 2.4.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.4.1",
+  "version": "2.5.0",
  "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.1",
+    "@navikt/ds-icons": "^2.5.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -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 },
 };
@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { createContext, forwardRef } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem, ListItemType } from "./ListItem";
+import { ListItem, ListItemContext, ListItemType } from "./ListItem";

 export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode;
@@ -26,8 +26,10 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
  headingTag?: React.ElementType<any>;
 }

-interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+export interface ListComponent
+  extends React.ForwardRefExoticComponent<ListProps> {
  Item: ListItemType;
+  componentType: string;
 }

 interface ListContextProps {
@@ -53,13 +55,22 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
  ) => {
    const ariaId = useId();

+    const { isNested } = useContext(ListItemContext);
+
+
    return (
      <ListContext.Provider
        value={{
          listType: ListTag,
        }}
      >
-        <div {...rest} ref={ref} className={cl("navds-list", className)}>
+        <div
+          {...rest}
+          ref={ref}
+          className={cl("navds-list", className, {
+            "navds-list--nested": isNested,
+          })}
+        >
          {title && (
            <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
              {title}
@@ -81,5 +92,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 ) as ListComponent;

 List.Item = ListItem;
+List.componentType = "list";

 export default List;
@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
 import { ListContext } from "./List";

@@ -13,7 +13,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   */
  title?: string;
  /*
-   * Icon to be used as list marker
+   * Icon to be used as list marker for unordered lists.
   */
  icon?: React.ReactNode;
 }
@@ -23,47 +23,73 @@ 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);

-    return (
-      <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
-        {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>
-        )}
+    if (listType === "ol" && icon) {
+      console.warn(
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+      );
+    }

-        <BodyShort as="div" size="small" className="navds-list__item-content">
-          {title && (
-            <Label as="p" size="small">
-              {title}
-            </Label>
+    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>
          )}
-          {children}
-        </BodyShort>
-      </li>
+
+          <BodyShort as="div" size="small" className="navds-list__item-content">
+            {title && (
+              <Label as="p" size="small">
+                {title}
+              </Label>
+            )}
+            {children}
+          </BodyShort>
+        </li>
+      </ListItemContext.Provider>
    );
  }
 );
@@ -117,3 +117,32 @@ export const Icons = {
    );
  },
 };
+
+export const Nested = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          <List>
+            <List.Item title="Lorem Ipsum Dolor Sit Amet">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item title="Consectetur Adipiscing Elit">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+          </List>
+        </List.Item>
+        <List.Item>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
@@ -1,5 +1,19 @@
 # @navikt/ds-tailwind

+## 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
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "2.4.1",
+  "version": "2.5.0",
  "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.1",
+    "@navikt/ds-tokens": "^2.5.0",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -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] });
+    }, {});
+};
@@ -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"]),
@@ -1,5 +1,19 @@
 # @navikt/ds-tokens

+## 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
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -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",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.4.1",
+  "version": "2.5.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -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: {
@@ -1,5 +1,15 @@
 # @navikt/ds-icons

+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

 ## 2.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.4.1",
+  "version": "2.5.0",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,15 @@
 # @navikt/ds-css-internal

+## 2.5.0
+
+## 2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
 ## 2.4.1

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

+## 2.5.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.5.0
+  - @navikt/ds-icons@2.5.0
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.4.3
+  - @navikt/ds-icons@2.4.3
+
+## 2.4.2
+
+### Patch Changes
+
+- [#1823](https://github.com/navikt/aksel/pull/1823) [`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8) Thanks [@kschieren](https://github.com/kschieren)! - added support for nested lists
+
+- Updated dependencies [[`a7ce61f84`](https://github.com/navikt/aksel/commit/a7ce61f840e5bfaafc4f70e550167fe0095555b8)]:
+  - @navikt/ds-react@2.4.2
+  - @navikt/ds-icons@2.4.2
+
 ## 2.4.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.4.1",
+  "version": "2.5.0",
  "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.1",
-    "@navikt/ds-react": "^2.4.1",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -1,4 +1,4 @@
-FROM node:16.15.0-alpine3.14
+FROM node:18.1-alpine3.14
 RUN apk add --no-cache libc6-compat

 ENV NODE_ENV production
@@ -15,14 +15,14 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/ds-codemod": "^2.4.1",
-    "@navikt/ds-css": "^2.4.1",
-    "@navikt/ds-css-internal": "^2.4.1",
-    "@navikt/ds-icons": "^2.4.1",
-    "@navikt/ds-react": "^2.4.1",
-    "@navikt/ds-react-internal": "^2.4.1",
-    "@navikt/ds-tailwind": "^2.4.1",
-    "@navikt/ds-tokens": "^2.4.1"
+    "@navikt/ds-codemod": "^2.5.0",
+    "@navikt/ds-css": "^2.5.0",
+    "@navikt/ds-css-internal": "^2.5.0",
+    "@navikt/ds-icons": "^2.5.0",
+    "@navikt/ds-react": "^2.5.0",
+    "@navikt/ds-react-internal": "^2.5.0",
+    "@navikt/ds-tailwind": "^2.5.0",
+    "@navikt/ds-tokens": "^2.5.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -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>
@@ -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
@@ -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,
            })}
          >
@@ -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
@@ -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"]}
@@ -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}
@@ -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,
@@ -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) => (
@@ -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
@@ -15,7 +15,7 @@ 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"
@@ -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) => (
@@ -116,7 +116,7 @@ const ComponentExamples = ({
                    title="Kode-eksempler"
                  />
                </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(
@@ -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
@@ -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
@@ -7,7 +7,7 @@ export const Frame = ({
  element: Element,
 }: {
  tokens: { name: string; value: string; description?: string }[];
-  styles: string;
+  styles?: string;
  element?: ({ token, name }: { token: string; name?: string }) => JSX.Element;
 }) => {
  const hasDescription = !!tokens.find((x) => x?.description);
@@ -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;
+  }
+}
@@ -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;
  }
@@ -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",
+        "algolia-ignore-index 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,
@@ -0,0 +1,44 @@
+import { List } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <List>
+      <List.Item title="Kritiske">
+        disse er problemer som må løses så fort som mulig—de hindrer folk i å
+        bruke siden i det hele tatt og kan være direkte farlig.
+      </List.Item>
+      <List.Item title="Høy">
+        brukere er forhindret i å forstå innholdet eller utføre kritiske
+        oppgaver, og det finnes ingen forsvarsstrategier eller alternative
+        løsninger.
+        <List>
+          <List.Item>
+            Rammeverket, inkludert navigasjon, påloggings- og søkefunksjoner
+          </List.Item>
+          <List.Item>Gjenbrukbare komponenter</List.Item>
+          <List.Item>Nøkkelstier gjennom nettstedet</List.Item>
+        </List>
+      </List.Item>
+      <List.Item title="Medium">
+        det er vanskelig, tidkrevende eller frustrerende for brukere å få
+        tilgang til innhold eller funksjonalitet.
+      </List.Item>
+      <List.Item title="Lav">
+        brukeren få tilgang til alt innhold og funksjonalitet, men
+        brukeropplevelsen er dårlig.
+      </List.Item>
+    </List>
+  );
+};
+
+export default withDsExample(Example);
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+};
@@ -115,7 +115,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}
@@ -111,7 +111,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 +126,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 +175,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 +270,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 sm:max-w-screen-xs relative mb-16 mt-20 grid max-w-xs place-items-center text-center sm:mt-36">
              <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 +291,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>
@@ -88,7 +88,7 @@ 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">
@@ -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} />
                ))}
@@ -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} />
                  ))}
@@ -41,7 +41,7 @@ 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">
@@ -110,7 +110,6 @@ export const getServerSideProps: GetServerSideProps = async (
  const { page } = await getClient().fetch(akselStandaloneBySlug, {
    slug: `side/${context.params.slug}`,
  });
-  console.log(page);

  return {
    props: {
@@ -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" }],
    }),
  ],
@@ -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;
 }
@@ -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 {
@@ -8,15 +8,6 @@ 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: {
      colors: {
        pink: {
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "2.4.1",
-    "@navikt/ds-react": "2.4.1",
+    "@navikt/ds-css": "2.5.0",
+    "@navikt/ds-react": "2.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.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.4.3, @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.4.3, @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.4.3, @navikt/ds-css@^2.4.3, @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.4.3
    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.4.3, @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.4.3
+    "@navikt/ds-react": ^2.4.3
    "@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.4.3, @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.4.3
+    "@navikt/ds-react": ^2.4.3
    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.4.3, @navikt/ds-react@^2.4.3, @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.4.3
    "@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.4.3, @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.4.3
    "@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.4.3, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -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.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
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
@@ -21749,8 +21749,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.4.3
+    "@navikt/ds-react": 2.4.3
    "@types/react": ^18.0.0
    "@types/react-dom": ^18.0.0
    "@vitejs/plugin-react": ^2.1.0
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	2c7e86503f	Version Packages (#1833 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-01 18:07:06 +01:00
Ken	4abe46455a	🎨 Breakpoints dokumentasjon og token-visning	2023-03-01 17:38:09 +01:00
Ken	8893b5c82d	[Tokens] Breakpoint-tokens (#1832 )	2023-03-01 17:10:01 +01:00
Ken	19b16fff75	🐛 Fjernet flaky button-story fra chromatic	2023-03-01 14:13:34 +01:00
Ken	2f1974d7bf	📝 Oppdatert egnet-til/uegnet-til tekster i komponent-intro	2023-03-01 14:06:43 +01:00
github-actions[bot]andgithub-actions[bot]	b07972d7dd	Version Packages (#1830 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-01 13:37:07 +01:00
Ken	f962bc7816	🎨 Fikset chrome-bug for disabled select i chrome	2023-03-01 13:34:51 +01:00
github-actions[bot]andgithub-actions[bot]	0cba7a93b8	Version Packages (#1829 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-02-28 15:47:06 +01:00
Kai Erik Schieren Ken Ken github-actions[bot]Ken github-actions[bot]Snyk bot	a7ce61f840	New/list (#1823 ) * 🎉 setup * 💄 add stylesheet * 🎨 conditional type * 🎨 add listitem * 🎨 add title + desc + refactor * 🎨 added title and description * ♿ add aria labels * 🎨 add headingTag prop * 🎨 add stories * 🎨 update ListItem API * 💄 ul markers * 🎨 update markers * 🎨 add icons story * 🎨 ordered markers * 🎨 update stories * 🎨 tweak list props * 💄 update classes * 💄 update classes again * 🎨 remove icon if ol * 🎨 update stories * 🎨 use default counter for ol * 🎨 h4 > span * 🎨 use bodyshort default * 🎨 update stories * 🎨 tweaks * 🎨 Css-tokens * 🎨 update aria Co-authored-by: Ken <KenAJoh@users.noreply.github.com> * 🎨 refactor css and remove test story co authored by OleJørgen and Ken * 🎨 add examples * 🎨 update examples * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * Update @navikt/core/css/list.css Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * 🎨 La til tokens-doc * 🔖 changeset * 🎨 add console warn * 💄 tweak margin to support nested list * 🎨 nested story * 🎨 add nested example * 🚧 detect nested lists * 💄 change margins for nested lists * 💄 tweak margins * Update @navikt/core/react/src/list/List.tsx * ⬆️ Storybook beta 45 -> 54 * ✨ add fixedWeeks option to standalone (#1827) * ✨ add fixedWeeks option to standalone * 🔖 changeset * ♿ Fikset siteimprove feilmeldinger for kode-eksempler * Version Packages (#1828) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * 🔥 Fjernet redundant console.log * [Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826) * 🔖 changeset --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Snyk bot <snyk-bot@snyk.io>	2023-02-28 15:44:13 +01:00
Snyk bot	35e8da7811	[Snyk] Security upgrade node from 16.13.1-alpine3.14 to 18.1-alpine3.14 (#1826 )	2023-02-28 14:59:28 +01:00
Ken	8953185f80	🔥 Fjernet redundant console.log	2023-02-28 14:23:44 +01:00