@navikt/ds-react 7.2.1 → 7.3.1

package/esm/util/i18n/locales/nn.js

@@ -0,0 +1,39 @@
+export default {
+    FileUpload: {
+        dropzone: {
+            button: "Vel fil",
+            buttonMultiple: "Vel filer",
+            dragAndDrop: "Dra og slepp fila her",
+            dragAndDropMultiple: "Dra og slepp filer her",
+            drop: "Slepp",
+            or: "eller",
+            disabled: "Filopplasting er deaktivert",
+            disabledFilelimit: "Du kan ikkje laste opp fleire filer",
+        },
+        item: {
+            retryButtonTitle: "Prøv å laste opp fila på nytt",
+            deleteButtonTitle: "Slett fila",
+            uploading: "Lastar opp…",
+            downloading: "Lastar ned…",
+        },
+    },
+    FormProgress: {
+        step: "Steg {activeStep} av {totalSteps}",
+        showAllSteps: "Vis alle steg",
+        hideAllSteps: "Skjul alle steg",
+    },
+    Alert: {
+        closeAlert: "Lukk varsel",
+        closeMessage: "Lukk melding",
+        error: "Feil",
+        info: "Informasjon",
+        success: "Suksess",
+        warning: "Åtvaring",
+    },
+    Chips: {
+        Removable: {
+            labelSuffix: "slett",
+        },
+    },
+};
+//# sourceMappingURL=nn.js.map

package/esm/util/i18n/locales/nn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,cAAc,EAAE,WAAW;YAC3B,WAAW,EAAE,uBAAuB;YACpC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,qCAAqC;SACzD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,+BAA+B;YACjD,iBAAiB,EAAE,YAAY;YAC/B,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,OAAO;SACrB;KACF;CACqB,CAAC"}

package/esm/util/requireReactElement.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const requireReactElement: <T extends React.ReactNode>(children: T) => T;

package/esm/util/requireReactElement.js

@@ -0,0 +1,15 @@
+import React from "react";
+export const requireReactElement = (children) => {
+    const isReactElement = React.isValidElement(children);
+    if (!isReactElement) {
+        throw Error(`Expected a single React Element child, but got: ${React.Children.toArray(children)
+            .map((child) => typeof child === "object" &&
+            "type" in child &&
+            typeof child.type === "string"
+            ? child.type
+            : typeof child)
+            .join(", ")}`);
+    }
+    return children;
+};
+//# sourceMappingURL=requireReactElement.js.map

package/esm/util/requireReactElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"requireReactElement.js","sourceRoot":"","sources":["../../src/util/requireReactElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,QAAW,EACR,EAAE;IACL,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEtD,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,MAAM,KAAK,CACT,mDAAmD,KAAK,CAAC,QAAQ,CAAC,OAAO,CACvE,QAAQ,CACT;aACE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACb,OAAO,KAAK,KAAK,QAAQ;YACzB,MAAM,IAAI,KAAK;YACf,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ;YAC5B,CAAC,CAAC,KAAK,CAAC,IAAI;YACZ,CAAC,CAAC,OAAO,KAAK,CACjB;aACA,IAAI,CAAC,IAAI,CAAC,EAAE,CAChB,CAAC;IACJ,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}

package/esm/util/virtualfocus/Context.d.ts

@@ -29,7 +29,7 @@ export declare const VirtualFocusInternalContextProvider: import("react").Forwar
     loop: boolean;
     uniqueId: string;
 } & {
-    children: React.ReactNode;
+    children: import("react").ReactNode;
 } & import("react").RefAttributes<unknown>>, useVirtualFocusInternalContext: <S extends boolean = true>(strict?: S) => S extends true ? {
     virtualFocusIdx: number;
     setVirtualFocusIdx: Dispatch<SetStateAction<number>>;

package/esm/util/virtualfocus/parts/VirtualFocusContent.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
-export interface VirtualFocusContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
-}
+export type VirtualFocusContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id">;
 export declare const VirtualFocusContent: React.ForwardRefExoticComponent<VirtualFocusContentProps & React.RefAttributes<HTMLDivElement>>;

package/esm/util/virtualfocus/parts/VirtualFocusContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualFocusContent.js","sourceRoot":"","sources":["../../../../src/util/virtualfocus/parts/VirtualFocusContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAqB,EAAE,GAAG,EAAE,EAAE;QAA9B,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAnB,YAAqB,CAAF;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,8BAA8B,EAAE,CAAC;IACtD,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,EAAE,EAAE,gBAAgB,QAAQ,UAAU,KAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"VirtualFocusContent.js","sourceRoot":"","sources":["../../../../src/util/virtualfocus/parts/VirtualFocusContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAO5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAqB,EAAE,GAAG,EAAE,EAAE;QAA9B,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAnB,YAAqB,CAAF;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,8BAA8B,EAAE,CAAC;IACtD,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,EAAE,EAAE,gBAAgB,QAAQ,UAAU,KAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.2.1",
+  "version": "7.3.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -50,6 +50,16 @@
         "default": "./cjs/accordion/index.js"
       }
     },
+    "./ActionMenu": {
+      "import": {
+        "types": "./esm/overlays/action-menu/index.d.ts",
+        "default": "./esm/overlays/action-menu/index.js"
+      },
+      "require": {
+        "types": "./cjs/overlays/action-menu/index.d.ts",
+        "default": "./cjs/overlays/action-menu/index.js"
+      }
+    },
     "./Alert": {
       "import": {
         "types": "./esm/alert/index.d.ts",
@@ -594,8 +604,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.2.1",
-    "@navikt/ds-tokens": "^7.2.1",
+    "@navikt/aksel-icons": "^7.3.1",
+    "@navikt/ds-tokens": "^7.3.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"
@@ -605,9 +615,7 @@
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.2.0",
-    "@types/faker": "5.5.8",
-    "concurrently": "7.2.1",
-    "faker": "5.5.3",
+    "concurrently": "9.0.1",
     "fast-glob": "3.2.11",
     "jsdom": "24.0.0",
     "react-dom": "^18.0.0",
@@ -616,7 +624,7 @@
     "swr": "^1.1.2",
     "tsc-alias": "1.8.8",
     "tsx": "^4.19.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
     "vitest": "^1.2.2"
   },
   "peerDependencies": {

package/src/accordion/AccordionHeader.tsx

@@ -38,7 +38,6 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         <span className="navds-accordion__icon-wrapper">
           <ChevronDownIcon
             className="navds-accordion__header-chevron"
-            title="Vis mer"
             aria-hidden
           />
         </span>

package/src/alert/Alert.tsx

@@ -9,6 +9,7 @@ import {
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { BodyLong } from "../typography";
+import { useI18n } from "../util/i18n/i18n.context";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -54,25 +55,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
 }
 
-const Icon = ({ variant, ...props }) => {
-  switch (variant) {
-    case "error":
-      return <XMarkOctagonFillIcon title="Feil" {...props} />;
-    case "warning":
-      return <ExclamationmarkTriangleFillIcon title="Advarsel" {...props} />;
-    case "info":
-      return <InformationSquareFillIcon title="Informasjon" {...props} />;
-    case "success":
-      return <CheckmarkCircleFillIcon title="Suksess" {...props} />;
-    default:
-      return null;
-  }
+const IconMap = {
+  error: XMarkOctagonFillIcon,
+  warning: ExclamationmarkTriangleFillIcon,
+  info: InformationSquareFillIcon,
+  success: CheckmarkCircleFillIcon,
 };
 
-export interface AlertContextProps {
-  size: "medium" | "small";
-}
-
 /**
  * A component for displaying alerts
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/alert)
@@ -98,6 +87,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
     },
     ref,
   ) => {
+    const translate = useI18n("Alert");
+    const Icon = IconMap[variant];
     return (
       <div
         {...rest}
@@ -114,7 +105,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
           },
         )}
       >
-        <Icon variant={variant} className="navds-alert__icon" />
+        <Icon title={translate(variant)} className="navds-alert__icon" />
         <BodyLong
           as="div"
           size={size}
@@ -137,8 +128,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
                 <XMarkIcon
                   title={
                     ["error", "warning"].includes(variant)
-                      ? "Lukk varsel"
-                      : "Lukk melding"
+                      ? translate("closeAlert")
+                      : translate("closeMessage")
                   }
                 />
               }

package/src/chips/Removable.tsx

@@ -2,6 +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";
 
 export interface ChipsRemovableProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,15 +12,15 @@ export interface ChipsRemovableProps
    * @default "action"
    */
   variant?: "action" | "neutral";
-  /**
-   * Replaces label read for screen-readers
-   * @default "slett filter"
-   */
-  removeLabel?: string;
   /**
    * Click callback
    */
   onDelete?: () => void;
+  /**
+   * Replaces label read for screen-readers
+   * @default "slett"
+   */
+  removeLabel?: string;
 }
 
 export const RemovableChips = forwardRef<
@@ -28,17 +29,18 @@ export const RemovableChips = forwardRef<
 >(
   (
     {
-      className,
       children,
       variant = "action",
-      removeLabel = "slett",
       onDelete,
-      type = "button",
+      removeLabel,
+      className,
       onClick,
+      type = "button",
       ...rest
     },
     ref,
   ) => {
+    const translate = useI18n("Chips");
     return (
       <button
         {...rest}
@@ -49,7 +51,9 @@ export const RemovableChips = forwardRef<
           className,
           `navds-chips__removable--${variant}`,
         )}
-        aria-label={`${children} ${removeLabel}`}
+        aria-label={`${children} ${
+          removeLabel ?? translate("Removable.labelSuffix")
+        }`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>

package/src/date/datepicker/DatePicker.tsx

@@ -27,8 +27,8 @@ interface DatePickerComponent
    * ```jsx
    * <DatePicker.Standalone
    *   dropdownCaption
-   *   fromDate={new Date("2020-10-01")}
-   *   toDate={new Date("2024-10-01")}
+   *   fromDate={new Date("2022-10-01")}
+   *   toDate={new Date("2026-10-01")}
    * />
    * ```
    */

package/src/date/monthpicker/MonthPicker.tsx

@@ -19,8 +19,8 @@ interface MonthPickerComponent
    * ```jsx
    * <MonthPicker.Standalone
    *   dropdownCaption
-   *   fromDate={new Date("1 Oct 2020")}
-   *   toDate={new Date("1 Oct 2024")}
+   *   fromDate={new Date("1 Oct 2022")}
+   *   toDate={new Date("1 Oct 2026")}
    * />
    * ```
    */

package/src/form/checkbox/Checkbox.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import faker from "faker";
 import React from "react";
 import { describe, expect, test, vi } from "vitest";
 import { Checkbox, CheckboxGroup } from ".";
@@ -10,8 +9,8 @@ const firstArgumentOfFirstCall = (fn: ReturnType<typeof vi.fn>) =>
 test("checkbox group chains onChange calls", async () => {
   const onGroupChange = vi.fn();
   const onChange = vi.fn();
-  const value = faker.datatype.string();
-  const label = faker.datatype.string();
+  const value = "Checkbox value";
+  const label = "My pretty label";
 
   render(
     <CheckboxGroup legend="legend" onChange={onGroupChange}>

package/src/form/combobox/Input/Input.tsx

@@ -253,7 +253,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         type="text"
         role="combobox"
         value={value}
-        onBlur={composeEventHandlers(onBlur, virtualFocus.moveFocusToTop)}
+        onBlur={composeEventHandlers(onBlur, virtualFocus.resetFocus)}
         onClick={() => {
           setHideCaret(!!maxSelected?.isLimitReached);
           value !== searchTerm && onChange(value);

package/src/form/combobox/types.ts

@@ -45,7 +45,9 @@ export interface ComboboxProps
    */
   allowNewValues?: boolean;
   /**
-   * If `true` adds a button to clear the value in the input field
+   * Adds a button to clear the input value when not empty.
+   * NB: Will not clear selected values.
+   * @default true
    */
   clearButton?: boolean;
   /**

package/src/form/confirmation-panel/ConfirmationPanel.test.tsx

@@ -1,11 +1,10 @@
 import { render, screen } from "@testing-library/react";
-import faker from "faker";
 import React from "react";
 import { expect, test } from "vitest";
 import { ConfirmationPanel } from ".";
 
 test("omits error id from input", async () => {
-  const label = faker.datatype.string();
+  const label = "My label";
 
   render(<ConfirmationPanel label={label} errorId="wat"></ConfirmationPanel>);
 

package/src/form/radio/Radio.test.tsx

@@ -1,14 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import faker from "faker";
 import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { Radio, RadioGroup } from ".";
 
-const value1 = faker.datatype.string();
-const label1 = faker.datatype.string();
-const value2 = faker.datatype.string();
-const label2 = faker.datatype.string();
+const value1 = "My first value";
+const label1 = "World's best radio label";
+const value2 = "Life changing value";
+const label2 = "Radio label of the year";
 
 const Group = (props) => (
   <RadioGroup {...props} legend="legend">

package/src/index.ts

@@ -1,5 +1,6 @@
 "use client";
 export { Accordion, type AccordionProps } from "./accordion";
+export { ActionMenu, type ActionMenuProps } from "./overlays/action-menu";
 export { Alert, type AlertProps } from "./alert";
 export { Button, type ButtonProps } from "./button";
 export { Chat, type ChatProps } from "./chat";

package/src/layout/base/BasePrimitive.tsx

@@ -5,6 +5,9 @@ import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export type PrimitiveProps = {
+  /**
+   * @private Hides prop from documentation
+   */
   className?: string;
   /**
    * Padding around children.

package/src/layout/box/Box.tsx

@@ -19,42 +19,41 @@ import {
   SurfaceColorToken,
 } from "../utilities/types";
 
-export type BoxProps = PrimitiveProps &
-  PrimitiveAsChildProps &
-  React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * CSS `background-color` property.
-     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
-     */
-    background?: BackgroundColorToken | SurfaceColorToken;
-    /**
-     * CSS `border-color` property.
-     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
-     */
-    borderColor?: BorderColorToken;
-    /**
-     * CSS `border-radius` property.
-     * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
-     * or an object of radius tokens for different breakpoints.
-     * @example
-     * borderRadius='full'
-     * borderRadius='0 full large small'
-     * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
-     */
-    borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
-    /**
-     * CSS `border-width` property. If this is not set there will be no border.
-     * @example
-     * borderWidth='2'
-     * borderWidth='1 2 3 4'
-     */
-    borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-    /** Shadow on box. Accepts a shadow token.
-     * @example
-     * shadow='small'
-     */
-    shadow?: ShadowToken;
-  };
+export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * CSS `background-color` property.
+   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   */
+  background?: BackgroundColorToken | SurfaceColorToken;
+  /**
+   * CSS `border-color` property.
+   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   */
+  borderColor?: BorderColorToken;
+  /**
+   * CSS `border-radius` property.
+   * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
+   * or an object of radius tokens for different breakpoints.
+   * @example
+   * borderRadius='full'
+   * borderRadius='0 full large small'
+   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   */
+  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  /**
+   * CSS `border-width` property. If this is not set there will be no border.
+   * @example
+   * borderWidth='2'
+   * borderWidth='1 2 3 4'
+   */
+  borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
+  /** Shadow on box. Accepts a shadow token.
+   * @example
+   * shadow='small'
+   */
+  shadow?: ShadowToken;
+} & PrimitiveProps &
+  PrimitiveAsChildProps;
 
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.

package/src/layout/grid/HGrid.tsx

@@ -10,33 +10,32 @@ import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export type HGridProps = PrimitiveProps &
-  PrimitiveAsChildProps &
-  React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
-     * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
-     * @example
-     * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-     * columns={3}
-     * columns="repeat(3, minmax(0, 1fr))"
-     */
-    columns?: ResponsiveProp<number | string>;
-    /**
-     * Spacing between columns.
-     * 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?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
-    /**
-     * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
-     */
-    align?: "start" | "center" | "end";
-  };
+export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
+   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+   * @example
+   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+   * columns={3}
+   * columns="repeat(3, minmax(0, 1fr))"
+   */
+  columns?: ResponsiveProp<number | string>;
+  /**
+   * Spacing between columns.
+   * 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?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+  /**
+   * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+   */
+  align?: "start" | "center" | "end";
+} & PrimitiveProps &
+  PrimitiveAsChildProps;
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *