@helsenorge/designsystem-react 15.4.0 → 15.5.1

package/lib/Input.js

@@ -10,7 +10,7 @@ import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
 import { t as MaxCharacters } from "./MaxCharacters.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Input/styles.module.scss";
@@ -48,7 +48,7 @@ var getInputMaxWidth = (characters, hasIcon, iconSize) => {
 	return `calc(${characters * 12}px + ${paddingWidth} + ${iconWidth} + 4px)`;
 };
 var Input = (props) => {
-	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, inputContainerRef, resources, ref, ...rest } = props;
+	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, inputContainerRef, resources, ref, value, ...rest } = props;
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
 	const mergedResources = {
 		...getResources(language),
@@ -57,9 +57,10 @@ var Input = (props) => {
 	const breakpoint = useBreakpoint();
 	const inputContainerRefLocal = useRef(null);
 	const inputId = useIdWithFallback(inputIdProp);
-	const [input, setInput] = useState(defaultValue || "");
+	const [input, setInput] = useState(value ?? defaultValue ?? "");
 	const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);
 	const [prevValue, setPrevValue] = useState(void 0);
+	const [prevControlledValue, setPrevControlledValue] = useState(value);
 	const numKeyPressed = useRef(false);
 	const errorTextId = useIdWithFallback(errorTextIdProp);
 	const numRegex = /^[0-9]$/;
@@ -67,14 +68,18 @@ var Input = (props) => {
 		setPrevDefaultValue(defaultValue);
 		setInput(defaultValue || "");
 	}
+	if (value !== prevControlledValue) {
+		setPrevControlledValue(value);
+		if (value !== void 0) setInput(value);
+	}
 	const onDark = onColor === FormOnColor.ondark;
 	const onBlueberry = onColor === FormOnColor.onblueberry;
 	const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;
 	const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;
 	const isLarge = size === FormSize.large;
 	const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;
-	const inputWrapperClass = cn(styles["input-wrapper"], className);
-	const inputContainer = cn(styles["input-container"], {
+	const inputWrapperClass = classNames(styles["input-wrapper"], className);
+	const inputContainer = classNames(styles["input-container"], {
 		[styles["input-container--transparent"]]: isTransparent,
 		[styles["input-container--on-blueberry"]]: onBlueberry,
 		[styles["input-container--on-dark"]]: onDark,
@@ -83,7 +88,7 @@ var Input = (props) => {
 		[styles["input-container--with-icon"]]: icon,
 		[styles["input-container--with-icon--right"]]: icon && iconRight
 	});
-	const inputClass = cn(styles["input-container__input"], {
+	const inputClass = classNames(styles["input-container__input"], {
 		[styles["input-container__input--large"]]: isLarge,
 		[styles["input-container__input--disabled"]]: disabled
 	});
@@ -163,6 +168,7 @@ var Input = (props) => {
 								name,
 								type,
 								defaultValue,
+								value,
 								id: inputId,
 								className: inputClass,
 								ref,

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setInput(defaultValue || '');\n  }\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    value,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(value ?? defaultValue ?? '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const [prevControlledValue, setPrevControlledValue] = useState<string | number | readonly string[] | undefined>(value);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setInput(defaultValue || '');\n  }\n\n  if (value !== prevControlledValue) {\n    setPrevControlledValue(value);\n\n    if (value !== undefined) {\n      setInput(value);\n    }\n  }\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              value={value}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/LazyIcon.js

@@ -22,6 +22,7 @@ var LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/ArrowRight.tsx": () => import("./components/Icons/ArrowRight.js"),
 		"../Icons/ArrowUp.tsx": () => import("./components/Icons/ArrowUp.js"),
 		"../Icons/ArrowUpRight.tsx": () => import("./components/Icons/ArrowUpRight.js"),
+		"../Icons/ArrowUpRightLight.tsx": () => import("./components/Icons/ArrowUpRightLight.js"),
 		"../Icons/Attachment.tsx": () => import("./components/Icons/Attachment.js"),
 		"../Icons/Atv.tsx": () => import("./components/Icons/Atv.js"),
 		"../Icons/Avatar.tsx": () => import("./components/Icons/Avatar.js"),

package/lib/LazyIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIcon.js","names":[],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":"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"}
+{"version":3,"file":"LazyIcon.js","names":[],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":"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"}

package/lib/LazyIllustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIllustration.js","names":[],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;;AAgBA,IAAa,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,kBAAoC,SAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE;GAAM,GAAG;EAAM,CAAC;EAE/D,OAAO,WAA4B,wCAAA,uBAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,qCAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,2DAAA,OAAA;GAAA,iEAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,iDAAA,OAAA;GAAA,kDAAA,OAAA;GAAA,wDAAA,OAAA;GAAA,uDAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,gDAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;EAAA,CAAA,GAAA,oBAAA,qBAAA,OAAA,CAAA,CAAsD;CAC3F;CAEA,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,IAAI,GAAG,CAAC,kBAAkB,IAAI,CAAC;CAGzG,IAFqB,gBAEjB,GACF,OAAO;CAGT,MAAM,WACJ,oBAAC,OAAD;EACE,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;EAAK;EACzC,OAAO;EACP,QAAQ;CACT,CAAA;CAGH,OACE,oBAAC,eAAD;EAAyB;EAAU,OAAO;YACxC,oBAAC,UAAD;GAAoB;aAClB,oBAAC,sBAAD;IAA4B;IAAoB;IAAM,GAAI;GAAO,CAAA;EACzD,CAAA;CACG,CAAA;AAEnB;;;ACjDA,IAAA,2BAAe"}
+{"version":3,"file":"LazyIllustration.js","names":[],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;;AAgBA,IAAa,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,kBAAoC,SAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE;GAAM,GAAG;EAAM,CAAC;EAE/D,OAAO,WAA4B,wCAAA,uBAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,qCAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,2DAAA,OAAA;GAAA,iEAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,iDAAA,OAAA;GAAA,kDAAA,OAAA;GAAA,wDAAA,OAAA;GAAA,uDAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,gDAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;EAAA,CAAA,GAAA,oBAAA,qBAAA,OAAA,CAAA,CAAsD;CAC3F;CAEA,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,IAAI,GAAG,CAAC,kBAAkB,IAAI,CAAC;CAGzG,IAFqB,gBAEjB,GACF,OAAO;CAGT,MAAM,WACJ,oBAAC,OAAD;EACE,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;EAAK;EACzC,OAAO;EACP,QAAQ;CACT,CAAA;CAGH,OACE,oBAAC,eAAD;EAAyB;EAAU,OAAO;EACxC,UAAA,oBAAC,UAAD;GAAoB;GAClB,UAAA,oBAAC,sBAAD;IAA4B;IAAoB;IAAM,GAAI;GAAO,CAAA;EACzD,CAAA;CACG,CAAA;AAEnB;;;ACjDA,IAAA,2BAAe"}

package/lib/LinkList.js

@@ -1,11 +1,11 @@
 import { AnalyticsId, LanguageLocales } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
-import ArrowUpRight from "./components/Icons/ArrowUpRight.js";
 import { useLanguage } from "./hooks/useLanguage.js";
 import { i as renderElementHeader } from "./ElementHeader.js";
 import { n as listEditModeWrapperClassnames, t as ListEditMode_default } from "./ListEditMode.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
-import cn from "classnames";
+import ArrowUpRight from "./components/Icons/ArrowUpRight.js";
+import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import LinkListStyles from "./components/LinkList/styles.module.scss";
@@ -29,12 +29,12 @@ var Link = (props) => {
 	const isFillNegative = variant === "fill-negative";
 	const isOutline = variant === "outline";
 	const isLine = variant === "line";
-	const liClasses = cn(LinkListStyles["link-list"], {
+	const liClasses = classNames(LinkListStyles["link-list"], {
 		[LinkListStyles["link-list__list-item--line"]]: isLine,
 		[LinkListStyles["link-list__list-item--outline"]]: isOutline,
 		[LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline
 	});
-	const linkClasses = cn(LinkListStyles["link-list__anchor"], LinkListStyles[`link-list__anchor--${color}`], {
+	const linkClasses = classNames(LinkListStyles["link-list__anchor"], LinkListStyles[`link-list__anchor--${color}`], {
 		[LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,
 		[LinkListStyles["link-list__anchor--fill"]]: isFill,
 		[LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,
@@ -46,7 +46,7 @@ var Link = (props) => {
 		[LinkListStyles["link-list__anchor--button"]]: htmlMarkup === "button",
 		[LinkListStyles["link-list__anchor--new"]]: status === "new"
 	}, className);
-	const statusMarkerClasses = cn(LinkListStyles["link-list__status-marker"], { [LinkListStyles["link-list__status-marker--new"]]: status === "new" });
+	const statusMarkerClasses = classNames(LinkListStyles["link-list__status-marker"], { [LinkListStyles["link-list__status-marker--new"]]: status === "new" });
 	const imageContainer = /* @__PURE__ */ jsx("span", {
 		className: LinkListStyles["link-list__image-container"],
 		children: image
@@ -114,42 +114,45 @@ var LinkListComponent = (props) => {
 		...getResources(language),
 		...resources
 	};
+	const listClassNames = classNames(LinkListStyles["link-list"], className, {
+		[LinkListStyles[`link-list--outline--${color}`]]: variant === "outline",
+		[listEditModeWrapperClassnames]: editMode
+	});
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
-		className: cn(LinkListStyles["link-list"], className, {
-			[LinkListStyles[`link-list--outline--${color}`]]: variant === "outline",
-			[listEditModeWrapperClassnames]: editMode
-		}),
+		className: listClassNames,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.LinkList,
 		children: React.Children.map(children, (child, index) => {
-			if (React.isValidElement(child) && child.type === Link) if (editMode) {
-				const deleteAriaLabel = child.props.resources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;
-				const itemId = `linklist-item-${index}`;
-				return /* @__PURE__ */ jsx(ListEditMode_default, {
-					color,
-					variant,
-					onDelete: child.props.onDelete,
-					contentId: itemId,
-					deleteButtonAriaLabel: deleteAriaLabel,
-					children: React.cloneElement(child, {
+			if (React.isValidElement(child) && child.type === Link) {
+				if (editMode) {
+					const deleteAriaLabel = child.props.resources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;
+					const itemId = `linklist-item-${index}`;
+					return /* @__PURE__ */ jsx(ListEditMode_default, {
 						color,
-						size,
-						chevron: false,
 						variant,
-						highlightText,
-						editMode: true,
-						contentId: itemId
-					})
+						onDelete: child.props.onDelete,
+						contentId: itemId,
+						deleteButtonAriaLabel: deleteAriaLabel,
+						children: React.cloneElement(child, {
+							color,
+							size,
+							chevron: false,
+							variant,
+							highlightText,
+							editMode: true,
+							contentId: itemId
+						})
+					});
+				} else return React.cloneElement(child, {
+					color,
+					size,
+					chevron,
+					variant,
+					highlightText,
+					editMode: false
 				});
-			} else return React.cloneElement(child, {
-				color,
-				size,
-				chevron,
-				variant,
-				highlightText,
-				editMode: false
-			});
+			}
 			return null;
 		})
 	});

package/lib/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","names":[],"sources":["../src/resources/HN.Designsystem.LinkList.en-GB.json","../src/resources/HN.Designsystem.LinkList.nb-NO.json","../src/components/LinkList/resourceHelper.ts","../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["{\n  \"editMode_deleteButtonAriaLabel\": \"Delete\"\n}\n","{\n  \"editMode_deleteButtonAriaLabel\": \"Slett\"\n}\n","import type { HNDesignsystemLinkList } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemLinkList => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemLinkList } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.FC<LinkProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemLinkList>;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    /** @private Turns chevron icon on/off. Overwritten by LinkList so not possible to set on LinkList.Link */\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /** Ref for lenke/knapp */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n    /** Resources for component */\n    resources?: Partial<HNDesignsystemLinkList>;\n    /** @experimental id for content (only used in edit mode for aria-describedby) */\n    contentId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n    /** Replaces the chevron with an arrow up right which is used for indicating external links */\n    external?: boolean;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    contentId,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    resources, // used by ListEditModeItem in LinkList\n    ref,\n    external = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles['link-list__list-item--outline']]: isOutline,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  let chevronIcon = undefined;\n  if (external) {\n    chevronIcon = ArrowUpRight;\n  } else if (chevron) {\n    chevronIcon = ChevronRight;\n  }\n\n  return editMode ? (\n    <div id={contentId} className={liClasses} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <div className={linkClasses}>\n        <div className={statusMarkerClasses}></div>\n        {renderElementHeader(children, {\n          titleHtmlMarkup: 'span',\n          size,\n          parentType: 'linklist',\n          chevronIcon: chevronIcon,\n          icon: icon ?? imageContainer,\n          highlightText,\n        })}\n      </div>\n    </div>\n  ) : (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevronIcon,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevronIcon,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n    resources,\n    ref,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemLinkList = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode, index) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            const childResources = child.props.resources;\n            const deleteAriaLabel = childResources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;\n            const itemId = `linklist-item-${index}`;\n\n            return (\n              <ListEditModeItem\n                color={color}\n                variant={variant}\n                onDelete={child.props.onDelete}\n                contentId={itemId}\n                deleteButtonAriaLabel={deleteAriaLabel}\n              >\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                  contentId: itemId,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport const LinkList = LinkListComponent as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}
+{"version":3,"file":"LinkList.js","names":[],"sources":["../src/resources/HN.Designsystem.LinkList.en-GB.json","../src/resources/HN.Designsystem.LinkList.nb-NO.json","../src/components/LinkList/resourceHelper.ts","../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["{\n  \"editMode_deleteButtonAriaLabel\": \"Delete\"\n}\n","{\n  \"editMode_deleteButtonAriaLabel\": \"Slett\"\n}\n","import type { HNDesignsystemLinkList } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemLinkList => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemLinkList } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.FC<LinkProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemLinkList>;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    /** @private Turns chevron icon on/off. Overwritten by LinkList so not possible to set on LinkList.Link */\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /** Ref for lenke/knapp */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n    /** Resources for component */\n    resources?: Partial<HNDesignsystemLinkList>;\n    /** @experimental id for content (only used in edit mode for aria-describedby) */\n    contentId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n    /** Replaces the chevron with an arrow up right which is used for indicating external links */\n    external?: boolean;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    contentId,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    resources, // used by ListEditModeItem in LinkList\n    ref,\n    external = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles['link-list__list-item--outline']]: isOutline,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  let chevronIcon = undefined;\n  if (external) {\n    chevronIcon = ArrowUpRight;\n  } else if (chevron) {\n    chevronIcon = ChevronRight;\n  }\n\n  return editMode ? (\n    <div id={contentId} className={liClasses} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <div className={linkClasses}>\n        <div className={statusMarkerClasses}></div>\n        {renderElementHeader(children, {\n          titleHtmlMarkup: 'span',\n          size,\n          parentType: 'linklist',\n          chevronIcon: chevronIcon,\n          icon: icon ?? imageContainer,\n          highlightText,\n        })}\n      </div>\n    </div>\n  ) : (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevronIcon,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevronIcon,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n    resources,\n    ref,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemLinkList = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode, index) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            const childResources = child.props.resources;\n            const deleteAriaLabel = childResources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;\n            const itemId = `linklist-item-${index}`;\n\n            return (\n              <ListEditModeItem\n                color={color}\n                variant={variant}\n                onDelete={child.props.onDelete}\n                contentId={itemId}\n                deleteButtonAriaLabel={deleteAriaLabel}\n              >\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                  contentId: itemId,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport const LinkList = LinkListComponent as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":";;;;;;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAsD;CACjF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;CACX;AACF;;;AC0FA,IAAa,QAAkB,UAAqB;CAClD,MAAM,EACJ,UACA,YAAY,IACZ,QAAQ,SACR,MACA,OACA,OAAO,UACP,UAAU,OACV,SACA,SAAS,QACT,QACA,QACA,SACA,aAAa,KACb,eACA,WAAW,OACX,WAEA,WACA,KACA,WAAW,OACX,GAAG,cACD;CACJ,MAAM,EAAE,WAAW,cAAc,iBAA+D,OAAO;CAEvG,MAAM,SAAS,YAAY;CAC3B,MAAM,iBAAiB,YAAY;CACnC,MAAM,YAAY,YAAY;CAC9B,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,WAAG,eAAe,cAAc;GAC/C,eAAe,gCAAgC;GAC/C,eAAe,mCAAmC;GAClD,eAAe,kCAAkC,WAAW;CAC/D,CAAC;CACD,MAAM,cAAc,WAClB,eAAe,sBACf,eAAe,sBAAsB,UACrC;GACG,eAAe,4BAA4B,WAAW;GACtD,eAAe,6BAA6B;GAC5C,eAAe,4BAA4B,WAAW;GACtD,eAAe,gCAAgC;GAC/C,eAAe,+BAA+B,WAAW;GACzD,eAAe,sCAAsC;GACrD,eAAe,qCAAqC,WAAW;GAC/D,eAAe,sBAAsB,UAAU;GAC/C,eAAe,+BAA+B,eAAe;GAC7D,eAAe,4BAA4B,WAAW;CACzD,GACA,SACF;CAEA,MAAM,sBAAsB,WAAG,eAAe,6BAA6B,GACxE,eAAe,mCAAmC,WAAW,MAChE,CAAC;CAED,MAAM,iBAAiB,oBAAC,QAAD;EAAM,WAAW,eAAe;EAAgC,UAAA;CAAY,CAAA;CAEnG,IAAI,cAAc,KAAA;CAClB,IAAI,UACF,cAAc;MACT,IAAI,SACT,cAAc;CAGhB,OAAO,WACL,oBAAC,OAAD;EAAK,IAAI;EAAW,WAAW;EAAW,eAAa;EAAQ,oBAAkB,YAAY;EAC3F,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,oBAAC,OAAD,EAAK,WAAW,oBAA0B,CAAA,GACzC,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;GACF,CAAC,CACE;;CACF,CAAA,IAEL,oBAAC,MAAD;EAAI,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EACpF,UAAA,eAAe,MACd,qBAAC,KAAD;GACE,WAAW;GACX,KAAK;GACL,KAAK,WAAW,WAAW,wBAAwB,KAAA;GAC3C;GACR,GAAI;GALN,UAAA,CAOE,oBAAC,OAAD,EAAK,WAAW,oBAA0B,CAAA,GACzC,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;GACF,CAAC,CACA;EAEH,CAAA,IAAA,eAAe,YACb,qBAAC,UAAD;GAAQ,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;GAAxG,UAAA,CACE,oBAAC,OAAD,EAAK,WAAW,oBAA0B,CAAA,GACzC,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;GACF,CAAC,CACK;;CAGV,CAAA;AAER;AAEA,IAAM,qBAA8C,UAAyB;CAC3E,MAAM,EACJ,UACA,YAAY,IACZ,UAAU,OACV,OAAO,UACP,QAAQ,SACR,QACA,UAAU,QACV,eACA,WAAW,OACX,WACA,QACE;CAEJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAG3E,MAAM,kBAA0C;EAC9C,GAHuB,aAAa,QAGjC;EACH,GAAG;CACL;CAEA,MAAM,iBAAiB,WAAG,eAAe,cAAc,WAAW;GAC/D,eAAe,uBAAuB,WAAW,YAAY;GAC7D,gCAAgC;CACnC,CAAC;CAED,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW;EAAgB,eAAa;EAAQ,oBAAkB,YAAY;EACzF,UAAA,MAAM,SAAS,IAAI,WAAW,OAAwB,UAAU;GAC/D,IAAI,MAAM,eAA0B,KAAK,KAAK,MAAM,SAAS,MAAM;IACjE,IAAI,UAAU;KAEZ,MAAM,kBADiB,MAAM,MAAM,WACK,kCAAkC,gBAAgB;KAC1F,MAAM,SAAS,iBAAiB;KAEhC,OACE,oBAAC,sBAAD;MACS;MACE;MACT,UAAU,MAAM,MAAM;MACtB,WAAW;MACX,uBAAuB;MAEtB,UAAA,MAAM,aAAa,OAAO;OACzB;OACA;OACA,SAAS;OACT;OACe;OACf,UAAU;OACV,WAAW;MACb,CAAC;KACe,CAAA;IAEtB,OACE,OAAO,MAAM,aAAa,OAAO;KAC/B;KACA;KACA;KACA;KACe;KACf,UAAU;IACZ,CAAC;GAEL;GACA,OAAO;EACT,CAAC;CACC,CAAA;AAER;AAEA,IAAa,WAAW;AAExB,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,KAAK,cAAc;;;AC7SnB,IAAA,mBAAe"}

package/lib/List.js

@@ -1,5 +1,5 @@
 import { AnalyticsId } from "./constants.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/List/styles.module.scss";
 //#region src/components/List/List.tsx
@@ -8,8 +8,10 @@ var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
 	children
 });
 var List = ({ children, className, testId, variant = "bullet", margin }) => {
-	return /* @__PURE__ */ jsx(["numbered", "alphabetical"].includes(variant) ? "ol" : "ul", {
-		className: cn(styles.list, styles[`list--${variant}`], margin && styles["list--margin"], className),
+	const CustomTag = ["numbered", "alphabetical"].includes(variant) ? "ol" : "ul";
+	const listClasses = classNames(styles.list, styles[`list--${variant}`], margin && styles["list--margin"], className);
+	return /* @__PURE__ */ jsx(CustomTag, {
+		className: listClasses,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.List,
 		children

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":[],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport type ListVariant = 'bullet' | 'dashed' | 'numbered' | 'alphabetical';\n\nexport interface ItemProps {\n  children: React.ReactNode;\n}\n\nconst Item: React.FC<ItemProps> = ({ children }: ItemProps) => <li className={styles.list__item}>{children}</li>;\n\nexport interface ListProps {\n  /** List contents */\n  children: React.ReactNode;\n  /** Changes the visual representation of the list. */\n  variant?: ListVariant;\n  /** Adds margin above/below list */\n  margin?: boolean;\n  /** Adds className to list element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface ListCompound extends React.FC<ListProps> {\n  Item: typeof Item;\n}\n\nconst List: ListCompound = ({ children, className, testId, variant = 'bullet', margin }: ListProps) => {\n  const CustomTag = ['numbered', 'alphabetical'].includes(variant) ? 'ol' : 'ul';\n\n  const listClasses = classNames(styles.list, styles[`list--${variant}`], margin && styles['list--margin'], className);\n\n  return (\n    <CustomTag className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.List}>\n      {children}\n    </CustomTag>\n  );\n};\n\nList.Item = Item;\n\nexport default List;\n","import List from './List';\nexport * from './List';\nexport default List;\n"],"mappings":";;;;;AAYA,IAAM,QAA6B,EAAE,eAA0B,oBAAC,MAAD;CAAI,WAAW,OAAO;CAAa;AAAa,CAAA;AAmB/G,IAAM,QAAsB,EAAE,UAAU,WAAW,QAAQ,UAAU,UAAU,aAAwB;CAKrG,OACE,oBALgB,CAAC,YAAY,cAAc,EAAE,SAAS,OAAO,IAAI,OAAO,MAKxE;EAAW,WAHO,GAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,SAGlF;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EACnF;CACQ,CAAA;AAEf;AAEA,KAAK,OAAO;;;ACzCZ,IAAA,eAAe"}
+{"version":3,"file":"List.js","names":[],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport type ListVariant = 'bullet' | 'dashed' | 'numbered' | 'alphabetical';\n\nexport interface ItemProps {\n  children: React.ReactNode;\n}\n\nconst Item: React.FC<ItemProps> = ({ children }: ItemProps) => <li className={styles.list__item}>{children}</li>;\n\nexport interface ListProps {\n  /** List contents */\n  children: React.ReactNode;\n  /** Changes the visual representation of the list. */\n  variant?: ListVariant;\n  /** Adds margin above/below list */\n  margin?: boolean;\n  /** Adds className to list element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface ListCompound extends React.FC<ListProps> {\n  Item: typeof Item;\n}\n\nconst List: ListCompound = ({ children, className, testId, variant = 'bullet', margin }: ListProps) => {\n  const CustomTag = ['numbered', 'alphabetical'].includes(variant) ? 'ol' : 'ul';\n\n  const listClasses = classNames(styles.list, styles[`list--${variant}`], margin && styles['list--margin'], className);\n\n  return (\n    <CustomTag className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.List}>\n      {children}\n    </CustomTag>\n  );\n};\n\nList.Item = Item;\n\nexport default List;\n","import List from './List';\nexport * from './List';\nexport default List;\n"],"mappings":";;;;;AAYA,IAAM,QAA6B,EAAE,eAA0B,oBAAC,MAAD;CAAI,WAAW,OAAO;CAAa;AAAa,CAAA;AAmB/G,IAAM,QAAsB,EAAE,UAAU,WAAW,QAAQ,UAAU,UAAU,aAAwB;CACrG,MAAM,YAAY,CAAC,YAAY,cAAc,CAAC,CAAC,SAAS,OAAO,IAAI,OAAO;CAE1E,MAAM,cAAc,WAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,SAAS;CAEnH,OACE,oBAAC,WAAD;EAAW,WAAW;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EACnF;CACQ,CAAA;AAEf;AAEA,KAAK,OAAO;;;ACzCZ,IAAA,eAAe"}

package/lib/ListEditMode.js

@@ -2,7 +2,7 @@ import { IconSize } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import X from "./components/Icons/X.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ListEditMode/styles.module.scss";
 //#region src/components/ListEditMode/ListEditMode.tsx
@@ -12,7 +12,7 @@ var IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 		ref: refObject,
 		onClick,
 		type: "button",
-		className: cn(styles["list-edit-mode__icon-button"]),
+		className: classNames(styles["list-edit-mode__icon-button"]),
 		"aria-label": ariaLabel,
 		"aria-describedby": ariaDescribedby,
 		children: /* @__PURE__ */ jsx(Icon_default, {
@@ -25,11 +25,12 @@ var IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 };
 var ListEditModeItem = (props) => {
 	const { children, variant = "line", color = "neutral", onDelete, deleteButtonAriaLabel, contentId } = props;
+	const listClassNames = classNames(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
+		[styles["list-edit-mode__item--line"]]: variant === "line",
+		[styles["list-edit-mode__item--fill"]]: variant === "fill" || variant === "fill-negative"
+	});
 	return /* @__PURE__ */ jsxs("li", {
-		className: cn(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
-			[styles["list-edit-mode__item--line"]]: variant === "line",
-			[styles["list-edit-mode__item--fill"]]: variant === "fill" || variant === "fill-negative"
-		}),
+		className: listClassNames,
 		children: [children, onDelete && /* @__PURE__ */ jsx(IconButton, {
 			icon: X,
 			onClick: onDelete,
@@ -42,7 +43,7 @@ var ListEditModeItem = (props) => {
 ListEditModeItem.displayName = "ListEditModeItem";
 //#endregion
 //#region src/components/ListEditMode/constants.ts
-var listEditModeWrapperClassnames = cn([styles[`list-edit-mode`]]);
+var listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
 //#endregion
 //#region src/components/ListEditMode/index.ts
 var ListEditMode_default = ListEditModeItem;

package/lib/ListEditMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/constants.ts","../src/components/ListEditMode/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport type { SvgIcon } from '../Icon';\nimport type { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n  /** Aria label for delete button */\n  deleteButtonAriaLabel?: string;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  contentId?: string;\n}\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n  ariaLabel,\n  ariaDescribedby,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button\n      ref={refObject}\n      onClick={onClick}\n      type=\"button\"\n      className={classNames(styles['list-edit-mode__icon-button'])}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedby}\n    >\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete, deleteButtonAriaLabel, contentId } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <li className={listClassNames}>\n      {children}\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" ariaLabel={deleteButtonAriaLabel} ariaDescribedby={contentId} />}\n    </li>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport * from './constants';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AAgCA,IAAa,cAAc,EACzB,MACA,OACA,SACA,WACA,sBAOuB;CACvB,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,OACE,oBAAC,UAAD;EACE,KAAK;EACI;EACT,MAAK;EACL,WAAW,GAAW,OAAO,8BAA8B;EAC3D,cAAY;EACZ,oBAAkB;YAElB,oBAAC,cAAD;GACa;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;EACpE,CAAA;CACK,CAAA;AAEZ;AAEA,IAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,UAAU,uBAAuB,cAAc;CAOtG,OACE,qBAAC,MAAD;EAAI,WANiB,GAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;EAC5E,CAGiB;YAAf,CACG,UACA,YAAY,oBAAC,YAAD;GAAY,MAAM;GAAG,SAAS;GAAU,OAAM;GAAM,WAAW;GAAuB,iBAAiB;EAAY,CAAA,CAC9H;;AAER;AAEA,iBAAiB,cAAc;;;AC9E/B,IAAa,gCAAgC,GAAW,CAAC,OAAO,iBAAiB,CAAC;;;ACDlF,IAAA,uBAAe"}
+{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/constants.ts","../src/components/ListEditMode/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport type { SvgIcon } from '../Icon';\nimport type { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n  /** Aria label for delete button */\n  deleteButtonAriaLabel?: string;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  contentId?: string;\n}\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n  ariaLabel,\n  ariaDescribedby,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button\n      ref={refObject}\n      onClick={onClick}\n      type=\"button\"\n      className={classNames(styles['list-edit-mode__icon-button'])}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedby}\n    >\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete, deleteButtonAriaLabel, contentId } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <li className={listClassNames}>\n      {children}\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" ariaLabel={deleteButtonAriaLabel} ariaDescribedby={contentId} />}\n    </li>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport * from './constants';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AAgCA,IAAa,cAAc,EACzB,MACA,OACA,SACA,WACA,sBAOuB;CACvB,MAAM,EAAE,WAAW,cAAc,iBAAoC;CAErE,OACE,oBAAC,UAAD;EACE,KAAK;EACI;EACT,MAAK;EACL,WAAW,WAAW,OAAO,8BAA8B;EAC3D,cAAY;EACZ,oBAAkB;EAElB,UAAA,oBAAC,cAAD;GACa;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;EACpE,CAAA;CACK,CAAA;AAEZ;AAEA,IAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,UAAU,uBAAuB,cAAc;CAEtG,MAAM,iBAAiB,WAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;GAClH,OAAO,gCAAgC,YAAY;GACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;CAC5E,CAAC;CAED,OACE,qBAAC,MAAD;EAAI,WAAW;EAAf,UAAA,CACG,UACA,YAAY,oBAAC,YAAD;GAAY,MAAM;GAAG,SAAS;GAAU,OAAM;GAAM,WAAW;GAAuB,iBAAiB;EAAY,CAAA,CAC9H;;AAER;AAEA,iBAAiB,cAAc;;;AC9E/B,IAAa,gCAAgC,WAAW,CAAC,OAAO,iBAAiB,CAAC;;;ACDlF,IAAA,uBAAe"}

package/lib/LoaderSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderSpinner.js","names":[],"sources":["../src/components/Filter/LoaderSpinner/LoaderSpinner.tsx"],"sourcesContent":["import { useEffect, useId } from 'react';\n\nimport { useAnimate } from 'motion/react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { AnalyticsId, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface LoaderSpinnerProps {\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst LoaderSpinner: React.FC<LoaderSpinnerProps> = props => {\n  const { resources, testId } = props;\n  const textId = useId();\n  const isMobile = useIsMobileBreakpoint();\n  const svgSize = isMobile ? 14 : 19;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n  const [scope, animate] = useAnimate();\n\n  useEffect(() => {\n    if (!scope.current) {\n      return;\n    }\n\n    animate(scope.current, { rotate: 360 }, { duration: 1.3, ease: 'linear', repeat: Infinity });\n  }, []);\n\n  return (\n    <div\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Loader}\n      role=\"progressbar\"\n      aria-labelledby={textId}\n      className={styles['loader-spinner']}\n    >\n      <svg\n        ref={scope}\n        className={styles['loader-spinner__svg']}\n        width={svgSize}\n        height={svgSize}\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {isMobile ? (\n          <path d=\"M1 7a6 6 0 1 1 6 6\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        ) : (\n          <path d=\"M1.5 9.5a8 8 0 1 1 8 8\" strokeWidth=\"2.3\" strokeLinecap=\"round\" />\n        )}\n      </svg>\n      <span id={textId} className={styles['loader-spinner__text']}>\n        {mergedResources.loadingText}\n      </span>\n    </div>\n  );\n};\n\nexport default LoaderSpinner;\n"],"mappings":";;;;;;;;;AAoBA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,sBAAsB;CACvC,MAAM,UAAU,WAAW,KAAK;CAChC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CACA,MAAM,CAAC,OAAO,WAAW,WAAW;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,SACT;EAGF,QAAQ,MAAM,SAAS,EAAE,QAAQ,IAAI,GAAG;GAAE,UAAU;GAAK,MAAM;GAAU,QAAQ;EAAS,CAAC;CAC7F,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EACE,eAAa;EACb,oBAAkB,YAAY;EAC9B,MAAK;EACL,mBAAiB;EACjB,WAAW,OAAO;YALpB,CAOE,oBAAC,OAAD;GACE,KAAK;GACL,WAAW,OAAO;GAClB,OAAO;GACP,QAAQ;GACR,MAAK;GACL,OAAM;aAEL,WACC,oBAAC,QAAD;IAAM,GAAE;IAAqB,aAAY;IAAI,eAAc;GAAS,CAAA,IAEpE,oBAAC,QAAD;IAAM,GAAE;IAAyB,aAAY;IAAM,eAAc;GAAS,CAAA;EAEzE,CAAA,GACL,oBAAC,QAAD;GAAM,IAAI;GAAQ,WAAW,OAAO;aACjC,gBAAgB;EACb,CAAA,CACH;;AAET"}
+{"version":3,"file":"LoaderSpinner.js","names":[],"sources":["../src/components/Filter/LoaderSpinner/LoaderSpinner.tsx"],"sourcesContent":["import { useEffect, useId } from 'react';\n\nimport { useAnimate } from 'motion/react';\n\nimport type { HNDesignsystemFilter } from '../../../resources/Resources';\n\nimport { AnalyticsId, LanguageLocales } from '../../../constants';\nimport { useIsMobileBreakpoint } from '../../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../../hooks/useLanguage';\nimport { getResources } from '../resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport interface LoaderSpinnerProps {\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemFilter>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst LoaderSpinner: React.FC<LoaderSpinnerProps> = props => {\n  const { resources, testId } = props;\n  const textId = useId();\n  const isMobile = useIsMobileBreakpoint();\n  const svgSize = isMobile ? 14 : 19;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources = {\n    ...defaultResources,\n    ...resources,\n  };\n  const [scope, animate] = useAnimate();\n\n  useEffect(() => {\n    if (!scope.current) {\n      return;\n    }\n\n    animate(scope.current, { rotate: 360 }, { duration: 1.3, ease: 'linear', repeat: Infinity });\n  }, []);\n\n  return (\n    <div\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Loader}\n      role=\"progressbar\"\n      aria-labelledby={textId}\n      className={styles['loader-spinner']}\n    >\n      <svg\n        ref={scope}\n        className={styles['loader-spinner__svg']}\n        width={svgSize}\n        height={svgSize}\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {isMobile ? (\n          <path d=\"M1 7a6 6 0 1 1 6 6\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        ) : (\n          <path d=\"M1.5 9.5a8 8 0 1 1 8 8\" strokeWidth=\"2.3\" strokeLinecap=\"round\" />\n        )}\n      </svg>\n      <span id={textId} className={styles['loader-spinner__text']}>\n        {mergedResources.loadingText}\n      </span>\n    </div>\n  );\n};\n\nexport default LoaderSpinner;\n"],"mappings":";;;;;;;;;AAoBA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,SAAS,MAAM;CACrB,MAAM,WAAW,sBAAsB;CACvC,MAAM,UAAU,WAAW,KAAK;CAChC,MAAM,EAAE,aAAa,YAA6B,gBAAgB,SAAS;CAE3E,MAAM,kBAAkB;EACtB,GAFuB,aAAa,QAEjC;EACH,GAAG;CACL;CACA,MAAM,CAAC,OAAO,WAAW,WAAW;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,SACT;EAGF,QAAQ,MAAM,SAAS,EAAE,QAAQ,IAAI,GAAG;GAAE,UAAU;GAAK,MAAM;GAAU,QAAQ;EAAS,CAAC;CAC7F,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EACE,eAAa;EACb,oBAAkB,YAAY;EAC9B,MAAK;EACL,mBAAiB;EACjB,WAAW,OAAO;EALpB,UAAA,CAOE,oBAAC,OAAD;GACE,KAAK;GACL,WAAW,OAAO;GAClB,OAAO;GACP,QAAQ;GACR,MAAK;GACL,OAAM;GAEL,UAAA,WACC,oBAAC,QAAD;IAAM,GAAE;IAAqB,aAAY;IAAI,eAAc;GAAS,CAAA,IAEpE,oBAAC,QAAD;IAAM,GAAE;IAAyB,aAAY;IAAM,eAAc;GAAS,CAAA;EAEzE,CAAA,GACL,oBAAC,QAAD;GAAM,IAAI;GAAQ,WAAW,OAAO;GACjC,UAAA,gBAAgB;EACb,CAAA,CACH;;AAET"}

package/lib/MaxCharacters.js

@@ -1,11 +1,11 @@
 import { FormOnColor } from "./constants.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/MaxCharacters/styles.module.scss";
 //#region src/components/MaxCharacters/MaxCharacters.tsx
 var MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
 	const progress = length / maxCharacters;
-	const counterTextClass = cn(styles["max-characters"], {
+	const counterTextClass = classNames(styles["max-characters"], {
 		[styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
 		[styles[`max-characters--invalid`]]: progress > 1
 	});

package/lib/MaxCharacters.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.js","names":[],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAmBA,IAAM,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,GAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;CAClD,CAAC;CAID,OACE,oBAAC,OAAD;EAAK,aAHW,WAAW,MAAO,WAAW;EAGlB,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,SAAS;YAC5F,GAAG,OAAO,GAAG,cAAc,GAAG;CAC5B,CAAA;AAET"}
+{"version":3,"file":"MaxCharacters.js","names":[],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAmBA,IAAM,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,WAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;CAClD,CAAC;CAID,OACE,oBAAC,OAAD;EAAK,aAHW,WAAW,MAAO,WAAW;EAGlB,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,SAAS;EAC5F,UAAA,GAAG,OAAO,GAAG,cAAc,GAAG;CAC5B,CAAA;AAET"}

package/lib/PanelTitle.js

@@ -1,13 +1,13 @@
 import Title_default from "./components/Title/index.js";
 import { t as Highlighter_default } from "./Highlighter.js";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Panel/PanelTitle/styles.module.scss";
 //#region src/components/Panel/PanelTitle/PanelTitle.tsx
 var PanelTitle = (props) => {
 	const { testId, icon, badge, title, titleMarkup = "h3", highlightText } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
+		className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
 		"data-testid": testId,
 		children: [icon && /* @__PURE__ */ jsx("div", {
 			className: styles["paneltitle__icon"],

package/lib/PanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTitle.js","names":[],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n","import PanelTitle from './PanelTitle';\nexport * from './PanelTitle';\nexport default PanelTitle;\n"],"mappings":";;;;;;AAsBA,IAAM,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;CAC1E,OACE,qBAAC,OAAD;EAAK,WAAW,GAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,KAAK,CAAC;EAAG,eAAa;YAA3G,CACG,QAAQ,oBAAC,OAAD;GAAK,WAAW,OAAO;aAAsB;EAAU,CAAA,GAC/D,SACC,qBAAC,OAAD;GAAK,WAAW,OAAO;aAAvB,CACE,oBAAC,eAAD;IAAO,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAD;KAAa,YAAY;eAAgB;IAAmB,CAAA;GACvD,CAAA,GACN,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAuB;GAAW,CAAA,CAChE;IAEJ;;AAET;;;ACnCA,IAAA,qBAAe"}
+{"version":3,"file":"PanelTitle.js","names":[],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n","import PanelTitle from './PanelTitle';\nexport * from './PanelTitle';\nexport default PanelTitle;\n"],"mappings":";;;;;;AAsBA,IAAM,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;CAC1E,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,KAAK,CAAC;EAAG,eAAa;EAA3G,UAAA,CACG,QAAQ,oBAAC,OAAD;GAAK,WAAW,OAAO;GAAsB,UAAA;EAAU,CAAA,GAC/D,SACC,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,eAAD;IAAO,YAAW;IAAS,YAAY;IACrC,UAAA,oBAAC,qBAAD;KAAa,YAAY;KAAgB,UAAA;IAAmB,CAAA;GACvD,CAAA,GACN,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAuB,UAAA;GAAW,CAAA,CAChE;EAEJ,CAAA,CAAA;;AAET;;;ACnCA,IAAA,qBAAe"}