@navikt/ds-react 7.9.0 → 7.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.9.0",
+  "version": "7.9.2",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -603,10 +603,11 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "docgen": "yarn tsx ../../../scripts/docgen.ts",
+    "docgen": "tsx ../../../scripts/docgen.ts",
+    "i18n-jsdoc": "tsx ./scripts/addJsdocToLocales.ts",
     "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
     "clean": "rimraf cjs esm",
-    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" ",
+    "build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC vitest run -c tests/vitest.config.ts",
     "test:watch": "vitest watch"
@@ -614,20 +615,23 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.9.0",
-    "@navikt/ds-tokens": "^7.9.0",
+    "@navikt/aksel-icons": "^7.9.2",
+    "@navikt/ds-tokens": "^7.9.2",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "^5.16.0",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.2.0",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jscodeshift": "^0.11.11",
+    "aksel": "workspace:^",
     "concurrently": "9.0.1",
     "fast-glob": "3.2.11",
-    "jsdom": "24.0.0",
+    "jscodeshift": "^0.15.1",
+    "jsdom": "25.0.1",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "6.0.1",
@@ -635,7 +639,7 @@
     "tsc-alias": "1.8.8",
     "tsx": "^4.19.1",
     "typescript": "5.5.4",
-    "vitest": "^1.2.2"
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.30",
@@ -645,5 +649,6 @@
     "@types/react": {
       "optional": true
     }
-  }
+  },
+  "_comment": "The 'aksel' dependency tells yarn to install the root deps when installing deps for this package. Helps make it possible to contribute without access to GPR."
 }

package/src/alert/Alert.tsx

@@ -9,7 +9,7 @@ import {
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { BodyLong } from "../typography";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**

package/src/chips/Removable.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface ChipsRemovableProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/copybutton/CopyButton.tsx

@@ -10,7 +10,7 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {

package/src/date/context/useDateTranslationContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "../../util/create-context";
-import { TFunction } from "../../util/i18n/i18n.context";
+import { TFunction } from "../../util/i18n/i18n.types";
 
 interface DateTranslationContextProps {
   translate: TFunction<"DatePicker">;

package/src/date/datepicker/DatePicker.tsx

@@ -5,7 +5,7 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import { DateInputContext, DateTranslationContextProvider } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -3,7 +3,7 @@ import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import { DateTranslationContextProvider } from "../context";
 import { getLocaleFromString, getTranslations } from "../utils";
 import Caption from "./parts/Caption";

package/src/date/datepicker/datepicker.test.tsx

@@ -1,4 +1,4 @@
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, test } from "vitest";
@@ -23,9 +23,6 @@ describe("Render datepicker", () => {
   test("Should not crash when e.target is window", async () => {
     render(<App />);
 
-    // eslint-disable-next-line testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
-    await act(async () => {
-      await userEvent.click(screen.getByText("Velg dato"));
-    });
+    await userEvent.click(screen.getByText("Velg dato"));
   });
 });

package/src/date/hooks/useDatepicker.tsx

@@ -1,7 +1,7 @@
 import { differenceInCalendarDays, isWeekend } from "date-fns";
 import React, { useCallback, useState } from "react";
 import { DayClickEventHandler, isMatch } from "react-day-picker";
-import { useDateLocale } from "../../util/i18n/i18n.context";
+import { useDateLocale } from "../../util/i18n/i18n.hooks";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {

package/src/date/hooks/useMonthPicker.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { useDateLocale } from "../../util/i18n/i18n.context";
+import { useDateLocale } from "../../util/i18n/i18n.hooks";
 import { MonthPickerProps } from "../monthpicker/types";
 import { DateInputProps } from "../parts/DateInput";
 import {

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -1,5 +1,4 @@
-/* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
-import { act, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
@@ -29,10 +28,8 @@ describe("Writing in input sets correct values", () => {
 
     const fraInput = screen.getByRole("textbox", { name: "Fra" });
     const tilInput = screen.getByRole("textbox", { name: "Til" });
-    await act(async () => {
-      await userEvent.type(fraInput, "03.08.2022");
-      await userEvent.type(tilInput, "03.08.2022");
-    });
+    await userEvent.type(fraInput, "03.08.2022");
+    await userEvent.type(tilInput, "03.08.2022");
     const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({
@@ -47,10 +44,8 @@ describe("Writing in input sets correct values", () => {
 
     const fraInput = screen.getByRole("textbox", { name: "Fra" });
     const tilInput = screen.getByRole("textbox", { name: "Til" });
-    await act(async () => {
-      await userEvent.type(fraInput, "03.08.2022");
-      await userEvent.type(tilInput, "02.08.2022");
-    });
+    await userEvent.type(fraInput, "03.08.2022");
+    await userEvent.type(tilInput, "02.08.2022");
     const res = screen.getByTitle("res");
     expect(res.innerHTML).toEqual(
       JSON.stringify({

package/src/date/hooks/useRangeDatepicker.tsx

@@ -5,7 +5,7 @@ import {
 } from "date-fns";
 import React, { useState } from "react";
 import { DateRange, isMatch } from "react-day-picker";
-import { useDateLocale } from "../../util/i18n/i18n.context";
+import { useDateLocale } from "../../util/i18n/i18n.hooks";
 import { DatePickerProps } from "../datepicker/DatePicker";
 import { DateInputProps } from "../parts/DateInput";
 import {

package/src/date/monthpicker/MonthPicker.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import {
   DateInputContext,
   DateTranslationContextProvider,

package/src/date/monthpicker/MonthPickerStandalone.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
 import { DayPickerProvider } from "react-day-picker";
-import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.hooks";
 import {
   DateTranslationContextProvider,
   SharedMonthProvider,

package/src/date/parts/DateWrapper.tsx

@@ -5,7 +5,8 @@ import { Modal } from "../../modal";
 import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
-import { TFunction, useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
+import { TFunction } from "../../util/i18n/i18n.types";
 import { getGlobalTranslations } from "../utils";
 
 const variantToLabel = {

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { ExpansionCardContext } from "./context";
 
 export interface ExpansionCardHeaderProps

package/src/form/ReadOnlyIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const ReadOnlyIcon = () => (
   <PadlockLockedFillIcon

package/src/form/combobox/FilteredOptions/AddNewOption.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React from "react";
 import { PlusIcon } from "@navikt/aksel-icons";
 import { BodyShort, Label } from "../../../typography";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";

package/src/form/combobox/FilteredOptions/LoadingMessage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Loader } from "../../../loader";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 

package/src/form/combobox/FilteredOptions/MaxSelectedMessage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../../../util/i18n/i18n.context";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import filteredOptionsUtil from "./filtered-options-util";

package/src/form/error-summary/ErrorSummary.tsx

@@ -3,7 +3,7 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -5,7 +5,7 @@ import { Button } from "../../../../button";
 import { BodyShort, ErrorMessage, Label } from "../../../../typography";
 import { composeEventHandlers } from "../../../../util/composeEventHandlers";
 import { useId } from "../../../../util/hooks";
-import { useI18n } from "../../../../util/i18n/i18n.context";
+import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { omit } from "../../../../util/omit";
 import { useFormField } from "../../../useFormField";
 import { useFileUploadTranslation } from "../../FileUpload.context";

package/src/form/file-upload/parts/item/Item.tsx

@@ -3,7 +3,7 @@ import React, { MouseEvent, forwardRef } from "react";
 import { ExclamationmarkTriangleIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
-import { useI18n } from "../../../../util/i18n/i18n.context";
+import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
 import { useFileUploadTranslation } from "../../FileUpload.context";
 import { FileItem } from "./Item.types";

package/src/form/form-progress/FormProgress.tsx

@@ -6,7 +6,7 @@ import { HStack } from "../../layout/stack";
 import { ProgressBar } from "../../progress-bar";
 import { Stepper, StepperStepProps } from "../../stepper";
 import { BodyShort } from "../../typography";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../util/i18n/i18n.types";
 
 export interface FormProgressProps

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { Link } from "../../link";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { OverridableComponent } from "../../util/types";
 
 export interface FormSummaryEditProps

package/src/form/search/Search.tsx

@@ -11,7 +11,7 @@ import { useThemeInternal } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";

package/src/form/search/SearchButton.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps

package/src/form/textarea/TextareaCounter.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { useEffect, useState } from "react";
 import { BodyShort } from "../../typography";
 import debounce from "../../util/debounce";
-import { useI18n } from "../../util/i18n/i18n.context";
+import { useI18n } from "../../util/i18n/i18n.hooks";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {

package/src/guide-panel/Illustration.darkside.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const DarksideGudiepanelIllustration = () => {
   const translate = useI18n("GuidePanel");

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 
 export const DefaultIllustration = () => {
   const translate = useI18n("GuidePanel");

package/src/help-text/HelpText.tsx

@@ -4,7 +4,7 @@ import { Popover, PopoverProps } from "../popover";
 import { useThemeInternal } from "../theme/Theme";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { useI18n } from "../util/i18n/i18n.context";
+import { useI18n } from "../util/i18n/i18n.hooks";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps

package/src/layout/base/BasePrimitive.tsx

@@ -15,8 +15,8 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * padding='4'
-   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * padding='space-16'
+   * padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
    */
   padding?: ResponsiveProp<SpacingScale>;
   /**
@@ -24,9 +24,9 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * 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='space-16'
+   * paddingInline='space-16 space-20'
+   * paddingInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
    */
   paddingInline?: ResponsiveProp<
     SpacingScale | `${SpacingScale} ${SpacingScale}`
@@ -36,9 +36,9 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * 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='space-16'
+   * paddingBlock='space-16 space-20'
+   * paddingBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
    */
   paddingBlock?: ResponsiveProp<
     SpacingScale | `${SpacingScale} ${SpacingScale}`
@@ -48,8 +48,8 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * margin='4'
-   * margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * margin='space-16'
+   * margin={{xs: '0', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
    */
   margin?: ResponsiveProp<SpacingScale>;
   /**
@@ -57,9 +57,9 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * marginInline='4'
-   * marginInline='4 5'
-   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   * marginInline='space-16'
+   * marginInline='space-16 space-20'
+   * marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
    */
   marginInline?: ResponsiveProp<
     | SpacingScale
@@ -73,9 +73,9 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * marginBlock='4'
-   * marginBlock='4 5'
-   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * marginBlock='space-16'
+   * marginBlock='space-16 space-20'
+   * marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
    */
   marginBlock?: ResponsiveProp<
     | SpacingScale
@@ -119,9 +119,9 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * inset='4'
-   * inset='4 5'
-   * inset={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   * inset='space-16'
+   * inset='space-16 space-20'
+   * inset={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}
    */
   inset?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
   /**
@@ -129,8 +129,8 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * top='4'
-   * top={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * top='space-16'
+   * top={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
    */
   top?: ResponsiveProp<SpacingScale>;
   /**
@@ -138,8 +138,8 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * right='4'
-   * right={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * right='space-16'
+   * right={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
    */
   right?: ResponsiveProp<SpacingScale>;
   /**
@@ -147,8 +147,8 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * bottom='4'
-   * bottom={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * bottom='space-16'
+   * bottom={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
    */
   bottom?: ResponsiveProp<SpacingScale>;
   /**
@@ -156,8 +156,8 @@ export type PrimitiveProps = {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * left='4'
-   * left={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * left='space-16'
+   * left={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
    */
   left?: ResponsiveProp<SpacingScale>;
   /**

package/src/layout/bleed/Bleed.tsx

@@ -18,9 +18,9 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * The `full` value is used to extend the margin to the full width of the parent.
    *
    * @example
-   * marginInline='4'
-   * marginInline='4 5'
-   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6', "2xl": '12'}}
+   * marginInline='space-16'
+   * marginInline='space-16 space-20'
+   * marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
    */
   marginInline?: ResponsiveProp<
     BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`
@@ -34,9 +34,9 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * This prop does **not** accept the `full` value.
    *
    * @example
-   * marginBlock='4'
-   * marginBlock='4 5'
-   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6', "2xl": '12'}}
+   * marginBlock='space-16'
+   * marginBlock='space-16 space-20'
+   * marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24', "2xl": 'space-32'}}
    */
   marginBlock?: ResponsiveProp<
     BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`

package/src/layout/box/Box.darkside.tsx

@@ -4,9 +4,9 @@ import type {
   BorderColorKeys,
   BorderColorWithRoleKeys,
   BorderRadiusKeys,
-  DefaultBgKeys,
   ShadowKeys,
   StaticBgKeys,
+  StaticDefaultBgKeys,
 } from "@navikt/ds-tokens/types";
 import { Slot } from "../../slot/Slot";
 import { omit } from "../../util";
@@ -23,9 +23,9 @@ export type BoxNewProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * CSS `background-color` property.
    * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
-   * @see {@link DefaultBgKeys} and {@link StaticBgKeys}
+   * @see {@link StaticDefaultBgKeys} and {@link StaticBgKeys}
    */
-  background?: DefaultBgKeys | StaticBgKeys;
+  background?: StaticDefaultBgKeys | StaticBgKeys;
   /**
    * CSS `border-color` property.
    * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).

package/src/layout/grid/HGrid.tsx

@@ -26,9 +26,9 @@ export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
    * or an object of spacing tokens for different breakpoints.
    * @example
-   * gap="6"
-   * gap="8 4"
-   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+   * gap="space-20"
+   * gap="space-32 space-16"
+   * gap={{ sm: "space-8", md: "space-12", lg: "space-20", xl: "space-24"}}
    */
   gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
   /**

package/src/layout/stack/Stack.tsx

@@ -47,9 +47,9 @@ export type StackProps = HTMLAttributes<HTMLDivElement> & {
    * or an object of spacing tokens for different breakpoints.
    *
    * @example
-   * gap='4'
-   * gap='8 4'
-   * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * gap='space-16'
+   * gap='space-32 space-16'
+   * gap={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}
    */
   gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
   /**