@helsenorge/designsystem-react 14.9.2 → 15.0.0-beta.1

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input: React.FC<InputProps>","mergedResources: HNDesignsystemInput"],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setInput(defaultValue || '');\n  }\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setInput(defaultValue || '');\n  }\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAY,aAAL,yBAAA,YAAA;CACL,WAAA,UAAO;CACP,WAAA,YAAS;CACT,WAAA,WAAQ;CACR,WAAA,cAAW;CACX,WAAA,YAAS;CACT,WAAA,SAAM;CACN,WAAA,SAAM;CACN,WAAA,UAAO;CACP,WAAA,UAAO;;KACR;;;;;;AIHD,IAAa,gBAAgB,aAAmD;CAC9E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB,mBACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;;;;;ACkFb,IAAM,oBAAoB,YAAoB,SAAkB,aAA6B;CAC3F,MAAM,eAAe,UAAU,WAAW;CAC1C,MAAM,YAAY,UAAU,GAAG,SAAS,MAAM;CAG9C,OAAO,QAAQ,aAAA,GAAwC,OAAO,aAAa,KAAK,UAAU;;AAG5F,IAAM,SAA8B,UAAS;CAC3C,MAAM,EACJ,WACA,cACA,aACA,OAAO,WAAW,MAClB,MACA,cAAc,OACd,MACA,WACA,iBACA,UAAU,YAAY,SACtB,MACA,oBACA,OACA,OACA,WACA,aAAa,iBACb,SAAS,aACT,uBACA,QACA,UACA,UACA,eAAe,OACf,oBACA,cACA,OACA,UACA,UACA,WACA,WACA,eACA,mBACA,WACA,KACA,GAAG,SACD;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAM,kBAAuC;EAC3C,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,MAAM,aAAa,eAAe;CAClC,MAAM,yBAAyB,OAAuB,KAAK;CAC3D,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,gBAAgB,GAAG;CACtD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,aAAa;CACtE,MAAM,CAAC,WAAW,gBAAgB,SAAsC,KAAA,EAAU;CAClF,MAAM,gBAAgB,OAAgB,MAAM;CAC5C,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,WAAW;CAEjB,IAAI,iBAAiB,kBAAkB;EACrC,oBAAoB,aAAa;EACjC,SAAS,gBAAgB,GAAG;;CAG9B,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,wBAAwB,CAAC,CAAC,iBAAiB,MAAM,UAAU,CAAC,SAAS;CAC3E,MAAM,UAAU,YAAY,YAAY,aAAa,CAAC,CAAC,aAAa,CAAC,CAAC,SAAS;CAC/E,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,gBAAgB,eAAe,YAAY,YAAY,UAAU,CAAC;CAExE,MAAM,oBAAoB,WAAG,OAAO,kBAAkB,UAAU;CAEhE,MAAM,iBAAiB,WAAG,OAAO,oBAAoB;GAClD,OAAO,kCAAkC;GACzC,OAAO,mCAAmC;GAC1C,OAAO,8BAA8B;GACrC,OAAO,8BAA8B;GACrC,OAAO,+BAA+B;GACtC,OAAO,gCAAgC;GACvC,OAAO,uCAAuC,QAAQ;EACxD,CAAC;CAEF,MAAM,aAAa,WAAG,OAAO,2BAA2B;GACrD,OAAO,mCAAmC;GAC1C,OAAO,sCAAsC;EAC/C,CAAC;CAEF,MAAM,YAAY,WAAW,SAAS,WAAW,IAAI,GAAG,SAAS,QAAQ;CACzE,MAAM,WAAW,eAAe,WAAW,MAAM,CAAC,UAAU,SAAS,SAAS,SAAS;CAEvF,MAAM,mBAAoC;EACxC,IAAI,CAAC,MACH;EAGF,IAAI,OAAO,SAAS,UAClB,OAAO,oBAAC,kBAAD;GAAU,WAAW,OAAO;GAAiC,OAAO;GAAW,MAAM;GAAU,UAAU;GAAQ,CAAA;EAG1H,OAAO,oBAAC,cAAD;GAAM,WAAW,OAAO;GAAiC,OAAO;GAAW,MAAM;GAAU,SAAS;GAAQ,CAAA;;CAIrH,MAAM,eAAe,MAAmC;EACtD,IAAI,0BAA0B,uBAAuB,WAAW,MAAM;GACpE,MAAM,gBAAgB,YAAY,IAAI;GAEtC,uBADqC,QAAQ,SAAS,eAChD,OAAO;GAEb,IAAI,MAAM,SAAS,MAAM,QAAQ,EAAE;;;CAIvC,MAAM,gBAAgB,MAAiD;EACrE,MAAM,WAAW,kBAAkB,EAAE;EAErC,IAAI,UACF,SAAS,EAAE;EAGb,SAAS,SAAS;EAClB,aAAa,SAAS;;CAIxB,MAAM,qBAAqB,MAAmD;EAC5E,IAAI,OAAO,uBAAuB,eAAe,SAAS,UAAU,OAAO,EAAE,OAAO;EAEpF,MAAM,gBAAgB,OAAO,EAAE,OAAO,MAAM;EAE5C,IAAI,CAAC,aAAa,CAAC,cAAc,YAAY,kBAAkB,KAAK,kBAAkB,KACpF,EAAE,OAAO,QAAQ,qBAAqB;EAGxC,OAAO,EAAE,OAAO;;CAGlB,MAAM,iBAAiB,MAAmD;EACxE,IAAI,SAAS,KAAK,EAAE,IAAI,EACtB,cAAc,UAAU;EAE1B,IAAI,WAAW,UAAU,EAAE;;CAG7B,MAAM,eAAe,MAAmD;EACtE,IAAI,SAAS,KAAK,EAAE,IAAI,EACtB,cAAc,UAAU;;CAI5B,MAAM,WAAW,QAAQ,iBAAiB,OAAO,CAAC,CAAC,MAAM,SAAS,GAAG,KAAA;CAErE,OACE,oBAAC,sBAAD;EAAc,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAD;GAAK,eAAa;GAAQ,oBAAkB,YAAY;GAAO,WAAW;GAAmB,KAAK;aAAlG;IACG,YAAY;KAAS;KAAgB;KAAkB;KAAwB,CAAC;IAEjF,qBAAC,OAAD;KAAK,WAAW,OAAO;eAAvB,CAEE,qBAAC,OAAD;MACE,SAAS;MACT,KAAK,UAAU,CAAC,wBAAwB,kBAAkB,CAAC;MAC3D,WAAW;MACX,OAAO,EAAE,UAAU;gBAJrB;OAMG,CAAC,aAAa,YAAY;OAC3B,oBAAC,SAAD;QACE,GAAI;QACJ,UAAU;QACV,WAAW;QACX,SAAS;QACH;QACA;QACQ;QACd,IAAI;QACJ,WAAW;QACN;QACL,oBAAkB,mBAAmB,OAAO,YAAY;QACxD,gBAAc,CAAC,CAAC;QACN;QACG;QACH;QACV,cAAc,gBAAgB;QACpB;QAEC;QACX,CAAA;OACD,aAAa,YAAY;OACtB;SACN,oBAAC,OAAD;MAAK,WAAW,OAAO;gBAAqC;MAAmB,CAAA,CAC3E;;IACL,iBACC,oBAAC,eAAD;KACiB;KACf,QAAQ,MAAM,UAAU,CAAC;KACzB,SAAS,gBAAgB;KAChB;KACC;KACV,CAAA;IAEH;IACG;;EACO,CAAA;;AAInB,MAAM,cAAc"}

package/lib/LazyIcon.js

@@ -1,11 +1,12 @@
-import { a as IconSize } from "./constants2.js";
+import { IconSize } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as ErrorBoundary_default, t as __rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper.js";
-import { t as useIsServerSide } from "./useIsServerSide.js";
+import { n as _rolldown_dynamic_import_helper_default, t as ErrorBoundary } from "./ErrorBoundary.js";
+import { useIsServerSide } from "./hooks/useIsServerSide.js";
 import { Suspense, lazy, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
-	const lazyLoadIcon = (iconName$1) => lazy(() => __rolldown_dynamic_import_helper_default({
+//#region src/components/LazyIcon/LazyIcon.tsx
+var LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
+	const lazyLoadIcon = (iconName) => lazy(() => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
 		"../Icons/ActiveMonitoring.tsx": () => import("./components/Icons/ActiveMonitoring.js"),
 		"../Icons/AcupunctureBack.tsx": () => import("./components/Icons/AcupunctureBack.js"),
 		"../Icons/AlarmClock.tsx": () => import("./components/Icons/AlarmClock.js"),
@@ -356,7 +357,7 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/Zoom.tsx": () => import("./components/Icons/Zoom.js"),
 		"../Icons/ZoomInLeft.tsx": () => import("./components/Icons/ZoomInLeft.js"),
 		"../Icons/ZoomOutLeft.tsx": () => import("./components/Icons/ZoomOutLeft.js")
-	}, `../Icons/${iconName$1}.tsx`, 3));
+	}), `../Icons/${iconName}.tsx`, 3));
 	const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);
 	if (useIsServerSide()) return null;
 	const fallback = /* @__PURE__ */ jsx("svg", {
@@ -372,7 +373,7 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		width: size,
 		height: size
 	});
-	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback,
 		reset: iconName,
 		children: /* @__PURE__ */ jsx(Suspense, {
@@ -385,9 +386,14 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		})
 	});
 };
+//#endregion
+//#region src/components/LazyIcon/utils.ts
+/** @deprecated Use the useIsServerSide hook instead */
+var isServerSide = () => typeof document === "undefined";
+//#endregion
+//#region src/components/LazyIcon/index.ts
 var LazyIcon_default = LazyIcon;
-const isServerSide = () => typeof document === "undefined";
-var LazyIcon_default$1 = LazyIcon_default;
-export { isServerSide as n, LazyIcon as r, LazyIcon_default$1 as t };
+//#endregion
+export { isServerSide as n, LazyIcon as r, LazyIcon_default as t };
 
 //# sourceMappingURL=LazyIcon.js.map

package/lib/LazyIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIcon.js","names":["LazyIcon: React.FC<LazyIconProps>"],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":";;;;;;AAcA,MAAaA,YAAqC,EAAE,UAAU,OAAO,SAAS,OAAO,GAAG,WAAW;CACjG,MAAM,gBAAgB,eAA2D,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAA2B,YAAY,WAAS,OAAA,EAAA,CAAO;CAExI,MAAM,OAAO,cAAc,aAAa,SAAS,EAAE,CAAC,SAAS,CAAC;AAG9D,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,cAAA;IAAK,SAAS;IAAY;IAAM,GAAI;KAAQ;IACpC;GACG;;AAIpB,IAAA,mBAAe;AC7Cf,MAAa,qBAA8B,OAAO,aAAa;ACE/D,IAAA,qBAAe"}
+{"version":3,"file":"LazyIcon.js","names":[],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":"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"}

package/lib/LazyIllustration.js

@@ -1,18 +1,19 @@
-import { n as ErrorBoundary_default, t as __rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper.js";
-import { t as useIsServerSide } from "./useIsServerSide.js";
+import { n as _rolldown_dynamic_import_helper_default, t as ErrorBoundary } from "./ErrorBoundary.js";
+import { useIsServerSide } from "./hooks/useIsServerSide.js";
 import { n as getIllustration } from "./utils4.js";
 import { t as Illustration_default } from "./Illustration.js";
-import { n as IllustrationSizeList } from "./IllustrationNames.js";
+import { IllustrationSizeList } from "./components/Illustrations/IllustrationNames.js";
 import { Suspense, lazy, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
-	const lazyLoadIllustration = (illustrationName$1, size$1) => {
-		const sizes = IllustrationSizeList[illustrationName$1];
+//#region src/components/LazyIllustration/LazyIllustration.tsx
+var LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
+	const lazyLoadIllustration = (illustrationName, size) => {
+		const sizes = IllustrationSizeList[illustrationName];
 		const illustrationFileName = getIllustration({
-			size: size$1,
+			size,
 			...sizes
 		});
-		return lazy(() => __rolldown_dynamic_import_helper_default({
+		return lazy(() => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
 			"../Illustrations/BabyMobile.tsx": () => import("./components/Illustrations/BabyMobile.js"),
 			"../Illustrations/BabyMobileMedium.tsx": () => import("./components/Illustrations/BabyMobileMedium.js"),
 			"../Illustrations/Child.tsx": () => import("./components/Illustrations/Child.js"),
@@ -37,7 +38,7 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 			"../Illustrations/Support2Medium.tsx": () => import("./components/Illustrations/Support2Medium.js"),
 			"../Illustrations/Thinking.tsx": () => import("./components/Illustrations/Thinking.js"),
 			"../Illustrations/ThinkingMedium.tsx": () => import("./components/Illustrations/ThinkingMedium.js")
-		}, `../Illustrations/${illustrationFileName}.tsx`, 3));
+		}), `../Illustrations/${illustrationFileName}.tsx`, 3));
 	};
 	const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);
 	if (useIsServerSide()) return null;
@@ -54,7 +55,7 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 		width: size,
 		height: size
 	});
-	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback,
 		reset: illustrationName,
 		children: /* @__PURE__ */ jsx(Suspense, {
@@ -67,7 +68,10 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 		})
 	});
 };
-var LazyIllustration_default$1 = LazyIllustration;
-export { LazyIllustration as n, LazyIllustration_default$1 as t };
+//#endregion
+//#region src/components/LazyIllustration/index.ts
+var LazyIllustration_default = LazyIllustration;
+//#endregion
+export { LazyIllustration as n, LazyIllustration_default as t };
 
 //# sourceMappingURL=LazyIllustration.js.map

package/lib/LazyIllustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIllustration.js","names":["LazyIllustration: React.FC<LazyIllustrationProps>"],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;AAgBA,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,oBAAoC,WAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE,MAAA;GAAM,GAAG;GAAO,CAAC;AAEhE,SAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;AAG1G,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,sBAAA;IAA2B;IAAoB;IAAM,GAAI;KAAQ;IACzD;GACG;;AC/CpB,IAAA,6BDmDe"}
+{"version":3,"file":"LazyIllustration.js","names":[],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;;AAgBA,IAAa,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,kBAAoC,SAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE;GAAM,GAAG;GAAO,CAAC;EAEhE,OAAO,WAA4B,wCAAA,uBAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,qCAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,2DAAA,OAAA;GAAA,iEAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,iDAAA,OAAA;GAAA,kDAAA,OAAA;GAAA,wDAAA,OAAA;GAAA,uDAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,gDAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,CAAA,EAAA,oBAAA,qBAAA,OAAA,EAAgD,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;CAG1G,IAFqB,iBAEjB,EACF,OAAO;CAGT,MAAM,WACJ,oBAAC,OAAD;EACE,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,CAAA;CAGJ,OACE,oBAAC,eAAD;EAAyB;EAAU,OAAO;YACxC,oBAAC,UAAD;GAAoB;aAClB,oBAAC,sBAAD;IAA4B;IAAoB;IAAM,GAAI;IAAQ,CAAA;GACzD,CAAA;EACG,CAAA;;;;AC/CpB,IAAA,2BAAe"}

package/lib/LinkList.js

@@ -1,24 +1,28 @@
-import { n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { t as ArrowUpRight_default } from "./ArrowUpRight.js";
-import { n as useLanguage } from "./useLanguage.js";
+import { AnalyticsId, LanguageLocales } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import ArrowUpRight from "./components/Icons/ArrowUpRight.js";
+import { useLanguage } from "./hooks/useLanguage.js";
 import { i as renderElementHeader } from "./ElementHeader.js";
 import { n as listEditModeWrapperClassnames, t as ListEditMode_default } from "./ListEditMode.js";
-import { t as ChevronRight_default } from "./ChevronRight.js";
+import ChevronRight from "./components/Icons/ChevronRight.js";
 import classNames from "classnames";
 import React from "react";
 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) => {
+//#endregion
+//#region src/components/LinkList/resourceHelper.ts
+var 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 = (props) => {
+//#endregion
+//#region src/components/LinkList/LinkList.tsx
+var Link = (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, ref, external = false, ...restProps } = props;
 	const { refObject, isHovered } = usePseudoClasses(linkRef);
 	const isFill = variant === "fill";
@@ -48,8 +52,8 @@ const Link = (props) => {
 		children: image
 	});
 	let chevronIcon = void 0;
-	if (external) chevronIcon = ArrowUpRight_default;
-	else if (chevron) chevronIcon = ChevronRight_default;
+	if (external) chevronIcon = ArrowUpRight;
+	else if (chevron) chevronIcon = ChevronRight;
 	return editMode ? /* @__PURE__ */ jsx("div", {
 		id: contentId,
 		className: liClasses,
@@ -150,11 +154,14 @@ var LinkListComponent = (props) => {
 		})
 	});
 };
-const LinkList = LinkListComponent;
+var LinkList = LinkListComponent;
 LinkList.displayName = "LinkList";
 LinkList.Link = Link;
 Link.displayName = "LinkList.Link";
-var LinkList_default$1 = LinkList;
-export { Link as n, LinkList as r, LinkList_default$1 as t };
+//#endregion
+//#region src/components/LinkList/index.ts
+var LinkList_default = LinkList;
+//#endregion
+export { Link as n, LinkList as r, LinkList_default as t };
 
 //# sourceMappingURL=LinkList.js.map

package/lib/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","names":["Link: LinkType","LinkListComponent: React.FC<LinkListProps>","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 type { HNDesignsystemLinkList } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemLinkList => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemLinkList } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.FC<LinkProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemLinkList>;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    /** @private Turns chevron icon on/off. Overwritten by LinkList so not possible to set on LinkList.Link */\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /** Ref for lenke/knapp */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n    /** Resources for component */\n    resources?: Partial<HNDesignsystemLinkList>;\n    /** @experimental id for content (only used in edit mode for aria-describedby) */\n    contentId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n    /** Replaces the chevron with an arrow up right which is used for indicating external links */\n    external?: boolean;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    contentId,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    resources, // used by ListEditModeItem in LinkList\n    ref,\n    external = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles['link-list__list-item--outline']]: isOutline,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  let chevronIcon = undefined;\n  if (external) {\n    chevronIcon = ArrowUpRight;\n  } else if (chevron) {\n    chevronIcon = ChevronRight;\n  }\n\n  return editMode ? (\n    <div id={contentId} className={liClasses} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <div className={linkClasses}>\n        <div className={statusMarkerClasses}></div>\n        {renderElementHeader(children, {\n          titleHtmlMarkup: 'span',\n          size,\n          parentType: 'linklist',\n          chevronIcon: chevronIcon,\n          icon: icon ?? imageContainer,\n          highlightText,\n        })}\n      </div>\n    </div>\n  ) : (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevronIcon,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevronIcon,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n    resources,\n    ref,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemLinkList = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode, index) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            const childResources = child.props.resources;\n            const deleteAriaLabel = childResources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;\n            const itemId = `linklist-item-${index}`;\n\n            return (\n              <ListEditModeItem\n                color={color}\n                variant={variant}\n                onDelete={child.props.onDelete}\n                contentId={itemId}\n                deleteButtonAriaLabel={deleteAriaLabel}\n              >\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                  contentId: itemId,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport const LinkList = LinkListComponent as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}
+{"version":3,"file":"LinkList.js","names":[],"sources":["../src/resources/HN.Designsystem.LinkList.en-GB.json","../src/resources/HN.Designsystem.LinkList.nb-NO.json","../src/components/LinkList/resourceHelper.ts","../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["{\n  \"editMode_deleteButtonAriaLabel\": \"Delete\"\n}\n","{\n  \"editMode_deleteButtonAriaLabel\": \"Slett\"\n}\n","import type { HNDesignsystemLinkList } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemLinkList => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemLinkList } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.FC<LinkProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemLinkList>;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    /** @private Turns chevron icon on/off. Overwritten by LinkList so not possible to set on LinkList.Link */\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /** Ref for lenke/knapp */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n    /** Resources for component */\n    resources?: Partial<HNDesignsystemLinkList>;\n    /** @experimental id for content (only used in edit mode for aria-describedby) */\n    contentId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n    /** Replaces the chevron with an arrow up right which is used for indicating external links */\n    external?: boolean;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    contentId,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    resources, // used by ListEditModeItem in LinkList\n    ref,\n    external = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles['link-list__list-item--outline']]: isOutline,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  let chevronIcon = undefined;\n  if (external) {\n    chevronIcon = ArrowUpRight;\n  } else if (chevron) {\n    chevronIcon = ChevronRight;\n  }\n\n  return editMode ? (\n    <div id={contentId} className={liClasses} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <div className={linkClasses}>\n        <div className={statusMarkerClasses}></div>\n        {renderElementHeader(children, {\n          titleHtmlMarkup: 'span',\n          size,\n          parentType: 'linklist',\n          chevronIcon: chevronIcon,\n          icon: icon ?? imageContainer,\n          highlightText,\n        })}\n      </div>\n    </div>\n  ) : (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevronIcon,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevronIcon,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n    resources,\n    ref,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemLinkList = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode, index) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            const childResources = child.props.resources;\n            const deleteAriaLabel = childResources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;\n            const itemId = `linklist-item-${index}`;\n\n            return (\n              <ListEditModeItem\n                color={color}\n                variant={variant}\n                onDelete={child.props.onDelete}\n                contentId={itemId}\n                deleteButtonAriaLabel={deleteAriaLabel}\n              >\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                  contentId: itemId,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport const LinkList = LinkListComponent as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}

package/lib/List.js

@@ -1,7 +1,8 @@
-import { n as AnalyticsId } from "./constants2.js";
+import { AnalyticsId } from "./constants.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/List/styles.module.scss";
+//#region src/components/List/List.tsx
 var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
 	className: styles.list__item,
 	children
@@ -15,7 +16,10 @@ var List = ({ children, className, testId, variant = "bullet", margin }) => {
 	});
 };
 List.Item = Item;
-var List_default$1 = List;
-export { List_default$1 as t };
+//#endregion
+//#region src/components/List/index.ts
+var List_default = List;
+//#endregion
+export { List_default as t };
 
 //# sourceMappingURL=List.js.map

package/lib/List.js.map

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

package/lib/ListEditMode.js

@@ -1,11 +1,12 @@
-import { a as IconSize } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { IconSize } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
-import { t as X_default } from "./X.js";
+import X from "./components/Icons/X.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ListEditMode/styles.module.scss";
-const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
+//#region src/components/ListEditMode/ListEditMode.tsx
+var IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 	const { refObject, isHovered } = usePseudoClasses();
 	return /* @__PURE__ */ jsx("button", {
 		ref: refObject,
@@ -22,7 +23,7 @@ const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 		})
 	});
 };
-const ListEditModeItem = (props) => {
+var ListEditModeItem = (props) => {
 	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}`], {
@@ -30,7 +31,7 @@ const ListEditModeItem = (props) => {
 			[styles["list-edit-mode__item--fill"]]: variant === "fill" || variant === "fill-negative"
 		}),
 		children: [children, onDelete && /* @__PURE__ */ jsx(IconButton, {
-			icon: X_default,
+			icon: X,
 			onClick: onDelete,
 			color: "red",
 			ariaLabel: deleteButtonAriaLabel,
@@ -39,9 +40,13 @@ const ListEditModeItem = (props) => {
 	});
 };
 ListEditModeItem.displayName = "ListEditModeItem";
+//#endregion
+//#region src/components/ListEditMode/constants.ts
+var listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
+//#endregion
+//#region src/components/ListEditMode/index.ts
 var ListEditMode_default = ListEditModeItem;
-const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
-var ListEditMode_default$1 = ListEditMode_default;
-export { ListEditModeItem as i, listEditModeWrapperClassnames as n, IconButton as r, ListEditMode_default$1 as t };
+//#endregion
+export { ListEditModeItem as i, listEditModeWrapperClassnames as n, IconButton as r, ListEditMode_default as t };
 
 //# sourceMappingURL=ListEditMode.js.map

package/lib/ListEditMode.js.map

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

package/lib/MaxCharacters.js

@@ -1,23 +1,23 @@
-import { r as FormOnColor } from "./constants2.js";
+import { FormOnColor } from "./constants.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/MaxCharacters/styles.module.scss";
+//#region src/components/MaxCharacters/MaxCharacters.tsx
 var MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
 	const progress = length / maxCharacters;
 	const counterTextClass = classNames(styles["max-characters"], {
 		[styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
 		[styles[`max-characters--invalid`]]: progress > 1
 	});
-	const ariaLevel = progress > .95 ? "polite" : "off";
 	return /* @__PURE__ */ jsx("div", {
-		"aria-live": ariaLevel,
+		"aria-live": progress > .95 ? "polite" : "off",
 		"aria-atomic": "true",
 		className: counterTextClass,
 		style: { maxWidth },
 		children: `${length}/${maxCharacters} ${maxText}`
 	});
 };
-var MaxCharacters_default = MaxCharacters;
-export { MaxCharacters_default as t };
+//#endregion
+export { MaxCharacters as t };
 
 //# sourceMappingURL=MaxCharacters.js.map

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

package/lib/NotificationBadge.js

@@ -1,15 +1,16 @@
-import { t as palette } from "./palette.js";
+import { palette } from "./theme/palette.js";
 import { t as Icon_default } from "./Icon.js";
-import { t as CheckFill_default } from "./CheckFill.js";
-import { t as ErrorSignFill_default } from "./ErrorSignFill.js";
-import { t as InfoSignFill_default } from "./InfoSignFill.js";
-import { t as TriangleX_default } from "./TriangleX.js";
+import CheckFill from "./components/Icons/CheckFill.js";
+import ErrorSignFill from "./components/Icons/ErrorSignFill.js";
+import InfoSignFill from "./components/Icons/InfoSignFill.js";
+import TriangleX from "./components/Icons/TriangleX.js";
 import { jsx } from "react/jsx-runtime";
+//#region src/components/Badge/NotificationBadge.tsx
 var NotificationBadge = (props) => {
 	const { variant, size, className = "", testId, isHovered = false } = props;
 	switch (variant) {
 		case "info": return /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: InfoSignFill_default,
+			svgIcon: InfoSignFill,
 			color: palette.blueberry700,
 			hoverColor: palette.blueberry700,
 			size,
@@ -18,7 +19,7 @@ var NotificationBadge = (props) => {
 			isHovered
 		});
 		case "warn": return /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: ErrorSignFill_default,
+			svgIcon: ErrorSignFill,
 			color: palette.banana800,
 			hoverColor: palette.banana700,
 			size,
@@ -27,7 +28,7 @@ var NotificationBadge = (props) => {
 			isHovered
 		});
 		case "error": return /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: TriangleX_default,
+			svgIcon: TriangleX,
 			color: palette.cherry700,
 			hoverColor: palette.cherry700,
 			size,
@@ -36,7 +37,7 @@ var NotificationBadge = (props) => {
 			isHovered
 		});
 		case "success": return /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon: CheckFill_default,
+			svgIcon: CheckFill,
 			color: palette.kiwi900,
 			hoverColor: palette.kiwi900,
 			size,
@@ -46,7 +47,7 @@ var NotificationBadge = (props) => {
 		});
 	}
 };
-var NotificationBadge_default = NotificationBadge;
-export { NotificationBadge_default as t };
+//#endregion
+export { NotificationBadge as t };
 
 //# sourceMappingURL=NotificationBadge.js.map