@helsenorge/designsystem-react 13.0.0-workspaces-beta.7 → 13.0.2

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends 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>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\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  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport 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\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.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\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    maxText,\n    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = 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  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\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--large']]: isLarge,\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, inputId, 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={maxText}\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/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends 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>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\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  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport 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\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.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\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    maxText,\n    inputContainerRef,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = 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  useEffect(() => {\n    setInput(defaultValue || '');\n  }, [defaultValue]);\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, inputId, 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={maxText}\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/Label.js

@@ -4,13 +4,13 @@ import { t as Spacer_default } from "./Spacer.js";
 import { t as FormFieldTag_default } from "./FormFieldTag.js";
 import { t as StatusDot_default } from "./StatusDot.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Label/styles.module.scss";
 const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
 	const mapSublabels = (hideFromScreenReader) => {
 		return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
-			const labelClasses = cn(styles.label, styles["sublabel"], {
+			const labelClasses = classNames(styles.label, styles["sublabel"], {
 				[styles["sublabel--subdued"]]: sublabelText.type === "subdued",
 				[styles["sublabel--on-dark"]]: onColor === FormOnColor.ondark
 			});
@@ -64,7 +64,7 @@ const renderLabelAsParent = (label, children, inputId, onColor, labelClassName,
 		htmlFor: inputId,
 		onColor,
 		children,
-		labelClassName: cn(labelClassName, label.props.labelClassName),
+		labelClassName: classNames(labelClassName, label.props.labelClassName),
 		labelTextClassName,
 		htmlMarkup: markup || "label",
 		sublabelWrapperClassName,
@@ -86,14 +86,14 @@ const renderLabelAsParent = (label, children, inputId, onColor, labelClassName,
 };
 var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId }) => {
 	const hasChildren = children && typeof children !== "undefined";
-	const labelWrapperClasses = cn(styles["label-wrapper"], {
+	const labelWrapperClasses = classNames(styles["label-wrapper"], {
 		[styles["label-wrapper--no-bottom-margin"]]: hasChildren,
 		[styles["label-wrapper--after-label-children"]]: afterLabelChildren
 	}, className);
 	const mapLabels = () => {
 		if (typeof labelTexts === "undefined") return null;
 		return labelTexts.map((labelText, index) => {
-			const labelClasses = cn(styles.label, {
+			const labelClasses = classNames(styles.label, {
 				[styles["label--subdued"]]: labelText.type === "subdued",
 				[styles["label--on-dark"]]: onColor === FormOnColor.ondark
 			}, labelTextClassName);

package/lib/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'normal' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label, type: 'subdued' }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {(sublabel || statusDot || formFieldTag) && (\n          <div className={sublabelWrapperClassName}>\n            {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n            {sublabel &&\n              isComponent<SublabelProps>(sublabel, Sublabel) &&\n              React.cloneElement(sublabel, {\n                onColor: onColor as FormOnColor,\n              })}\n            {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n              <>\n                <Spacer size={'3xs'} />\n                {React.cloneElement(statusDot, {\n                  onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n                })}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n","import Label from './Label';\nexport { Sublabel } from './SubLabel';\nexport * from './Label';\nexport default Label;\n"],"mappings":"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"}
+{"version":3,"file":"Label.js","names":["Sublabel: React.FC<SublabelProps>","Label: FunctionComponent<LabelProps>"],"sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx","../src/components/Label/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'normal' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label, type: 'subdued' }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  formFieldTag,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--subdued']]: labelText.type === 'subdued',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        {(sublabel || statusDot || formFieldTag) && (\n          <div className={sublabelWrapperClassName}>\n            {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n            {sublabel &&\n              isComponent<SublabelProps>(sublabel, Sublabel) &&\n              React.cloneElement(sublabel, {\n                onColor: onColor as FormOnColor,\n              })}\n            {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n              <>\n                <Spacer size={'3xs'} />\n                {React.cloneElement(statusDot, {\n                  onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n                })}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n","import Label from './Label';\nexport { Sublabel } from './SubLabel';\nexport * from './Label';\nexport default Label;\n"],"mappings":"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"}

package/lib/LinkList.js

@@ -1,25 +1,35 @@
-import { n as AnalyticsId } from "./constants2.js";
+import { n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { r as useLanguage } from "./language.js";
 import { i as renderElementHeader } from "./ElementHeader.js";
 import { i as listEditModeWrapperClassnames, t as ListEditMode_default } from "./ListEditMode.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import LinkListStyles from "./components/LinkList/styles.module.scss";
+var HN_Designsystem_LinkList_en_GB_default = { editMode_deleteButtonAriaLabel: "Delete" };
+var HN_Designsystem_LinkList_nb_NO_default = { editMode_deleteButtonAriaLabel: "Slett" };
+const getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.ENGLISH: return HN_Designsystem_LinkList_en_GB_default;
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_LinkList_nb_NO_default;
+	}
+};
 const Link = React.forwardRef((props, ref) => {
-	const { children, className = "", color = "white", icon, image, size = "medium", chevron = false, linkRef, status = "none", testId, target, variant, htmlMarkup = "a", highlightText, editMode = false, ...restProps } = props;
+	const { children, className = "", color = "white", icon, image, size = "medium", chevron = false, linkRef, status = "none", testId, target, variant, htmlMarkup = "a", highlightText, editMode = false, contentId, resources, ...restProps } = props;
 	const { refObject, isHovered } = usePseudoClasses(linkRef);
 	const isFill = variant === "fill";
 	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,
@@ -31,17 +41,17 @@ const Link = React.forwardRef((props, ref) => {
 		[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
 	});
-	return /* @__PURE__ */ jsx("li", {
+	return editMode ? /* @__PURE__ */ jsx("div", {
+		id: contentId,
 		className: liClasses,
-		ref,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Link,
-		children: editMode ? /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			className: linkClasses,
 			children: [/* @__PURE__ */ jsx("div", { className: statusMarkerClasses }), renderElementHeader(children, {
 				titleHtmlMarkup: "span",
@@ -51,7 +61,13 @@ const Link = React.forwardRef((props, ref) => {
 				icon: icon ?? imageContainer,
 				highlightText
 			})]
-		}) : htmlMarkup === "a" ? /* @__PURE__ */ jsxs("a", {
+		})
+	}) : /* @__PURE__ */ jsx("li", {
+		className: liClasses,
+		ref,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Link,
+		children: htmlMarkup === "a" ? /* @__PURE__ */ jsxs("a", {
 			className: linkClasses,
 			ref: refObject,
 			rel: target === "_blank" ? "noopener noreferrer" : void 0,
@@ -84,30 +100,41 @@ const Link = React.forwardRef((props, ref) => {
 	});
 });
 const LinkList = React.forwardRef(function LinkListForwardedRef(props, ref) {
-	const { children, className = "", chevron = false, size = "medium", color = "white", testId, variant = "line", highlightText, editMode = false } = props;
+	const { children, className = "", chevron = false, size = "medium", color = "white", testId, variant = "line", highlightText, editMode = false, resources } = props;
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const mergedResources = {
+		...getResources(language),
+		...resources
+	};
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
-		className: cn(LinkListStyles["link-list"], className, {
+		className: classNames(LinkListStyles["link-list"], className, {
 			[LinkListStyles[`link-list--outline--${color}`]]: variant === "outline",
 			[listEditModeWrapperClassnames]: editMode
 		}),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.LinkList,
-		children: React.Children.map(children, (child) => {
-			if (React.isValidElement(child) && child.type === Link) if (editMode) return /* @__PURE__ */ jsx(ListEditMode_default, {
-				color,
-				variant,
-				onDelete: child.props.onDelete,
-				children: React.cloneElement(child, {
+		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,
-					size,
-					chevron: false,
 					variant,
-					highlightText,
-					editMode: true
-				})
-			});
-			else return React.cloneElement(child, {
+					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,

package/lib/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","names":["Link: LinkType"],"sources":["../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\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.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\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}\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    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    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\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    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(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  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {editMode ? (\n        <div className={linkClasses}>\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </div>\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: chevron ? ChevronRight : undefined,\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: chevron ? ChevronRight : undefined,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\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  } = props;\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) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\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}) 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":["Link: LinkType","mergedResources: HNDesignsystemLinkList"],"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 { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\nimport { HNDesignsystemLinkList } from '../../resources/Resources';\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 { AnalyticsId, LanguageLocales } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { HNDesignsystemLinkList } from '../../resources/Resources';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\nimport { getResources } from './resourceHelper';\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.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\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}\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    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    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\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  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\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    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(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  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: chevron ? ChevronRight : undefined,\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: chevron ? ChevronRight : undefined,\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: chevron ? ChevronRight : undefined,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\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  } = 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}) 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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"}

package/lib/List.js

@@ -1,6 +1,6 @@
 import { n as AnalyticsId } from "./constants2.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/List/styles.module.scss";
 var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
@@ -9,7 +9,7 @@ var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
 });
 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),
+		className: classNames(styles.list, styles[`list--${variant}`], margin && styles["list--margin"], className),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.List,
 		children

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["Item: ItemType","List: ListCompound"],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import React from 'react';\n\nimport 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\ntype ItemType = React.FC<ItemProps>;\n\nconst Item: ItemType = ({ 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: ItemType;\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":";;;;;AAgBA,IAAMA,QAAkB,EAAE,eAA0B,oBAAC,MAAA;CAAG,WAAW,OAAO;CAAa;EAAc;AAmBrG,IAAMC,QAAsB,EAAE,UAAU,WAAW,QAAQ,UAAU,UAAU,aAAwB;AAKrG,QACE,oBALgB,CAAC,YAAY,eAAe,CAAC,SAAS,QAAQ,GAAG,OAAO,MAKvE;EAAU,WAHO,GAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,UAAU;EAG/E,eAAa;EAAQ,oBAAkB,YAAY;EACnF;GACS;;AAIhB,KAAK,OAAO;AC7CZ,IAAA,iBD+Ce"}
+{"version":3,"file":"List.js","names":["Item: ItemType","List: ListCompound"],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import React from 'react';\n\nimport 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\ntype ItemType = React.FC<ItemProps>;\n\nconst Item: ItemType = ({ 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: ItemType;\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":";;;;;AAgBA,IAAMA,QAAkB,EAAE,eAA0B,oBAAC,MAAA;CAAG,WAAW,OAAO;CAAa;EAAc;AAmBrG,IAAMC,QAAsB,EAAE,UAAU,WAAW,QAAQ,UAAU,UAAU,aAAwB;AAKrG,QACE,oBALgB,CAAC,YAAY,eAAe,CAAC,SAAS,QAAQ,GAAG,OAAO,MAKvE;EAAU,WAHO,WAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,UAAU;EAG/E,eAAa;EAAQ,oBAAkB,YAAY;EACnF;GACS;;AAIhB,KAAK,OAAO;AC7CZ,IAAA,iBD+Ce"}

package/lib/ListEditMode.js

@@ -3,17 +3,19 @@ import { t as usePseudoClasses } from "./usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as X_default } from "./X.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ListEditMode/styles.module.scss";
-const listEditModeWrapperClassnames = cn([styles[`list-edit-mode`]]);
-const IconButton = ({ icon, color, onClick }) => {
+const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
+const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 	const { refObject, isHovered } = usePseudoClasses();
 	return /* @__PURE__ */ jsx("button", {
 		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, {
 			isHovered,
 			svgIcon: icon,
@@ -23,17 +25,19 @@ const IconButton = ({ icon, color, onClick }) => {
 	});
 };
 const ListEditModeItem = (props) => {
-	const { children, variant = "line", color = "neutral", onDelete } = props;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
+	const { children, variant = "line", color = "neutral", onDelete, deleteButtonAriaLabel, contentId } = props;
+	return /* @__PURE__ */ jsxs("li", {
+		className: 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"
 		}),
-		children: [onDelete && /* @__PURE__ */ jsx(IconButton, {
+		children: [children, onDelete && /* @__PURE__ */ jsx(IconButton, {
 			icon: X_default,
 			onClick: onDelete,
-			color: "red"
-		}), children]
+			color: "red",
+			ariaLabel: deleteButtonAriaLabel,
+			ariaDescribedby: contentId
+		})]
 	});
 };
 ListEditModeItem.displayName = "ListEditModeItem";

package/lib/ListEditMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\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}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\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 } = 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    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AA6BA,MAAa,gCAAgC,GAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,MAAa,cAAc,EACzB,MACA,OACA,cAKuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EAAO,KAAK;EAAoB;EAAS,MAAK;EAAS,WAAW,GAAW,OAAO,+BAA+B;YAClH,oBAAC,cAAA;GACY;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;IACnE;GACK;;AAIb,MAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAOpE,QACE,qBAAC,OAAA;EAAI,WANgB,GAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;IAAQ,EAClE,SAAA;GACG;;AAIV,iBAAiB,cAAc;ACpE/B,IAAA,yBDsEe"}
+{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\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 listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\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 ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AAgCA,MAAa,gCAAgC,WAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,MAAa,cAAc,EACzB,MACA,OACA,SACA,WACA,sBAOuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EACC,KAAK;EACI;EACT,MAAK;EACL,WAAW,WAAW,OAAO,+BAA+B;EAC5D,cAAY;EACZ,oBAAkB;YAElB,oBAAC,cAAA;GACY;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;IACnE;GACK;;AAIb,MAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,UAAU,uBAAuB,cAAc;AAOtG,QACE,qBAAC,MAAA;EAAG,WANiB,WAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,UACA,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;GAAM,WAAW;GAAuB,iBAAiB;IAAa,CAAA;GAC9H;;AAIT,iBAAiB,cAAc;AClF/B,IAAA,yBDoFe"}

package/lib/MaxCharacters.js

@@ -1,11 +1,11 @@
 import { r as FormOnColor } from "./constants2.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/MaxCharacters/styles.module.scss";
 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":["MaxCharacters: React.FC<MaxCharactersProps>"],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport 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 ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAqBA,IAAMA,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;EACjD,CAAC;CAEF,MAAM,YAAY,WAAW,MAAO,WAAW;AAE/C,QACE,oBAAC,OAAA;EAAI,aAAW;EAAW,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,UAAU;YAC7F,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,UAAU;GAC/C;;AAIV,IAAA,wBAAe"}
+{"version":3,"file":"MaxCharacters.js","names":["MaxCharacters: React.FC<MaxCharactersProps>"],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport 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 ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAqBA,IAAMA,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;EACjD,CAAC;CAEF,MAAM,YAAY,WAAW,MAAO,WAAW;AAE/C,QACE,oBAAC,OAAA;EAAI,aAAW;EAAW,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,UAAU;YAC7F,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,UAAU;GAC/C;;AAIV,IAAA,wBAAe"}

package/lib/Panel.js

@@ -9,7 +9,7 @@ import { t as useExpand } from "./useExpand.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import { t as PanelTitle_default } from "./PanelTitle.js";
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Panel/styles.module.scss";
 var HN_Designsystem_Panel_en_GB_default = {
@@ -53,7 +53,7 @@ let PanelStatus = /* @__PURE__ */ function(PanelStatus$1) {
 	return PanelStatus$1;
 }({});
 var ExpandButton = ({ onClick, isExpanded, resources }) => {
-	const buttonClassName = cn(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
 	return /* @__PURE__ */ jsxs(Button_default, {
 		variant: "borderless",
 		textClassName: styles["expander__button__text"],
@@ -122,22 +122,22 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 		}
 	}, [isExpanded]);
 	const colorScheme = variant === PanelVariant.fill ? color : "white";
-	const outerClassnames = cn(className, {
+	const outerClassnames = classNames(className, {
 		[styles["panel__border--outline--outer"]]: variant === PanelVariant.outline,
 		[styles["panel__border--line"]]: variant === PanelVariant.line,
 		[styles["panel__border--fill--neutral"]]: variant === PanelVariant.fill && colorScheme === "neutral",
 		[styles["panel__border--fill--new"]]: variant === PanelVariant.fill && status === PanelStatus.new,
 		[styles["panel__border--fill--status"]]: variant === PanelVariant.fill && status !== PanelStatus.none
 	});
-	const panelClassnames = cn(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
+	const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
 		[styles["panel--line"]]: variant === PanelVariant.line,
 		[styles["panel--new"]]: status === PanelStatus.new,
 		[styles["panel--draft"]]: status === PanelStatus.draft,
 		[styles["panel--error"]]: status === PanelStatus.error,
 		[styles["panel--icon"]]: hasIcon
 	});
-	const contentContainerLayout = cn(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
-	const expanderBorderLayout = cn({
+	const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
+	const expanderBorderLayout = classNames({
 		[styles["panel__expander__border--expanded"]]: isExpanded && status === PanelStatus.none,
 		[styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,
 		[styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line
@@ -148,7 +148,7 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 	return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
+			className: classNames({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsx("div", {
 				className: expanderBorderLayout,
 				children: /* @__PURE__ */ jsxs("div", {
@@ -187,7 +187,7 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 	}) : /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
+			className: classNames({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: panelClassnames,
 				"data-testid": testId,
@@ -231,25 +231,25 @@ const PreContainer = ({ children }) => {
 };
 const A = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--a"]),
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
 		children
 	});
 };
 const B = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--b"]),
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
 		children
 	});
 };
 const C = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--c"]),
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
 		children
 	});
 };
 const ExpandedContent = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__expander__content"]),
+		className: classNames(styles["panel__expander__content"]),
 		children
 	});
 };