Version Packages (#1865 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
💄 Bedre grid-break i footer
2026-10-15 10:12:03 +00:00 · 2023-03-17 14:03:13 +01:00 · 2023-03-17 13:11:29 +01:00 · 2023-03-17 12:09:19 +01:00 · 2023-03-17 11:59:24 +01:00 · 2023-03-17 11:49:17 +01:00
51 changed files with 1613 additions and 152 deletions
@@ -1,5 +1,7 @@
 # @navikt/aksel-icons

+## 2.8.0
+
 ## 2.7.8

 ## 2.7.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/aksel-icons",
-  "version": "2.7.8",
+  "version": "2.8.0",
  "author": "Aksel | NAV",
  "homepage": "https://aksel.nav.no/ikoner",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/ds-codemod

+## 2.8.0
+
 ## 2.7.8

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

+## 2.8.0
+
+### Minor Changes
+
+- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+
 ## 2.7.8

 ### Patch Changes
@@ -0,0 +1,193 @@
+.navds-expansioncard {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
+  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
+  --__ac-expansioncard-border-width: 1px;
+
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
+  height: fit-content;
+}
+
+.navds-expansioncard--open {
+  --__ac-expansioncard-border-color: var(
+    --ac-expansioncard-border-open-color,
+    var(--ac-expansioncard-border-color, var(--a-border-default))
+  );
+}
+
+.navds-expansioncard:hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+:where(.navds-expansioncard.navds-expansioncard--open):hover {
+  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
+}
+
+/*************************
+ * Header *
+ *************************/
+.navds-expansioncard__header {
+  width: 100%;
+  display: flex;
+  gap: var(--a-spacing-4);
+  padding: var(--a-spacing-4) var(--a-spacing-6);
+  border-radius: var(--__ac-expansioncard-border-radius);
+  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
+  position: relative;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  justify-content: space-between;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) {
+  padding: var(--a-spacing-3) var(--a-spacing-4);
+}
+
+.navds-expansioncard__header:hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-bottom: none;
+}
+
+.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
+  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
+  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 -1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+/*************************
+ * Header/Typography *
+ *************************/
+
+.navds-expansioncard__title--small {
+  margin-top: 10px;
+}
+
+.navds-expansioncard__title--medium {
+  margin-top: var(--a-spacing-2);
+}
+
+.navds-expansioncard__title--large {
+  margin-top: var(--a-spacing-1);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
+  margin-top: var(--a-spacing-05);
+}
+
+.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
+  margin-top: 0;
+}
+
+/*************************
+ * Header/Button *
+ *************************/
+.navds-expansioncard__header-button {
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  margin: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
+  min-height: 3rem;
+  min-width: 3rem;
+  font-size: 1.5rem;
+  align-self: flex-start;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
+  background-color: var(--a-surface-hover);
+}
+
+.navds-expansioncard__header-chevron {
+  transition: transform 150ms ease-in-out;
+}
+
+.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(0) rotate(180deg);
+}
+
+.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(1px);
+}
+
+.navds-expansioncard__header-button:focus {
+  outline: none;
+}
+
+.navds-expansioncard__header-button:focus-visible {
+  box-shadow: var(--a-shadow-focus);
+}
+
+.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
+  transform: translateY(-1px) rotate(180deg);
+}
+
+.navds-expansioncard__header-button::after {
+  inset: 0;
+  z-index: 1;
+  position: absolute;
+  content: "";
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+}
+
+/*************************
+ * Content *
+ *************************/
+.navds-expansioncard__content {
+  border-end-end-radius: var(--__ac-expansioncard-border-radius);
+  border-end-start-radius: var(--__ac-expansioncard-border-radius);
+  padding: var(--a-spacing-3) var(--a-spacing-6) var(--a-spacing-6);
+  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
+  border-top: none;
+}
+
+.navds-expansioncard--small > :where(.navds-expansioncard__content) {
+  padding: var(--a-spacing-3) var(--a-spacing-4) var(--a-spacing-4);
+}
+
+.navds-expansioncard__content--closed {
+  display: none;
+}
+
+:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
+  box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
+    0 1px 0 0 var(--__ac-expansioncard-border-color);
+}
+
+.navds-expansioncard__content-inner {
+  animation: fadeExpansionCard 250ms ease;
+}
+
+.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
+  animation: none;
+}
+
+@keyframes fadeExpansionCard {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
@@ -8,6 +8,7 @@
@import "content-container.css";
@import "chat.css";
@import "chips.css";
+@import "expansioncard.css";
@import "guide-panel.css";
@import "form/index.css";
@import "help-text.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "2.7.8",
+  "version": "2.8.0",
  "description": "CSS for NAV Designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -20,7 +20,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^2.7.8",
+    "@navikt/ds-tokens": "^2.8.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.0.0",
@@ -106,6 +106,16 @@
    "--ac-date-input-error-border": "--a-border-danger",
    "--ac-date-input-button-text": "--a-text-default"
  },
+  "expansioncard": {
+    "--ac-expansioncard-bg": "--a-surface-default",
+    "--ac-expansioncard-header-bg": "--a-surface-transparent",
+    "--ac-expansioncard-header-bg-hover": "--a-surface-hover",
+    "--ac-expansioncard-border-color": "--a-border-default",
+    "--ac-expansioncard-border-open-color": "--a-border-default",
+    "--ac-expansioncard-border-radius": "--a-border-radius-large",
+    "--ac-expansioncard-button-border-radius": "--a-border-radius-medium",
+    "--ac-expansioncard-border-hover-color": "--a-border-strong"
+  },
  "guidepanel": {
    "--ac-guide-panel-bg": "--a-surface-default",
    "--ac-guide-panel-border": "--a-border-action",
@@ -1,5 +1,17 @@
 # @navikt/ds-react

+## 2.8.0
+
+### Minor Changes
+
+- [#1820](https://github.com/navikt/aksel/pull/1820) [`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: Ny komponent! ExpansionCard. Oppfølger fra gammel Ekspanderbartpanel.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.0
+  - @navikt/ds-icons@2.8.0
+
 ## 2.7.8

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "2.7.8",
+  "version": "2.8.0",
  "description": "Aksel react-components for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -37,7 +37,8 @@
  },
  "dependencies": {
    "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.7.8",
+    "@navikt/aksel-icons": "^2.8.0",
+    "@navikt/ds-icons": "^2.8.0",
    "@radix-ui/react-tabs": "1.0.0",
    "@radix-ui/react-toggle-group": "1.0.0",
    "clsx": "^1.2.1",
@@ -0,0 +1,119 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import ExpansionCardContent, {
+  ExpansionCardContentType,
+} from "./ExpansionCardContent";
+import {
+  ExpansionCardDescription,
+  ExpansionCardDescriptionType,
+} from "./ExpansionCardDescription";
+import ExpansionCardHeader, {
+  ExpansionCardHeaderType,
+} from "./ExpansionCardHeader";
+import {
+  ExpansionCardTitle,
+  ExpansionCardTitleType,
+} from "./ExpansionCardTitle";
+
+interface ExpansionCardComponent
+  extends React.ForwardRefExoticComponent<
+    ExpansionCardProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Header: ExpansionCardHeaderType;
+  Title: ExpansionCardTitleType;
+  Description: ExpansionCardDescriptionType;
+  Content: ExpansionCardContentType;
+}
+
+export interface ExpansionCardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Callback for when Card is toggled open/closed
+   */
+  onToggle?: (open: boolean) => void;
+  /**
+   * Controlled open-state
+   * Using this removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults to open if not controlled
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Since ExpansionCard is a section-element, accessible name is required.
+   */
+  ["aria-label"]: string;
+}
+
+export type ExpansionCardContextProps = {
+  open: boolean;
+  toggleOpen: () => void;
+};
+
+export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
+  open: false,
+  toggleOpen: () => {},
+});
+
+export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
+  (
+    {
+      className,
+      onToggle,
+      open,
+      defaultOpen = false,
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => {
+    const [_open, _setOpen] = useState(defaultOpen);
+
+    const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
+
+    const handleOpen = () => {
+      if (open === undefined) {
+        const newOpen = !_open;
+        _setOpen(newOpen);
+        onToggle?.(newOpen);
+      } else {
+        onToggle?.(!open);
+      }
+      shouldFade.current = true;
+    };
+
+    return (
+      <ExpansionCardContext.Provider
+        value={{ open: open ?? _open, toggleOpen: handleOpen }}
+      >
+        <section
+          {...rest}
+          className={cl(
+            "navds-expansioncard",
+            className,
+            `navds-expansioncard--${size}`,
+            {
+              "navds-expansioncard--open": open ?? _open,
+              "navds-expansioncard--no-fade": !shouldFade.current,
+            }
+          )}
+          ref={ref}
+        />
+      </ExpansionCardContext.Provider>
+    );
+  }
+) as ExpansionCardComponent;
+
+ExpansionCard.Header = ExpansionCardHeader;
+ExpansionCard.Content = ExpansionCardContent;
+ExpansionCard.Title = ExpansionCardTitle;
+ExpansionCard.Description = ExpansionCardDescription;
+
+export default ExpansionCard;
@@ -0,0 +1,42 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
+
+export interface ExpansionCardContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardContentType = React.ForwardRefExoticComponent<
+  ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardContent: ExpansionCardContentType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        ref={ref}
+        as="div"
+        className={cl("navds-expansioncard__content", {
+          "navds-expansioncard__content--closed": !panelContext.open,
+        })}
+        aria-hidden={!panelContext.open}
+      >
+        <div className="navds-expansioncard__content-inner">{children}</div>
+      </BodyLong>
+    );
+  }
+);
+
+export default ExpansionCardContent;
@@ -0,0 +1,22 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { BodyLong } from "../typography/BodyLong";
+
+interface ExpansionCardDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
+  ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
+>;
+
+export const ExpansionCardDescription: ExpansionCardDescriptionType =
+  forwardRef(({ className, ...rest }, ref) => (
+    <BodyLong
+      {...rest}
+      as="p"
+      ref={ref}
+      className={cl("navds-link-panel__description", className)}
+    />
+  ));
@@ -0,0 +1,50 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { ExpansionCardContext } from "./ExpansionCard";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+
+export interface ExpansionCardHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
+  ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cl("navds-expansioncard__header", className)}
+      >
+        <div className="navds-expansioncard__header-content">{children}</div>
+
+        <button
+          className="navds-expansioncard__header-button"
+          onClick={() => panelContext.toggleOpen()}
+          type="button"
+          aria-expanded={panelContext.open}
+        >
+          <ChevronDownIcon
+            className="navds-expansioncard__header-chevron"
+            title="Vis mer"
+          />
+        </button>
+      </div>
+    );
+  }
+);
+
+export default ExpansionCardHeader;
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+interface ExpansionCardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+  /**
+   * Changes text-sizing
+   * @default small
+   */
+  size?: "large" | "medium" | "small";
+}
+
+export type ExpansionCardTitleType = OverridableComponent<
+  ExpansionCardTitleProps,
+  HTMLHeadingElement
+>;
+
+export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
+  ({ className, as: Component = "h3", size = "small", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(
+        "navds-expansioncard__title",
+        `navds-expansioncard__title--${size}`,
+        "navds-heading",
+        `navds-heading--${size}`,
+        className
+      )}
+    />
+  )
+);
@@ -0,0 +1,269 @@
+import { PlantIcon } from "@navikt/aksel-icons";
+import React, { useState } from "react";
+import { ExpansionCard } from ".";
+import { BodyLong } from "../typography";
+import ExpansionCardContent from "./ExpansionCardContent";
+import ExpansionCardHeader from "./ExpansionCardHeader";
+
+export default {
+  title: "ds-react/ExpansionCard",
+  component: ExpansionCard,
+  subcomponents: [ExpansionCardHeader, ExpansionCardContent],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: "600px",
+          minHeight: "100vh",
+          padding: "10rem 0",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Content = () => (
+  <ExpansionCard.Content>
+    <BodyLong spacing>
+      På ditt faste arbeidssted vil du ha yrkesskadedekning også i hvilepauser,
+      lunsjpauser, trimaktiviteter og lignende i arbeidstiden.
+    </BodyLong>
+    <BodyLong spacing>
+      Som hovedregel er du som arbeidstaker ikke yrkesskadedekket på veien til
+      og fra arbeid eller første og siste oppdragssted. Du er heller ikke
+      yrkesskadedekket på fritiden eller under private gjøremål i arbeidstiden.
+    </BodyLong>
+    <BodyLong spacing>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+    <BodyLong spacing>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+    <BodyLong>
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
+      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
+      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
+      aspernatur obcaecati dicta.
+    </BodyLong>
+  </ExpansionCard.Content>
+);
+
+export const Default = {
+  render: (props) => {
+    return (
+      <ExpansionCard
+        {...props}
+        open={props?.open || undefined}
+        size={props.size}
+        aria-label="default-demo"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          {props.description && (
+            <ExpansionCard.Description>
+              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+              til tid, sted og arbeidsoppgaver
+            </ExpansionCard.Description>
+          )}
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    );
+  },
+  args: {
+    open: false,
+    size: "medium",
+    description: false,
+    variant: "neutral",
+  },
+  argTypes: {
+    size: { control: "select", options: ["medium", "small"] },
+  },
+};
+
+export const Description = {
+  render: () => (
+    <ExpansionCard aria-label="bare description">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  ),
+};
+
+export const Sizes = {
+  render: () => (
+    <>
+      <h2>Medium</h2>
+      <ExpansionCard aria-label="Demo med description">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <ExpansionCard aria-label="Demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <h2>Small</h2>
+      <ExpansionCard size="small" aria-label="small-demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+      <ExpansionCard
+        size="small"
+        aria-label="small-demo med avatar uten description"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    </>
+  ),
+};
+
+export const HeadingSizing = {
+  render: () => (
+    <>
+      {(["large", "medium", "small"] as const).map((x) => (
+        <ExpansionCard aria-label={`demo-${x}`}>
+          <ExpansionCard.Header key={x}>
+            <ExpansionCard.Title size={x}>{x}</ExpansionCard.Title>
+            <ExpansionCard.Description>
+              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+              til tid, sted og arbeidsoppgaver
+            </ExpansionCard.Description>
+          </ExpansionCard.Header>
+          <Content />
+        </ExpansionCard>
+      ))}
+    </>
+  ),
+};
+
+export const DefaultOpen = {
+  render: () => (
+    <ExpansionCard defaultOpen aria-label="defaultOpen demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  ),
+};
+
+export const ControlledState = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [open, setOpen] = useState(false);
+    return (
+      <ExpansionCard
+        open={open}
+        onToggle={setOpen}
+        aria-label="Controlled-state demo"
+      >
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+    );
+  },
+};
+
+export const Customization = {
+  render: () => (
+    <div className="subtle-card">
+      <ExpansionCard aria-label="custom-styling demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+
+      <style>{`
+        .subtle-card {
+          --ac-expansioncard-bg: var(--a-surface-subtle);
+          --ac-expansioncard-border-open-color: var(--a-border-alt-3);
+        }`}</style>
+    </div>
+  ),
+};
+
+export const Icon = {
+  render: () => (
+    <div>
+      <ExpansionCard aria-label="custom-styling demo">
+        <ExpansionCard.Header>
+          <div className="with-icon">
+            <div className="icon">
+              <PlantIcon aria-hidden />
+            </div>
+            <div>
+              <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+              <ExpansionCard.Description>
+                For at yrkesskadedekningen skal gjelde, er det som hovedregel
+                krav til tid, sted og arbeidsoppgaver
+              </ExpansionCard.Description>
+            </div>
+          </div>
+        </ExpansionCard.Header>
+        <Content />
+      </ExpansionCard>
+
+      <style>{`
+        .with-icon {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .icon {
+          font-size: 3rem;
+          flex-shrink: 0;
+          display: grid;
+          place-content: center;
+        }`}</style>
+    </div>
+  ),
+};
@@ -0,0 +1,4 @@
+export {
+  type ExpansionCardProps,
+  default as ExpansionCard,
+} from "./ExpansionCard";
@@ -5,6 +5,7 @@ export * from "./chat";
 export * from "./chips";
 export * from "./date";
 export * from "./form";
+export * from "./expansion-card";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind

+## 2.8.0
+
 ## 2.7.8

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

+## 2.8.0
+
 ## 2.7.8

 ## 2.7.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "2.7.8",
+  "version": "2.8.0",
  "description": "Design-tokens for NAV designsystem",
  "author": "Aksel | NAV designsystem team",
  "keywords": [
@@ -1,5 +1,7 @@
 # @navikt/ds-icons

+## 2.8.0
+
 ## 2.7.8

 ## 2.7.7
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "2.7.8",
+  "version": "2.8.0",
  "description": "Aksel icons for NAV",
  "author": "Aksel | NAV designsystem team",
  "repository": {
@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal

+## 2.8.0
+
 ## 2.7.8

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

+## 2.8.0
+
+### Patch Changes
+
+- Updated dependencies [[`c6d51a019`](https://github.com/navikt/aksel/commit/c6d51a01902e4fd7916a422e17ed175f39acd458)]:
+  - @navikt/ds-react@2.8.0
+  - @navikt/ds-icons@2.8.0
+
 ## 2.7.8

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "2.7.8",
+  "version": "2.8.0",
  "description": "Aksel react components for internal UIs in NAV",
  "author": "Aksel | NAV designsystem team",
  "license": "MIT",
@@ -35,8 +35,8 @@
    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^2.7.8",
-    "@navikt/ds-react": "^2.7.8",
+    "@navikt/ds-icons": "^2.8.0",
+    "@navikt/ds-react": "^2.8.0",
    "clsx": "^1.1.1",
    "copy-to-clipboard": "^3.3.1"
  },
@@ -15,15 +15,15 @@
    "website"
  ],
  "dependencies": {
-    "@navikt/aksel-icons": "^2.7.8",
-    "@navikt/ds-codemod": "^2.7.8",
-    "@navikt/ds-css": "^2.7.8",
-    "@navikt/ds-css-internal": "^2.7.8",
-    "@navikt/ds-icons": "^2.7.8",
-    "@navikt/ds-react": "^2.7.8",
-    "@navikt/ds-react-internal": "^2.7.8",
-    "@navikt/ds-tailwind": "^2.7.8",
-    "@navikt/ds-tokens": "^2.7.8"
+    "@navikt/aksel-icons": "^2.8.0",
+    "@navikt/ds-codemod": "^2.8.0",
+    "@navikt/ds-css": "^2.8.0",
+    "@navikt/ds-css-internal": "^2.8.0",
+    "@navikt/ds-icons": "^2.8.0",
+    "@navikt/ds-react": "^2.8.0",
+    "@navikt/ds-react-internal": "^2.8.0",
+    "@navikt/ds-tailwind": "^2.8.0",
+    "@navikt/ds-tokens": "^2.8.0"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.3"
@@ -13,7 +13,7 @@ const Footer = () => {
      data-theme="dark"
      className="toc-ignore text-text-on-inverted bg-deepblue-800 relative flex w-full justify-center"
    >
-      <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-12 px-4 pt-12 pb-16 md:px-6 xl:grid-cols-5 xl:gap-6">
+      <div className="relative z-10 mx-auto grid w-full max-w-screen-2xl gap-12 px-4 pt-12 pb-16 md:grid-cols-2 md:px-6 lg:grid-cols-4 xl:grid-cols-5 xl:gap-6">
        <LogoBlock />
        <Snarveier />
        <SideLenker />
@@ -55,7 +55,10 @@ const FooterForm = () => {

  return (
    <>
-      <div className="flex w-full max-w-md flex-col" data-theme="dark">
+      <div
+        className="flex w-full max-w-md flex-col lg:col-span-2 xl:col-span-1"
+        data-theme="dark"
+      >
        <div aria-live="polite">
          {sent.status && (
            <Label spacing as="p">
@@ -14,7 +14,7 @@ const GodPraksisCardSimple = ({ node }: { node: Partial<AkselTemaT> }) => {
  }

  return (
-    <li className="flex items-center gap-2 px-2 py-4  sm:gap-4 sm:px-6">
+    <li className="flex items-center gap-2 px-2 py-4 sm:gap-4 sm:px-6">
      <div className="relative h-8 w-8 shrink-0 sm:h-12 sm:w-12">
        <Image
          src={urlFor(node?.pictogram).auto("format").url()}
@@ -6,3 +6,15 @@
  padding-left: 1rem;
  padding-right: 1rem;
 }
+
+.containerStatic {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 1.5rem 1rem;
+}
+
+.containerStatic > * {
+  max-width: 30rem;
+  width: 100%;
+}
@@ -4,15 +4,25 @@ import cl from "clsx";

 export const withDsExample = (
  Component: ComponentType,
-  variant?: "full" | "inverted"
+  /**
+   * Static: Used for dynamic-height examples like ExpansionCard
+   */
+  variant?: "full" | "inverted" | "static"
 ) => {
  const DsHOC = (props: any) => (
    <div
-      className={cl(styles.container, {
+      className={cl({
        "bg-gray-900": variant === "inverted",
+        [styles.containerStatic]: variant === "static",
+        [styles.container]: variant !== "static",
      })}
    >
-      <div id="ds-example" className={cl({ "w-full": variant === "full" })}>
+      <div
+        id="ds-example"
+        className={cl({
+          "w-full": variant === "full",
+        })}
+      >
        <Component {...props} />
      </div>
    </div>
@@ -6,9 +6,11 @@ import { ChangeLogIconOutline } from "components/assets";
 const SuggestionBlockComponent = ({
  variant,
  reference = "",
+  unsafe = false,
 }: {
  variant: "komponent-beta" | "komponent-ny";
  reference?: string;
+  unsafe?: boolean;
 }) => {
  return (
    <div
@@ -22,12 +24,18 @@ const SuggestionBlockComponent = ({
        <Heading size="small" level="2">
          {options[variant]?.heading}
        </Heading>
-        <BodyLong className="mt-2">{options[variant]?.text}</BodyLong>
+        <BodyLong className="mt-2">
+          {variant === "komponent-beta" && unsafe
+            ? options["komponent-beta-unsafe"].text
+            : options[variant]?.text}
+        </BodyLong>
        <Button
          variant="secondary-neutral"
          as="a"
          href={options[variant].link + reference}
          className="mt-4 w-fit"
+          target="_blank"
+          rel="noreferrer noopener"
        >
          Send innspill
        </Button>
@@ -56,6 +64,8 @@ const SuggestionBlockIcon = ({
          as="a"
          href={options[variant].link + reference}
          className="mt-4 w-fit"
+          target="_blank"
+          rel="noreferrer noopener"
        >
          Send innspill
        </Button>
@@ -67,6 +77,7 @@ const SuggestionBlockIcon = ({
 export const SuggestionBlock = ({
  variant,
  reference = "",
+  unsafe,
 }: {
  variant:
    | "ikoner"
@@ -78,9 +89,16 @@ export const SuggestionBlock = ({
    | "ikon-not-found"
    | "ikon";
  reference?: string;
+  unsafe?: boolean;
 }) => {
  if (variant === "komponent-ny" || variant === "komponent-beta") {
-    return <SuggestionBlockComponent variant={variant} reference={reference} />;
+    return (
+      <SuggestionBlockComponent
+        variant={variant}
+        unsafe={unsafe}
+        reference={reference}
+      />
+    );
  }

  if (variant === "ikon-ny" || variant === "ikon") {
@@ -106,6 +124,8 @@ export const SuggestionBlock = ({
        variant="secondary-neutral"
        as="a"
        href={options[variant]?.link + reference}
+        target="_blank"
+        rel="noreferrer noopener"
      >
        Send forslag
      </Button>
@@ -165,7 +185,45 @@ const options: {
    icon: <ChangeLogIconOutline />,
  },
  "komponent-beta": {
-    text: "Komponenten er under utvikling. Dette kan medføre bugs slik at teamet ditt må ta stilling til om dere ønsker å bruke denne i produksjon. Hvis komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i patch/minor versjon av kodepakker og i Figma. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!",
+    text: "Komponenten er under utvikling, men klar for adopsjon. Vi er ønsker gjerne innspill på hvordan den fungerer og hvilken forbedringer vi kan gjøre.",
+    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
+    heading: "Beta",
+    icon: (
+      <svg
+        width="25"
+        height="24"
+        viewBox="0 0 25 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        focusable={false}
+        aria-hidden
+      >
+        <path
+          d="M14.5471 3.99994H10.4528V9.48408L4.83594 17.1731C3.94768 18.3891 4.92474 19.9999 6.55053 19.9999H18.4495C20.0753 19.9999 21.0523 18.3891 20.1641 17.1731L14.5471 9.48408V3.99994Z"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.5 4H15.5"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M8.75 12L16.25 12"
+          stroke="#262626"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ),
+  },
+  "komponent-beta-unsafe": {
+    text: "Komponenten er under utvikling. Så lenge komponenten er prefikset med UNSAFE kan det også medføre breaking-changes i minor versjon av kodepakker og i Figma. Teamet ditt må ta selv ta stilling til om dere ønsker å bruke denne i produksjon.",
    link: `${issueUrl}&labels=forespørsel+🥰%2Ckomponenter+🧩%2Cbeta+🧪&template=update-component.yml&title=%5BInnspill+til+komponent%5D%3A+`,
    heading: "Beta",
    icon: (
@@ -27,7 +27,7 @@
  },
  "dependencies": {
    "@sanity/block-content-to-react": "^3.0.0",
-    "@sanity/client": "^5.2.2",
+    "@sanity/client": "^5.3.0",
    "@sanity/code-input": "4.1.0",
    "@sanity/color-input": "^3.0.2",
    "@sanity/icons": "2.2.2",
@@ -35,7 +35,7 @@
    "@sanity/preview-kit": "^1.3.4",
    "@sanity/table": "1.0.1",
    "@sanity/ui": "^1.3.0",
-    "@sanity/vision": "3.6.0",
+    "@sanity/vision": "3.7.0",
    "@svgr/webpack": "^5.5.0",
    "amplitude-js": "^8.21.5",
    "boring-avatars": "1.7.0",
@@ -53,7 +53,7 @@
    "react-dom": "^18.0.0",
    "react-modal": "3.15.1",
    "recharts": "^2.2.0",
-    "sanity": "3.6.0",
+    "sanity": "3.7.0",
    "sanity-plugin-asset-source-unsplash": "^1.0.6",
    "sanity-plugin-iframe-pane": "^2.2.0",
    "sanity-plugin-media": "^2.0.5",
@@ -6,7 +6,10 @@ const Example = () => {
  const [open, setOpen] = useState(false);
  return (
    <div className="grid place-items-start gap-2">
-      <Accordion style={{ width: "100%", maxWidth: "65ch" }}>
+      <Button variant="secondary" onClick={() => setOpen(!open)}>
+        Toggle Accordion
+      </Button>
+      <Accordion>
        <Accordion.Item open={open}>
          <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
          <Accordion.Content>
@@ -26,14 +29,11 @@ const Example = () => {
          </Accordion.Content>
        </Accordion.Item>
      </Accordion>
-      <Button variant="secondary" onClick={() => setOpen(!open)}>
-        Toggle Accordion
-      </Button>
    </div>
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -3,7 +3,7 @@ import { withDsExample } from "components/website-modules/examples/withDsExample

 const Example = () => {
  return (
-    <Accordion style={{ width: "100%", maxWidth: "65ch" }}>
+    <Accordion>
      <Accordion.Item>
        <Accordion.Header>Til deg som er mellom 62 og 67 år</Accordion.Header>
        <Accordion.Content>
@@ -26,7 +26,7 @@ const Example = () => {
  );
 };

-export default withDsExample(Example);
+export default withDsExample(Example, "static");

 /* Storybook story */
 export const Demo = {
@@ -0,0 +1,95 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="subtle-card">
+      <ExpansionCard aria-label="Demo med custom-styling">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+
+      <style>{`
+        .subtle-card {
+          --ac-expansioncard-bg: var(--a-deepblue-50);
+          --ac-expansioncard-border-open-color: var(--a-border-alt-3);
+          --ac-expansioncard-border-hover-color: var(--a-border-alt-3);
+        }`}</style>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+  desc: "Tokens lar deg lett gjøre stilendringene du trenger uten å måtte overskrive css-klasser.",
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);
@@ -0,0 +1,81 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <ExpansionCard aria-label="default-demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+      </ExpansionCard.Header>
+      <ExpansionCard.Content>
+        <Innhold />
+      </ExpansionCard.Content>
+    </ExpansionCard>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);
@@ -0,0 +1,84 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <ExpansionCard aria-label="Demo med description">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          Du er registerert som mottaker av sykepenger fra NAV
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <ExpansionCard.Content>
+        <Innhold />
+      </ExpansionCard.Content>
+    </ExpansionCard>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);
@@ -0,0 +1,105 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="grid gap-6">
+      <ExpansionCard aria-label="Heading-size large demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title as="h2" size="large">
+            Utbetaling av sykepenger
+          </ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+      <ExpansionCard aria-label="Heading-size medium demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title as="h3" size="medium">
+            Utbetaling av sykepenger
+          </ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+      <ExpansionCard aria-label="Heading-size small demo">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title as="h4" size="small">
+            Utbetaling av sykepenger
+          </ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);
@@ -0,0 +1,110 @@
+import { ExternalLinkIcon, PlantIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="subtle-card">
+      <ExpansionCard aria-label="Demo med custom-styling">
+        <ExpansionCard.Header>
+          <div className="with-icon">
+            <div className="icon">
+              <PlantIcon aria-hidden />
+            </div>
+            <div>
+              <ExpansionCard.Title>
+                Utbetaling av sykepenger
+              </ExpansionCard.Title>
+              <ExpansionCard.Description>
+                For at yrkesskadedekningen skal gjelde, er det som hovedregel
+                krav til tid, sted og arbeidsoppgaver
+              </ExpansionCard.Description>
+            </div>
+          </div>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+
+      <style>{`
+        .with-icon {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .icon {
+          font-size: 3rem;
+          flex-shrink: 0;
+          display: grid;
+          place-content: center;
+        }`}</style>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+  desc: "Man kan manuelt legge til ikoner eller illustrasjoner med egen styling.",
+};
+
+export const args = {
+  index: 5,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);
@@ -0,0 +1,94 @@
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
+import { BodyLong, ExpansionCard, Label, Link } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <div className="grid gap-6">
+      <ExpansionCard size="small" aria-label="Small-variant">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+      <ExpansionCard size="small" aria-label="Small-variant med description">
+        <ExpansionCard.Header>
+          <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+          <ExpansionCard.Description>
+            Du er registerert som mottaker av sykepenger fra NAV
+          </ExpansionCard.Description>
+        </ExpansionCard.Header>
+        <ExpansionCard.Content>
+          <Innhold />
+        </ExpansionCard.Content>
+      </ExpansionCard>
+    </div>
+  );
+};
+
+export default withDsExample(Example, "static");
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+};
+
+const Innhold = () => (
+  <>
+    <Label as="p" spacing>
+      Beløpet går til arbeidsgiveren din
+    </Label>
+    <BodyLong spacing>
+      Vi har registrert at du får sykepenger fra Bedriften AS, som skal ha
+      pengene tilbake fra NAV. Selv om pengene går til arbeidsgiveren din, er vi
+      forpliktet til å vise deg informasjonen fordi det handler om deg.
+    </BodyLong>
+    <Label as="p" spacing>
+      Slik beregner vi sykepengene
+    </Label>
+    <dl className="border-border-subtle grid gap-1 border-b pb-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Beregnet månedslønn</dt>
+        <dd>27 256 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Omgregnet til årslønn</dt>
+        <dd>327 072 kr</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Daglig sykepengebeløp</dt>
+        <dd>1 258 kr</dd>
+      </div>
+    </dl>
+    <dl className="pt-6">
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt>Utbetalinger totalt</dt>
+        <dd>5 dager</dd>
+      </div>
+      <div className="border-border-default flex justify-between border-b py-1">
+        <dt className="font-semibold">Sykepengebeløp</dt>
+        <dd>5 384 kr</dd>
+      </div>
+    </dl>
+    <BodyLong spacing className="mt-4">
+      * Fra dette beløpet blir det trukket skatt og eventuelt andre trekk før
+      utbetalingen.
+    </BodyLong>
+    <div className="grid w-fit gap-2">
+      <Link href="#">
+        Se tidligere utbetalinger{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+      <Link href="#">
+        Les mer om utregningen{" "}
+        <ExternalLinkIcon aria-hidden fontSize="1.5rem" />
+      </Link>
+    </div>
+  </>
+);
@@ -167,7 +167,7 @@ const Forside = ({ page, tema, bloggs, resent }: PageProps): JSX.Element => {
                    )}
                  </button>
                )}
-                <div>
+                <div className="px-2 sm:px-6">
                  <Heading
                    level="2"
                    size="xlarge"
@@ -97,6 +97,8 @@ const Page = ({
      ? "komponent-ny"
      : null;

+  const unsafe = page?.status?.unsafe;
+
  return (
    <>
      <Head>
@@ -235,7 +237,11 @@ const Page = ({
          )}
        </BodyShort>
        {tag && (
-          <SuggestionBlock variant={tag} reference={`<${page?.heading} />`} />
+          <SuggestionBlock
+            variant={tag}
+            unsafe={unsafe}
+            reference={`<${page?.heading} />`}
+          />
        )}
        <IntroSeksjon node={page?.intro} />
        {page?.status?.tag === "ready" && (
@@ -59,11 +59,18 @@ export const KomponentArtikkel = defineType({
          },
          validation: (Rule) => Rule.required(),
        },
-        {
+        defineField({
+          name: "unsafe",
+          title: "Unsafe",
+          description: "Er komponenten Beta + UNSAFE-prefikset?",
+          type: "boolean",
+          hidden: ({ parent }) => !(parent?.tag === "beta"),
+        }),
+        defineField({
          name: "bilde",
          title: "Thumbnail",
          type: "image",
-        },
+        }),
      ],
      options: {
        collapsible: true,
@@ -10,8 +10,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@navikt/ds-css": "2.7.8",
-    "@navikt/ds-react": "2.7.8",
+    "@navikt/ds-css": "2.8.0",
+    "@navikt/ds-react": "2.8.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
@@ -3351,7 +3351,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@navikt/aksel-icons@^2.7.7, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^2.7.8, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
  version: 0.0.0-use.local
  resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
  dependencies:
@@ -3374,7 +3374,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-codemod@^2.7.7, @navikt/ds-codemod@workspace:@navikt/codemod":
+"@navikt/ds-codemod@^2.7.8, @navikt/ds-codemod@workspace:@navikt/codemod":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
  dependencies:
@@ -3401,7 +3401,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css-internal@^2.7.7, @navikt/ds-css-internal@workspace:@navikt/internal/css":
+"@navikt/ds-css-internal@^2.7.8, @navikt/ds-css-internal@workspace:@navikt/internal/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
  dependencies:
@@ -3412,11 +3412,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-css@2.7.7, @navikt/ds-css@^2.7.7, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@2.7.8, @navikt/ds-css@^2.7.8, @navikt/ds-css@workspace:@navikt/core/css":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-css@workspace:@navikt/core/css"
  dependencies:
-    "@navikt/ds-tokens": ^2.7.7
+    "@navikt/ds-tokens": ^2.7.8
    normalize.css: ^8.0.1
    postcss: ^8.4.0
    postcss-cli: ^9.0.0
@@ -3425,7 +3425,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-icons@^2.7.7, @navikt/ds-icons@workspace:@navikt/icons":
+"@navikt/ds-icons@^2.7.8, @navikt/ds-icons@workspace:@navikt/icons":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-icons@workspace:@navikt/icons"
  dependencies:
@@ -3461,8 +3461,8 @@ __metadata:
    "@babel/preset-env": 7.19.4
    "@babel/preset-react": 7.18.6
    "@babel/preset-typescript": 7.18.6
-    "@navikt/ds-icons": ^2.7.7
-    "@navikt/ds-react": ^2.7.7
+    "@navikt/ds-icons": ^2.7.8
+    "@navikt/ds-react": ^2.7.8
    "@rollup/plugin-babel": 6.0.2
    "@rollup/plugin-commonjs": 23.0.2
    "@rollup/plugin-node-resolve": ^15.0.1
@@ -3487,12 +3487,12 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react-internal@^2.7.7, @navikt/ds-react-internal@workspace:@navikt/internal/react":
+"@navikt/ds-react-internal@^2.7.8, @navikt/ds-react-internal@workspace:@navikt/internal/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
  dependencies:
-    "@navikt/ds-icons": ^2.7.7
-    "@navikt/ds-react": ^2.7.7
+    "@navikt/ds-icons": ^2.7.8
+    "@navikt/ds-react": ^2.7.8
    clsx: ^1.1.1
    concurrently: 7.2.1
    copy-to-clipboard: ^3.3.1
@@ -3508,12 +3508,13 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-react@2.7.7, @navikt/ds-react@^2.7.7, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@2.7.8, @navikt/ds-react@^2.7.8, @navikt/ds-react@workspace:@navikt/core/react":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-react@workspace:@navikt/core/react"
  dependencies:
    "@floating-ui/react": 0.17.0
-    "@navikt/ds-icons": ^2.7.7
+    "@navikt/aksel-icons": ^2.7.8
+    "@navikt/ds-icons": ^2.7.8
    "@radix-ui/react-tabs": 1.0.0
    "@radix-ui/react-toggle-group": 1.0.0
    "@testing-library/dom": 8.13.0
@@ -3549,11 +3550,11 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tailwind@^2.7.7, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^2.7.8, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
  dependencies:
-    "@navikt/ds-tokens": ^2.7.7
+    "@navikt/ds-tokens": ^2.7.8
    "@types/jest": ^29.0.0
    color: 4.2.3
    jest: ^29.0.0
@@ -3564,7 +3565,7 @@ __metadata:
  languageName: unknown
  linkType: soft

-"@navikt/ds-tokens@^2.7.7, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^2.7.8, @navikt/ds-tokens@workspace:@navikt/core/tokens":
  version: 0.0.0-use.local
  resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
  dependencies:
@@ -4216,19 +4217,19 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/block-tools@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/block-tools@npm:3.6.0"
+"@sanity/block-tools@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/block-tools@npm:3.7.0"
  dependencies:
    get-random-values-esm: ^1.0.0
    lodash: ^4.17.21
-  checksum: 23b1b37c1e6b1d8fb97c4a53762e6a050848cc110c40432a63f3de0c1f559b1ef393d6968b646d0599b60166f81544bb08e3959e4123ab91bc4a476210d03ea0
+  checksum: 59d8f588706e20f82842d1b4e2ad4f37c886ff703d61490f2bcca7e939b0e75351cfc03f50faae160a26897dada1a18960f1a4a49078c37921f1d25cb4183cbe
  languageName: node
  linkType: hard

-"@sanity/cli@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/cli@npm:3.6.0"
+"@sanity/cli@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/cli@npm:3.7.0"
  dependencies:
    "@babel/traverse": ^7.19.0
    chalk: ^4.1.2
@@ -4238,7 +4239,7 @@ __metadata:
    pkg-dir: ^5.0.0
  bin:
    sanity: bin/sanity
-  checksum: f38326d0c847a1da5db4806e64cfae64496049470b2a523993a0fab44335f07dbffe4e81c573d055eb2c77148617000be0a6f371af9e6c32843baa85e0be259a
+  checksum: 80b6a847cba44ed6ffbe7b26cb757c9f5161364807d511258ec54d022b103a5fb5a4dbb40d97ac068ea69493b7524e65dda55ad50ce38223d6a12ca8c6be2c19
  languageName: node
  linkType: hard

@@ -4254,7 +4255,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/client@npm:^5, @sanity/client@npm:^5.2.0, @sanity/client@npm:^5.2.2":
+"@sanity/client@npm:^5, @sanity/client@npm:^5.2.0":
  version: 5.2.2
  resolution: "@sanity/client@npm:5.2.2"
  dependencies:
@@ -4265,6 +4266,17 @@ __metadata:
  languageName: node
  linkType: hard

+"@sanity/client@npm:^5.3.0":
+  version: 5.3.0
+  resolution: "@sanity/client@npm:5.3.0"
+  dependencies:
+    "@sanity/eventsource": ^4
+    get-it: ^8
+    rxjs: ^7
+  checksum: 70b65340a3b3285c8176418e56ba24a54ce9248ba342f3dd94af4a367b071b02422689bc19a1efa7f6a88a35448879913a7e5f68791c3860f1a377cff782c5eb
+  languageName: node
+  linkType: hard
+
 "@sanity/code-input@npm:4.1.0":
  version: 4.1.0
  resolution: "@sanity/code-input@npm:4.1.0"
@@ -4330,12 +4342,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/diff@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/diff@npm:3.6.0"
+"@sanity/diff@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/diff@npm:3.7.0"
  dependencies:
    diff-match-patch: ^1.0.4
-  checksum: b7201aca6c2014a93a45d09137baf9ddcdb1f95fdbd688c5a6eea7cc83f83607e0880e620cf5b639b7a7059193bc72ec41abf8c6ec2630baf41cfe3c38b7769c
+  checksum: fed42573d0948866c5330d25cce9ca89c6a6695e01fa442a3d821bc8b17640d653ac492205691820e79c580bb551601c7a1f908652106b11772f32eddba62234
  languageName: node
  linkType: hard

@@ -4359,9 +4371,9 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/export@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/export@npm:3.6.0"
+"@sanity/export@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/export@npm:3.7.0"
  dependencies:
    archiver: ^5.0.0
    debug: ^3.2.7
@@ -4371,7 +4383,7 @@ __metadata:
    p-queue: ^2.3.0
    rimraf: ^3.0.2
    split2: ^3.2.2
-  checksum: 85ebebfa3cfca5dee6b417ef161a36f7d7fb3358fb83dedacb4090a80c17727fe68cecbdc1d4fade2c3fac67c612604c9e7b46c41b0c889c307daa5273b46c03
+  checksum: e94e804c772359142bf53f70cc8ac8b2aff6b192baa8f25b48bb5b5c614f46c56d9c13c1d65d55f3e1741043e69d1ce7852b83eca7785f034816912a878d8cca
  languageName: node
  linkType: hard

@@ -4455,13 +4467,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/import@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/import@npm:3.6.0"
+"@sanity/import@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/import@npm:3.7.0"
  dependencies:
    "@sanity/asset-utils": ^1.2.5
    "@sanity/generate-help-url": ^3.0.0
-    "@sanity/mutator": 3.6.0
+    "@sanity/mutator": 3.7.0
    "@sanity/uuid": ^3.0.1
    debug: ^3.2.7
    file-url: ^2.0.2
@@ -4477,7 +4489,7 @@ __metadata:
    rimraf: ^3.0.2
    split2: ^3.2.2
    tar-fs: ^2.1.1
-  checksum: 00dc83220abb3c8c3be202352f26e7ed871495dbb25cfa7f276c76aa0a1e6ac0bdeb01a5c989268e04d653734c45fa090ea41095061b847f9a3f0a97529f1ed6
+  checksum: c822527dc545d7b6c97b47210e1daf4f59adc223ac49fc4e55a86f0643d41821a499b6c7629f60c3c01c5011773beca9ba2f198bb4c128653db0a8ebe2527924
  languageName: node
  linkType: hard

@@ -4504,28 +4516,28 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/mutator@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/mutator@npm:3.6.0"
+"@sanity/mutator@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/mutator@npm:3.7.0"
  dependencies:
    "@sanity/uuid": ^3.0.1
    "@types/diff-match-patch": ^1.0.32
    debug: ^3.2.7
    diff-match-patch: ^1.0.4
    lodash: ^4.17.21
-  checksum: f8bc1e3e568f610c013e553ee718a376a5f86dbc5af90c00efc1442bee2f2345c13fddba7e1c0f1264e58815cb29e26aaa52e9c5ea53e30815dc033e766991ee
+  checksum: 803d5430a2fa6fb3fa0a14db1d7828dd4b23cecddea64a2edcfcf1aac0f92257fbdd931967c3ba61451106c6330d32e2ce83a3a665c8148434d50cd2211a4bc8
  languageName: node
  linkType: hard

-"@sanity/portable-text-editor@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/portable-text-editor@npm:3.6.0"
+"@sanity/portable-text-editor@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/portable-text-editor@npm:3.7.0"
  dependencies:
-    "@sanity/block-tools": 3.6.0
-    "@sanity/schema": 3.6.0
+    "@sanity/block-tools": 3.7.0
+    "@sanity/schema": 3.7.0
    "@sanity/slate-react": 2.30.1
-    "@sanity/types": 3.6.0
-    "@sanity/util": 3.6.0
+    "@sanity/types": 3.7.0
+    "@sanity/util": 3.7.0
    debug: ^3.2.7
    is-hotkey: ^0.1.6
    lodash: ^4.17.21
@@ -4534,7 +4546,7 @@ __metadata:
    react: ^16.9 || ^17 || ^18
    rxjs: ">=6.5.3 || ^7.0.0"
    styled-components: ^5.2
-  checksum: e5a183e1c026cedd6618d4766dd2f7296d4bc390873c3b6768b6ac876ce0a600a387c5faa11752f0cab88746e9c5072a7e102ea6cbddb92b792d822b77eb9609
+  checksum: f5022b20fc0655d0eeded3044b6b393842dbf3a4ee6bb310e16825cb473eabb781bdf876203457e1d5430724e93958efbb3196960768f610d870c8462970700b
  languageName: node
  linkType: hard

@@ -4566,18 +4578,18 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/schema@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/schema@npm:3.6.0"
+"@sanity/schema@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/schema@npm:3.7.0"
  dependencies:
    "@sanity/generate-help-url": ^3.0.0
-    "@sanity/types": 3.6.0
+    "@sanity/types": 3.7.0
    arrify: ^1.0.1
    humanize-list: ^1.0.1
    leven: ^3.1.0
    lodash: ^4.17.21
    object-inspect: ^1.6.0
-  checksum: 8d460f219a7156c49df1f7c1abf9a48505055fd37b28e7d401bfc15dc8dee84d55c7760beedce98e67a216e1e5f394ae3ae22e74ed0f79c029968af4534dbb89
+  checksum: 1fef448cf4a2e60e21ed586767cf4e155acb853cbbb97f383b68752b75c5c6bfe8e0cad91dabe0eb8bbc0152671fa4245163b5a391bfe2b1d6ef08524e0ff5db
  languageName: node
  linkType: hard

@@ -4623,13 +4635,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/types@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/types@npm:3.6.0"
+"@sanity/types@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/types@npm:3.7.0"
  dependencies:
    "@sanity/client": ^5.2.0
    "@types/react": ^18.0.25
-  checksum: b49e0d8264c7156a62641938aa0ac2158dc1600427d99e6277bbae6cd16f1953bd0862027fd785860ec06f7eecdf6395e57526f8dbe8a56b7c67f7b97cb2ae1f
+  checksum: 7a1b36d541eae3f53ac5694d1b4c4d3712d1aa4c974c1c1590e25aad9505a5574948d29a8394b7fec4dee754d9bb2ccf41fc11ee1cb88746dbb382b7d1c5f8c1
  languageName: node
  linkType: hard

@@ -4681,14 +4693,14 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/util@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/util@npm:3.6.0"
+"@sanity/util@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/util@npm:3.7.0"
  dependencies:
-    "@sanity/types": 3.6.0
+    "@sanity/types": 3.7.0
    get-random-values-esm: ^1.0.0
    moment: ^2.29.4
-  checksum: ab9f41e6a74b11025f3f0b1d80f13a3d908797f705ff629feb969b463525481d1d4e427017e4d619d4364d86425a55d3e275048979b75aee0fe10a6b81fb5c56
+  checksum: 416fd867f682f0632ae6ed64c73810715d9d1a1da867cfbc9f285db1494ec1e6056d3bd06b4d35e54b12c495cd864d6781f99907d3cd13b5cd5a1decfa9580d2
  languageName: node
  linkType: hard

@@ -4702,21 +4714,21 @@ __metadata:
  languageName: node
  linkType: hard

-"@sanity/validation@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/validation@npm:3.6.0"
+"@sanity/validation@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/validation@npm:3.7.0"
  dependencies:
-    "@sanity/types": 3.6.0
+    "@sanity/types": 3.7.0
    date-fns: ^2.26.1
    lodash: ^4.17.21
    rxjs: ^7.8.0
-  checksum: a6e185bf84b0096063658530087cadf4cd022ce82973aafe66285c811d760e6ae5e642c0edbebf3ae9f79a0cc4465a0329421ad31461e6499b6d60e9200945bd
+  checksum: c92653c94a786ce0b28ad33b2839462adaa8272fdaba6c6dc7b1c097b729fae6152156a126dfc31d0739b0cf41139f95b09432ccfa664d148199844bd275dfb5
  languageName: node
  linkType: hard

-"@sanity/vision@npm:3.6.0":
-  version: 3.6.0
-  resolution: "@sanity/vision@npm:3.6.0"
+"@sanity/vision@npm:3.7.0":
+  version: 3.7.0
+  resolution: "@sanity/vision@npm:3.7.0"
  dependencies:
    "@codemirror/autocomplete": ^6.1.0
    "@codemirror/commands": ^6.0.1
@@ -4739,7 +4751,7 @@ __metadata:
  peerDependencies:
    react: ^18
    styled-components: ^5.2
-  checksum: 64e15342b18fef02fe59a529c997aafa543b5a866d492db3521d1dd5bfec3ff376d69cb66a9ebf620e3e46b51e5519797269a91158f69bb20c7a5d75a01486b3
+  checksum: 8bdef2476dd5fd40ca17dddaf3e29375dba49dd16bded2448e283b4b5af624f9734294991f0020f723d844d4eb4ddff51a282c8f721ec2bb6e65605e14a65902
  languageName: node
  linkType: hard

@@ -7420,15 +7432,15 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "aksel.nav.no@workspace:aksel.nav.no"
  dependencies:
-    "@navikt/aksel-icons": ^2.7.7
-    "@navikt/ds-codemod": ^2.7.7
-    "@navikt/ds-css": ^2.7.7
-    "@navikt/ds-css-internal": ^2.7.7
-    "@navikt/ds-icons": ^2.7.7
-    "@navikt/ds-react": ^2.7.7
-    "@navikt/ds-react-internal": ^2.7.7
-    "@navikt/ds-tailwind": ^2.7.7
-    "@navikt/ds-tokens": ^2.7.7
+    "@navikt/aksel-icons": ^2.7.8
+    "@navikt/ds-codemod": ^2.7.8
+    "@navikt/ds-css": ^2.7.8
+    "@navikt/ds-css-internal": ^2.7.8
+    "@navikt/ds-icons": ^2.7.8
+    "@navikt/ds-react": ^2.7.8
+    "@navikt/ds-react-internal": ^2.7.8
+    "@navikt/ds-tailwind": ^2.7.8
+    "@navikt/ds-tokens": ^2.7.8
    prettier-plugin-tailwindcss: ^0.2.3
  languageName: unknown
  linkType: soft
@@ -21712,9 +21724,9 @@ __metadata:
  languageName: node
  linkType: hard

-"sanity@npm:3.6.0":
-  version: 3.6.0
-  resolution: "sanity@npm:3.6.0"
+"sanity@npm:3.7.0":
+  version: 3.7.0
+  resolution: "sanity@npm:3.7.0"
  dependencies:
    "@dnd-kit/core": ^6.0.5
    "@dnd-kit/modifiers": ^6.0.0
@@ -21726,26 +21738,26 @@ __metadata:
    "@rexxars/react-json-inspector": ^8.0.1
    "@sanity/asset-utils": ^1.2.5
    "@sanity/bifur-client": ^0.3.1
-    "@sanity/block-tools": 3.6.0
-    "@sanity/cli": 3.6.0
+    "@sanity/block-tools": 3.7.0
+    "@sanity/cli": 3.7.0
    "@sanity/client": ^5.2.0
    "@sanity/color": ^2.1.20
-    "@sanity/diff": 3.6.0
+    "@sanity/diff": 3.7.0
    "@sanity/eventsource": ^3.0.1
-    "@sanity/export": 3.6.0
+    "@sanity/export": 3.7.0
    "@sanity/generate-help-url": ^3.0.0
    "@sanity/icons": ^2.1.0
    "@sanity/image-url": ^1.0.2
-    "@sanity/import": 3.6.0
+    "@sanity/import": 3.7.0
    "@sanity/logos": ^2.0.2
-    "@sanity/mutator": 3.6.0
-    "@sanity/portable-text-editor": 3.6.0
-    "@sanity/schema": 3.6.0
-    "@sanity/types": 3.6.0
+    "@sanity/mutator": 3.7.0
+    "@sanity/portable-text-editor": 3.7.0
+    "@sanity/schema": 3.7.0
+    "@sanity/types": 3.7.0
    "@sanity/ui": ^1.2.0
-    "@sanity/util": 3.6.0
+    "@sanity/util": 3.7.0
    "@sanity/uuid": ^3.0.1
-    "@sanity/validation": 3.6.0
+    "@sanity/validation": 3.7.0
    "@tanstack/react-virtual": 3.0.0-beta.29
    "@types/is-hotkey": ^0.1.7
    "@types/react-copy-to-clipboard": ^5.0.2
@@ -21824,7 +21836,7 @@ __metadata:
    styled-components: ^5.2
  bin:
    sanity: bin/sanity
-  checksum: 7141aed91868405544fcdd1a1b31ddcee098756eca9fbf12b257f3ca92742cd4391f63a33e3a6cb7bd2df13934bd4524b50be7a423959054778b7a9b514f4c7e
+  checksum: b85e87d09556a1604084c690f4d27a515e84b40d1a3a8ffe25bd25f21070c0a561be43b8b409c1385c3aae874475ce5f8c979085e7e5ea50d0c2e12989743af2
  languageName: node
  linkType: hard

@@ -22016,8 +22028,8 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "shadow-dom@workspace:examples/shadow-dom"
  dependencies:
-    "@navikt/ds-css": 2.7.7
-    "@navikt/ds-react": 2.7.7
+    "@navikt/ds-css": 2.7.8
+    "@navikt/ds-react": 2.7.8
    "@types/react": ^18.0.0
    "@types/react-dom": ^18.0.0
    "@vitejs/plugin-react": ^2.1.0
@@ -24931,7 +24943,7 @@ __metadata:
    "@playwright/test": ^1.30.0
    "@sanity-codegen/types": 1.0.0-alpha.13
    "@sanity/block-content-to-react": ^3.0.0
-    "@sanity/client": ^5.2.2
+    "@sanity/client": ^5.3.0
    "@sanity/code-input": 4.1.0
    "@sanity/color-input": ^3.0.2
    "@sanity/icons": 2.2.2
@@ -24939,7 +24951,7 @@ __metadata:
    "@sanity/preview-kit": ^1.3.4
    "@sanity/table": 1.0.1
    "@sanity/ui": ^1.3.0
-    "@sanity/vision": 3.6.0
+    "@sanity/vision": 3.7.0
    "@svgr/webpack": ^5.5.0
    "@testing-library/jest-dom": ^5.16.0
    "@testing-library/react": ^13.3.0
@@ -24972,7 +24984,7 @@ __metadata:
    react-dom: ^18.0.0
    react-modal: 3.15.1
    recharts: ^2.2.0
-    sanity: 3.6.0
+    sanity: 3.7.0
    sanity-plugin-asset-source-unsplash: ^1.0.6
    sanity-plugin-iframe-pane: ^2.2.0
    sanity-plugin-media: ^2.0.5
Author	SHA1	Message	Date
github-actions[bot]andgithub-actions[bot]	bfe60a9a62	Version Packages (#1865 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2023-03-17 14:03:13 +01:00
Ken	33aef230b0	💄 Bedre grid-break i footer	2023-03-17 13:11:29 +01:00
Ken	88243f76de	💄 God-praksis header aligner med tema-liste på forside	2023-03-17 12:09:19 +01:00
Ken	c00112e3e6	♿ Accessible ExpansionCard-icon	2023-03-17 11:59:24 +01:00
Ken	3c66b00c24	♻️ Refaktorert ExpansionCard før release 💄 Mer spacing-bottom for content i small expansioncard 🔥 Fjernet clickarea-prop 🔥 Fjernet avatar-prop 💄 Header-title margin 💄 Chevron-alignment til toppen 📝 Fikset nextjs demoer	2023-03-17 11:49:17 +01:00
Ken	db8303af42	📝 Justert beta-tekster	2023-03-17 10:07:55 +01:00
Ken	5fbd2e1814	🎨 Kan nå tagge beta som unsafe	2023-03-17 09:46:41 +01:00
Ken	85697be305	🐛 Fikset demo-bug for expansioncard	2023-03-16 21:03:22 +01:00
Ken	36fb35533d	♻️ Bedre ikoner for expansioncard	2023-03-16 20:45:14 +01:00
Ken	3709e432bb	📝 Oppdatert ExpansionCard til å bruke bare section-element	2023-03-16 16:12:43 +01:00
Ken	c6077a03fa	🎨 Suggestion-lenker åpnes nå i ny fane	2023-03-16 15:42:02 +01:00
Ken	c6d51a0190	[Ny komponent] ExpansionCard (#1820 )	2023-03-16 15:40:30 +01:00