@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"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 { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\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?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => 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 { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\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 breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\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, mobile);\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: !disabled && 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, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), 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={hoverRef 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={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","onColor","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","textClassName","textPosition","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","jsxs","jsx","renderbuttonContentWrapper","Icon","ArrowRight","Fragment","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"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 { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\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?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => 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 { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\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 breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\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, mobile);\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: !disabled && 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, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), 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={hoverRef 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={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":[],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [9.4.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.4.1&targetVersion=GTv9.4.2) (2024-12-04)
+
+
+### Bug Fixes
+
+*  avrundingsfeil på noen ikoner ([b23e4ae](https://github.com/helsenorge/designsystem/commit/b23e4aec495395cbf92642be6657b03cc5765a2b)), closes [#337174](https://github.com/helsenorge/designsystem/issues/337174)
+* **expander:**  sticky fungerer igjen ([0f179a1](https://github.com/helsenorge/designsystem/commit/0f179a12aa0d1da98cc3832ab2bf1cb60f2d1d75)), closes [#338697](https://github.com/helsenorge/designsystem/issues/338697)
+* **tabs:**  swipe og scrollintoview oppfører seg rart ([4d1c98f](https://github.com/helsenorge/designsystem/commit/4d1c98f92c728c4c83c4d89ca696990992f1f880)), closes [#328640](https://github.com/helsenorge/designsystem/issues/328640)
+* **tile:**  title spacing endringer ([28f852d](https://github.com/helsenorge/designsystem/commit/28f852dd361ff21bc77010d3d940677eaf82986f)), closes [#336171](https://github.com/helsenorge/designsystem/issues/336171)
+
+## [9.4.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.4.0&targetVersion=GTv9.4.1) (2024-11-25)
+
+
+### Bug Fixes
+
+* **tile:**  compact title plasseres riktig ([72f7281](https://github.com/helsenorge/designsystem/commit/72f72818f9135d4489c29275ab4abbd746c324fd)), closes [#336170](https://github.com/helsenorge/designsystem/issues/336170)
+
+## [9.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.3.0&targetVersion=GTv9.4.0) (2024-11-22)
+
+
+### Features
+
+*  nye ikoner ([c18b15a](https://github.com/helsenorge/designsystem/commit/c18b15a31ad1109c23c72bffcafe41de2c795af2)), closes [#334685](https://github.com/helsenorge/designsystem/issues/334685)
+
+
+### Bug Fixes
+
+* **datepicker:**  sjekk for klikking utenfor popup fungerer ikke i webcomp ([7a831f9](https://github.com/helsenorge/designsystem/commit/7a831f929fd9b529e4e080e22db5cad1dbf6c2b8)), closes [#337485](https://github.com/helsenorge/designsystem/issues/337485)
+
 ## [9.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv9.2.0&targetVersion=GTv9.3.0) (2024-11-20)
 
 

package/Checkbox.js

@@ -1,113 +1,137 @@
-import { jsx as s, jsxs as M, Fragment as X } from "react/jsx-runtime";
-import J, { useState as K, useEffect as Q } from "react";
-import b from "classnames";
-import { FormOnColor as n, FormSize as V, AnalyticsId as Y, IconSize as Z } from "./constants.js";
-import { usePseudoClasses as $ } from "./hooks/usePseudoClasses.js";
-import { useUuid as ee } from "./hooks/useUuid.js";
-import { getColor as _ } from "./theme/currys/color.js";
-import { getAriaDescribedBy as re } from "./utils/accessibility.js";
-import { isMutableRefObject as ce, mergeRefs as oe } from "./utils/refs.js";
-import { u as ae } from "./uuid.js";
-import { E as le } from "./ErrorWrapper.js";
-import { I as ne } from "./Icon.js";
-import ie from "./components/Icons/Check.js";
-import { g as se, r as be } from "./Label.js";
-import e from "./components/Checkbox/styles.module.scss";
-const te = J.forwardRef((k, h) => {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { FormOnColor, FormSize, AnalyticsId, IconSize } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { useUuid } from "./hooks/useUuid.js";
+import { getColor } from "./theme/currys/color.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
+import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { u as uuid } from "./uuid.js";
+import { E as ErrorWrapper } from "./ErrorWrapper.js";
+import { I as Icon } from "./Icon.js";
+import Check from "./components/Icons/Check.js";
+import { g as getLabelText, r as renderLabelAsParent } from "./Label.js";
+import checkboxStyles from "./components/Checkbox/styles.module.scss";
+const Checkbox = React.forwardRef((props, ref) => {
   const {
-    className: I,
-    checked: d = !1,
-    disabled: a,
-    label: x,
-    inputId: p = ae(),
-    onColor: l = n.onwhite,
-    name: N = p,
-    size: T,
-    errorText: m,
-    error: g = !!m,
-    errorTextId: R,
-    errorWrapperClassName: S,
-    value: W = se(x),
-    testId: j,
-    required: z,
-    onChange: u,
-    ...F
-  } = k, [c, f] = K(d), w = ee(R), C = l === n.onwhite, y = l === n.ongrey, v = l === n.onblueberry, o = g || l === n.oninvalid, i = l === n.ondark, r = T === V.large, { refObject: L, isFocused: A } = $(ce(h) ? h : null), E = oe([h, L]), O = b({
-    [e["checkbox-wrapper--large"]]: r
-  }), B = b(e["checkbox-label"], {
-    [e["checkbox-label--disabled"]]: a,
-    [e["checkbox-label--on-dark"]]: i,
-    [e["checkbox-label--large"]]: r,
-    [e["checkbox-label__large--checked"]]: r && c,
-    [e["checkbox-label__large--focus"]]: r && A,
-    [e["checkbox-label__large--on-white"]]: r && C,
-    [e["checkbox-label__large--on-grey"]]: r && y,
-    [e["checkbox-label__large--on-blueberry"]]: r && v,
-    [e["checkbox-label__large--on-invalid"]]: r && o,
-    [e["checkbox-label__large--disabled"]]: r && a
-  }), D = b(e.checkbox, I), P = b(e["checkbox__icon-wrapper"], {
-    [e["checkbox__icon-wrapper--on-white"]]: C,
-    [e["checkbox__icon-wrapper--on-grey"]]: y,
-    [e["checkbox__icon-wrapper--on-invalid"]]: o,
-    [e["checkbox__icon-wrapper--disabled"]]: a,
-    [e["checkbox__icon-wrapper__regular--checked"]]: !r && c,
-    [e["checkbox__icon-wrapper__regular--invalid"]]: !r && c && o,
-    [e["checkbox__icon-wrapper__regular--on-dark"]]: !r && c && i,
-    [e["checkbox__icon-wrapper__large--checked"]]: r && c,
-    [e["checkbox__icon-wrapper__large--invalid"]]: r && o,
-    [e["checkbox__icon-wrapper--on-dark"]]: i,
-    [e["checkbox__icon-wrapper--on-blueberry"]]: v,
-    [e["checkbox__icon-wrapper--invalid"]]: o,
-    [e["checkbox__icon-wrapper__large--invalid"]]: r && c && o,
-    [e["checkbox__icon-wrapper__large--disabled"]]: a && r && c,
-    [e["checkbox__icon-wrapper__large--checked--invalid"]]: r && c && o,
-    [e["checkbox__icon-wrapper__large--checked--disabled"]]: a && r && c
-  }), U = b(e["checkbox-label__text"], {
-    [e["checkbox-label__text__large--checked"]]: r && c,
-    [e["checkbox-label__text__large--invalid"]]: r && c && o,
-    [e["checkbox-label__text--on-dark"]]: i,
-    [e["checkbox-label__text--disabled"]]: a
+    className,
+    checked = false,
+    disabled,
+    label,
+    inputId = uuid(),
+    onColor = FormOnColor.onwhite,
+    name = inputId,
+    size,
+    errorText,
+    error = !!errorText,
+    errorTextId,
+    errorWrapperClassName,
+    value = getLabelText(label),
+    testId,
+    required,
+    onChange,
+    ...rest
+  } = props;
+  const [isChecked, setIsChecked] = useState(checked);
+  const errorTextUuid = useUuid(errorTextId);
+  const onWhite = onColor === FormOnColor.onwhite;
+  const onGrey = onColor === FormOnColor.ongrey;
+  const onBlueberry = onColor === FormOnColor.onblueberry;
+  const onInvalid = error || onColor === FormOnColor.oninvalid;
+  const onDark = onColor === FormOnColor.ondark;
+  const large = size === FormSize.large;
+  const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
+  const mergedRefs = mergeRefs([ref, refObject]);
+  const checkboxWrapperClasses = classNames({
+    [checkboxStyles["checkbox-wrapper--large"]]: large
   });
-  let t = _("white");
-  (i || r && c) && (t = _("blueberry", 900)), o && r && c && (t = _("white")), a && (t = _("neutral", 700)), Q(() => {
-    f(d);
-  }, [d]);
-  const q = (H) => {
-    u && u(H), f(!c);
-  }, G = () => /* @__PURE__ */ M(X, { children: [
-    /* @__PURE__ */ s(
-      "input",
-      {
-        id: p,
-        name: N,
-        className: D,
-        type: "checkbox",
-        checked: c,
-        disabled: a,
-        value: W,
-        ref: E,
-        "aria-describedby": re(k, w),
-        "aria-invalid": g,
-        required: z,
-        onChange: q,
-        ...F
-      }
-    ),
-    /* @__PURE__ */ s("span", { className: P, children: c && /* @__PURE__ */ s(ne, { color: t, className: e.checkbox__icon, svgIcon: ie, size: Z.XSmall }) })
-  ] });
-  return /* @__PURE__ */ s(le, { className: S, errorText: m, errorTextId: w, children: /* @__PURE__ */ s("div", { "data-testid": j, "data-analyticsid": Y.Checkbox, className: O, children: be(
-    x,
-    G(),
-    p,
-    l,
-    B,
-    U,
-    e["checkbox-sublabel-wrapper"],
-    r
+  const checkboxLabelClasses = classNames(checkboxStyles["checkbox-label"], {
+    [checkboxStyles["checkbox-label--disabled"]]: disabled,
+    [checkboxStyles["checkbox-label--on-dark"]]: onDark,
+    [checkboxStyles["checkbox-label--large"]]: large,
+    [checkboxStyles["checkbox-label__large--checked"]]: large && isChecked,
+    [checkboxStyles["checkbox-label__large--focus"]]: large && isFocused,
+    [checkboxStyles["checkbox-label__large--on-white"]]: large && onWhite,
+    [checkboxStyles["checkbox-label__large--on-grey"]]: large && onGrey,
+    [checkboxStyles["checkbox-label__large--on-blueberry"]]: large && onBlueberry,
+    [checkboxStyles["checkbox-label__large--on-invalid"]]: large && onInvalid,
+    [checkboxStyles["checkbox-label__large--disabled"]]: large && disabled
+  });
+  const checkboxClasses = classNames(checkboxStyles.checkbox, className);
+  const checkboxIconWrapperClasses = classNames(checkboxStyles["checkbox__icon-wrapper"], {
+    [checkboxStyles["checkbox__icon-wrapper--on-white"]]: onWhite,
+    [checkboxStyles["checkbox__icon-wrapper--on-grey"]]: onGrey,
+    [checkboxStyles["checkbox__icon-wrapper--on-invalid"]]: onInvalid,
+    [checkboxStyles["checkbox__icon-wrapper--disabled"]]: disabled,
+    [checkboxStyles["checkbox__icon-wrapper__regular--checked"]]: !large && isChecked,
+    [checkboxStyles["checkbox__icon-wrapper__regular--invalid"]]: !large && isChecked && onInvalid,
+    [checkboxStyles["checkbox__icon-wrapper__regular--on-dark"]]: !large && isChecked && onDark,
+    [checkboxStyles["checkbox__icon-wrapper__large--checked"]]: large && isChecked,
+    [checkboxStyles["checkbox__icon-wrapper__large--invalid"]]: large && onInvalid,
+    [checkboxStyles["checkbox__icon-wrapper--on-dark"]]: onDark,
+    [checkboxStyles["checkbox__icon-wrapper--on-blueberry"]]: onBlueberry,
+    [checkboxStyles["checkbox__icon-wrapper--invalid"]]: onInvalid,
+    [checkboxStyles["checkbox__icon-wrapper__large--invalid"]]: large && isChecked && onInvalid,
+    [checkboxStyles["checkbox__icon-wrapper__large--disabled"]]: disabled && large && isChecked,
+    [checkboxStyles["checkbox__icon-wrapper__large--checked--invalid"]]: large && isChecked && onInvalid,
+    [checkboxStyles["checkbox__icon-wrapper__large--checked--disabled"]]: disabled && large && isChecked
+  });
+  const labelTextClasses = classNames(checkboxStyles["checkbox-label__text"], {
+    [checkboxStyles["checkbox-label__text__large--checked"]]: large && isChecked,
+    [checkboxStyles["checkbox-label__text__large--invalid"]]: large && isChecked && onInvalid,
+    [checkboxStyles["checkbox-label__text--on-dark"]]: onDark,
+    [checkboxStyles["checkbox-label__text--disabled"]]: disabled
+  });
+  let iconColor = getColor("white");
+  if (onDark || large && isChecked) iconColor = getColor("blueberry", 900);
+  if (onInvalid && large && isChecked) iconColor = getColor("white");
+  if (disabled) iconColor = getColor("neutral", 700);
+  useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+  const onChangeHandler = (e) => {
+    if (onChange) {
+      onChange(e);
+    }
+    setIsChecked(!isChecked);
+  };
+  const getLabelContent = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          name,
+          className: checkboxClasses,
+          type: "checkbox",
+          checked: isChecked,
+          disabled,
+          value,
+          ref: mergedRefs,
+          "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+          "aria-invalid": error,
+          required,
+          onChange: onChangeHandler,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: checkboxIconWrapperClasses, children: isChecked && /* @__PURE__ */ jsx(Icon, { color: iconColor, className: checkboxStyles["checkbox__icon"], svgIcon: Check, size: IconSize.XSmall }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsx("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Checkbox, className: checkboxWrapperClasses, children: renderLabelAsParent(
+    label,
+    getLabelContent(),
+    inputId,
+    onColor,
+    checkboxLabelClasses,
+    labelTextClasses,
+    checkboxStyles["checkbox-sublabel-wrapper"],
+    large
   ) }) });
 });
-te.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox";
 export {
-  te as C
+  Checkbox as C
 };
 //# sourceMappingURL=Checkbox.js.map

package/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\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}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames({\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","onColor","FormOnColor","name","size","errorText","error","errorTextId","errorWrapperClassName","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","errorTextUuid","useUuid","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","jsxs","Fragment","jsx","getAriaDescribedBy","Icon","Check","IconSize","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\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}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = onColor === FormOnColor.onwhite;\n  const onGrey = onColor === FormOnColor.ongrey;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onInvalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames({\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 700);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          checkboxLabelClasses,\n          labelTextClasses,\n          checkboxStyles['checkbox-sublabel-wrapper'],\n          large\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":[],"mappings":"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"}

package/Close.js

@@ -1,31 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import b from "react";
-import k from "classnames";
-import { AnalyticsId as y } from "./constants.js";
-import { useBreakpoint as C, Breakpoint as I } from "./hooks/useBreakpoint.js";
-import { useHover as R } from "./hooks/useHover.js";
-import { palette as v } from "./theme/palette.js";
-import { mergeRefs as x } from "./utils/refs.js";
-import { I as B } from "./Icon.js";
-import N from "./components/Icons/X.js";
-import e from "./components/Close/styles.module.scss";
-const D = b.forwardRef(function(t, s) {
-  const { small: o, testId: a, ariaLabel: m = "Lukk", onClick: i, className: l, color: c = v.blueberry600 } = t, n = C(), { hoverRef: f, isHovered: p } = R(), d = n === I.xs || o ? 38 : 48, u = k(e.close, { [e["close--small"]]: o }, l);
-  return /* @__PURE__ */ r(
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "./constants.js";
+import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
+import { useHover } from "./hooks/useHover.js";
+import { palette } from "./theme/palette.js";
+import { mergeRefs } from "./utils/refs.js";
+import { I as Icon } from "./Icon.js";
+import X from "./components/Icons/X.js";
+import styles from "./components/Close/styles.module.scss";
+const Close = React.forwardRef(function ButtonForwardedRef(props, ref) {
+  const { small, testId, ariaLabel = "Lukk", onClick, className, color = palette.blueberry600 } = props;
+  const breakpoint = useBreakpoint();
+  const { hoverRef, isHovered } = useHover();
+  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;
+  const closeClasses = classNames(styles.close, { [styles["close--small"]]: small }, className);
+  return /* @__PURE__ */ jsx(
     "button",
     {
-      ref: x([s, f]),
-      "data-testid": a,
-      "data-analyticsid": y.Close,
-      className: u,
-      "aria-label": m,
-      onClick: i,
+      ref: mergeRefs([ref, hoverRef]),
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.Close,
+      className: closeClasses,
+      "aria-label": ariaLabel,
+      onClick,
       type: "button",
-      children: /* @__PURE__ */ r(B, { svgIcon: N, color: c, size: d, isHovered: p })
+      children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color, size: iconSize, isHovered })
     }
   );
 });
 export {
-  D as C
+  Close as C
 };
 //# sourceMappingURL=Close.js.map

package/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","breakpoint","useBreakpoint","hoverRef","isHovered","useHover","iconSize","Breakpoint","closeClasses","classNames","styles","jsx","mergeRefs","AnalyticsId","Icon","X"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,IAAQC,EAAM,WAAW,SAA4BC,GAAmBC,GAA4C;AAClH,QAAA,EAAE,OAAAC,GAAO,QAAAC,GAAQ,WAAAC,IAAY,QAAQ,SAAAC,GAAS,WAAAC,GAAW,OAAAC,IAAQC,EAAQ,aAAA,IAAiBR,GAC1FS,IAAaC,KACb,EAAE,UAAAC,GAAU,WAAAC,EAAU,IAAIC,EAAS,GAEnCC,IAAWL,MAAeM,EAAW,MAAMb,IAAQ,KAAK,IAExDc,IAAeC,EAAWC,EAAO,OAAO,EAAE,CAACA,EAAO,cAAc,CAAC,GAAGhB,EAAM,GAAGI,CAAS;AAG1F,SAAA,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU,CAACnB,GAAKU,CAAQ,CAAC;AAAA,MAC9B,eAAaR;AAAA,MACb,oBAAkBkB,EAAY;AAAA,MAC9B,WAAWL;AAAA,MACX,cAAYZ;AAAA,MACZ,SAAAC;AAAA,MACA,MAAK;AAAA,MAEL,4BAACiB,GAAK,EAAA,SAASC,GAAG,OAAAhB,GAAc,MAAMO,GAAU,WAAAF,GAAsB;AAAA,IAAA;AAAA,EAAA;AAG5E,CAAC;"}
+{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: string;\n}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":[],"mappings":";;;;;;;;;;;AA6BA,MAAM,QAAQ,MAAM,WAAW,SAAS,mBAAmB,OAAmB,KAA4C;AAClH,QAAA,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,QAAQ,aAAiB,IAAA;AAChG,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,UAAU,UAAU,IAAI,SAAS;AAEzC,QAAM,WAAW,eAAe,WAAW,MAAM,QAAQ,KAAK;AAE9D,QAAM,eAAe,WAAW,OAAO,OAAO,EAAE,CAAC,OAAO,cAAc,CAAC,GAAG,MAAM,GAAG,SAAS;AAG1F,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK,UAAU,CAAC,KAAK,QAAQ,CAAC;AAAA,MAC9B,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC9B,WAAW;AAAA,MACX,cAAY;AAAA,MACZ;AAAA,MACA,MAAK;AAAA,MAEL,8BAAC,MAAK,EAAA,SAAS,GAAG,OAAc,MAAM,UAAU,UAAsB,CAAA;AAAA,IAAA;AAAA,EACxE;AAEJ,CAAC;"}

package/ErrorBoundary.js

@@ -1,35 +1,41 @@
-import n from "react";
-const l = (t, e, o) => {
-  const r = t[e];
-  return r ? typeof r == "function" ? r() : Promise.resolve(r) : new Promise((i, s) => {
-    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
-      s.bind(
+import React from "react";
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
         null,
         new Error(
-          "Unknown variable dynamic import: " + e + (e.split("/").length !== o ? ". Note that variables only represent file names one level deep." : "")
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
         )
       )
     );
   });
 };
-class p extends n.Component {
-  constructor(e) {
-    super(e), this.state = {
-      error: !1
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: false
     };
   }
   componentDidCatch() {
-    this.setState({ error: !0 });
+    this.setState({ error: true });
   }
-  componentDidUpdate(e) {
-    e.reset !== this.props.reset && this.setState({ error: !1 });
+  componentDidUpdate(prevProps) {
+    if (prevProps.reset !== this.props.reset) {
+      this.setState({ error: false });
+    }
   }
   render() {
     return this.state.error ? this.props.fallback : this.props.children;
   }
 }
 export {
-  p as E,
-  l as _
+  ErrorBoundary as E,
+  __variableDynamicImportRuntimeHelper as _
 };
 //# sourceMappingURL=ErrorBoundary.js.map

package/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sources":["../src/components/LazyIcon/ErrorBoundary.tsx"],"sourcesContent":["import React from 'react';\n\ninterface ErrorBoundaryProps<T> {\n  fallback: React.ReactNode;\n  children: React.ReactNode;\n  reset: T;\n}\n\ninterface ErrorBoundaryState {\n  error: boolean;\n}\n\nclass ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps<T>) {\n    super(props);\n    this.state = {\n      error: false,\n    };\n  }\n\n  componentDidCatch(): void {\n    this.setState({ error: true });\n  }\n\n  componentDidUpdate(prevProps: Readonly<ErrorBoundaryProps<T>>): void {\n    if (prevProps.reset !== this.props.reset) {\n      this.setState({ error: false });\n    }\n  }\n\n  render(): React.ReactNode {\n    return this.state.error ? this.props.fallback : this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"names":["ErrorBoundary","React","props","prevProps"],"mappings":";;;;;;;;;;;;;;AAYA,MAAMA,UAAyBC,EAAM,UAAqD;AAAA,EACxF,YAAYC,GAA8B;AACxC,UAAMA,CAAK,GACX,KAAK,QAAQ;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EAEA,oBAA0B;AACxB,SAAK,SAAS,EAAE,OAAO,GAAM,CAAA;AAAA,EAC/B;AAAA,EAEA,mBAAmBC,GAAkD;AACnE,IAAIA,EAAU,UAAU,KAAK,MAAM,SACjC,KAAK,SAAS,EAAE,OAAO,GAAO,CAAA;AAAA,EAElC;AAAA,EAEA,SAA0B;AACxB,WAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM;AAAA,EAC7D;AACF;"}
+{"version":3,"file":"ErrorBoundary.js","sources":["../src/components/LazyIcon/ErrorBoundary.tsx"],"sourcesContent":["import React from 'react';\n\ninterface ErrorBoundaryProps<T> {\n  fallback: React.ReactNode;\n  children: React.ReactNode;\n  reset: T;\n}\n\ninterface ErrorBoundaryState {\n  error: boolean;\n}\n\nclass ErrorBoundary<T> extends React.Component<ErrorBoundaryProps<T>, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps<T>) {\n    super(props);\n    this.state = {\n      error: false,\n    };\n  }\n\n  componentDidCatch(): void {\n    this.setState({ error: true });\n  }\n\n  componentDidUpdate(prevProps: Readonly<ErrorBoundaryProps<T>>): void {\n    if (prevProps.reset !== this.props.reset) {\n      this.setState({ error: false });\n    }\n  }\n\n  render(): React.ReactNode {\n    return this.state.error ? this.props.fallback : this.props.children;\n  }\n}\n\nexport default ErrorBoundary;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,sBAAyB,MAAM,UAAqD;AAAA,EACxF,YAAY,OAA8B;AACxC,UAAM,KAAK;AACX,SAAK,QAAQ;AAAA,MACX,OAAO;AAAA,IACT;AAAA,EAAA;AAAA,EAGF,oBAA0B;AACxB,SAAK,SAAS,EAAE,OAAO,KAAA,CAAM;AAAA,EAAA;AAAA,EAG/B,mBAAmB,WAAkD;AACnE,QAAI,UAAU,UAAU,KAAK,MAAM,OAAO;AACxC,WAAK,SAAS,EAAE,OAAO,MAAA,CAAO;AAAA,IAAA;AAAA,EAChC;AAAA,EAGF,SAA0B;AACxB,WAAO,KAAK,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,MAAM;AAAA,EAAA;AAE/D;"}

package/ErrorWrapper.js

@@ -1,14 +1,14 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import o from "classnames";
-import e from "./components/ErrorWrapper/styles.module.scss";
-const d = (r) => {
-  const t = o(r.errorText && e["error-wrapper--with-error"], r.className);
-  return /* @__PURE__ */ s("div", { className: t, "data-testid": r.testId, children: [
-    r.errorText && /* @__PURE__ */ a("p", { className: e["error-wrapper__errors"], id: r.errorTextId, children: r.errorText }),
-    r.children
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import styles from "./components/ErrorWrapper/styles.module.scss";
+const ErrorWrapper = (props) => {
+  const errorWrapperClasses = classNames(props.errorText && styles[`error-wrapper--with-error`], props.className);
+  return /* @__PURE__ */ jsxs("div", { className: errorWrapperClasses, "data-testid": props.testId, children: [
+    props.errorText && /* @__PURE__ */ jsx("p", { className: styles["error-wrapper__errors"], id: props.errorTextId, children: props.errorText }),
+    props.children
   ] });
 };
 export {
-  d as E
+  ErrorWrapper as E
 };
 //# sourceMappingURL=ErrorWrapper.js.map

package/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const errorWrapperClasses = cn(props.errorText && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      {props.errorText && (\n        <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n          {props.errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorWrapperClasses","cn","styles","jsx"],"mappings":";;;AAuBO,MAAMA,IAA4C,CAASC,MAAA;AAC1D,QAAAC,IAAsBC,EAAGF,EAAM,aAAaG,EAAO,2BAA2B,GAAGH,EAAM,SAAS;AAEtG,2BACG,OAAI,EAAA,WAAWC,GAAqB,eAAaD,EAAM,QACrD,UAAA;AAAA,IAAMA,EAAA,aACJ,gBAAAI,EAAA,KAAA,EAAE,WAAWD,EAAO,uBAAuB,GAAG,IAAIH,EAAM,aACtD,UAAAA,EAAM,UACT,CAAA;AAAA,IAEDA,EAAM;AAAA,EACT,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"ErrorWrapper.js","sources":["../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperClassNameProps {\n  errorWrapperClassName?: string;\n}\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const errorWrapperClasses = cn(props.errorText && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      {props.errorText && (\n        <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n          {props.errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["cn"],"mappings":";;;AAuBO,MAAM,eAA4C,CAAS,UAAA;AAC1D,QAAA,sBAAsBA,WAAG,MAAM,aAAa,OAAO,2BAA2B,GAAG,MAAM,SAAS;AAEtG,8BACG,OAAI,EAAA,WAAW,qBAAqB,eAAa,MAAM,QACrD,UAAA;AAAA,IAAM,MAAA,aACJ,oBAAA,KAAA,EAAE,WAAW,OAAO,uBAAuB,GAAG,IAAI,MAAM,aACtD,UAAA,MAAM,UACT,CAAA;AAAA,IAED,MAAM;AAAA,EAAA,GACT;AAEJ;"}