Version Packages (#2275 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
🐛 Width fungerte ikke med inline-variant av skeleton (#2273 )
2026-10-15 02:02:02 +00:00 · 2023-09-13 14:58:02 +02:00 · 2023-09-13 14:42:05 +02:00 · 2023-09-13 11:46:38 +02:00 · 2023-09-13 11:25:35 +02:00
59 changed files with 1920 additions and 670 deletions
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 5.5.0
+
 ## 5.4.1

 ## 5.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "5.4.1",
+  "version": "5.5.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/aksel-stylelint

+## 5.5.0
+
 ## 5.4.1

 ## 5.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-stylelint",
-  "version": "5.4.1",
+  "version": "5.5.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
  "repository": {
@@ -35,8 +35,8 @@
    "dev": "yarn watch:lint"
  },
  "devDependencies": {
-    "@navikt/ds-css": "^5.4.1",
-    "@navikt/ds-tokens": "^5.4.1",
+    "@navikt/ds-css": "^5.5.0",
+    "@navikt/ds-tokens": "^5.5.0",
    "@types/jest": "^29.0.0",
    "concurrently": "7.2.1",
    "copyfiles": "2.4.1",
@@ -1,5 +1,12 @@
 # @navikt/aksel

+## 5.5.0
+
+### Patch Changes
+
+- Updated dependencies [[`9f2052e1c`](https://github.com/navikt/aksel/commit/9f2052e1c2f31735896d082f3fece66b080a4f4e), [`83c9194a4`](https://github.com/navikt/aksel/commit/83c9194a480fd3d184f673815522f230ed5d77bb)]:
+  - @navikt/ds-css@5.5.0
+
 ## 5.4.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel",
-  "version": "5.4.1",
+  "version": "5.5.0",
  "description": "Aksel command line interface. Handles css-imports, codemods and more",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -29,7 +29,7 @@
  },
  "homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
  "dependencies": {
-    "@navikt/ds-css": "5.4.1",
+    "@navikt/ds-css": "5.5.0",
    "axios": "1.3.6",
    "chalk": "4.1.0",
    "clipboardy": "^2.3.0",
@@ -1,5 +1,15 @@
 # @navikt/ds-css

+## 5.5.0
+
+### Minor Changes
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+### Patch Changes
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
 ## 5.4.1

 ## 5.4.0
@@ -28,6 +28,7 @@
 .navds-sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
@@ -50,6 +51,7 @@
 .navds-sr-only.focusable:active,
 .navds-sr-only.focusable:focus {
  clip: auto;
+  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
@@ -31,6 +31,34 @@ const StyleMappings = {
    },
  ],
  components: [
+    {
+      component: "Box",
+      main: primitivesCss,
+    },
+    {
+      component: "HGrid",
+      main: primitivesCss,
+    },
+    {
+      component: "HStack",
+      main: primitivesCss,
+    },
+    {
+      component: "VStack",
+      main: primitivesCss,
+    },
+    {
+      component: "Spacer",
+      main: primitivesCss,
+    },
+    {
+      component: "Show",
+      main: primitivesCss,
+    },
+    {
+      component: "Hide",
+      main: primitivesCss,
+    },
    {
      component: "Accordion",
      main: "accordion.css",
@@ -100,10 +128,6 @@ const StyleMappings = {
      main: "help-text.css",
      dependencies: ["popover.css"],
    },
-    {
-      component: "HGrid",
-      main: primitivesCss,
-    },
    { component: "Ingress", main: typoCss },
    {
      component: "InternalHeader",
@@ -139,26 +163,6 @@ const StyleMappings = {
    { component: "Select", main: formCss, dependencies: [typoCss] },
    { component: "Skeleton", main: "skeleton.css", dependencies: [] },
    { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
-    {
-      component: "HStack",
-      main: primitivesCss,
-    },
-    {
-      component: "VStack",
-      main: primitivesCss,
-    },
-    {
-      component: "Spacer",
-      main: primitivesCss,
-    },
-    {
-      component: "Show",
-      main: primitivesCss,
-    },
-    {
-      component: "Hide",
-      main: primitivesCss,
-    },
    { component: "Switch", main: formCss, dependencies: [typoCss] },
    { component: "Table", main: "table.css", dependencies: [typoCss] },
    { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "5.4.1",
+  "version": "5.5.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -27,7 +27,7 @@
    "css:get-version": "node config/get-version.js"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^5.4.1",
+    "@navikt/ds-tokens": "^5.5.0",
    "cssnano": "6.0.0",
    "fast-glob": "3.2.11",
    "lodash": "4.17.21",
@@ -0,0 +1,117 @@
+.navds-box {
+  --__ac-box-padding-xs: initial;
+  --__ac-box-padding-sm: initial;
+  --__ac-box-padding-md: initial;
+  --__ac-box-padding-lg: initial;
+  --__ac-box-padding-xl: initial;
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-inline-xs: initial;
+  --__ac-box-padding-block-sm: initial;
+  --__ac-box-padding-inline-sm: initial;
+  --__ac-box-padding-block-md: initial;
+  --__ac-box-padding-inline-md: initial;
+  --__ac-box-padding-block-lg: initial;
+  --__ac-box-padding-inline-lg: initial;
+  --__ac-box-padding-block-xl: initial;
+  --__ac-box-padding-inline-xl: initial;
+  --__ac-box-padding: var(--__ac-box-padding-xs);
+  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
+  --__ac-box-background: initial;
+  --__ac-box-border-color: initial;
+  --__ac-box-shadow: initial;
+  --__ac-box-border-width: initial;
+  --__ac-box-border-radius-xs: initial;
+  --__ac-box-border-radius-sm: initial;
+  --__ac-box-border-radius-md: initial;
+  --__ac-box-border-radius-lg: initial;
+  --__ac-box-border-radius-xl: initial;
+  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+
+  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
+  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
+  background-color: var(--__ac-box-background);
+  border-style: solid;
+  border-color: var(--__ac-box-border-color);
+  border-radius: var(--__ac-box-border-radius);
+  box-shadow: var(--__ac-box-shadow);
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+@media (min-width: 480px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-md,
+      var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-md,
+      var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-md,
+      var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
+    );
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-lg,
+      var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-lg,
+      var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-lg,
+      var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-lg,
+      var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+    );
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-xl,
+      var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-xl,
+      var(
+        --__ac-box-padding-inline-lg,
+        var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+      )
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-xl,
+      var(
+        --__ac-box-padding-block-lg,
+        var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+      )
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-xl,
+      var(
+        --__ac-box-border-radius-lg,
+        var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+      )
+    );
+  }
+}
@@ -1,3 +1,4 @@
+@import "box.css";
@import "hgrid.css";
@import "stack.css";
@import "responsive.css";
@@ -5,6 +5,10 @@
  pointer-events: none;
 }

+.navds-skeleton--inline {
+  display: inline-block;
+}
+
 .navds-skeleton--has-children {
  color: transparent;
 }
@@ -1,5 +1,19 @@
 # @navikt/ds-react

+## 5.5.0
+
+### Minor Changes
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+### Patch Changes
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+- Updated dependencies [[`83c9194a4`](https://github.com/navikt/aksel/commit/83c9194a480fd3d184f673815522f230ed5d77bb)]:
+  - @navikt/ds-tokens@5.5.0
+  - @navikt/aksel-icons@5.5.0
+
 ## 5.4.1

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "5.4.1",
+  "version": "5.5.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -38,7 +38,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^5.4.1",
+    "@navikt/aksel-icons": "^5.5.0",
+    "@navikt/ds-tokens": "^5.5.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -2,7 +2,7 @@ import * as React from "react";
 import { BodyLong, Grid, Cell, ContentContainer } from "../index";

 export default {
-  title: "ds-react/Grid",
+  title: "ds-react/Primitives/Grid",
  component: { Grid, Cell },
  parameters: {
    layout: "fullscreen",
@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
@@ -0,0 +1,384 @@
+import React, { ReactNode } from "react";
+import type { Meta } from "@storybook/react";
+import { BodyLong, Detail, Heading } from "../../typography";
+import { Box } from "./Box";
+import { HGrid, HStack, VStack } from "../..";
+import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+
+export default {
+  title: "ds-react/Primitives/Box",
+  component: Box,
+} satisfies Meta<typeof Box>;
+
+export const Default = {
+  render: () => (
+    <Box>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+        Proident pariatur proident pariatur magna consequat velit id commodo
+        quis sunt tempor ullamco aliquip pariatur.
+      </BodyLong>
+    </Box>
+  ),
+};
+
+const Card = ({
+  background,
+  borderRadius = "xlarge",
+  children,
+}: {
+  background?: BackgroundToken;
+  borderRadius?: BorderRadiiToken;
+  children: ReactNode;
+}) => (
+  <Box
+    padding="4"
+    background={background}
+    borderColor="border-subtle"
+    borderRadius={borderRadius}
+    shadow="xsmall"
+  >
+    <div style={{ width: "20rem" }}>{children}</div>
+  </Box>
+);
+
+export const AsCard = {
+  render: () => {
+    return (
+      <HStack gap="4" justify="center">
+        <Card>
+          <h1>Card one</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+        <Card>
+          <h1>Card two</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+        <Card>
+          <h1>Card three</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+      </HStack>
+    );
+  },
+};
+
+export const ThemingDemo = {
+  render: () => {
+    const LinkCard = () => {
+      return (
+        <>
+          <style>
+            {`
+            .link-card {
+              color: var(--navds-color-text-primary);
+              text-decoration: none;
+            }
+            .link-card:hover {
+              border-color: var(--a-border-action);
+              box-shadow: var(--a-shadow-small);
+            }
+            .link-card:hover .navds-heading {
+              color: var(--a-text-action);
+              text-decoration: underline;
+            }
+            .link-card:hover .link-card__chevron,
+            .link-card:focus-within .link-card__chevron {
+              transform: translateX(4px);
+            }
+            .link-card__chevron {
+              flex-shrink: 0;
+              font-size: 1.5rem;
+              transition: transform 200ms;
+            }
+          `}
+          </style>
+          <Box
+            as="a"
+            href="#"
+            className="link-card"
+            borderRadius="small"
+            borderColor="border-default"
+            padding="4"
+            onClick={() => alert("Clicked!")}
+          >
+            <HStack gap="4" align="center">
+              <VStack gap="2">
+                <Heading size="medium">
+                  LinkCard som bruker Box, HStack og VStack
+                </Heading>
+                <BodyLong>This truly is inside a box!</BodyLong>
+              </VStack>
+              <ChevronRightIcon fontSize={24} className="link-card__chevron" />
+            </HStack>
+          </Box>
+        </>
+      );
+    };
+
+    const ChatBubble = () => {
+      return (
+        <>
+          <Box
+            background="surface-neutral-subtle"
+            shadow="xsmall"
+            padding="4"
+            borderRadius="xlarge xlarge xlarge 0"
+          >
+            <VStack gap="2">
+              <Detail>BOX • 01.01.21 14:00</Detail>
+              <BodyLong>
+                Hei! Dette er en chatbobble som bruker Box som base!
+              </BodyLong>
+            </VStack>
+          </Box>
+        </>
+      );
+    };
+
+    const PricePill = () => {
+      return (
+        <>
+          <style>
+            {`
+              .old-price {
+                text-decoration: line-through;
+              }
+            `}
+          </style>
+          <HStack>
+            <Box
+              background="surface-success-subtle"
+              shadow="xsmall"
+              padding="4"
+              borderRadius="full 0 0 full"
+            >
+              <VStack align="center">
+                <Detail>Episk ny pris</Detail>
+                <Heading size="medium">889.99 kr</Heading>
+              </VStack>
+            </Box>
+            <Box
+              background="surface-danger-subtle"
+              shadow="xsmall"
+              padding="4"
+              borderRadius="0 full full 0"
+            >
+              <VStack align="center">
+                <Detail>Førpris</Detail>
+                <Heading className="old-price" size="medium">
+                  399.99 kr
+                </Heading>
+              </VStack>
+            </Box>
+          </HStack>
+        </>
+      );
+    };
+
+    return (
+      <VStack gap="8">
+        <Card>Dette er et Card som bruker Box som base</Card>
+        <LinkCard />
+        <ChatBubble />
+        <PricePill />
+      </VStack>
+    );
+  },
+};
+
+export const PaddingBreakpoints = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+
+export const PaddingBreakpointsInherit1 = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2" }}
+        paddingInline={{ md: "24 0" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+export const PaddingBreakpointsInherit2 = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2", sm: "3" }}
+        paddingInline={{ sm: "4 0", md: "24 0" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+
+export const Padding = {
+  render: () => (
+    <>
+      <style>
+        {`
+          .navds-box {
+            width: fit-content;
+          }
+        `}
+      </style>
+      <VStack align="center">
+        <Box padding="20" borderColor="border-default">
+          <BodyLong>Padding all around</BodyLong>
+        </Box>
+        <Box padding="1" paddingBlock="20 0" borderColor="border-default">
+          <BodyLong>Padding to the North</BodyLong>
+        </Box>
+        <Box padding="1" paddingInline="0 20" borderColor="border-default">
+          <BodyLong>Padding to the East</BodyLong>
+        </Box>
+        <Box padding="1" paddingBlock="0 20" borderColor="border-default">
+          <BodyLong>Padding to the South</BodyLong>
+        </Box>
+        <Box padding="1" paddingInline="20 0" borderColor="border-default">
+          <BodyLong>Padding to the West</BodyLong>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const WithHGrid = () => {
+  return (
+    <Box background="bg-subtle" padding="10">
+      <HGrid
+        gap="6"
+        columns={{ xs: "repeat(auto-fit, minmax(10rem, 1fr))", md: 4 }}
+      >
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+      </HGrid>
+    </Box>
+  );
+};
+
+export const BorderWidth = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="1 2 3 4"
+        borderColor="border-strong"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="5 2 4 1"
+        borderColor="border-strong"
+        borderRadius="large"
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
+
+export const BorderRadius = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+        borderRadius="small medium large xlarge"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+        borderRadius={{
+          xs: "small medium large xlarge",
+          md: "medium small large full",
+          lg: "xlarge large",
+        }}
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
+
+export const PaddingDemo = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="0"
+        paddingInline={{ xs: "20", lg: "10" }}
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
@@ -0,0 +1,148 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { BorderRadiiToken } from "../utilities/types";
+import {
+  SpaceDelimitedAttribute,
+  ResponsiveProp,
+  SpacingScale,
+  getResponsiveProps,
+} from "../utilities/css";
+import {
+  BackgroundToken,
+  BorderColorToken,
+  ShadowToken,
+} from "../utilities/types";
+
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Background color. Accepts a color token. */
+  background?: BackgroundToken;
+  /** Border color. Accepts a color token. */
+  borderColor?: BorderColorToken;
+  /** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
+   * @example
+   * borderRadius='full'
+   * borderRadius='0 full large small'
+   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   */
+  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  /**
+   * Border-width. If this is not set there will be no border.
+   * @example
+   * borderWidth='2'
+   * borderWidth='1 2 3 4'
+   */
+  borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
+  /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * @example
+   * padding='4'
+   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  padding?: ResponsiveProp<SpacingScale>;
+  /** Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingInline='4'
+   * paddingInline='4 5'
+   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  paddingInline?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /** Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingBlock='4'
+   * paddingBlock='4 5'
+   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  paddingBlock?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /** Shadow on box. Accepts a shadow token.
+   * @example
+   * shadow='small'
+   */
+  shadow?: ShadowToken;
+}
+
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
+ * @see 🏷️ {@link BoxProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <VStack gap="8">
+ *  <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ *  </Box>
+ *  <Box padding="4">
+ *    <BodyShort>Hei</BodyShort>
+ *  </Box>
+ * </VStack>
+ */
+export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
+  (
+    {
+      as: Component = "div",
+      background,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      className,
+      padding,
+      paddingInline,
+      paddingBlock,
+      shadow,
+      style: _style,
+      ...rest
+    },
+    ref
+  ) => {
+    const style: React.CSSProperties = {
+      ..._style,
+      "--__ac-box-background": background
+        ? `var(--a-${background})`
+        : undefined,
+      "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined,
+      "--__ac-box-border-color": borderColor
+        ? `var(--a-${borderColor})`
+        : undefined,
+      "--__ac-box-border-width": borderWidth
+        ? borderWidth
+            .split(" ")
+            .map((x) => `${x}px`)
+            .join(" ")
+        : undefined,
+      ...getResponsiveProps(
+        "box",
+        "border-radius",
+        "border-radius",
+        borderRadius,
+        ["0"]
+      ),
+      ...getResponsiveProps("box", "padding", "spacing", padding),
+      ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
+      ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
+    };
+
+    return (
+      <Component
+        {...rest}
+        className={cl("navds-box", className)}
+        ref={ref}
+        style={style}
+      />
+    );
+  }
+);
@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";
@@ -9,7 +9,7 @@ const columnsVariants = {
 };

 export default {
-  title: "ds-react/HGrid",
+  title: "ds-react/Primitives/HGrid",
  component: HGrid,
  parameters: {
    layout: "fullscreen",
@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
 import { VStack } from "../stack";

 export default {
-  title: "ds-react/Responsive/Hide",
+  title: "ds-react/Primitives/Hide",
  component: Hide,
 } satisfies Meta<typeof Hide>;

@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
 import { VStack } from "../stack";

 export default {
-  title: "ds-react/Responsive/Show",
+  title: "ds-react/Primitives/Show",
  component: Show,
 } satisfies Meta<typeof Show>;

@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react";
 import { HStack, VStack, Spacer } from ".";

 export default {
-  title: "ds-react/Stack",
+  title: "ds-react/Primitives/Stack",
  component: HStack,
 } satisfies Meta<typeof HStack>;

@@ -1,4 +1,5 @@
 export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+
 export type SpacingScale =
  | "0"
  | "05"
@@ -21,43 +22,23 @@ export type SpacingScale =
  | "24"
  | "32";

-type ResponsivePropConfig<T = string> = {
+export type SpaceDelimitedAttribute<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+
+type FixedResponsiveT<T> = {
  // eslint-disable-next-line no-unused-vars
  [Breakpoint in BreakpointsAlias]?: T;
 };

-export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
-
-export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
-
-export function getResponsiveProps<T = string>(
-  componentName: string,
-  componentProp: string,
-  tokenSubgroup: string,
-  responsiveProp?: ResponsiveProp<T>
-) {
-  if (!responsiveProp) {
-    return {};
-  }
-
-  if (typeof responsiveProp === "string") {
-    return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
-    };
-  }
-
-  return Object.fromEntries(
-    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
-      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-      `var(--a-${tokenSubgroup}-${aliasOrScale})`,
-    ])
-  );
-}
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;

 export function getResponsiveValue<T = string>(
  componentName: string,
  componentProp: string,
-  responsiveProp?: ResponsiveValue<T>
+  responsiveProp?: ResponsiveProp<T>
 ) {
  if (!responsiveProp) {
    return {};
@@ -76,3 +57,40 @@ export function getResponsiveValue<T = string>(
    ])
  );
 }
+
+export function getResponsiveProps<T extends string>(
+  componentName: string,
+  componentProp: string,
+  tokenSubgroup: string,
+  responsiveProp?: ResponsiveProp<T>,
+  tokenExceptions: string[] = []
+) {
+  if (!responsiveProp) {
+    return {};
+  }
+
+  if (typeof responsiveProp === "string") {
+    return {
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
+        .split(" ")
+        .map((x) =>
+          tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+        )
+        .join(" "),
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
+      return [
+        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        aliasOrScale
+          .split(" ")
+          .map((x) =>
+            tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+          )
+          .join(" "),
+      ];
+    })
+  );
+}
@@ -0,0 +1,14 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
+import borderColors from "@navikt/ds-tokens/src/colors-border.json";
+import borderRadii from "@navikt/ds-tokens/src/border.json";
+import shadows from "@navikt/ds-tokens/src/shadow.json";
+
+export type BackgroundToken =
+  | keyof typeof bgColors.a
+  | keyof typeof surfaceColors.a;
+export type BorderColorToken = keyof typeof borderColors.a;
+export type BorderRadiiToken =
+  | keyof (typeof borderRadii.a)["border-radius"]
+  | "0";
+export type ShadowToken = keyof typeof shadows.a.shadow;
@@ -57,6 +57,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
            "navds-skeleton--has-children": Boolean(children),
            "navds-skeleton--no-height": !height,
            "navds-skeleton--no-width": !width,
+            "navds-skeleton--inline": As === "span",
          }
        )}
        style={{ ...style, width, height }}
@@ -121,9 +121,10 @@ export const InlineText = {
  render: () => (
    <BodyLong>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-      voluptas sint dolore <Skeleton as="span">omnis quia consequatur</Skeleton>{" "}
-      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis
-      rerum. Nulla, magnam? Saepe, eveniet?
+      voluptas sint dolore <Skeleton width="40px" as="span" variant="text" />{" "}
+      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis{" "}
+      <Skeleton as="span">test text</Skeleton> rerum. Nulla, magnam? Saepe,
+      eveniet?
    </BodyLong>
  ),
 };
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 5.5.0
+
 ## 5.4.1

 ## 5.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tailwind",
-  "version": "5.4.1",
+  "version": "5.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": "^5.4.1",
+    "@navikt/ds-tokens": "^5.5.0",
    "@types/jest": "^29.0.0",
    "color": "4.2.3",
    "jest": "^29.0.0",
@@ -1,5 +1,11 @@
 # @navikt/ds-tokens

+## 5.5.0
+
+### Minor Changes
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
 ## 5.4.1

 ## 5.4.0
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "5.4.1",
+  "version": "5.5.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,13 +1,11 @@
 {
  "a": {
-    "border": {
-      "radius": {
-        "small": { "value": "2px" },
-        "medium": { "value": "4px" },
-        "large": { "value": "8px" },
-        "xlarge": { "value": "12px" },
-        "full": { "value": "9999px" }
-      }
+    "border-radius": {
+      "small": { "value": "2px" },
+      "medium": { "value": "4px" },
+      "large": { "value": "8px" },
+      "xlarge": { "value": "12px" },
+      "full": { "value": "9999px" }
    }
  }
 }
@@ -0,0 +1,10 @@
+{
+  "a": {
+    "bg-default": {
+      "value": "{a.white.value}"
+    },
+    "bg-subtle": {
+      "value": "{a.gray.100.value}"
+    }
+  }
+}
@@ -0,0 +1,7 @@
+{
+  "a": {
+    "border-subtle-hover": {
+      "value": "{a.grayalpha.400.value}"
+    }
+  }
+}
@@ -0,0 +1,58 @@
+{
+  "a": {
+    "border-default": {
+      "value": "{a.grayalpha.500.value}"
+    },
+    "border-strong": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "border-divider": {
+      "value": "{a.grayalpha.300.value}"
+    },
+    "border-subtle": {
+      "value": "{a.grayalpha.300.value}"
+    },
+    "border-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "border-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "border-selected": {
+      "value": "{a.blue.500.value}"
+    },
+    "border-success": {
+      "value": "{a.green.500.value}"
+    },
+    "border-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "border-warning": {
+      "value": "{a.orange.600.value}"
+    },
+    "border-info": {
+      "value": "{a.lightblue.700.value}"
+    },
+    "border-focus-on-inverted": {
+      "value": "{a.blue.200.value}"
+    },
+    "border-focus": {
+      "value": "{a.blue.800.value}"
+    },
+    "border-on-inverted": {
+      "value": "{a.gray.200.value}"
+    },
+    "border-on-inverted-subtle": {
+      "value": "{a.gray.700.value}"
+    },
+    "border-alt-1": {
+      "value": "{a.purple.400.value}"
+    },
+    "border-alt-2": {
+      "value": "{a.limegreen.700.value}"
+    },
+    "border-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    }
+  }
+}
@@ -0,0 +1,61 @@
+{
+  "a": {
+    "icon-default": {
+      "value": "{a.gray.900.value}"
+    },
+    "icon-subtle": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "icon-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "icon-action-on-action-subtle": {
+      "value": "{a.blue.600.value}"
+    },
+    "icon-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "icon-success": {
+      "value": "{a.green.500.value}"
+    },
+    "icon-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "icon-warning": {
+      "value": "{a.orange.600.value}"
+    },
+    "icon-info": {
+      "value": "{a.lightblue.800.value}"
+    },
+    "icon-alt-1": {
+      "value": "{a.purple.500.value}"
+    },
+    "icon-alt-2": {
+      "value": "{a.limegreen.700.value}"
+    },
+    "icon-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    },
+    "icon-on-neutral": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-inverted": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-action": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-success": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-danger": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-warning": {
+      "value": "{a.gray.900.value}"
+    },
+    "icon-on-info": {
+      "value": "{a.gray.900.value}"
+    }
+  }
+}
@@ -0,0 +1,58 @@
+{
+  "a": {
+    "surface-hover": {
+      "value": "{a.grayalpha.100.value}"
+    },
+    "surface-active": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-inverted-hover": {
+      "value": "{a.gray.800.value}"
+    },
+    "surface-inverted-active": {
+      "value": "{a.gray.700.value}"
+    },
+    "surface-action-subtle-hover": {
+      "value": "{a.blue.100.value}"
+    },
+    "surface-action-hover": {
+      "value": "{a.blue.600.value}"
+    },
+    "surface-action-active": {
+      "value": "{a.blue.700.value}"
+    },
+    "surface-action-selected-hover": {
+      "value": "{a.blue.800.value}"
+    },
+    "surface-neutral-subtle-hover": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-neutral-active": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-neutral-hover": {
+      "value": "{a.gray.800.value}"
+    },
+    "surface-success-subtle-hover": {
+      "value": "{a.green.200.value}"
+    },
+    "surface-success-hover": {
+      "value": "{a.green.600.value}"
+    },
+    "surface-danger-subtle-hover": {
+      "value": "{a.red.200.value}"
+    },
+    "surface-danger-hover": {
+      "value": "{a.red.600.value}"
+    },
+    "surface-danger-active": {
+      "value": "{a.red.700.value}"
+    },
+    "surface-warning-subtle-hover": {
+      "value": "{a.orange.200.value}"
+    },
+    "surface-info-subtle-hover": {
+      "value": "{a.lightblue.200.value}"
+    }
+  }
+}
@@ -0,0 +1,109 @@
+{
+  "a": {
+    "surface-default": {
+      "value": "{a.white.value}"
+    },
+    "surface-selected": {
+      "value": "{a.blue.50.value}"
+    },
+    "surface-subtle": {
+      "value": "{a.gray.50.value}"
+    },
+    "surface-transparent": {
+      "value": "{a.transparent.value}"
+    },
+    "surface-backdrop": {
+      "value": "{a.grayalpha.500.value}"
+    },
+    "surface-inverted": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-action-subtle": {
+      "value": "{a.blue.50.value}"
+    },
+    "surface-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "surface-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "surface-neutral-subtle": {
+      "value": "{a.grayalpha.100.value}"
+    },
+    "surface-neutral-moderate": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-neutral-selected": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-neutral": {
+      "value": "{a.gray.700.value}"
+    },
+    "surface-success-subtle": {
+      "value": "{a.green.100.value}"
+    },
+    "surface-success-moderate": {
+      "value": "{a.green.200.value}"
+    },
+    "surface-success": {
+      "value": "{a.green.500.value}"
+    },
+    "surface-danger-subtle": {
+      "value": "{a.red.100.value}"
+    },
+    "surface-danger-moderate": {
+      "value": "{a.red.200.value}"
+    },
+    "surface-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "surface-warning-subtle": {
+      "value": "{a.orange.100.value}"
+    },
+    "surface-warning-moderate": {
+      "value": "{a.orange.200.value}"
+    },
+    "surface-warning": {
+      "value": "{a.orange.500.value}"
+    },
+    "surface-info-subtle": {
+      "value": "{a.lightblue.100.value}"
+    },
+    "surface-info-moderate": {
+      "value": "{a.lightblue.200.value}"
+    },
+    "surface-info": {
+      "value": "{a.lightblue.500.value}"
+    },
+    "surface-alt-1-subtle": {
+      "value": "{a.purple.100.value}"
+    },
+    "surface-alt-1-moderate": {
+      "value": "{a.purple.200.value}"
+    },
+    "surface-alt-1": {
+      "value": "{a.purple.400.value}"
+    },
+    "surface-alt-2-subtle": {
+      "value": "{a.limegreen.100.value}"
+    },
+    "surface-alt-2-moderate": {
+      "value": "{a.limegreen.200.value}"
+    },
+    "surface-alt-2": {
+      "value": "{a.limegreen.400.value}"
+    },
+    "surface-alt-3-subtle": {
+      "value": "{a.deepblue.100.value}"
+    },
+    "surface-alt-3-moderate": {
+      "value": "{a.deepblue.200.value}"
+    },
+    "surface-alt-3-strong": {
+      "value": "{a.deepblue.800.value}"
+    },
+    "surface-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    }
+  }
+}
@@ -0,0 +1,55 @@
+{
+  "a": {
+    "text-default": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-subtle": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "text-visited": {
+      "value": "{a.purple.500.value}"
+    },
+    "text-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "text-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "text-action-on-action-subtle": {
+      "value": "{a.blue.600.value}"
+    },
+    "text-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "text-on-inverted": {
+      "value": "{a.white.value}"
+    },
+    "text-on-neutral": {
+      "value": "{a.white.value}"
+    },
+    "text-on-action": {
+      "value": "{a.white.value}"
+    },
+    "text-on-success": {
+      "value": "{a.white.value}"
+    },
+    "text-on-danger": {
+      "value": "{a.white.value}"
+    },
+    "text-on-warning": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-info": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-alt-1": {
+      "value": "{a.white.value}"
+    },
+    "text-on-alt-2": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-alt-3": {
+      "value": "{a.white.value}"
+    }
+  }
+}
@@ -1,346 +0,0 @@
-{
-  "a": {
-    "text": {
-      "default": {
-        "value": "{a.gray.900.value}"
-      },
-      "subtle": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "visited": {
-        "value": "{a.purple.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "action": {
-        "selected": {
-          "value": "{a.blue.700.value}"
-        },
-        "on": {
-          "action": {
-            "subtle": {
-              "value": "{a.blue.600.value}"
-            }
-          }
-        },
-        "@": {
-          "value": "{a.blue.500.value}"
-        }
-      },
-      "on": {
-        "inverted": {
-          "value": "{a.white.value}"
-        },
-        "neutral": {
-          "value": "{a.white.value}"
-        },
-        "action": {
-          "value": "{a.white.value}"
-        },
-        "success": {
-          "value": "{a.white.value}"
-        },
-        "danger": {
-          "value": "{a.white.value}"
-        },
-        "warning": {
-          "value": "{a.gray.900.value}"
-        },
-        "info": {
-          "value": "{a.gray.900.value}"
-        },
-        "alt1": {
-          "value": "{a.white.value}"
-        },
-        "alt2": {
-          "value": "{a.gray.900.value}"
-        },
-        "alt3": {
-          "value": "{a.white.value}"
-        }
-      }
-    },
-    "bg": {
-      "default": {
-        "value": "{a.white.value}"
-      },
-      "subtle": {
-        "value": "{a.gray.100.value}"
-      }
-    },
-    "surface": {
-      "default": {
-        "value": "{a.white.value}"
-      },
-      "hover": {
-        "value": "{a.grayalpha.100.value}"
-      },
-      "active": {
-        "value": "{a.grayalpha.200.value}"
-      },
-      "selected": {
-        "value": "{a.blue.50.value}"
-      },
-      "subtle": {
-        "value": "{a.gray.50.value}"
-      },
-      "transparent": {
-        "value": "{a.transparent.value}"
-      },
-      "backdrop": {
-        "value": "{a.grayalpha.500.value}"
-      },
-      "inverted": {
-        "hover": {
-          "value": "{a.gray.800.value}"
-        },
-        "active": {
-          "value": "{a.gray.700.value}"
-        },
-        "@": {
-          "value": "{a.gray.900.value}"
-        }
-      },
-      "action": {
-        "subtle": {
-          "hover": {
-            "value": "{a.blue.100.value}"
-          },
-          "@": {
-            "value": "{a.blue.50.value}"
-          }
-        },
-        "hover": {
-          "value": "{a.blue.600.value}"
-        },
-        "active": {
-          "value": "{a.blue.700.value}"
-        },
-        "selected": {
-          "hover": {
-            "value": "{a.blue.800.value}"
-          },
-          "@": { "value": "{a.blue.700.value}" }
-        },
-        "@": {
-          "value": "{a.blue.500.value}"
-        }
-      },
-
-      "neutral": {
-        "subtle": {
-          "hover": {
-            "value": "{a.grayalpha.200.value}"
-          },
-          "@": {
-            "value": "{a.grayalpha.100.value}"
-          }
-        },
-        "moderate": {
-          "value": "{a.grayalpha.200.value}"
-        },
-        "hover": {
-          "value": "{a.gray.800.value}"
-        },
-        "selected": {
-          "value": "{a.gray.900.value}"
-        },
-        "active": {
-          "value": "{a.gray.900.value}"
-        },
-        "@": {
-          "value": "{a.gray.700.value}"
-        }
-      },
-
-      "success": {
-        "subtle": {
-          "hover": { "value": "{a.green.200.value}" },
-          "@": { "value": "{a.green.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.green.200.value}"
-        },
-        "@": { "value": "{a.green.500.value}" },
-        "hover": { "value": "{a.green.600.value}" }
-      },
-
-      "danger": {
-        "subtle": {
-          "hover": { "value": "{a.red.200.value}" },
-          "@": { "value": "{a.red.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.red.200.value}"
-        },
-        "hover": {
-          "value": "{a.red.600.value}"
-        },
-        "active": {
-          "value": "{a.red.700.value}"
-        },
-        "@": { "value": "{a.red.500.value}" }
-      },
-
-      "warning": {
-        "subtle": {
-          "hover": { "value": "{a.orange.200.value}" },
-          "@": { "value": "{a.orange.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.orange.200.value}"
-        },
-        "@": { "value": "{a.orange.500.value}" }
-      },
-
-      "info": {
-        "subtle": {
-          "hover": { "value": "{a.lightblue.200.value}" },
-          "@": { "value": "{a.lightblue.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.lightblue.200.value}"
-        },
-        "@": { "value": "{a.lightblue.500.value}" }
-      },
-
-      "alt1": {
-        "subtle": { "value": "{a.purple.100.value}" },
-        "moderate": { "value": "{a.purple.200.value}" },
-        "@": { "value": "{a.purple.400.value}" }
-      },
-      "alt2": {
-        "subtle": { "value": "{a.limegreen.100.value}" },
-        "moderate": { "value": "{a.limegreen.200.value}" },
-        "@": { "value": "{a.limegreen.400.value}" }
-      },
-      "alt3": {
-        "subtle": { "value": "{a.deepblue.100.value}" },
-        "moderate": { "value": "{a.deepblue.200.value}" },
-        "strong": { "value": "{a.deepblue.800.value}" },
-        "@": { "value": "{a.deepblue.500.value}" }
-      }
-    },
-    "border": {
-      "default": {
-        "value": "{a.grayalpha.500.value}"
-      },
-      "strong": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "divider": {
-        "value": "{a.grayalpha.300.value}"
-      },
-      "subtle": {
-        "hover": { "value": "{a.grayalpha.400.value}" },
-        "@": { "value": "{a.grayalpha.300.value}" }
-      },
-      "action": {
-        "selected": { "value": "{a.blue.700.value}" },
-        "@": { "value": "{a.blue.500.value}" }
-      },
-      "selected": {
-        "value": "{a.blue.500.value}"
-      },
-      "success": {
-        "value": "{a.green.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "warning": {
-        "value": "{a.orange.600.value}"
-      },
-      "info": {
-        "value": "{a.lightblue.700.value}"
-      },
-      "focus": {
-        "on": {
-          "inverted": {
-            "value": "{a.blue.200.value}"
-          }
-        },
-        "@": { "value": "{a.blue.800.value}" }
-      },
-      "on": {
-        "inverted": {
-          "@": { "value": "{a.gray.200.value}" },
-          "subtle": { "value": "{a.gray.700.value}" }
-        }
-      },
-      "alt1": {
-        "value": "{a.purple.400.value}"
-      },
-      "alt2": {
-        "value": "{a.limegreen.700.value}"
-      },
-      "alt3": {
-        "value": "{a.deepblue.500.value}"
-      }
-    },
-    "icon": {
-      "default": {
-        "value": "{a.gray.900.value}"
-      },
-      "subtle": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "action": {
-        "selected": { "value": "{a.blue.700.value}" },
-        "on": {
-          "action": {
-            "subtle": {
-              "value": "{a.blue.600.value}"
-            }
-          }
-        },
-        "@": { "value": "{a.blue.500.value}" }
-      },
-      "success": {
-        "value": "{a.green.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "warning": {
-        "value": "{a.orange.600.value}"
-      },
-      "info": {
-        "value": "{a.lightblue.800.value}"
-      },
-      "alt1": {
-        "value": "{a.purple.500.value}"
-      },
-      "alt2": {
-        "value": "{a.limegreen.700.value}"
-      },
-      "alt3": {
-        "value": "{a.deepblue.500.value}"
-      },
-      "on": {
-        "neutral": {
-          "value": "{a.white.value}"
-        },
-        "inverted": {
-          "value": "{a.white.value}"
-        },
-        "action": {
-          "value": "{a.white.value}"
-        },
-        "success": {
-          "value": "{a.white.value}"
-        },
-        "danger": {
-          "value": "{a.white.value}"
-        },
-        "warning": {
-          "value": "{a.gray.900.value}"
-        },
-        "info": {
-          "value": "{a.gray.900.value}"
-        }
-      }
-    }
-  }
-}
@@ -0,0 +1,12 @@
+{
+  "a": {
+    "shadow": {
+      "focus": {
+        "value": "0 0 0 3px {a.border-focus.value}"
+      },
+      "focus-inverted": {
+        "value": "0 0 0 3px {a.border-focus-on-inverted.value}"
+      }
+    }
+  }
+}
@@ -15,12 +15,6 @@
      },
      "xlarge": {
        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
-      },
-      "focus": {
-        "inverted": {
-          "value": "0 0 0 3px {a.border.focus.on.inverted.value}"
-        },
-        "@": { "value": "0 0 0 3px {a.border.focus.@.value}" }
      }
    }
  }
@@ -1,5 +1,27 @@
 # Changelog

+## 5.5.0
+
+### @navikt/ds-css
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+<!---->
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+### @navikt/ds-react
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
+<!---->
+
+- Skeleton: Width fungerer nå med inline-variant av Skeleton ([#2273](https://github.com/navikt/aksel/pull/2273))
+
+### @navikt/ds-tokens
+
+- Box: Ny primitive, erstatter dagens `Panel` ([#2195](https://github.com/navikt/aksel/pull/2195))
+
 ## 5.4.1

 ### @navikt/ds-react
@@ -8,6 +30,14 @@

 ## 5.4.0

+### @navikt/ds-css
+
+- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
+
+<!---->
+
+- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
+
 ### @navikt/ds-react

 - Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
@@ -20,14 +50,6 @@

 - Tokens: `data-theme="light"` vil nå tilbakestille theming ([#2238](https://github.com/navikt/aksel/pull/2238))

-### @navikt/ds-css
-
- Primitives: Nye komponenter `Show` og `Hide` er lagt til. ([#2222](https://github.com/navikt/aksel/pull/2222))
-
-<!---->
-
- ErrorSummary: Har nå 8px border-radius ([#2256](https://github.com/navikt/aksel/pull/2256))
-
 ## 5.3.5

 ### @navikt/ds-react
@@ -46,26 +68,32 @@

 ## 5.3.3

-### @navikt/ds-react
+### @navikt/ds-css

 - HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))

-### @navikt/ds-css
+### @navikt/ds-react

 - HGrid: Har nå `align`-prop for bedre kontroll over child-elementer ([#2242](https://github.com/navikt/aksel/pull/2242))

 ## 5.3.2

-### @navikt/ds-react
-
- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
-
 ### @navikt/ds-css

 - Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))

+### @navikt/ds-react
+
+- Skeleton: Lagt til as-prop for inline brk av Skeleton med span ([#2239](https://github.com/navikt/aksel/pull/2239))
+
 ## 5.3.1

+### @navikt/ds-css
+
+- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
+
+- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
+
 ### @navikt/ds-react

 - Fix bug in monthpicker, only compare year and month for equality on date object ([#2231](https://github.com/navikt/aksel/pull/2231))
@@ -74,13 +102,11 @@

 - :bug: DatePicker: Riktig skriftstørrelse på small input ([#2232](https://github.com/navikt/aksel/pull/2232))

+## 5.3.0
+
 ### @navikt/ds-css

- :bug: fix missing accordion bottom box-shadow on last element (when opened) ([#2229](https://github.com/navikt/aksel/pull/2229))
-
- :lipstick: GuidePanel: justert design ([#2227](https://github.com/navikt/aksel/pull/2227))
-
-## 5.3.0
+- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))

 ### @navikt/ds-react

@@ -94,10 +120,6 @@

 - :wheelchair: Textarea: Skjermleser-spesifikk tekst leses opp sammenhengende ([#2216](https://github.com/navikt/aksel/pull/2216))

-### @navikt/ds-css
-
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
-
 ## 5.2.1

 ### @navikt/ds-css
@@ -110,6 +132,12 @@

 - Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))

+### @navikt/ds-css
+
+- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
+
+- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
+
 ### @navikt/ds-react

 - Button: Ved bruk av `as`-prop vil `role="button"` nå bli lagt til. Native `onKeyUp` for `Space` er også implementert slik at standard `button`-interaksjon vil være likere uansett html-tag. ([#2154](https://github.com/navikt/aksel/pull/2154))
@@ -118,13 +146,13 @@

 - Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))

+## 5.1.0
+
 ### @navikt/ds-css

- CSS: Popover har nå 8px border-radius. Fikset padding-bug i Select-small. ([#2219](https://github.com/navikt/aksel/pull/2219))
+- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))

- Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
-
-## 5.1.0
+- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))

 ### @navikt/ds-react

@@ -136,13 +164,13 @@

 - Datepicker: Input setter ikke nå aria-controls før popover åpnes ([#2213](https://github.com/navikt/aksel/pull/2213))

+## 5.0.3
+
 ### @navikt/ds-css

- :lipstick: Modal: fjern kantlinje ([#2210](https://github.com/navikt/aksel/pull/2210))
+- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))

- Tokens: Fikset table-token ([#2204](https://github.com/navikt/aksel/pull/2204))
-
-## 5.0.3
+- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))

 ### @navikt/ds-react

@@ -154,12 +182,6 @@

 - Tokens: `--a-icon-alt-3` er nå i synk med figma ([#2199](https://github.com/navikt/aksel/pull/2199))

-### @navikt/ds-css
-
- ConfirmationPanel: Fikset opplesing av feilmelding ([#2199](https://github.com/navikt/aksel/pull/2199))
-
- Checkbox: Fikset checkbox-alignment ved bruk av tailwindcss ([#2199](https://github.com/navikt/aksel/pull/2199))
-
 ## 5.0.2

 ### @navikt/ds-react
@@ -174,6 +196,19 @@

 ## 5.0.0

+### @navikt/ds-css
+
+- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
+
+  - :sparkles: Støtte for header og footer
+  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
+
+<!---->
+
+- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
+
+- Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
+
 ### @navikt/ds-react

 - Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
@@ -194,30 +229,29 @@

 - Action: Selected-varianter av action er nå 'blue' ('deepblue' før) ([#2092](https://github.com/navikt/aksel/pull/2092))

+## 4.12.1
+
 ### @navikt/ds-css

- Oppdatert Modal - Se [Migrering](https://aksel.nav.no/grunnleggende/kode/migrering) ([#2135](https://github.com/navikt/aksel/pull/2135))
-
-  - :sparkles: Støtte for header og footer
-  - :boom: Bruker nå native dialog i stedet for react-modal (med polyfill for eldre nettlesere)
-
-<!---->
-
- Table: ExpandableRow har oppdatert knapp for å matche Accordion og ExpansionCard ([#2178](https://github.com/navikt/aksel/pull/2178))
-
- Table: Alle størrelser har justert padding. Small-size table bruker nå også standard typografi-størrelse (18px). ([#2178](https://github.com/navikt/aksel/pull/2178))
-
-## 4.12.1
+- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))

 ### @navikt/ds-react

 - Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))

+## 4.12.0
+
 ### @navikt/ds-css

- Added red border to Combobox in error state ([#2184](https://github.com/navikt/aksel/pull/2184))
+- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))

-## 4.12.0
+<!---->
+
+- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
+
+- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
+
+- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))

 ### @navikt/ds-react

@@ -239,18 +273,6 @@

 - Combobox: Lukker nå nedtrekksmeny hvis man legger til ny option i singleselect ([#2177](https://github.com/navikt/aksel/pull/2177))

-### @navikt/ds-css
-
- CopyButton: Har nå prop 'iconPosition' for å høyre/venstre aligne ikon ([#2173](https://github.com/navikt/aksel/pull/2173))
-
-<!---->
-
- List: Fikset sentrering, margins ([#2168](https://github.com/navikt/aksel/pull/2168))
-
- Checkbox: Checkmark er nå SVG-ikon og ikke Base64 ([#2171](https://github.com/navikt/aksel/pull/2171))
-
- Alert: Fikset alignment av status-ikon mot tekst ([#2179](https://github.com/navikt/aksel/pull/2179))
-
 ## 4.11.2

 ### @navikt/ds-css
@@ -265,16 +287,6 @@

 ## 4.11.0

-### @navikt/ds-react
-
- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
-
-<!---->
-
- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
-
- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
-
 ### @navikt/ds-css

 - HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
@@ -285,6 +297,16 @@

 - Font: La til egen font for semibold italic for bedre skalering cross-browser ([#2150](https://github.com/navikt/aksel/pull/2150))

+### @navikt/ds-react
+
+- HGrid: Ny komponent 'HGrid' er ute i Beta: [Dokumentasjon](https://aksel.nav.no/komponenter/core/hgrid) ([#1838](https://github.com/navikt/aksel/pull/1838))
+
+<!---->
+
+- Fixes bug where combobox list could not be closed after clicking a chip ([#2155](https://github.com/navikt/aksel/pull/2155))
+
+- Grid: Markert som deprecated. Bruk nye 'HGrid' ([#2153](https://github.com/navikt/aksel/pull/2153))
+
 ## 4.10.2

 ### @navikt/ds-css
@@ -293,56 +315,56 @@

 ## 4.10.0

-### @navikt/ds-react
-
- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
-
 ### @navikt/ds-css

 - Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))

+### @navikt/ds-react
+
+- Link: La til 'variant', 'underline' og 'inlineText'-prop ([#2093](https://github.com/navikt/aksel/pull/2093))
+
 ## 4.9.1

+### @navikt/ds-css
+
+- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
+
 ### @navikt/ds-react

 - Button: Fikset aria-live bug der knapp alltid ble lest opp av skjermleser ved render ([#2143](https://github.com/navikt/aksel/pull/2143))

 - Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))

-### @navikt/ds-css
-
- Tweaks to combobox - updated example, small bugfixes, better affordance for selected options and added flag for "isAddedByUser" to onToggleSelected ([#2144](https://github.com/navikt/aksel/pull/2144))
-
 ## 4.9.0

-### @navikt/ds-react
+### @navikt/ds-css

 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))

-### @navikt/ds-css
+### @navikt/ds-react

 - Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop ([#2127](https://github.com/navikt/aksel/pull/2127))

 ## 4.8.0

-### @navikt/ds-react
+### @navikt/ds-css

 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))

-### @navikt/ds-css
+### @navikt/ds-react

 - Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))

 ## 4.7.4

-### @navikt/ds-react
-
- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
-
 ### @navikt/ds-css

 - Oppdatert bruk av REM i komponenter for forbedret utrykk ved font-scaling i browser ([#2126](https://github.com/navikt/aksel/pull/2126))

+### @navikt/ds-react
+
+- Textfield: La til type 'time' som tilgjengelig option ([#2137](https://github.com/navikt/aksel/pull/2137))
+
 ## 4.7.3

 ### @navikt/ds-react
@@ -351,11 +373,11 @@

 ## 4.7.2

-### @navikt/ds-react
+### @navikt/ds-css

 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))

-### @navikt/ds-css
+### @navikt/ds-react

 - Stepper: Fikset `hotizontal`-bug når step var `completed` ([#2116](https://github.com/navikt/aksel/pull/2116))

@@ -367,6 +389,10 @@

 ## 4.7.0

+### @navikt/ds-css
+
+- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
+
 ### @navikt/ds-react

 - Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
@@ -377,35 +403,27 @@

 - Combobox post-release tweaks ([#2112](https://github.com/navikt/aksel/pull/2112))

-### @navikt/ds-css
-
- Ny komponent Combobox! ([#1868](https://github.com/navikt/aksel/pull/1868))
-
 ## 4.6.1

-### @navikt/ds-react
+### @navikt/ds-css

 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))

-### @navikt/ds-css
+### @navikt/ds-react

 - Skjema: Labels og Legends bruker nå inline-flex når readOnly er satt ([#2089](https://github.com/navikt/aksel/pull/2089))

 ## 4.6.0

-### @navikt/ds-react
-
- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
-
 ### @navikt/ds-css

 - Skjema: De fleste skjemakomponenter har nå styling for `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))

-## 4.5.0
-
 ### @navikt/ds-react

- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+- Skjema: De fleste skjemakomponenter støtter nå `readOnly`-state ([#2080](https://github.com/navikt/aksel/pull/2080))
+
+## 4.5.0

 ### @navikt/ds-css

@@ -415,6 +433,10 @@

 - - Button: Fikset outline-bug i tertiary-variant ved `:active`-state ([#2079](https://github.com/navikt/aksel/pull/2079))

+### @navikt/ds-react
+
+- - Alert: La til `closeButton`-prop ([#2079](https://github.com/navikt/aksel/pull/2079))
+
 ## 4.4.2

 ### @navikt/ds-react
@@ -429,14 +451,6 @@

 ## 4.4.0

-### @navikt/ds-react
-
- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
-
-### @navikt/ds-tokens
-
- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
-
 ### @navikt/ds-css

 - Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
@@ -447,11 +461,15 @@

 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

-## 4.3.0
-
 ### @navikt/ds-react

- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+- Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
+
+### @navikt/ds-tokens
+
+- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
+
+## 4.3.0

 ### @navikt/ds-css

@@ -461,16 +479,20 @@

 - ExpansionCard: Ved nesting av komponetene fikk man styling fra parent ([PR](https://github.com/navikt/aksel/pull/2067))

-## 4.2.0
-
 ### @navikt/ds-react

- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+- Popover og Helptext har nå luft mot siden av skjerm på mindre flater ([PR](https://github.com/navikt/aksel/pull/2069))
+
+## 4.2.0

 ### @navikt/ds-css

 - Chat: `small`-size, innebygde varianter for farge og oppdatert utseende. ([PR](https://github.com/navikt/aksel/pull/2048))

+### @navikt/ds-react
+
+- Oppdatert Chat: `size` og `variant`-prop, optional `avatar`, uu og ui-forbedringer ([PR](https://github.com/navikt/aksel/pull/2048))
+
 ## 4.1.7

 ### @navikt/ds-react
@@ -527,6 +549,16 @@

 - Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))

+### @navikt/ds-css
+
+- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
+
+- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
+
+### @navikt/ds-tailwind
+
+- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
+
 ### @navikt/ds-react

 - Chips: `neutral` og `action`-varianter for Chips.Toggle. `checkmark`-prop for Chips.Toggle ([PR](https://github.com/navikt/aksel/pull/2035))
@@ -545,24 +577,8 @@

 - Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))

-### @navikt/ds-css
-
- Chips: `neutral` og `action`-varianter av Chips.Toggle. Opt-out mulighet for Checkmark. Oppdatert checkmark-ikon ([PR](https://github.com/navikt/aksel/pull/2035))
-
- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
-
-### @navikt/ds-tailwind
-
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
-
 ## 4.0.0

-### @navikt/ds-react
-
- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
-
- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
-
 ### @navikt/ds-css

 - All styling fra `@navikt/ds-css-internal` er flyttet til `@navikt/ds-css`. ([PR](https://github.com/navikt/aksel/pull/2026))
@@ -573,6 +589,12 @@

 - Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)

+### @navikt/ds-react
+
+- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
+
+- Komponenter i `@navikt/ds-react-internal` er flyttet over til `@navikt/ds-react`. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
+
 ### @navikt/aksel

 - Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
@@ -597,11 +619,11 @@

 - Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))

-### @navikt/ds-react
+### @navikt/ds-css

 - Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

-### @navikt/ds-css
+### @navikt/ds-react

 - Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))

@@ -629,18 +651,18 @@

 - Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))

-### @navikt/ds-react
-
- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
-
- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
-
 ### @navikt/ds-css

 - Datepicker: Fikset small-variant av datepicker-input. ([PR](https://github.com/navikt/aksel/pull/1993))

 - CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))

+### @navikt/ds-react
+
+- Datepicker: Oppdatert small-variant av Datepicker.Input. UI-oppdatert samtidig. ([PR](https://github.com/navikt/aksel/pull/1993))
+
+- CopyButton: `xsmall`-variant for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
+
 ## 3.2.2

 ### @navikt/ds-react
@@ -661,10 +683,6 @@

 ## 3.1.0

-### @navikt/ds-react
-
- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
-
 ### @navikt/ds-css

 - Alle komponenter bruker nå default `:focus-visible` for fokusmarkering. Medfølger også fallback for `:focus` ([PR](https://github.com/navikt/aksel/pull/1966))
@@ -673,6 +691,10 @@

 - Oppdatert Label og Description spacing for skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))

+### @navikt/ds-react
+
+- Oppdatert Label og Description spacing for alle skjemakomponenter ([PR](https://github.com/navikt/aksel/pull/1967))
+
 ## 3.0.1

 ### @navikt/ds-react
@@ -683,16 +705,16 @@

 ## 3.0.0

+### @navikt/ds-css
+
+- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
+
 ### @navikt/ds-react

 - Accordion: left-aligner chevron, `neutral`-variant, `size`-prop ([PR](https://github.com/navikt/aksel/pull/1964))

 - Bruker nå nå `@navikt/aksel-icons` for interne ikoner ([PR](https://github.com/navikt/aksel/pull/1964))

-### @navikt/ds-css
-
- Accordion: Chevron er left-aligned, deler av styling er refaktorert, `size`-props og `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1964))
-
 ## 2.9.8

 ### @navikt/aksel-icons
@@ -787,14 +809,14 @@

 ## 2.8.7

-### @navikt/ds-react
-
- Fikset typografi-bruk for `Radio` og `Checkbox`.
-
 ### @navikt/ds-css

 - Button: token for tertiary

+### @navikt/ds-react
+
+- Fikset typografi-bruk for `Radio` og `Checkbox`.
+
 ## 2.8.6

 ### @navikt/ds-css
@@ -823,14 +845,14 @@

 ## 2.8.2

-### @navikt/ds-react
-
- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
-
 ### @navikt/ds-css

 - ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))

+### @navikt/ds-react
+
+- ExpansioCard: Oppdatert typografibruk ([PR](https://github.com/navikt/aksel/pull/1870))
+
 ## 2.8.1

 ### @navikt/ds-react
@@ -893,14 +915,14 @@

 ## 2.5.0

-### @navikt/ds-tokens
-
- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
-
 ### @navikt/ds-tailwind

 - Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))

+### @navikt/ds-tokens
+
+- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
+
 ## 2.4.3

 ### @navikt/ds-css
@@ -909,14 +931,14 @@

 ## 2.4.2

-### @navikt/ds-react
-
- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
-
 ### @navikt/ds-css

 - List: La til støtte for nesting ([PR](https://github.com/navikt/aksel/pull/1823))

+### @navikt/ds-react
+
+- List: la til støtte for nestede lister ([PR](https://github.com/navikt/aksel/pull/1823))
+
 ## 2.4.1

 ### @navikt/ds-react
@@ -947,6 +969,12 @@

 ## 2.2.0

+### @navikt/ds-css
+
+- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
+
+- Button: `Neutral`-variant.
+
 ### @navikt/ds-react

 - ToggleGroup: `neutral`-variant ([PR](https://github.com/navikt/aksel/pull/1789))
@@ -959,12 +987,6 @@

 - Oppdatert neutral-tokens ([PR](https://github.com/navikt/aksel/pull/1789))

-### @navikt/ds-css
-
- ToggleGroup: `Neutral`-variant. ([PR](https://github.com/navikt/aksel/pull/1789))
-
- Button: `Neutral`-variant.
-
 ## 2.1.7

 ### @navikt/ds-react
@@ -1079,14 +1101,6 @@

 ## 2.0.0

-### @navikt/ds-react
-
- Fonter blir bruk i all typografi blir nå lastet fra CDN
-
-### @navikt/ds-tokens
-
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
-
 ### @navikt/ds-css

 - Fontlasting: Fonter lastes nå fra NAV-CDN
@@ -1097,6 +1111,14 @@

 - Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))

+### @navikt/ds-react
+
+- Fonter blir bruk i all typografi blir nå lastet fra CDN
+
+### @navikt/ds-tokens
+
+- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
+
 ## 1.5.10

 ### @navikt/ds-react
@@ -1141,16 +1163,16 @@

 ## 1.5.0

+### @navikt/ds-css
+
+- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
+
 ### @navikt/ds-react

 - Tag: `filles`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))

 - Ny komponent Chips! ([PR](https://github.com/navikt/aksel/pull/1668))

-### @navikt/ds-css
-
- Tag: `filled`-varianter ([PR](https://github.com/navikt/aksel/pull/1684))
-
 ## 1.4.4

 ### @navikt/ds-react
@@ -1177,6 +1199,10 @@

 ## 1.3.39

+### @navikt/ds-css
+
+- Fikset bruk av `:watch` for diverse parsere (less, parcel)
+
 ### @navikt/ds-react

 - useId-bug fikset ved bruk i både react 17 og 18
@@ -1199,10 +1225,6 @@

 - Stepper: `interactive` og `completed`-props for wizard-løsninger

-### @navikt/ds-css
-
- Fikset bruk av `:watch` for diverse parsere (less, parcel)
-
 ## 1.3.24

 ### @navikt/ds-css
@@ -15,11 +15,11 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^5.4.1",
-    "@navikt/ds-css": "^5.4.1",
-    "@navikt/ds-react": "^5.4.1",
-    "@navikt/ds-tailwind": "^5.4.1",
-    "@navikt/ds-tokens": "^5.4.1"
+    "@navikt/aksel-icons": "^5.5.0",
+    "@navikt/ds-css": "^5.5.0",
+    "@navikt/ds-react": "^5.5.0",
+    "@navikt/ds-tailwind": "^5.5.0",
+    "@navikt/ds-tokens": "^5.5.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -0,0 +1,35 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box padding="4" background="surface-alt-3-subtle">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
+        ipsum!
+      </Box>
+      <Box padding="4" background="surface-info-subtle">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
+        ipsum!
+      </Box>
+      <Box padding="4" background="surface-success-subtle">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
+        ipsum!
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+  desc: "'Background'-prop lar deg endre farge basert på tilgjengelige tokens",
+};
@@ -0,0 +1,47 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="surface-alt-3-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="4"
+      >
+        Alt-3
+      </Box>
+      <Box
+        background="surface-info-subtle"
+        borderColor="border-info"
+        padding="4"
+        borderWidth="4"
+      >
+        Info
+      </Box>
+      <Box
+        background="surface-success-subtle"
+        borderColor="border-success"
+        padding="4"
+        borderWidth="4"
+      >
+        Success
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+  desc: "'borderColor' lar deg endre border-color på Box basert på tokens",
+};
@@ -0,0 +1,50 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="surface-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="2"
+        borderRadius="xlarge"
+      >
+        border-radius
+      </Box>
+      <Box
+        background="surface-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="2"
+        borderRadius="xlarge xlarge 0 0"
+      >
+        Fleksibel border-radius
+      </Box>
+      <Box
+        background="surface-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="2"
+        borderRadius={{ md: "large" }}
+      >
+        Dynamisk border-radius
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 6,
+  desc: "'borderRadius' lar deg endre border-radius på Box basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.",
+};
@@ -0,0 +1,29 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-subtle" padding="4" borderWidth="2">
+        border-width
+      </Box>
+      <Box background="surface-subtle" padding="4" borderWidth="2 5">
+        Fleksibel border-width
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+  desc: "'borderWidth' gir deg kontroll over border på Box",
+};
@@ -0,0 +1,128 @@
+import {
+  Box,
+  Detail,
+  HStack,
+  Heading,
+  BodyShort,
+  Hide,
+  Show,
+  VStack,
+} from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Box
+      as="header"
+      background="surface-default"
+      borderWidth="0 0 4 0"
+      borderColor="border-warning"
+    >
+      <Box paddingInline="4" paddingBlock="0 6">
+        <HStack align="start" gap="8">
+          <Hide below="md">
+            <Pictogram />
+          </Hide>
+
+          <VStack gap={{ xs: "4", md: "5" }}>
+            <Heading level="1" size="xlarge">
+              Er arbeidsledig eller permittert
+            </Heading>
+
+            <Hide below="md">
+              <HStack gap="4" align="center">
+                <BodyShort size="small">DETTE KAN DU HA RETT TIL</BodyShort>
+                <span aria-hidden="true">|</span>
+                <Detail>Oppdatert 5. juli 2023</Detail>
+              </HStack>
+            </Hide>
+            <Show below="md">
+              <VStack gap="2">
+                <BodyShort size="small">DETTE KAN DU HA RETT TIL</BodyShort>
+                <Detail>Oppdatert 5. juli 2023</Detail>
+              </VStack>
+            </Show>
+          </VStack>
+        </HStack>
+      </Box>
+    </Box>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+  variant: "subtle",
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 8,
+  desc: "Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt",
+};
+
+function Pictogram() {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <g clipPath="url(#clip0_275_1062)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M48 24C34.7452 24 24 34.7452 24 48C24 61.2548 34.7452 72 48 72C61.2548 72 72 61.2548 72 48C72 34.7452 61.2548 24 48 24ZM16 48C16 30.3269 30.3269 16 48 16C65.6731 16 80 30.3269 80 48C80 65.6731 65.6731 80 48 80C30.3269 80 16 65.6731 16 48Z"
+          fill="#FFECCC"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.3284 30.8284L30.8284 70.3284L25.1716 64.6716L64.6716 25.1716L70.3284 30.8284Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M50 26.7059H94M62.2222 11.8824V6.94118C62.2222 4.21224 64.4111 2 67.1111 2H76.8889C79.5889 2 81.7778 4.21224 81.7778 6.94118V11.8824M72 26.7059V34.1176M52 44H92C93.1046 44 94 43.1046 94 42V13.8824C94 12.7778 93.1046 11.8824 92 11.8824H52C50.8954 11.8824 50 12.7778 50 13.8824V42C50 43.1046 50.8954 44 52 44Z"
+          stroke="#262626"
+          strokeWidth="3"
+        />
+        <path
+          d="M2 58.6316H48V94H2V58.6316Z"
+          stroke="#262626"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2 58.5L21 48"
+          stroke="#23262A"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="M48 58.5L29 48"
+          stroke="#23262A"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="M29 69H21"
+          stroke="#23262A"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_275_1062">
+          <rect width="96" height="96" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
@@ -0,0 +1,38 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-neutral" paddingBlock="4">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Padding block
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingBlock="4 16">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Forskjellig blockStart og blockEnd
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingBlock={{ xs: "4", md: "6 16" }}>
+        <Box background="surface-alt-3-subtle" padding="2">
+          Dynamisk paddingBlock
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+  desc: "'paddingBlock' gir deg mer kontroll over vertikal padding.",
+};
@@ -0,0 +1,38 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-neutral" paddingInline="4">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Padding inline
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingInline="4 16">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Forskjellig inlineStart og inlineEnd
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingInline={{ xs: "4", md: "6 16" }}>
+        <Box background="surface-alt-3-subtle" padding="2">
+          Dynamisk paddingInline
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+  desc: "'paddingInline' gir deg mer kontroll over horisontal padding",
+};
@@ -0,0 +1,33 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-neutral" padding="4">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Statisk padding
+        </Box>
+      </Box>
+      <Box background="surface-neutral" padding={{ xs: "2", md: "6" }}>
+        <Box background="surface-alt-3-subtle" padding="2">
+          Dynamisk padding
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "'padding'-prop lar deg endre padding responsivt basert på brekkpunkt",
+};
@@ -0,0 +1,37 @@
+import { Box, BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Box background="surface-default" padding="6">
+      <BodyLong spacing>
+        Hvis du er helt eller delvis arbeidsledig eller permittert, kan du ha
+        rett til pengestøtte fra NAV.
+      </BodyLong>
+      <BodyLong spacing>
+        NAV kan også gi deg råd og veiledning i situasjonen din.
+      </BodyLong>
+      <BodyLong spacing>
+        Hvis du ikke får dagpenger kan du ha rett til tiltakspenger. Dette er en
+        dagsats du får de dagene du deltar på et arbeidsmarkedstiltak. Et
+        arbeidsmarkedstiltak kan for eksempel være kurs, jobbklubb eller
+        arbeidstrening.
+      </BodyLong>
+    </Box>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+  variant: "subtle",
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 9,
+  desc: "Box erstatter dagens Panel-komponent",
+};
@@ -0,0 +1,55 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="8">
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="xsmall"
+      >
+        xsmall
+      </Box>
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="small"
+      >
+        small
+      </Box>
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="medium"
+      >
+        medium
+      </Box>
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="large"
+      >
+        large
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 7,
+  desc: "'shadow' lar deg endre box-shadow på Box basert på tokens.",
+};
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "5.4.1",
-    "@navikt/ds-react": "5.4.1",
+    "@navikt/ds-css": "5.5.0",
+    "@navikt/ds-react": "5.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -251,7 +251,7 @@
    "stylelint-config-standard": "^25.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
    "stylelint-value-no-unknown-custom-properties": "^4.0.0",
-    "typescript": "^4.8.0",
+    "typescript": "^5.1.6",
    "vite": "^4.2.0",
    "yarn": "^1.22.10"
  },
@@ -6,6 +6,7 @@
    "target": "es6",
    "moduleResolution": "node",
    "incremental": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "resolveJsonModule": true
  }
 }
@@ -3585,7 +3585,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^5.4.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^5.4.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3612,8 +3612,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
  dependencies:
-    "@navikt/ds-css": ^5.4.0
-    "@navikt/ds-tokens": ^5.4.0
+    "@navikt/ds-css": ^5.4.1
+    "@navikt/ds-tokens": ^5.4.1
    "@types/jest": ^29.0.0
    concurrently: 7.2.1
    copyfiles: 2.4.1
@@ -3631,7 +3631,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "@navikt/aksel@workspace:@navikt/aksel"
  dependencies:
-    "@navikt/ds-css": 5.4.0
+    "@navikt/ds-css": 5.4.1
    "@types/inquirer": ^9.0.3
    "@types/jest": ^29.0.0
    axios: 1.3.6
@@ -3655,11 +3655,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@*, @navikt/ds-css@5.4.0, @navikt/ds-css@^5.4.0, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@5.4.1, @navikt/ds-css@^5.4.1, @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": ^5.4.0
+    "@navikt/ds-tokens": ^5.4.1
    cssnano: 6.0.0
    fast-glob: 3.2.11
    lodash: 4.17.21
@@ -3672,12 +3672,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@*, @navikt/ds-react@5.4.0, @navikt/ds-react@^5.4.0, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@5.4.1, @navikt/ds-react@^5.4.1, @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.24.1
-    "@navikt/aksel-icons": ^5.4.0
+    "@navikt/aksel-icons": ^5.4.1
+    "@navikt/ds-tokens": ^5.4.1
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3711,11 +3712,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^5.4.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^5.4.1, @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": ^5.4.0
+    "@navikt/ds-tokens": ^5.4.1
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -3726,7 +3727,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^5.4.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^5.4.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -8656,11 +8657,11 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^5.4.0
-    "@navikt/ds-css": ^5.4.0
-    "@navikt/ds-react": ^5.4.0
-    "@navikt/ds-tailwind": ^5.4.0
-    "@navikt/ds-tokens": ^5.4.0
+    "@navikt/aksel-icons": ^5.4.1
+    "@navikt/ds-css": ^5.4.1
+    "@navikt/ds-react": ^5.4.1
+    "@navikt/ds-tailwind": ^5.4.1
+    "@navikt/ds-tokens": ^5.4.1
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
@@ -8710,7 +8711,7 @@ __metadata:
    stylelint-config-standard: ^25.0.0
    stylelint-declaration-block-no-ignored-properties: ^2.6.0
    stylelint-value-no-unknown-custom-properties: ^4.0.0
-    typescript: ^4.8.0
+    typescript: ^5.1.6
    vite: ^4.2.0
    yarn: ^1.22.10
  languageName: unknown
@@ -23785,8 +23786,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "shadow-dom@workspace:examples/shadow-dom"
  dependencies:
-    "@navikt/ds-css": 5.4.0
-    "@navikt/ds-react": 5.4.0
+    "@navikt/ds-css": 5.4.1
+    "@navikt/ds-react": 5.4.1
    "@types/react": ^18.0.0
    "@types/react-dom": ^18.0.0
    "@vitejs/plugin-react": ^3.1.0
@@ -26034,16 +26035,6 @@ __metadata:
  languageName: node
  linkType: hard

-"typescript@npm:^4.8.0":
-  version: 4.9.5
-  resolution: "typescript@npm:4.9.5"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
-  languageName: node
-  linkType: hard
-
 "typescript@npm:^5.1.6":
  version: 5.2.2
  resolution: "typescript@npm:5.2.2"
@@ -26064,16 +26055,6 @@ __metadata:
  languageName: node
  linkType: hard

-"typescript@patch:typescript@^4.8.0#~builtin<compat/typescript>":
-  version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=7ad353"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 2eee5c37cad4390385db5db5a8e81470e42e8f1401b0358d7390095d6f681b410f2c4a0c496c6ff9ebd775423c7785cdace7bcdad76c7bee283df3d9718c0f20
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@^5.1.6#~builtin<compat/typescript>":
  version: 5.2.2
  resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=7ad353"
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	4742f2f580	Version Packages (#2275 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-09-13 14:58:02 +02:00
Ken	9f2052e1c2	🐛 Width fungerte ikke med inline-variant av skeleton (#2273 )	2023-09-13 14:42:05 +02:00
Julian Nymark	f6fcf0c4fd	:arrow-up: add missing typescript version bump in main (#2272 )	2023-09-13 11:46:38 +02:00
Julian Nymark Ken Lars Hansen Ken	83c9194a48	initial box (heavily inspired by shopify Box) (#2195 ) * initial box (heavily inspired by shopify Box) * 🎨 Theming-demo * rm printHidden prop * sr-only: clip is deprecated, adding clip-path * setting up padding story box primitive * 95% complete padding example for Box (dynamic css code unfolding with types) * WIP on padding/margin for box * working box padding/block/inline/margin? * remove console.log * story for Box, copy implementation from padding to apply to margin as well * remove unwanted props on Box * refactor semantic-colors.json, use json import for types in Box.tsx * squashme * Box: working border & background * 🔥 remove props on Box we will not implement in v1 * refactoring / less things needed (no margin) and things that are broken show up in stories * 🐛 fix erroneous padding assignment (a flipped index) * fully recreated LinkPanel * box: add all borderRadius props * box: complete example for chat bubbles * 📝 refactor box hover props to be an object instead * checkout main yarn.lock * yarn changeset * 📝 add jsdoc for Box * 📝 add token documentation * 🚧 Box: add barrel file * 🔥 remove overriding tokens for Box * ♻️ refactor the borderRadius API * 🔥 remove console.logs * bump ts version (make them all equal) * fix new type error that surfaced when upgrading TS * add yarn.lock * 🚧 testing with older TS version again * Revert "🚧 testing with older TS version again" This reverts commit `ca09f3c419`. * add minimum permissions check utility (official github action) * Revert "add minimum permissions check utility (official github action)" This reverts commit `f9dd5ea436`. * test with "read-all\|write-all" for a chromatic.yml action * remove unused comments * 🚧 try skip a test suite * Revert "🚧 try skip a test suite" This reverts commit `ccf4711c25`. * 🚧 update all node-version to 19 * 💥 Force-tester GHA * 💥 bump node-version to 20 * 💥 test with jsonModules again, but this time with node v20 * 🚧 revert type erasure (for tests) * 🔥 remove hover from Box * 🚧 test with module identifier import * 🚧 squashme * a working token type solution * 📝 group Primitives in storybook * no longer assert type, hint instead * 📝 improve jsdoc for Box * 📝 improve jsdoc for Box * 🚧 test relative import for github action * 🚧 test ordering of yarn builds * 🚧 test ordering of yarn workspaces * 🚧 test dependency for yarn workspaces * 🐛 fix human error in token refactoring * 📝 reword jsdoc * ♻️ refactor * 🚧 test again with module identifier import * squashme * 🚧 fully revert to importing .json * 🚧 remove duplicate types * 🔥 remove style-dicitonary format (now unused), fix shadow.json refs * remove devDependency on tokens (for react) * 📝♻️ update comments & naming * 🚚 Oppdatert CSS-config etter ny primitives gruppering * make border-color also control border-style * add examples for Box to aksel.nav.no * ⬆️ Yarn sort av dependencies * 🎨 BorderWidth tokens * 🎨 Css for borderRadius * 🎨 Setup responsiveRadius utility * ♻️ Forenklet borderRadius * 🎨 refactor padding in box * 🔥 Fjernet unødvendig kode * 🎨 Oppdatert token for borderWidth * 🐛 Default 0px border * 🏷️ Refactor types * 🐛 Fikset stories * ♻️ refactor away one of the getResponsiveProps(), renaming * ♻️ refactor + add token exceptions * 🐛 new props based on BoxProps * 📝 Oppdatert box-eksempler * 📝 border-eksempler * 📝 shadow-eksempel * 📝 header demo * 🔥 Fjernet theming demo, la til panel-demo * 🚚 Flyttet show/hide inn i primitives * 🚚 extract stateful colors to separate files * 🚚 move shadow stateful tokens as well * ♻️ rename some Box types * 🚚 re-add missing token * 🚚 move types file to utils, (bonus: fix some jsdoc) * ➕ add @navikt/ds-tokens to react * Update .changeset/happy-pianos-cheat.md --------- Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Lars Hansen <lars.eirik.korsgaard.hansen@nav.no> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2023-09-13 11:25:35 +02:00
				`@@ -0,0 +1 @@`
				`export { Box, type BoxProps } from "./Box";`