chore: update clsx import (#2049)

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 */

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';
 

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';
 

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';
 

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';

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 = {

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';

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 = {

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';

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';

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';
 

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';
 

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';
 

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. */

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';
 

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';
 

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';

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';

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';

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';

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';

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';

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';

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';

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';

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';

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';
 

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';

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';

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,
     },
   };
 };

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';