diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
index e58a132e3f..3c7c2f2f9f 100644
--- a/packages/react/src/components/Accordion/Accordion.tsx
+++ b/packages/react/src/components/Accordion/Accordion.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 export type AccordionProps = {
   /** Accordion background color */
diff --git a/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
index 7fb2e00b98..5690ff2f0e 100644
--- a/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
+++ b/packages/react/src/components/Accordion/AccordionContent/AccordionContent.tsx
@@ -1,4 +1,4 @@
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import type { ReactNode, HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 
diff --git a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
index 859ca0cd75..89490fb00e 100644
--- a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
+++ b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
@@ -1,5 +1,5 @@
 import { ChevronDownIcon } from '@navikt/aksel-icons';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import type { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 
diff --git a/packages/react/src/components/Accordion/AccordionItem/AccordionItem.tsx b/packages/react/src/components/Accordion/AccordionItem/AccordionItem.tsx
index 16637bbe89..61e932409f 100644
--- a/packages/react/src/components/Accordion/AccordionItem/AccordionItem.tsx
+++ b/packages/react/src/components/Accordion/AccordionItem/AccordionItem.tsx
@@ -1,4 +1,4 @@
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import type { ReactNode, HTMLAttributes } from 'react';
 import { createContext, forwardRef, useState, useId } from 'react';
 
diff --git a/packages/react/src/components/Alert/Alert.tsx b/packages/react/src/components/Alert/Alert.tsx
index 3c9fddb1c9..c87e3dc158 100644
--- a/packages/react/src/components/Alert/Alert.tsx
+++ b/packages/react/src/components/Alert/Alert.tsx
@@ -6,7 +6,7 @@ import {
   XMarkOctagonFillIcon,
   ExclamationmarkTriangleFillIcon,
 } from '@navikt/aksel-icons';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { Paragraph } from '..';
 import { getSize } from '../../utilities/getSize';
diff --git a/packages/react/src/components/Divider/Divider.tsx b/packages/react/src/components/Divider/Divider.tsx
index fd91f26377..a15f897c4b 100644
--- a/packages/react/src/components/Divider/Divider.tsx
+++ b/packages/react/src/components/Divider/Divider.tsx
@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
 export type DividerProps = {
diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
index 32ae9495f0..a5fbeca496 100644
--- a/packages/react/src/components/HelpText/HelpText.tsx
+++ b/packages/react/src/components/HelpText/HelpText.tsx
@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react';
 import { useState } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import type { Placement } from '@floating-ui/utils';
 
 import { Popover } from '../Popover';
diff --git a/packages/react/src/components/List/ListItem.tsx b/packages/react/src/components/List/ListItem.tsx
index 1c01cb0768..a155621af4 100644
--- a/packages/react/src/components/List/ListItem.tsx
+++ b/packages/react/src/components/List/ListItem.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import type { LiHTMLAttributes } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
 export type ListItemProps = {
diff --git a/packages/react/src/components/List/Lists.tsx b/packages/react/src/components/List/Lists.tsx
index f24c7b7bca..7f5a175cd8 100644
--- a/packages/react/src/components/List/Lists.tsx
+++ b/packages/react/src/components/List/Lists.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes, OlHTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
 import { Paragraph } from '../Typography';
diff --git a/packages/react/src/components/Popover/PopoverContent.tsx b/packages/react/src/components/Popover/PopoverContent.tsx
index 5d3995b77e..a3c09b5d60 100644
--- a/packages/react/src/components/Popover/PopoverContent.tsx
+++ b/packages/react/src/components/Popover/PopoverContent.tsx
@@ -15,7 +15,7 @@ import {
   useMergeRefs,
   useRole,
 } from '@floating-ui/react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { Paragraph } from '../Typography';
 import { useIsomorphicLayoutEffect } from '../../hooks';
diff --git a/packages/react/src/components/Skeleton/Circle/Circle.tsx b/packages/react/src/components/Skeleton/Circle/Circle.tsx
index 6c11ea7734..4b2e114cb3 100644
--- a/packages/react/src/components/Skeleton/Circle/Circle.tsx
+++ b/packages/react/src/components/Skeleton/Circle/Circle.tsx
@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { useSynchronizedAnimation } from '../../../hooks';
 
diff --git a/packages/react/src/components/Skeleton/Rectangle/Rectangle.tsx b/packages/react/src/components/Skeleton/Rectangle/Rectangle.tsx
index c95048c32c..0ee64b9797 100644
--- a/packages/react/src/components/Skeleton/Rectangle/Rectangle.tsx
+++ b/packages/react/src/components/Skeleton/Rectangle/Rectangle.tsx
@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { useSynchronizedAnimation } from '../../../hooks';
 
diff --git a/packages/react/src/components/Skeleton/Text/Text.tsx b/packages/react/src/components/Skeleton/Text/Text.tsx
index 2a2b568442..8983adbc95 100644
--- a/packages/react/src/components/Skeleton/Text/Text.tsx
+++ b/packages/react/src/components/Skeleton/Text/Text.tsx
@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { useSynchronizedAnimation } from '../../../hooks';
 
diff --git a/packages/react/src/components/SkipLink/SkipLink.tsx b/packages/react/src/components/SkipLink/SkipLink.tsx
index 1bcbce6d3d..748cb7f3f8 100644
--- a/packages/react/src/components/SkipLink/SkipLink.tsx
+++ b/packages/react/src/components/SkipLink/SkipLink.tsx
@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ReactNode } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 export type SkipLinkProps = {
   /** The content to display inside the skiplink. */
diff --git a/packages/react/src/components/Tabs/Tab/Tab.tsx b/packages/react/src/components/Tabs/Tab/Tab.tsx
index ccd7654765..c90b778fb4 100644
--- a/packages/react/src/components/Tabs/Tab/Tab.tsx
+++ b/packages/react/src/components/Tabs/Tab/Tab.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { RovingTabindexItem } from '../../../utilities/RovingTabIndex';
 
diff --git a/packages/react/src/components/Tabs/TabList/TabList.tsx b/packages/react/src/components/Tabs/TabList/TabList.tsx
index 196462d65d..92985c806f 100644
--- a/packages/react/src/components/Tabs/TabList/TabList.tsx
+++ b/packages/react/src/components/Tabs/TabList/TabList.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { RovingTabindexRoot } from '../../../utilities/RovingTabIndex';
 
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx b/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx
index 39c5e00319..529650ddda 100644
--- a/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx
+++ b/packages/react/src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import type { ButtonProps } from '../../Button';
 import { Button } from '../../Button';
diff --git a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
index d41dbd7bef..eabb2999e2 100644
--- a/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
+++ b/packages/react/src/components/Typography/ErrorMessage/ErrorMessage.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
 import { getSize } from '../../../utilities/getSize';
diff --git a/packages/react/src/components/Typography/Heading/Heading.tsx b/packages/react/src/components/Typography/Heading/Heading.tsx
index 9b5fbb4294..675d0ab1d5 100644
--- a/packages/react/src/components/Typography/Heading/Heading.tsx
+++ b/packages/react/src/components/Typography/Heading/Heading.tsx
@@ -1,6 +1,6 @@
 import type { ElementType, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
 import { getSize } from '../../../utilities/getSize';
diff --git a/packages/react/src/components/Typography/Ingress/Ingress.tsx b/packages/react/src/components/Typography/Ingress/Ingress.tsx
index cb0804dfb0..99c214cddb 100644
--- a/packages/react/src/components/Typography/Ingress/Ingress.tsx
+++ b/packages/react/src/components/Typography/Ingress/Ingress.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
 import { getSize } from '../../../utilities/getSize';
diff --git a/packages/react/src/components/Typography/Label/Label.tsx b/packages/react/src/components/Typography/Label/Label.tsx
index 5313b5274c..99e31f6411 100644
--- a/packages/react/src/components/Typography/Label/Label.tsx
+++ b/packages/react/src/components/Typography/Label/Label.tsx
@@ -1,6 +1,6 @@
 import type { LabelHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
 import { getSize } from '../../../utilities/getSize';
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
index e100911a48..5dc2d3bfca 100644
--- a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
 import { getSize } from '../../../utilities/getSize';
diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
index 63903eadcf..e4352bcc83 100644
--- a/packages/react/src/components/form/Fieldset/Fieldset.tsx
+++ b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -1,6 +1,6 @@
 import type { FieldsetHTMLAttributes, ReactNode } from 'react';
 import { useContext, forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 
 import { Label, Paragraph, ErrorMessage } from '../../Typography';
diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.tsx b/packages/react/src/components/form/NativeSelect/NativeSelect.tsx
index b133062242..3aae147537 100644
--- a/packages/react/src/components/form/NativeSelect/NativeSelect.tsx
+++ b/packages/react/src/components/form/NativeSelect/NativeSelect.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import type { ForwardedRef, ReactNode, SelectHTMLAttributes } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 
 import { omit } from '../../../utilities';
diff --git a/packages/react/src/components/form/Radio/Group/Group.tsx b/packages/react/src/components/form/Radio/Group/Group.tsx
index e9010c754b..0b9e755bb7 100644
--- a/packages/react/src/components/form/Radio/Group/Group.tsx
+++ b/packages/react/src/components/form/Radio/Group/Group.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { forwardRef, createContext, useId } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import type { FieldsetProps } from '../../Fieldset';
 import { Fieldset } from '../../Fieldset';
diff --git a/packages/react/src/components/form/Radio/Radio.tsx b/packages/react/src/components/form/Radio/Radio.tsx
index 531f947c56..dd2871e162 100644
--- a/packages/react/src/components/form/Radio/Radio.tsx
+++ b/packages/react/src/components/form/Radio/Radio.tsx
@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { omit } from '../../../utilities';
 import { Label, Paragraph } from '../../Typography';
diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
index dd90bb23e1..e0a4bba85a 100644
--- a/packages/react/src/components/form/Search/Search.tsx
+++ b/packages/react/src/components/form/Search/Search.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode, InputHTMLAttributes, ChangeEvent } from 'react';
 import { forwardRef, useCallback, useRef, useState } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { MagnifyingGlassIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '@floating-ui/react';
 
diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
index c747471a7f..e6dac992b0 100644
--- a/packages/react/src/components/form/Textarea/Textarea.tsx
+++ b/packages/react/src/components/form/Textarea/Textarea.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode, TextareaHTMLAttributes } from 'react';
 import { useState, forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 
 import { omit } from '../../../utilities';
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
index 09138d420b..e7c69af994 100644
--- a/packages/react/src/components/form/Textfield/Textfield.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import { useState, useId, forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 
 import { omit } from '../../../utilities';
diff --git a/packages/react/src/components/form/useFormField.ts b/packages/react/src/components/form/useFormField.ts
index f2170d6eb1..5d6971c6a7 100644
--- a/packages/react/src/components/form/useFormField.ts
+++ b/packages/react/src/components/form/useFormField.ts
@@ -1,6 +1,6 @@
 import { useContext, useId } from 'react';
 import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { getSize } from '../../utilities/getSize';
 
@@ -79,12 +79,12 @@ export const useFormField = (
       disabled,
       'aria-invalid': hasError ? true : undefined,
       'aria-describedby':
-        cl(props['aria-describedby'], {
-          [descriptionId]:
-            !!props?.description && typeof props?.description === 'string',
-          [errorId]: hasError && !fieldset?.error,
-          [fieldset?.errorId ?? '']: hasError && !!fieldset?.error,
-        }) || undefined,
+        cl(
+          props['aria-describedby'],
+          (!!props?.description && typeof props?.description === 'string') && descriptionId,
+          (hasError && !fieldset?.error) && errorId,
+          (hasError && !!fieldset?.error) && fieldset?.errorId,
+        ) || undefined,
     },
   };
 };
diff --git a/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx b/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
index b0b12a5c24..2884f64625 100644
--- a/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
+++ b/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 import type * as React from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
 import { useMediaQuery, usePrevious } from '../../hooks';