@digdir/designsystemet-react 1.20.1 → 1.21.1

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2024 Digitaliseringsdirektoratet (Digdir)
+Copyright Digitaliseringsdirektoratet (Digdir)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/cjs/components/avatar/avatar.d.cts

@@ -28,6 +28,7 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
    * The shape of the avatar.
    *
    * @default 'circle'
+   * @deprecated Please use `style={{ '--dsc-avatar-radius': VALUE }}` instead
    */
   variant?: 'circle' | 'square';
   /**

package/dist/cjs/components/avatar-stack/avatar-stack.cjs

@@ -19,23 +19,21 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *   <Avatar aria-label='name' initials='sm' />
 * </EXPERIMENTAL_AvatarStack>
 */
-const EXPERIMENTAL_AvatarStack = (0, react.forwardRef)(function AvatarStack({ className, gap, suffix, avatarSize, overlap, expandable, children, ...rest }, ref) {
-	const style = {
-		...rest.style || {},
-		"--dsc-avatar-stack-gap": gap !== void 0 ? `${gap}` : void 0,
-		"--dsc-avatar-stack-size": avatarSize ? `${avatarSize}` : void 0,
-		"--dsc-avatar-stack-overlap": overlap !== void 0 ? `${overlap}` : void 0,
-		"--dsc-avatar-count": expandable === "fixed" ? react.Children.count(children) : void 0
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		tabIndex: rest.tabIndex !== void 0 ? rest.tabIndex : expandable ? 0 : void 0,
-		ref,
+const EXPERIMENTAL_AvatarStack = (0, react.forwardRef)(function AvatarStack({ className, gap, suffix, children, avatarSize, overlap, style, expandable, ...rest }, ref) {
+	if (typeof overlap === "number") overlap = `calc(var(--dsc-avatar-stack-size) / 100 * ${overlap})`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
 		className: (0, clsx_lite.default)(`ds-avatar-stack`, className),
-		style,
-		"data-expandable": expandable,
-		"data-suffix": suffix,
+		"data-expandable": expandable || void 0,
+		tabIndex: rest.tabIndex ?? (expandable ? 0 : void 0),
+		ref,
+		style: {
+			"--dsc-avatar-stack-gap": gap,
+			"--dsc-avatar-stack-size": avatarSize,
+			"--dsc-avatar-stack-overlap": overlap,
+			...style
+		},
 		...rest,
-		children
+		children: [children, suffix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: suffix })]
 	});
 });
 //#endregion

package/dist/cjs/components/avatar-stack/avatar-stack.d.cts

@@ -5,20 +5,24 @@ type AvatarStackProps = {
   /**
    *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
    *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
    */
   gap?: string;
   /**
    *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
    *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
    */
   avatarSize?: string;
   /**
    *  A number which represents the percentage value of how much avatars should overlap.
    *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
    */
-  overlap?: number;
+  overlap?: number | string;
   /**
    *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
    */
   suffix?: string;
   /**
@@ -26,8 +30,8 @@ type AvatarStackProps = {
    *  'fixed': AvatarStack physical width does not change when avatars are expanded.
    *  @default undefined
    */
-  expandable?: 'fixed' | true;
-} & HTMLAttributes<HTMLSpanElement>;
+  expandable?: 'fixed' | boolean;
+} & HTMLAttributes<HTMLUListElement>;
 /**
  * Use `AvatarStack` to constrain Avatars into a stack.
  *
@@ -46,20 +50,24 @@ declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponen
   /**
    *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
    *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
    */
   gap?: string;
   /**
    *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
    *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
    */
   avatarSize?: string;
   /**
    *  A number which represents the percentage value of how much avatars should overlap.
    *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
    */
-  overlap?: number;
+  overlap?: number | string;
   /**
    *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
    */
   suffix?: string;
   /**
@@ -67,7 +75,7 @@ declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponen
    *  'fixed': AvatarStack physical width does not change when avatars are expanded.
    *  @default undefined
    */
-  expandable?: "fixed" | true;
-} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+  expandable?: "fixed" | boolean;
+} & HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
 //#endregion
 export { AvatarStackProps, EXPERIMENTAL_AvatarStack };

package/dist/cjs/components/breadcrumbs/breadcrumbs-link.d.cts

@@ -4,7 +4,7 @@ import { LinkProps } from "../link/link.cjs";
 import "../../index.cjs";
 //#region src/components/breadcrumbs/breadcrumbs-link.d.ts
 type BreadcrumbsLinkProps = LinkProps;
-declare const BreadcrumbsLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "asChild"> & {
+declare const BreadcrumbsLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
   children: import("react").ReactNode;
   asChild?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/cjs/components/card/card.d.cts

@@ -29,7 +29,7 @@ type CardProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-declare const Card: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "variant"> & {
+declare const Card: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "children" | "variant"> & {
   /**
    * Change the background color of the card.
    *

package/dist/cjs/components/dialog/dialog.d.cts

@@ -71,7 +71,7 @@ type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDialogElem
  *   Content
  * </Dialog>
  */
-declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "placement" | "closedby" | "onClose" | "open" | "closeButton" | "modal"> & {
+declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "closedby" | "onClose" | "open" | "closeButton" | "placement" | "modal"> & {
   /**
    * Screen reader label of close button. Set false to hide the close button.
    * @default 'Lukk dialogvindu'

package/dist/cjs/components/error-summary/error-summary-link.d.cts

@@ -14,7 +14,7 @@ type ErrorSummaryLinkProps = LinkProps;
  *   </ErrorSummaryItem>
  * </ErrorSummary>
  */
-declare const ErrorSummaryLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "asChild"> & {
+declare const ErrorSummaryLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
   children: import("react").ReactNode;
   asChild?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/cjs/components/link/link.d.cts

@@ -21,7 +21,7 @@ type LinkProps = MergeRight<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElemen
  * @example
  * <Link href='#'>Link</Link>
  */
-declare const Link: import("react").ForwardRefExoticComponent<Omit<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "asChild"> & {
+declare const Link: import("react").ForwardRefExoticComponent<Omit<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
   /**
    * The content to display inside the link.
    **/

package/dist/cjs/components/popover/popover.d.cts

@@ -62,7 +62,7 @@ type PopoverProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *   Content
  * </Popover>
  */
-declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "placement" | "onClose" | "open" | "onOpen" | "autoPlacement"> & {
+declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "onClose" | "open" | "placement" | "onOpen" | "autoPlacement"> & {
   /**
    * id to connect the trigger with the popover - required when not using Popover.Context.
    */

package/dist/cjs/components/tabs/tabs.d.cts

@@ -37,7 +37,7 @@ type TabsProps = MergeRight<DefaultProps & Omit<HTMLAttributes<DSTabElement>, 'o
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
  */
-declare const Tabs: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<HTMLAttributes<DSTabElement>, "onChange" | "value">, "defaultValue" | "onChange" | "value"> & {
+declare const Tabs: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<HTMLAttributes<DSTabElement>, "value" | "onChange">, "value" | "defaultValue" | "onChange"> & {
   /**
    * Controlled state for `Tabs` component
    * @default undefined

package/dist/cjs/components/tooltip/tooltip.d.cts

@@ -54,7 +54,7 @@ type TooltipProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *  Hover me
  * </Tooltip>
  */
-declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "content" | "type" | "placement" | "open" | "autoPlacement"> & {
+declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "content" | "children" | "type" | "open" | "placement" | "autoPlacement"> & {
   /**
    * The element or string that triggers the tooltip.
    *

package/dist/cjs/utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.d.cts

@@ -1,6 +1,6 @@
 
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 //#region src/utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.d.ts
-declare const useIsomorphicLayoutEffect: typeof useEffect;
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 //#endregion
 export { useIsomorphicLayoutEffect };

package/dist/cjs/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.cts

@@ -1,5 +1,5 @@
 
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 //#region src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.ts
 /**
  * Synchronizes the css animation of multiple elements with the same `animationName`.

package/dist/esm/components/avatar/avatar.d.ts

@@ -28,6 +28,7 @@ type AvatarProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, Ar
    * The shape of the avatar.
    *
    * @default 'circle'
+   * @deprecated Please use `style={{ '--dsc-avatar-radius': VALUE }}` instead
    */
   variant?: 'circle' | 'square';
   /**

package/dist/esm/components/avatar-stack/avatar-stack.d.ts

@@ -5,20 +5,24 @@ type AvatarStackProps = {
   /**
    *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
    *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
    */
   gap?: string;
   /**
    *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
    *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
    */
   avatarSize?: string;
   /**
    *  A number which represents the percentage value of how much avatars should overlap.
    *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
    */
-  overlap?: number;
+  overlap?: number | string;
   /**
    *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
    */
   suffix?: string;
   /**
@@ -26,8 +30,8 @@ type AvatarStackProps = {
    *  'fixed': AvatarStack physical width does not change when avatars are expanded.
    *  @default undefined
    */
-  expandable?: 'fixed' | true;
-} & HTMLAttributes<HTMLSpanElement>;
+  expandable?: 'fixed' | boolean;
+} & HTMLAttributes<HTMLUListElement>;
 /**
  * Use `AvatarStack` to constrain Avatars into a stack.
  *
@@ -46,20 +50,24 @@ declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponen
   /**
    *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
    *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
    */
   gap?: string;
   /**
    *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
    *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
    */
   avatarSize?: string;
   /**
    *  A number which represents the percentage value of how much avatars should overlap.
    *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
    */
-  overlap?: number;
+  overlap?: number | string;
   /**
    *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
    */
   suffix?: string;
   /**
@@ -67,7 +75,7 @@ declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponen
    *  'fixed': AvatarStack physical width does not change when avatars are expanded.
    *  @default undefined
    */
-  expandable?: "fixed" | true;
-} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+  expandable?: "fixed" | boolean;
+} & HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
 //#endregion
 export { AvatarStackProps, EXPERIMENTAL_AvatarStack };

package/dist/esm/components/avatar-stack/avatar-stack.js

@@ -1,7 +1,7 @@
 'use client';
 import cl from "clsx/lite";
-import { Children, forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar-stack/avatar-stack.tsx
 /**
 * Use `AvatarStack` to constrain Avatars into a stack.
@@ -17,23 +17,21 @@ import { jsx } from "react/jsx-runtime";
 *   <Avatar aria-label='name' initials='sm' />
 * </EXPERIMENTAL_AvatarStack>
 */
-const EXPERIMENTAL_AvatarStack = forwardRef(function AvatarStack({ className, gap, suffix, avatarSize, overlap, expandable, children, ...rest }, ref) {
-	const style = {
-		...rest.style || {},
-		"--dsc-avatar-stack-gap": gap !== void 0 ? `${gap}` : void 0,
-		"--dsc-avatar-stack-size": avatarSize ? `${avatarSize}` : void 0,
-		"--dsc-avatar-stack-overlap": overlap !== void 0 ? `${overlap}` : void 0,
-		"--dsc-avatar-count": expandable === "fixed" ? Children.count(children) : void 0
-	};
-	return /* @__PURE__ */ jsx("span", {
-		tabIndex: rest.tabIndex !== void 0 ? rest.tabIndex : expandable ? 0 : void 0,
-		ref,
+const EXPERIMENTAL_AvatarStack = forwardRef(function AvatarStack({ className, gap, suffix, children, avatarSize, overlap, style, expandable, ...rest }, ref) {
+	if (typeof overlap === "number") overlap = `calc(var(--dsc-avatar-stack-size) / 100 * ${overlap})`;
+	return /* @__PURE__ */ jsxs("ul", {
 		className: cl(`ds-avatar-stack`, className),
-		style,
-		"data-expandable": expandable,
-		"data-suffix": suffix,
+		"data-expandable": expandable || void 0,
+		tabIndex: rest.tabIndex ?? (expandable ? 0 : void 0),
+		ref,
+		style: {
+			"--dsc-avatar-stack-gap": gap,
+			"--dsc-avatar-stack-size": avatarSize,
+			"--dsc-avatar-stack-overlap": overlap,
+			...style
+		},
 		...rest,
-		children
+		children: [children, suffix && /* @__PURE__ */ jsx("li", { children: suffix })]
 	});
 });
 //#endregion

package/dist/esm/components/breadcrumbs/breadcrumbs-link.d.ts

@@ -4,7 +4,7 @@ import { LinkProps } from "../link/link.js";
 import "../../index.js";
 //#region src/components/breadcrumbs/breadcrumbs-link.d.ts
 type BreadcrumbsLinkProps = LinkProps;
-declare const BreadcrumbsLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "asChild"> & {
+declare const BreadcrumbsLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
   children: import("react").ReactNode;
   asChild?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/esm/components/card/card.d.ts

@@ -29,7 +29,7 @@ type CardProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *  <Card.Block>Footer</Card.Block>
  * </Card>
  */
-declare const Card: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "asChild" | "variant"> & {
+declare const Card: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "children" | "variant"> & {
   /**
    * Change the background color of the card.
    *

package/dist/esm/components/dialog/dialog.d.ts

@@ -71,7 +71,7 @@ type DialogProps = MergeRight<DefaultProps & DialogHTMLAttributes<HTMLDialogElem
  *   Content
  * </Dialog>
  */
-declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "placement" | "closedby" | "onClose" | "open" | "closeButton" | "modal"> & {
+declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DefaultProps & DialogHTMLAttributes<HTMLDialogElement>, "asChild" | "closedby" | "onClose" | "open" | "closeButton" | "placement" | "modal"> & {
   /**
    * Screen reader label of close button. Set false to hide the close button.
    * @default 'Lukk dialogvindu'

package/dist/esm/components/error-summary/error-summary-link.d.ts

@@ -14,7 +14,7 @@ type ErrorSummaryLinkProps = LinkProps;
  *   </ErrorSummaryItem>
  * </ErrorSummary>
  */
-declare const ErrorSummaryLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "asChild"> & {
+declare const ErrorSummaryLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
   children: import("react").ReactNode;
   asChild?: boolean;
 } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/esm/components/link/link.d.ts

@@ -21,7 +21,7 @@ type LinkProps = MergeRight<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElemen
  * @example
  * <Link href='#'>Link</Link>
  */
-declare const Link: import("react").ForwardRefExoticComponent<Omit<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "asChild"> & {
+declare const Link: import("react").ForwardRefExoticComponent<Omit<DefaultProps & AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
   /**
    * The content to display inside the link.
    **/

package/dist/esm/components/popover/popover.d.ts

@@ -62,7 +62,7 @@ type PopoverProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *   Content
  * </Popover>
  */
-declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "placement" | "onClose" | "open" | "onOpen" | "autoPlacement"> & {
+declare const Popover: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "asChild" | "id" | "variant" | "onClose" | "open" | "placement" | "onOpen" | "autoPlacement"> & {
   /**
    * id to connect the trigger with the popover - required when not using Popover.Context.
    */

package/dist/esm/components/tabs/tabs.d.ts

@@ -37,7 +37,7 @@ type TabsProps = MergeRight<DefaultProps & Omit<HTMLAttributes<DSTabElement>, 'o
  *   <Tabs.Panel value='3'>content 3</Tabs.Panel>
  * </Tabs>
  */
-declare const Tabs: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<HTMLAttributes<DSTabElement>, "onChange" | "value">, "defaultValue" | "onChange" | "value"> & {
+declare const Tabs: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<HTMLAttributes<DSTabElement>, "value" | "onChange">, "value" | "defaultValue" | "onChange"> & {
   /**
    * Controlled state for `Tabs` component
    * @default undefined

package/dist/esm/components/tooltip/tooltip.d.ts

@@ -54,7 +54,7 @@ type TooltipProps = MergeRight<DefaultProps & HTMLAttributes<HTMLDivElement>, {
  *  Hover me
  * </Tooltip>
  */
-declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "children" | "content" | "type" | "placement" | "open" | "autoPlacement"> & {
+declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLDivElement>, "content" | "children" | "type" | "open" | "placement" | "autoPlacement"> & {
   /**
    * The element or string that triggers the tooltip.
    *

package/dist/esm/utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.d.ts

@@ -1,6 +1,6 @@
 
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 //#region src/utilities/hooks/deprecated/use-isomorphic-layout-effect/use-isomorphic-layout-effect.d.ts
-declare const useIsomorphicLayoutEffect: typeof useEffect;
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 //#endregion
 export { useIsomorphicLayoutEffect };

package/dist/esm/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.ts

@@ -1,5 +1,5 @@
 
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 //#region src/utilities/hooks/use-synchronized-animation/use-synchronized-animation.d.ts
 /**
  * Synchronizes the css animation of multiple elements with the same `animationName`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.20.1",
+  "version": "1.21.1",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -42,29 +42,29 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "@floating-ui/react": "0.26.23",
-    "@navikt/aksel-icons": "^8.16.1",
+    "@navikt/aksel-icons": "^8.16.2",
     "@radix-ui/react-slot": "^1.3.3",
-    "@tanstack/react-virtual": "^3.14.9",
+    "@tanstack/react-virtual": "^3.14.10",
     "clsx": "^2.1.1",
-    "@digdir/designsystemet-types": "1.20.1",
-    "@digdir/designsystemet-web": "1.20.1"
+    "@digdir/designsystemet-types": "1.21.1",
+    "@digdir/designsystemet-web": "1.21.1"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "10.5.8",
-    "@storybook/addon-vitest": "10.5.8",
-    "@storybook/react-vite": "10.5.8",
+    "@storybook/addon-docs": "10.6.0",
+    "@storybook/addon-vitest": "10.6.0",
+    "@storybook/react-vite": "10.6.0",
     "@testing-library/jest-dom": "7.0.1",
-    "@testing-library/react": "16.3.2",
-    "@testing-library/user-event": "14.6.4",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.7",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.7",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-dropzone": "19.3.0",
-    "storybook": "10.5.8",
+    "storybook": "10.6.0",
     "tsdown": "0.22.14",
     "typescript": "6.0.3",
-    "@digdir/designsystemet-css": "^1.20.1"
+    "@digdir/designsystemet-css": "^1.21.1"
   },
   "scripts": {
     "build": "tsdown",