@helsenorge/designsystem-react 13.0.0-workspaces-beta.4 → 13.0.0-workspaces-beta.6

package/lib/Button.js

@@ -25,7 +25,7 @@ var checkOnlyIconAria = (onlyIcon, ariaLabel, devEnv) => {
 	if (devEnv && onlyIcon && (ariaLabel === void 0 || ariaLabel === "")) throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
 };
 var Button_default$1 = React.forwardRef(function ButtonForwardedRef(props, ref) {
-	const { ariaLabel, id, children, wrapperClassName, className, arrow, concept = "normal", disabled = false, ellipsis = false, fluid = false, htmlMarkup = "button", onColor = "onlight", onBlur, onClick, size = "medium", variant = "fill", href, tabIndex, testId, target, type = "button", textClassName, textPosition = "left",...restProps } = props;
+	const { ariaLabel, id, children, wrapperClassName, className, arrow, concept = "normal", disabled = false, ellipsis = false, fluid = false, htmlMarkup = "button", onColor = "onlight", onBlur, onClick, size = "medium", variant = "fill", href, tabIndex, testId, target, type = "button", textClassName, textPosition = "left", ...restProps } = props;
 	const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));
 	const { refObject, isHovered } = usePseudoClasses(ref);
 	const buttonContentRef = useRef(null);

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLElement>(ref as React.RefObject<HTMLElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, isMobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../src/components/Button/Button.tsx","../src/components/Button/index.ts"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonOnColor = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  onColor?: ButtonOnColor;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null\n  ) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the text */\n  textClassName?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    onColor = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textClassName,\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { refObject, isHovered } = usePseudoClasses<HTMLElement>(ref as React.RefObject<HTMLElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = onColor === 'ondark';\n  const isMobile = useIsMobileBreakpoint();\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, isMobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(\n    buttonStyles['button__text'],\n    {\n      [buttonStyles['button__text--ellipsis']]: ellipsis,\n      [buttonStyles['button__text--centered']]: fluid && textPosition === 'centered',\n    },\n    textClassName\n  );\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color && !disabled ? iconElement.props.color : iconColor,\n          isHovered: iconElement.props.isHovered === undefined ? !disabled && isHovered : iconElement.props.isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, isMobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, isMobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, isMobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={refObject as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={refObject as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n","import Button from './Button';\nexport * from './Button';\nexport default Button;\n"],"mappings":"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"}

package/lib/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 13.0.0-workspaces-beta.5 (2025-11-12)
+
+## 13.0.0-workspaces-beta.4 (2025-11-11)
+
 ## 13.0.0-workspaces-beta.3 (2025-11-11)
 
 

package/lib/DictionaryTrigger.js

@@ -3,7 +3,7 @@ import React from "react";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/DictionaryTrigger/styles.module.scss";
-var DictionaryTrigger = React.forwardRef(({ children, selected = false, className, testId,...rest }, ref) => {
+var DictionaryTrigger = React.forwardRef(({ children, selected = false, className, testId, ...rest }, ref) => {
 	const triggerClasses = classNames(styles.dictionarytrigger, className);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",

package/lib/DictionaryTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryTrigger.js","names":[],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA2BA,IAAM,oBAAoB,MAAM,YAC7B,EAAE,UAAU,WAAW,OAAO,WAAW,OAAQ,GAAG,QAAQ,QAAQ;CACnE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,UAAU;AAEtE,QACE,oBAAC,UAAA;EACC,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;GACM;EAGd;AAED,kBAAkB,cAAc;AC7ChC,IAAA,8BD+Ce"}
+{"version":3,"file":"DictionaryTrigger.js","names":[],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA2BA,IAAM,oBAAoB,MAAM,YAC7B,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,GAAG,QAAQ,QAAQ;CACnE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,UAAU;AAEtE,QACE,oBAAC,UAAA;EACC,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;GACM;EAGd;AAED,kBAAkB,cAAc;AC7ChC,IAAA,8BD+Ce"}

package/lib/Drawer.js

@@ -27,7 +27,7 @@ const getResources = (language) => {
 	}
 };
 var Drawer = (props) => {
-	const { isOpen,...rest } = props;
+	const { isOpen, ...rest } = props;
 	const isMobile = useIsMobileBreakpoint();
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(InnerDrawer, {
 		...rest,

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** @deprecated Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n    ariaLabelCloseBtn: ariaLabelCloseBtn || resources?.ariaLabelCloseBtn || defaultResources.ariaLabelCloseBtn,\n  };\n\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses, {\n    [styles['drawer__header--no-close-button']]: noCloseButton,\n  });\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { HNDesignsystemDrawer } from '../../resources/Resources';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { useLanguage } from '../../utils/language';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** @deprecated Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    ariaLabelCloseBtn,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n    ariaLabelCloseBtn: ariaLabelCloseBtn || resources?.ariaLabelCloseBtn || defaultResources.ariaLabelCloseBtn,\n  };\n\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses, {\n    [styles['drawer__header--no-close-button']]: noCloseButton,\n  });\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup={titleHtmlMarkup} appearance=\"title3\">\n              {title}\n            </Title>\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={styles.drawer__content}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}

package/lib/HelpTriggerIcon.js

@@ -65,7 +65,7 @@ var HelpTriggerIcon = React.forwardRef((props, ref) => {
 		ref
 	});
 });
-const HelpTriggerIconInternal = React.forwardRef(({ ariaLabel, ariaLabelledById, className, htmlMarkup = "button", isHovered = false, size = "medium", testId, weight = "normal",...buttonRest }, ref) => {
+const HelpTriggerIconInternal = React.forwardRef(({ ariaLabel, ariaLabelledById, className, htmlMarkup = "button", isHovered = false, size = "medium", testId, weight = "normal", ...buttonRest }, ref) => {
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledById

package/lib/HelpTriggerIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n  const paths =\n    weight === 'normal' ? (\n      <>\n        <defs>\n          <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n            />\n          </clipPath>\n        </defs>\n        <path\n          d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n          fill={color}\n          clipPath=\"url(#clipCircle)\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill={color}\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill={color}\n        />\n      </>\n    ) : (\n      <>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill=\"white\"\n        />\n      </>\n    );\n\n  return (\n    <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon = React.forwardRef<HTMLButtonElement, HelpTriggerIconProps>((props, ref) => {\n  return <HelpTriggerIconInternal {...props} ref={ref} />;\n});\n\nexport const HelpTriggerIconInternal = React.forwardRef<HTMLButtonElement, HelpTriggerIconInternalProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      className,\n      htmlMarkup = 'button',\n      isHovered = false,\n      size = 'medium',\n      testId,\n      weight = 'normal',\n      ...buttonRest\n    },\n    ref\n  ) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(\n      ref as React.RefObject<HTMLButtonElement>,\n      false\n    );\n    const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} weight={weight} />;\n    const isButton = htmlMarkup === 'button';\n    const iconClasses = classNames(\n      styles['help-trigger-icon'],\n      {\n        [styles['help-trigger-icon--strong']]: weight === 'strong',\n        [styles['help-trigger-icon--is-button']]: isButton,\n      },\n      styles[`help-trigger-icon--${size}`],\n      className\n    );\n\n    if (isButton) {\n      return (\n        <button\n          {...ariaLabelAttributes}\n          type=\"button\"\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.HelpTriggerIcon}\n          className={iconClasses}\n          ref={mergeRefs([refObject, ref])}\n          {...buttonRest}\n        >\n          {helpIcon}\n        </button>\n      );\n    }\n\n    return (\n      <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n        {helpIcon}\n      </span>\n    );\n  }\n);\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":";;;;;;;;AASA,IAAMA,YAAqC,EAAE,OAAO,aAAgD;AA6ClG,QACE,oBAAC,OAAA;EAAI,MAAK;EAAO,QAAO;EAAK,UAAS;EAAU,MAAM;EAAgB,OAAM;EAAK,SAAQ;EAAY,OAAM;YA5C3G,WAAW,WACT,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA,EAAA,UACC,oBAAC,YAAA;IAAS,IAAG;IAAa,eAAc;cACtC,oBAAC,QAAA;KACC,UAAS;KACT,UAAS;KACT,GAAE;MACF;KACO,EAAA,CACN;GACP,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;IACN,UAAS;KACT;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;MACD,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;MACD;GAMC;;AAIV,IAAA,mBAAe;ACPf,IAAM,gBAAgB,OAAgB,WAAmD;AACvF,KAAI,WAAW,SACb,QAAO,QAAQ,wCAAwC;;AAI3D,IAAM,kBAAkB,MAAM,YAAqD,OAAO,QAAQ;AAChG,QAAO,oBAAC,yBAAA;EAAwB,GAAI;EAAY;GAAO;EACvD;AAEF,MAAa,0BAA0B,MAAM,YAEzC,EACE,WACA,kBACA,WACA,aAAa,UACb,YAAY,OACZ,OAAO,UACP,QACA,SAAS,SACT,GAAG,cAEL,QACG;CACH,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,EAAE,WAAW,WAAW,qBAAqB,iBACjD,KACA,MACD;CACD,MAAM,WAAW,oBAAC,kBAAA;EAAS,OAAO,aAAa,oBAAoB,WAAW,OAAO;EAAU;GAAU;CACzG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,WAClB,OAAO,sBACP;GACG,OAAO,+BAA+B,WAAW;GACjD,OAAO,kCAAkC;EAC3C,EACD,OAAO,sBAAsB,SAC7B,UACD;AAED,KAAI,SACF,QACE,oBAAC,UAAA;EACC,GAAI;EACJ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;YAEH;GACM;AAIb,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB,WAAW;YAClF;GACI;EAGZ;AAED,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;ACvHtC,IAAA,4BDyHe"}
+{"version":3,"file":"HelpTriggerIcon.js","names":["HelpSign: React.FC<HelpSignProps>"],"sources":["../src/components/HelpTriggerIcon/HelpSign.tsx","../src/components/HelpTriggerIcon/HelpTriggerIcon.tsx","../src/components/HelpTriggerIcon/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { HelpTriggerWeights } from '../HelpTriggerIcon';\n\nexport interface HelpSignProps {\n  color?: string;\n  weight?: HelpTriggerWeights;\n}\n\nconst HelpSign: React.FC<HelpSignProps> = ({ color, weight }: HelpSignProps): React.ReactElement => {\n  const paths =\n    weight === 'normal' ? (\n      <>\n        <defs>\n          <clipPath id=\"clipCircle\" clipPathUnits=\"userSpaceOnUse\">\n            <path\n              fillRule=\"evenodd\"\n              clipRule=\"evenodd\"\n              d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0\"\n            />\n          </clipPath>\n        </defs>\n        <path\n          d=\"M10.0004 0V-2C3.38207 -2 -2 3.38088 -2 9.99961H0H2C2 5.59043 5.5908 2 10.0004 2V0ZM0 9.99961H-2C-2 16.6181 3.38187 22 10.0004 22V20V18C5.59101 18 2 14.409 2 9.99961H0ZM10.0004 20V22C16.6191 22 22 16.6179 22 9.99961H20H18C18 14.4092 14.4096 18 10.0004 18V20ZM20 9.99961H22C22 3.38108 16.6189 -2 10.0004 -2V0V2C14.4098 2 18 5.59022 18 9.99961H20Z\"\n          fill={color}\n          clipPath=\"url(#clipCircle)\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill={color}\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill={color}\n        />\n      </>\n    ) : (\n      <>\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10.0004 0C4.48644 0 0 4.48565 0 9.99961C0 15.5136 4.48644 20 10.0004 20C15.5144 20 20 15.5136 20 9.99961C20 4.48565 15.5144 0 10.0004 0Z\"\n        />\n        <path\n          d=\"M9.93555 4.40039C12.1061 4.40039 13.2998 5.8386 13.2998 7.35156C13.2997 8.52045 12.2922 9.61789 11.8262 9.94238C11.3601 10.2669 11.209 10.5 11.209 10.5C11.0283 10.6756 10.9117 11.0195 10.8721 11.2715C10.8316 11.5286 10.8476 11.5136 10.8477 11.7998V11.9004H9.20117V11.2715C9.20117 10.8463 9.20556 10.7433 9.31934 10.374C9.43483 9.99921 9.75195 9.54492 10.0928 9.18262C10.4336 8.82031 10.751 8.58105 10.751 8.58105C11.1983 8.25659 11.3818 7.87361 11.3818 7.42285C11.3818 7.07417 11.2638 6.74031 11.0283 6.49414C10.794 6.24916 10.435 6.08301 9.93555 6.08301C8.94209 6.08316 8.41811 6.83977 8.41797 7.60742C8.41797 7.81763 8.44731 8.07481 8.49805 8.21582L8.5498 8.36035L6.7793 8.23535L6.70898 8.23047L6.69043 8.16309C6.63105 7.95321 6.60059 7.71544 6.60059 7.47949C6.60081 6.00363 7.71413 4.40053 9.93555 4.40039Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M10 12.7998C10.6024 12.7999 11.0996 13.31 11.0996 13.9072C11.0994 14.506 10.6023 14.9999 10 15C9.38173 15 8.8996 14.506 8.89941 13.9072C8.89941 13.31 9.38162 12.7998 10 12.7998Z\"\n          fill=\"white\"\n        />\n      </>\n    );\n\n  return (\n    <svg fill=\"none\" height=\"20\" overflow=\"visible\" role={'presentation'} width=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\n      {paths}\n    </svg>\n  );\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type HelpTriggerIconSizes = 'inherit' | 'medium' | 'large' | 'xlarge';\n\nexport type HelpTriggerIconTags = 'button' | 'span';\n\nexport type HelpTriggerWeights = 'normal' | 'strong';\n\nexport interface HelpTriggerIconProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\n   * Size of the Icon. Default: medium.\n   */\n  size?: HelpTriggerIconSizes;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * Sets the colors of the help trigger icon. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n}\n\ninterface HelpTriggerIconInternalProps extends HelpTriggerIconProps {\n  /**\n   * Sets the hover styling of the trigger. Intended for use when wrapped by a parent button.\n   */\n  isHovered?: boolean;\n  /**\n   * Only use this if the parent wrapper is a Button!\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: HelpTriggerIconTags;\n}\n\nconst getIconColor = (hover: boolean, weight: HelpTriggerWeights): string | undefined => {\n  if (weight === 'normal') {\n    return hover ? 'var(--color-help-graphics-verydark)' : 'var(--color-help-graphics-normal)';\n  }\n};\n\nconst HelpTriggerIcon = React.forwardRef<HTMLButtonElement, HelpTriggerIconProps>((props, ref) => {\n  return <HelpTriggerIconInternal {...props} ref={ref} />;\n});\n\nexport const HelpTriggerIconInternal = React.forwardRef<HTMLButtonElement, HelpTriggerIconInternalProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      className,\n      htmlMarkup = 'button',\n      isHovered = false,\n      size = 'medium',\n      testId,\n      weight = 'normal',\n      ...buttonRest\n    },\n    ref\n  ) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const { refObject, isHovered: interalIsHovered } = usePseudoClasses<HTMLButtonElement>(\n      ref as React.RefObject<HTMLButtonElement>,\n      false\n    );\n    const helpIcon = <HelpSign color={getIconColor(interalIsHovered || isHovered, weight)} weight={weight} />;\n    const isButton = htmlMarkup === 'button';\n    const iconClasses = classNames(\n      styles['help-trigger-icon'],\n      {\n        [styles['help-trigger-icon--strong']]: weight === 'strong',\n        [styles['help-trigger-icon--is-button']]: isButton,\n      },\n      styles[`help-trigger-icon--${size}`],\n      className\n    );\n\n    if (isButton) {\n      return (\n        <button\n          {...ariaLabelAttributes}\n          type=\"button\"\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.HelpTriggerIcon}\n          className={iconClasses}\n          ref={mergeRefs([refObject, ref])}\n          {...buttonRest}\n        >\n          {helpIcon}\n        </button>\n      );\n    }\n\n    return (\n      <span data-testid={testId} data-analyticsid={AnalyticsId.HelpTriggerIcon} className={iconClasses}>\n        {helpIcon}\n      </span>\n    );\n  }\n);\n\nHelpTriggerIcon.displayName = 'HelpTriggerIcon';\nHelpTriggerIconInternal.displayName = 'HelpTriggerIconInternal';\n\nexport default HelpTriggerIcon;\n","import HelpTriggerIcon from './HelpTriggerIcon';\nexport * from './HelpTriggerIcon';\nexport default HelpTriggerIcon;\n"],"mappings":";;;;;;;;AASA,IAAMA,YAAqC,EAAE,OAAO,aAAgD;AA6ClG,QACE,oBAAC,OAAA;EAAI,MAAK;EAAO,QAAO;EAAK,UAAS;EAAU,MAAM;EAAgB,OAAM;EAAK,SAAQ;EAAY,OAAM;YA5C3G,WAAW,WACT,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA,EAAA,UACC,oBAAC,YAAA;IAAS,IAAG;IAAa,eAAc;cACtC,oBAAC,QAAA;KACC,UAAS;KACT,UAAS;KACT,GAAE;MACF;KACO,EAAA,CACN;GACP,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;IACN,UAAS;KACT;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM;KACN;MACD,GAEH,qBAAA,UAAA,EAAA,UAAA;GACE,oBAAC,QAAA;IACC,UAAS;IACT,UAAS;IACT,GAAE;KACF;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAK;KACL;MACD;GAMC;;AAIV,IAAA,mBAAe;ACPf,IAAM,gBAAgB,OAAgB,WAAmD;AACvF,KAAI,WAAW,SACb,QAAO,QAAQ,wCAAwC;;AAI3D,IAAM,kBAAkB,MAAM,YAAqD,OAAO,QAAQ;AAChG,QAAO,oBAAC,yBAAA;EAAwB,GAAI;EAAY;GAAO;EACvD;AAEF,MAAa,0BAA0B,MAAM,YAEzC,EACE,WACA,kBACA,WACA,aAAa,UACb,YAAY,OACZ,OAAO,UACP,QACA,SAAS,UACT,GAAG,cAEL,QACG;CACH,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,EAAE,WAAW,WAAW,qBAAqB,iBACjD,KACA,MACD;CACD,MAAM,WAAW,oBAAC,kBAAA;EAAS,OAAO,aAAa,oBAAoB,WAAW,OAAO;EAAU;GAAU;CACzG,MAAM,WAAW,eAAe;CAChC,MAAM,cAAc,WAClB,OAAO,sBACP;GACG,OAAO,+BAA+B,WAAW;GACjD,OAAO,kCAAkC;EAC3C,EACD,OAAO,sBAAsB,SAC7B,UACD;AAED,KAAI,SACF,QACE,oBAAC,UAAA;EACC,GAAI;EACJ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;YAEH;GACM;AAIb,QACE,oBAAC,QAAA;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB,WAAW;YAClF;GACI;EAGZ;AAED,gBAAgB,cAAc;AAC9B,wBAAwB,cAAc;ACvHtC,IAAA,4BDyHe"}

package/lib/HelpTriggerStandalone.js

@@ -8,7 +8,7 @@ import React from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HelpTriggerStandalone/styles.module.scss";
-var HelpTriggerStandalone = React.forwardRef(({ ariaLabel, ariaLabelledById, children, className, testId, weight = "normal",...rest }, ref) => {
+var HelpTriggerStandalone = React.forwardRef(({ ariaLabel, ariaLabelledById, children, className, testId, weight = "normal", ...rest }, ref) => {
 	const isMobile = useIsMobileBreakpoint();
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,

package/lib/HelpTriggerStandalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpTriggerStandalone.js","names":[],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerStandalone. */\n  children: React.ReactNode;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerStandalone = React.forwardRef<HTMLButtonElement, HelpTriggerStandaloneProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const isMobile = useIsMobileBreakpoint();\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n    const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerStandalone}\n        className={helpTriggerStandaloneStyles}\n        ref={mergeRefs([refObject, ref])}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n        <span className={styles['help-trigger-standalone__children']}>{children}</span>\n      </button>\n    );\n  }\n);\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;;AAuCA,IAAM,wBAAwB,MAAM,YACjC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,SAAU,GAAG,QAAQ,QAAQ;CACjG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,WAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,KAA2C,MAAM;AAEtH,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,yBAAA;GAAgC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;IAAa,EAC1H,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAuC;IAAgB,CAAA;GACxE;EAGd;AAED,sBAAsB,cAAc;AC9DpC,IAAA,kCDgEe"}
+{"version":3,"file":"HelpTriggerStandalone.js","names":[],"sources":["../src/components/HelpTriggerStandalone/HelpTriggerStandalone.tsx","../src/components/HelpTriggerStandalone/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerStandaloneProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerStandalone. */\n  children: React.ReactNode;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerStandalone = React.forwardRef<HTMLButtonElement, HelpTriggerStandaloneProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const isMobile = useIsMobileBreakpoint();\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerStandaloneStyles = classNames(styles['help-trigger-standalone'], className);\n    const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>, false);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerStandalone}\n        className={helpTriggerStandaloneStyles}\n        ref={mergeRefs([refObject, ref])}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <HelpTriggerIconInternal weight={weight} size={isMobile ? 'medium' : 'large'} htmlMarkup={'span'} isHovered={isHovered} />\n        <span className={styles['help-trigger-standalone__children']}>{children}</span>\n      </button>\n    );\n  }\n);\n\nHelpTriggerStandalone.displayName = 'HelpTriggerStandalone';\n\nexport default HelpTriggerStandalone;\n","import HelpTriggerStandalone from './HelpTriggerStandalone';\nexport * from './HelpTriggerStandalone';\nexport default HelpTriggerStandalone;\n"],"mappings":";;;;;;;;;;AAuCA,IAAM,wBAAwB,MAAM,YACjC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACjG,MAAM,WAAW,uBAAuB;CACxC,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAC9F,MAAM,8BAA8B,WAAW,OAAO,4BAA4B,UAAU;CAC5F,MAAM,EAAE,WAAW,cAAc,iBAAoC,KAA2C,MAAM;AAEtH,QACE,qBAAC,UAAA;EACC,cAAY;EACZ,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,KAAK,UAAU,CAAC,WAAW,IAAI,CAAC;EAChC,GAAI;EACJ,GAAI;aAEJ,oBAAC,yBAAA;GAAgC;GAAQ,MAAM,WAAW,WAAW;GAAS,YAAY;GAAmB;IAAa,EAC1H,oBAAC,QAAA;GAAK,WAAW,OAAO;GAAuC;IAAgB,CAAA;GACxE;EAGd;AAED,sBAAsB,cAAc;AC9DpC,IAAA,kCDgEe"}

package/lib/Highlighter.js

@@ -21,7 +21,7 @@ const Highlighter = ({ children, searchText }) => {
 	const recursivelyHighlight = (node) => {
 		if (typeof node === "string") return replaceWithMarkTag(node);
 		if (React.isValidElement(node)) {
-			const { children: nodeChildren,...props } = node.props;
+			const { children: nodeChildren, ...props } = node.props;
 			if (node.type === DuolistGroup) {
 				const highlightedTerm = replaceWithMarkTag(node.props.term);
 				const highlightedDescription = replaceWithMarkTag(node.props.description);

package/lib/Highlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Highlighter.js","names":[],"sources":["../src/components/Highlighter/Highlighter.tsx","../src/components/Highlighter/index.ts"],"sourcesContent":["import React from 'react';\n\nimport uuid from '../../utils/uuid';\nimport { DuolistGroup } from '../Duolist';\n\nimport styles from './styles.module.scss';\n\ninterface HighlightProps {\n  children?: React.ReactNode;\n  searchText?: string;\n}\n\nexport const Highlighter = ({ children, searchText }: HighlightProps): React.ReactElement | null => {\n  if (!searchText) {\n    return <>{children}</>;\n  }\n\n  const highlightRegex = new RegExp(`(${searchText})`, 'i');\n\n  const replaceWithMarkTag = (text: string): (string | React.JSX.Element)[] => {\n    return text.split(highlightRegex).map(part => {\n      if (highlightRegex.test(part)) {\n        const id = uuid();\n        return (\n          <mark key={id} className={styles.highlight}>\n            {part}\n          </mark>\n        );\n      }\n      return part;\n    });\n  };\n\n  const recursivelyHighlight = (node: React.ReactNode): React.ReactNode => {\n    if (typeof node === 'string') {\n      return replaceWithMarkTag(node);\n    }\n\n    if (React.isValidElement(node)) {\n      const { children: nodeChildren, ...props } = node.props;\n\n      // Handle DuoList specifically\n      if (node.type === DuolistGroup) {\n        const highlightedTerm = replaceWithMarkTag(node.props.term as string);\n        const highlightedDescription = replaceWithMarkTag(node.props.description as string);\n        return <DuolistGroup {...node.props} term={highlightedTerm} description={highlightedDescription} />;\n      }\n\n      if (!nodeChildren) {\n        return node;\n      }\n\n      const highlightedChildren = React.Children.toArray(nodeChildren).map(child => recursivelyHighlight(child));\n      return React.cloneElement(node, props, highlightedChildren);\n    }\n\n    return node;\n  };\n\n  return <>{React.Children.map(children, recursivelyHighlight)}</>;\n};\n\nexport default Highlighter;\n","import Highlighter from './Highlighter';\nexport * from './Highlighter';\nexport default Highlighter;\n"],"mappings":";;;;;AAYA,MAAa,eAAe,EAAE,UAAU,iBAA4D;AAClG,KAAI,CAAC,WACH,QAAO,oBAAA,UAAA,EAAG,UAAA,CAAY;CAGxB,MAAM,iBAAiB,IAAI,OAAO,IAAI,WAAW,IAAI,IAAI;CAEzD,MAAM,sBAAsB,SAAiD;AAC3E,SAAO,KAAK,MAAM,eAAe,CAAC,KAAI,SAAQ;AAC5C,OAAI,eAAe,KAAK,KAAK,EAAE;IAC7B,MAAM,KAAK,cAAM;AACjB,WACE,oBAAC,QAAA;KAAc,WAAW,OAAO;eAC9B;OADQ,GAEJ;;AAGX,UAAO;IACP;;CAGJ,MAAM,wBAAwB,SAA2C;AACvE,MAAI,OAAO,SAAS,SAClB,QAAO,mBAAmB,KAAK;AAGjC,MAAI,MAAM,eAAe,KAAK,EAAE;GAC9B,MAAM,EAAE,UAAU,aAAc,GAAG,UAAU,KAAK;AAGlD,OAAI,KAAK,SAAS,cAAc;IAC9B,MAAM,kBAAkB,mBAAmB,KAAK,MAAM,KAAe;IACrE,MAAM,yBAAyB,mBAAmB,KAAK,MAAM,YAAsB;AACnF,WAAO,oBAAC,cAAA;KAAa,GAAI,KAAK;KAAO,MAAM;KAAiB,aAAa;MAA0B;;AAGrG,OAAI,CAAC,aACH,QAAO;GAGT,MAAM,sBAAsB,MAAM,SAAS,QAAQ,aAAa,CAAC,KAAI,UAAS,qBAAqB,MAAM,CAAC;AAC1G,UAAO,MAAM,aAAa,MAAM,OAAO,oBAAoB;;AAG7D,SAAO;;AAGT,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,SAAS,IAAI,UAAU,qBAAqB,EAAA,CAAI;;ACzDlE,IAAA,wBD4De"}
+{"version":3,"file":"Highlighter.js","names":[],"sources":["../src/components/Highlighter/Highlighter.tsx","../src/components/Highlighter/index.ts"],"sourcesContent":["import React from 'react';\n\nimport uuid from '../../utils/uuid';\nimport { DuolistGroup } from '../Duolist';\n\nimport styles from './styles.module.scss';\n\ninterface HighlightProps {\n  children?: React.ReactNode;\n  searchText?: string;\n}\n\nexport const Highlighter = ({ children, searchText }: HighlightProps): React.ReactElement | null => {\n  if (!searchText) {\n    return <>{children}</>;\n  }\n\n  const highlightRegex = new RegExp(`(${searchText})`, 'i');\n\n  const replaceWithMarkTag = (text: string): (string | React.JSX.Element)[] => {\n    return text.split(highlightRegex).map(part => {\n      if (highlightRegex.test(part)) {\n        const id = uuid();\n        return (\n          <mark key={id} className={styles.highlight}>\n            {part}\n          </mark>\n        );\n      }\n      return part;\n    });\n  };\n\n  const recursivelyHighlight = (node: React.ReactNode): React.ReactNode => {\n    if (typeof node === 'string') {\n      return replaceWithMarkTag(node);\n    }\n\n    if (React.isValidElement(node)) {\n      const { children: nodeChildren, ...props } = node.props;\n\n      // Handle DuoList specifically\n      if (node.type === DuolistGroup) {\n        const highlightedTerm = replaceWithMarkTag(node.props.term as string);\n        const highlightedDescription = replaceWithMarkTag(node.props.description as string);\n        return <DuolistGroup {...node.props} term={highlightedTerm} description={highlightedDescription} />;\n      }\n\n      if (!nodeChildren) {\n        return node;\n      }\n\n      const highlightedChildren = React.Children.toArray(nodeChildren).map(child => recursivelyHighlight(child));\n      return React.cloneElement(node, props, highlightedChildren);\n    }\n\n    return node;\n  };\n\n  return <>{React.Children.map(children, recursivelyHighlight)}</>;\n};\n\nexport default Highlighter;\n","import Highlighter from './Highlighter';\nexport * from './Highlighter';\nexport default Highlighter;\n"],"mappings":";;;;;AAYA,MAAa,eAAe,EAAE,UAAU,iBAA4D;AAClG,KAAI,CAAC,WACH,QAAO,oBAAA,UAAA,EAAG,UAAA,CAAY;CAGxB,MAAM,iBAAiB,IAAI,OAAO,IAAI,WAAW,IAAI,IAAI;CAEzD,MAAM,sBAAsB,SAAiD;AAC3E,SAAO,KAAK,MAAM,eAAe,CAAC,KAAI,SAAQ;AAC5C,OAAI,eAAe,KAAK,KAAK,EAAE;IAC7B,MAAM,KAAK,cAAM;AACjB,WACE,oBAAC,QAAA;KAAc,WAAW,OAAO;eAC9B;OADQ,GAEJ;;AAGX,UAAO;IACP;;CAGJ,MAAM,wBAAwB,SAA2C;AACvE,MAAI,OAAO,SAAS,SAClB,QAAO,mBAAmB,KAAK;AAGjC,MAAI,MAAM,eAAe,KAAK,EAAE;GAC9B,MAAM,EAAE,UAAU,cAAc,GAAG,UAAU,KAAK;AAGlD,OAAI,KAAK,SAAS,cAAc;IAC9B,MAAM,kBAAkB,mBAAmB,KAAK,MAAM,KAAe;IACrE,MAAM,yBAAyB,mBAAmB,KAAK,MAAM,YAAsB;AACnF,WAAO,oBAAC,cAAA;KAAa,GAAI,KAAK;KAAO,MAAM;KAAiB,aAAa;MAA0B;;AAGrG,OAAI,CAAC,aACH,QAAO;GAGT,MAAM,sBAAsB,MAAM,SAAS,QAAQ,aAAa,CAAC,KAAI,UAAS,qBAAqB,MAAM,CAAC;AAC1G,UAAO,MAAM,aAAa,MAAM,OAAO,oBAAoB;;AAG7D,SAAO;;AAGT,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,SAAS,IAAI,UAAU,qBAAqB,EAAA,CAAI;;ACzDlE,IAAA,wBD4De"}

package/lib/HorizontalScroll.js

@@ -6,7 +6,7 @@ import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/HorizontalScroll/styles.module.scss";
 var ROOT_MARGIN_OFFSET = "3px";
-const HorizontalScroll = ({ children, childWidth, testId,...rest }) => {
+const HorizontalScroll = ({ children, childWidth, testId, ...rest }) => {
 	const viewportRef = useRef(null);
 	const leftRef = useRef(null);
 	const rightRef = useRef(null);

package/lib/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","names":["HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes>"],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;AAYA,IAAM,qBAAqB;AAY3B,MAAaA,oBAA2E,EAAE,UAAU,YAAY,OAAQ,GAAG,WAAW;CACpI,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACpH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACtH,MAAM,EAAE,OAAO,gBAAgB,MAAM,QAAQ,YAAY,IAAI,EAAE;CAE/D,MAAM,gBAAgB,aAAa;CACnC,MAAM,kBAAkB,WAAW,OAAO,4BAA4B,iBAAiB,OAAO,wCAAwC;CACtI,MAAM,oBAAoB,KAAK,iBAAiB,KAAK;AAErD,oBAAmB,aAAa,CAAC,cAAc,YAAY,CAAC;AAE5D,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;EAAkB,eAAa;YAGpD,qBAAC,OAAA;GACC,WAAW;GACX,KAAK;GACL,UAAU,oBAAoB,IAAI,KAAA;GAClC,MAAM,oBAAoB,WAAW,KAAA;GACrC,GAAI;;IAEJ,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,wCAC1B,EAAA,CACD;IACF,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,wCAC3B,EAAA,CACD;IACF,oBAAC,OAAA,EAAI,KAAK,SAAA,CAAW;IACpB;IACD,oBAAC,OAAA,EAAI,KAAK,UAAA,CAAY;;IAClB;GACF;;ACjEV,IAAA,6BDqEe"}
+{"version":3,"file":"HorizontalScroll.js","names":["HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes>"],"sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx","../src/components/HorizontalScroll/index.ts"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { useStopPropagation } from '../../hooks/usestopPropagation';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  children?: React.ReactNode;\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  useStopPropagation(viewportRef, ['touchstart', 'touchmove']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n","import HorizontalScroll from './HorizontalScroll';\nexport * from './HorizontalScroll';\nexport default HorizontalScroll;\n"],"mappings":";;;;;;;AAYA,IAAM,qBAAqB;AAY3B,MAAaA,oBAA2E,EAAE,UAAU,YAAY,QAAQ,GAAG,WAAW;CACpI,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,gBAAgB,aAAa,SAAS,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACpH,MAAM,iBAAiB,aAAa,UAAU,GAAG;EAAE,MAAM,aAAa;EAAS,YAAY;EAAoB,EAAE,KAAK;CACtH,MAAM,EAAE,OAAO,gBAAgB,MAAM,QAAQ,YAAY,IAAI,EAAE;CAE/D,MAAM,gBAAgB,aAAa;CACnC,MAAM,kBAAkB,WAAW,OAAO,4BAA4B,iBAAiB,OAAO,wCAAwC;CACtI,MAAM,oBAAoB,KAAK,iBAAiB,KAAK;AAErD,oBAAmB,aAAa,CAAC,cAAc,YAAY,CAAC;AAE5D,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;EAAkB,eAAa;YAGpD,qBAAC,OAAA;GACC,WAAW;GACX,KAAK;GACL,UAAU,oBAAoB,IAAI,KAAA;GAClC,MAAM,oBAAoB,WAAW,KAAA;GACrC,GAAI;;IAEJ,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,sCACP,CAAC,iBAAiB,OAAO,wCAC1B,EAAA,CACD;IACF,oBAAC,OAAA,EACC,WAAW,WACT,OAAO,6BACP,OAAO,uCACP,CAAC,kBAAkB,OAAO,wCAC3B,EAAA,CACD;IACF,oBAAC,OAAA,EAAI,KAAK,SAAA,CAAW;IACpB;IACD,oBAAC,OAAA,EAAI,KAAK,UAAA,CAAY;;IAClB;GACF;;ACjEV,IAAA,6BDqEe"}

package/lib/Icon.js

@@ -8,7 +8,7 @@ const getIcon = ({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xx
 	return isHovered ? normalHover : normal;
 };
 const Icon = React.forwardRef((props, ref) => {
-	const { svgIcon, ariaLabel, className = "", size = IconSize.Small, color = "black", hoverColor = color || "black", isHovered = false, onColor, testId,...other } = props;
+	const { svgIcon, ariaLabel, className = "", size = IconSize.Small, color = "black", hoverColor = color || "black", isHovered = false, onColor, testId, ...other } = props;
 	const svgRaw = React.createElement(svgIcon, {
 		size,
 		isHovered,

package/lib/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":[],"sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, IconSize } from '../../constants';\nimport { StatusDotOnColor } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useId();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n","export * from './Icon';\nexport { IconSize } from '../../constants';\n\nimport { Icon } from './Icon';\nexport default Icon;\n"],"mappings":";;;;AAkDA,MAAa,WAAW,EACtB,MACA,WACA,QACA,aACA,QACA,aACA,SACA,mBACoC;AACpC,KAAI,QAAQ,SAAS,WAAW,WAAW,aACzC,QAAO,YAAY,eAAe;AAEpC,KAAI,QAAQ,SAAS,UAAU,UAAU,YACvC,QAAO,YAAY,cAAc;AAGnC,QAAO,YAAY,cAAc;;AAGnC,MAAa,OAAO,MAAM,YAAY,OAAkB,QAA2C;CACjG,MAAM,EACJ,SACA,WACA,YAAY,IACZ,OAAO,SAAS,OAChB,QAAQ,SACR,aAAa,SAAS,SACtB,YAAY,OACZ,SACA,OACA,GAAG,UACD;CAEJ,MAAM,SAAS,MAAM,cAAc,SAAS;EAC1C;EACA;EACA;EACD,CAAC;CAEF,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,YAAY,aAAa;AAE1C,QACE,qBAAC,OAAA;EACC,eAAa;EACb,oBAAkB,YAAY;EACzB;EACL,WAAW,WAAW,mBAAmB,UAAU;EACnD,MAAM,YAAY,QAAQ;EAC1B,mBAAiB,YAAY,UAAU,KAAA;EACvC,WAAW;EACX,eAAa,YAAY,KAAA,IAAY;EACrC,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;EACP,GAAI;aAEH,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB,EACpD,OAAA;GACG;EAER;AAEF,KAAK,cAAc;ACjHnB,IAAA,eAAe"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../src/components/Icon/Icon.tsx","../src/components/Icon/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, IconSize } from '../../constants';\nimport { StatusDotOnColor } from '../StatusDot';\n\nexport type SvgIcon = React.FC<SvgPathProps>;\n\nexport interface BaseIconProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the icon. */\n  size?: number;\n  /* Changes the color of the icon. */\n  color?: string;\n  /* Changes the hover color of the icon. */\n  hoverColor?: string;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /* Swaps the displayed icon to the hover version and changes its color. */\n  isHovered?: boolean;\n  /** Defines the color of the icon */\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IconProps extends BaseIconProps {\n  /* Sets which icon should be displayed. */\n  svgIcon: SvgIcon;\n}\n\nexport interface SvgPathProps {\n  size: IconSize;\n  isHovered: boolean;\n  onColor?: keyof typeof FormOnColor | StatusDotOnColor;\n}\n\ninterface IconConfig {\n  size: IconSize;\n  isHovered: boolean;\n  normal: React.ReactElement;\n  normalHover: React.ReactElement;\n  xSmall?: React.ReactElement;\n  xSmallHover?: React.ReactElement;\n  xxSmall?: React.ReactElement;\n  xxSmallHover?: React.ReactElement;\n}\n\nexport const getIcon = ({\n  size,\n  isHovered,\n  normal,\n  normalHover,\n  xSmall,\n  xSmallHover,\n  xxSmall,\n  xxSmallHover,\n}: IconConfig): React.ReactElement => {\n  if (size <= IconSize.XXSmall && xxSmall && xxSmallHover) {\n    return isHovered ? xxSmallHover : xxSmall;\n  }\n  if (size <= IconSize.XSmall && xSmall && xSmallHover) {\n    return isHovered ? xSmallHover : xSmall;\n  }\n\n  return isHovered ? normalHover : normal;\n};\n\nexport const Icon = React.forwardRef((props: IconProps, ref: React.ForwardedRef<SVGSVGElement>) => {\n  const {\n    svgIcon,\n    ariaLabel,\n    className = '',\n    size = IconSize.Small,\n    color = 'black',\n    hoverColor = color || 'black',\n    isHovered = false,\n    onColor,\n    testId,\n    ...other\n  } = props;\n\n  const svgRaw = React.createElement(svgIcon, {\n    size,\n    isHovered,\n    onColor,\n  });\n\n  const titleId = useId();\n  const svgColor = isHovered ? hoverColor : color;\n\n  return (\n    <svg\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Icon}\n      ref={ref}\n      className={classNames(`hnds-style-icon`, className)}\n      role={ariaLabel ? 'img' : 'presentation'}\n      aria-labelledby={ariaLabel ? titleId : undefined}\n      focusable={false}\n      aria-hidden={ariaLabel ? undefined : true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n      fill={svgColor}\n      color={svgColor}\n      {...other}\n    >\n      {ariaLabel && <title id={titleId}>{ariaLabel}</title>}\n      {svgRaw}\n    </svg>\n  );\n});\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n","export * from './Icon';\nexport { IconSize } from '../../constants';\n\nimport { Icon } from './Icon';\nexport default Icon;\n"],"mappings":";;;;AAkDA,MAAa,WAAW,EACtB,MACA,WACA,QACA,aACA,QACA,aACA,SACA,mBACoC;AACpC,KAAI,QAAQ,SAAS,WAAW,WAAW,aACzC,QAAO,YAAY,eAAe;AAEpC,KAAI,QAAQ,SAAS,UAAU,UAAU,YACvC,QAAO,YAAY,cAAc;AAGnC,QAAO,YAAY,cAAc;;AAGnC,MAAa,OAAO,MAAM,YAAY,OAAkB,QAA2C;CACjG,MAAM,EACJ,SACA,WACA,YAAY,IACZ,OAAO,SAAS,OAChB,QAAQ,SACR,aAAa,SAAS,SACtB,YAAY,OACZ,SACA,QACA,GAAG,UACD;CAEJ,MAAM,SAAS,MAAM,cAAc,SAAS;EAC1C;EACA;EACA;EACD,CAAC;CAEF,MAAM,UAAU,OAAO;CACvB,MAAM,WAAW,YAAY,aAAa;AAE1C,QACE,qBAAC,OAAA;EACC,eAAa;EACb,oBAAkB,YAAY;EACzB;EACL,WAAW,WAAW,mBAAmB,UAAU;EACnD,MAAM,YAAY,QAAQ;EAC1B,mBAAiB,YAAY,UAAU,KAAA;EACvC,WAAW;EACX,eAAa,YAAY,KAAA,IAAY;EACrC,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;EACP,GAAI;aAEH,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB,EACpD,OAAA;GACG;EAER;AAEF,KAAK,cAAc;ACjHnB,IAAA,eAAe"}

package/lib/Illustration.js

@@ -8,7 +8,7 @@ let ViewBoxSize = /* @__PURE__ */ function(ViewBoxSize$1) {
 	return ViewBoxSize$1;
 }({});
 const Illustration = React.forwardRef((props, ref) => {
-	const { illustration, ariaLabel, className = "", size = 512, color = "neutral", testId,...other } = props;
+	const { illustration, ariaLabel, className = "", size = 512, color = "neutral", testId, ...other } = props;
 	const titleId = useId();
 	const viewBox = getIllustration({
 		size,

package/lib/Illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.js","names":[],"sources":["../src/components/Illustration/Illustration.tsx","../src/components/Illustration/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useId();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n","import Illustration from './Illustration';\nexport * from './Illustration';\nexport default Illustration;\n"],"mappings":";;;;AAOA,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,WAAA;;;AAgCF,MAAa,eAAe,MAAM,YAA8C,OAAO,QAAQ;CAC7F,MAAM,EAAE,cAAc,WAAW,YAAY,IAAI,OAAO,KAAK,QAAQ,WAAW,OAAQ,GAAG,UAAU;CAErG,MAAM,UAAU,OAAO;CACvB,MAAM,UAAU,gBAAgB;EAAE;EAAM,QAAQ,YAAY;EAAQ,OAAO,YAAY;EAAO,CAAC;CAE/F,MAAM,gBAAgB;EACpB,eAAe;EACf,oBAAoB,YAAY;EAChC;EACA;EACA,MAAM,YAAY,QAAQ;EAC1B,mBAAmB,YAAY,UAAU,KAAA;EACzC,WAAW;EACX,eAAe,YAAY,KAAA,IAAY;EACvC;EACA,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,GAAG;EACJ;AASD,QAPmB,MAAM,cAAc,cAAc;EACnD;EACA;EACe;EACf,OAAO,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB;EAC5D,CAAC;EAGF;AAEF,aAAa,cAAc;ACxE3B,IAAA,yBD0Ee"}
+{"version":3,"file":"Illustration.js","names":[],"sources":["../src/components/Illustration/Illustration.tsx","../src/components/Illustration/index.ts"],"sourcesContent":["import React, { useId } from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useId();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n","import Illustration from './Illustration';\nexport * from './Illustration';\nexport default Illustration;\n"],"mappings":";;;;AAOA,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,WAAA;;;AAgCF,MAAa,eAAe,MAAM,YAA8C,OAAO,QAAQ;CAC7F,MAAM,EAAE,cAAc,WAAW,YAAY,IAAI,OAAO,KAAK,QAAQ,WAAW,QAAQ,GAAG,UAAU;CAErG,MAAM,UAAU,OAAO;CACvB,MAAM,UAAU,gBAAgB;EAAE;EAAM,QAAQ,YAAY;EAAQ,OAAO,YAAY;EAAO,CAAC;CAE/F,MAAM,gBAAgB;EACpB,eAAe;EACf,oBAAoB,YAAY;EAChC;EACA;EACA,MAAM,YAAY,QAAQ;EAC1B,mBAAmB,YAAY,UAAU,KAAA;EACzC,WAAW;EACX,eAAe,YAAY,KAAA,IAAY;EACvC;EACA,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,MAAM;EACN,GAAG;EACJ;AASD,QAPmB,MAAM,cAAc,cAAc;EACnD;EACA;EACe;EACf,OAAO,aAAa,oBAAC,SAAA;GAAM,IAAI;aAAU;IAAkB;EAC5D,CAAC;EAGF;AAEF,aAAa,cAAc;ACxE3B,IAAA,yBD0Ee"}

package/lib/Input.js

@@ -31,7 +31,7 @@ var getInputMaxWidth = (characters, hasIcon, iconSize) => {
 	return `calc(${characters * 12}px + ${paddingWidth} + ${iconWidth} + 4px)`;
 };
 var Input = React.forwardRef((props, ref) => {
-	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, maxText, inputContainerRef,...rest } = props;
+	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, maxText, inputContainerRef, ...rest } = props;
 	const breakpoint = useBreakpoint();
 	const inputContainerRefLocal = useRef(null);
 	const inputId = useIdWithFallback(inputIdProp);

package/lib/Input.js.map

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

package/lib/LazyIcon.js

@@ -344,7 +344,7 @@ const lazyLoadIcon = (iconName) => lazy(() => __rolldown_dynamic_import_helper_d
 	"../Icons/YouTube.tsx": () => import("./components/Icons/YouTube.js"),
 	"../Icons/Zoom.tsx": () => import("./components/Icons/Zoom.js")
 }, `../Icons/${iconName}.tsx`, 3));
-const LazyIcon = ({ iconName, size = IconSize.Small,...rest }) => {
+const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 	const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);
 	if (useIsServerSide()) return null;
 	const fallback = /* @__PURE__ */ jsx("svg", {

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/index.ts"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { BaseIconProps, IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\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 lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> =>\n  lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\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","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport default LazyIcon;\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,aAC3B,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA2B,YAAY,SAAS,OAAA,EAAA,CAAO;AAEzD,MAAaA,YAAqC,EAAE,UAAU,OAAO,SAAS,MAAO,GAAG,WAAW;CACjG,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;;ACvCpB,IAAA,qBD2Ce"}
+{"version":3,"file":"LazyIcon.js","names":["LazyIcon: React.FC<LazyIconProps>"],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/index.ts"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { BaseIconProps, IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\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 lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> =>\n  lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\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","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport default LazyIcon;\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,aAC3B,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAA2B,YAAY,SAAS,OAAA,EAAA,CAAO;AAEzD,MAAaA,YAAqC,EAAE,UAAU,OAAO,SAAS,OAAO,GAAG,WAAW;CACjG,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;;ACvCpB,IAAA,qBD2Ce"}

package/lib/LazyIllustration.js

@@ -34,7 +34,7 @@ const lazyLoadIllustration = (illustrationName, size) => {
 		"../Illustrations/Support2Medium.tsx": () => import("./components/Illustrations/Support2Medium.js")
 	}, `../Illustrations/${illustrationFileName}.tsx`, 3));
 };
-const LazyIllustration = ({ illustrationName, size = 512,...rest }) => {
+const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 	const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);
 	if (useIsServerSide()) return null;
 	const fallback = /* @__PURE__ */ jsx("svg", {

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 React, { lazy, Suspense, useMemo } from 'react';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration, { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationName, 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 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\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\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":";;;;;;;AAaA,MAAa,wBAAwB,kBAAoC,SAA6D;CACpI,MAAM,QAAQ,qBAAqB;CACnC,MAAM,uBAAuB,gBAAgB;EAAE;EAAM,GAAG;EAAO,CAAC;AAEhE,QAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;IAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;AAG5F,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,IAAK,GAAG,WAAW;CAC9G,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;;AC5CpB,IAAA,6BDgDe"}
+{"version":3,"file":"LazyIllustration.js","names":["LazyIllustration: React.FC<LazyIllustrationProps>"],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration, { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationName, 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 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\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\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":";;;;;;;AAaA,MAAa,wBAAwB,kBAAoC,SAA6D;CACpI,MAAM,QAAQ,qBAAqB;CACnC,MAAM,uBAAuB,gBAAgB;EAAE;EAAM,GAAG;EAAO,CAAC;AAEhE,QAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;IAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;AAG5F,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,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;;AC5CpB,IAAA,6BDgDe"}