@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/AnchorLink.js

@@ -1,2 +1,2 @@
-import e from"react";import{Icon as v}from"./components/Icons/Icon.js";import{AnalyticsId as y,IconSize as A}from"./constants.js";import E from"./components/Icons/ArrowUpRight.js";import{getColor as m}from"./theme/currys/color.js";import{useHover as N}from"./hooks/useHover.js";import r from"./components/AnchorLink/styles.module.scss";import C from"classnames";const F=e.forwardRef((i,p)=>{const{id:f,href:h,children:d,className:u,target:o="_self",htmlMarkup:t="a",onClick:k,testId:b}=i,n=o==="_blank",{hoverRef:a,isHovered:g}=N(p),c=C(r.anchorlink,u),l={id:f,["data-testid"]:b,["data-analyticsid"]:y.AnchorLink,onClick:k},s=()=>e.createElement(e.Fragment,null,d,n&&e.createElement(v,{className:r.anchorlink__icon,svgIcon:E,color:m("blueberry",600),hoverColor:m("blueberry",700),size:A.XSmall,isHovered:g}));return e.createElement(e.Fragment,null,t==="a"&&e.createElement("a",{href:h,target:o,className:c,rel:n?"noopener noreferrer":void 0,ref:a,...l},s()),t==="button"&&e.createElement("button",{type:"button",className:r["anchorlink-wrapper"],ref:a,...l},e.createElement("span",{className:c},s())))});export{F as A};
+import e from"react";import g from"classnames";import{AnalyticsId as v,IconSize as y}from"./constants.js";import{useHover as E}from"./hooks/useHover.js";import{getColor as m}from"./theme/currys/color.js";import{Icon as N}from"./components/Icons/Icon.js";import C from"./components/Icons/ArrowUpRight.js";import r from"./components/AnchorLink/styles.module.scss";const I=e.forwardRef((i,p)=>{const{id:f,href:h,children:d,className:k,target:o="_self",htmlMarkup:t="a",onClick:u,testId:b}=i,n=o==="_blank",{hoverRef:a,isHovered:A}=E(p),c=g(r.anchorlink,k),l={id:f,["data-testid"]:b,["data-analyticsid"]:v.AnchorLink,onClick:u},s=()=>e.createElement(e.Fragment,null,d,n&&e.createElement(N,{className:r.anchorlink__icon,svgIcon:C,color:m("blueberry",600),hoverColor:m("blueberry",700),size:y.XSmall,isHovered:A}));return e.createElement(e.Fragment,null,t==="a"&&e.createElement("a",{href:h,target:o,className:c,rel:n?"noopener noreferrer":void 0,ref:a,...l},s()),t==="button"&&e.createElement("button",{type:"button",className:r["anchorlink-wrapper"],ref:a,...l},e.createElement("span",{className:c},s())))}),H=I;export{H as A};
 //# sourceMappingURL=AnchorLink.js.map

package/AnchorLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorLink.js","sources":["../src/components/AnchorLink/AnchorLink.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport { getColor } from '../../theme/currys';\nimport { useHover } from '../../hooks/useHover';\n\nimport AnchorLinkStyles from './styles.module.scss';\nimport classNames from 'classnames';\nimport { AnalyticsId } from '../../constants';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\ninterface AnchorLinkProps {\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst AnchorLink = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, AnchorLinkProps>((props, ref) => {\n  const { id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId } = props;\n  const external = target === '_blank';\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = () => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          href={href}\n          target={target}\n          className={anchorClasses}\n          rel={external ? 'noopener noreferrer' : undefined}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button\n          type=\"button\"\n          className={AnchorLinkStyles['anchorlink-wrapper']}\n          ref={hoverRef as React.RefObject<HTMLButtonElement>}\n          {...commonProps}\n        >\n          <span className={anchorClasses}>{renderContent()}</span>\n        </button>\n      )}\n    </>\n  );\n});\n\nexport default AnchorLink;\n"],"names":["AnchorLink","React","props","ref","id","href","children","className","target","htmlMarkup","onClick","testId","external","hoverRef","isHovered","useHover","anchorClasses","classNames","AnchorLinkStyles","commonProps","AnalyticsId","renderContent","Icon","ArrowUpRight","getColor","IconSize"],"mappings":"0WAiCA,MAAMA,EAAaC,EAAM,WAAmE,CAACC,EAAOC,IAAQ,CACpG,KAAA,CAAE,GAAAC,EAAI,KAAAC,EAAM,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAS,QAAS,WAAAC,EAAa,IAAK,QAAAC,EAAS,OAAAC,CAAA,EAAWT,EACzFU,EAAWJ,IAAW,SACtB,CAAE,SAAAK,EAAU,UAAAC,CAAA,EAAcC,EAC9BZ,CAAA,EAEIa,EAAgBC,EAAWC,EAAiB,WAAYX,CAAS,EAEjEY,EAAc,CAClB,GAAAf,EACA,CAAC,eAAgBO,EACjB,CAAC,oBAAqBS,EAAY,WAClC,QAAAV,CAAA,EAGIW,EAAgB,IAEjBpB,EAAA,cAAAA,EAAA,SAAA,KAAAK,EACAM,GACEX,EAAA,cAAAqB,EAAA,CACC,UAAWJ,EAAiB,iBAC5B,QAASK,EACT,MAAOC,EAAS,YAAa,GAAG,EAChC,WAAYA,EAAS,YAAa,GAAG,EACrC,KAAMC,EAAS,OACf,UAAAX,CACF,CAAA,CAEJ,EAIA,OAAAb,EAAA,cAAAA,EAAA,SAAA,KACGQ,IAAe,KACbR,EAAA,cAAA,IAAA,CACC,KAAAI,EACA,OAAAG,EACA,UAAWQ,EACX,IAAKJ,EAAW,sBAAwB,OACxC,IAAKC,EACJ,GAAGM,CAAA,EAEHE,EACH,CAAA,EAEDZ,IAAe,UACbR,EAAA,cAAA,SAAA,CACC,KAAK,SACL,UAAWiB,EAAiB,sBAC5B,IAAKL,EACJ,GAAGM,CAAA,EAEHlB,EAAA,cAAA,OAAA,CAAK,UAAWe,CAAA,EAAgBK,EAAA,CAAgB,CACnD,CAEJ,CAEJ,CAAC"}
+{"version":3,"file":"AnchorLink.js","sources":["../src/components/AnchorLink/AnchorLink.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport Icon, { IconSize } from '../Icons';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\n\nimport AnchorLinkStyles from './styles.module.scss';\n\nexport type AnchorLinkTargets = '_self' | '_blank' | '_parent';\n\nexport type AnchorLinkTags = 'a' | 'button';\n\ninterface AnchorLinkProps {\n  /** Sets the content of the <a> tag */\n  children: React.ReactNode;\n  /** URL to link to */\n  href?: string;\n  /** Gives a unique id to the anchor-link :) */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the target type of the <a> tag. _blank adds an arrow icon at the end of the link */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Default: a */\n  htmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst AnchorLink = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, AnchorLinkProps>((props, ref) => {\n  const { id, href, children, className, target = '_self', htmlMarkup = 'a', onClick, testId } = props;\n  const external = target === '_blank';\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(\n    ref as React.RefObject<HTMLButtonElement | HTMLAnchorElement>\n  );\n  const anchorClasses = classNames(AnchorLinkStyles.anchorlink, className);\n\n  const commonProps = {\n    id,\n    ['data-testid']: testId,\n    ['data-analyticsid']: AnalyticsId.AnchorLink,\n    onClick,\n  };\n\n  const renderContent = () => (\n    <>\n      {children}\n      {external && (\n        <Icon\n          className={AnchorLinkStyles.anchorlink__icon}\n          svgIcon={ArrowUpRight}\n          color={getColor('blueberry', 600)}\n          hoverColor={getColor('blueberry', 700)}\n          size={IconSize.XSmall}\n          isHovered={isHovered}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'a' && (\n        <a\n          href={href}\n          target={target}\n          className={anchorClasses}\n          rel={external ? 'noopener noreferrer' : undefined}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          {...commonProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button\n          type=\"button\"\n          className={AnchorLinkStyles['anchorlink-wrapper']}\n          ref={hoverRef as React.RefObject<HTMLButtonElement>}\n          {...commonProps}\n        >\n          <span className={anchorClasses}>{renderContent()}</span>\n        </button>\n      )}\n    </>\n  );\n});\n\nexport default AnchorLink;\n"],"names":["AnchorLink","React","props","ref","id","href","children","className","target","htmlMarkup","onClick","testId","external","hoverRef","isHovered","useHover","anchorClasses","classNames","AnchorLinkStyles","commonProps","AnalyticsId","renderContent","Icon","ArrowUpRight","getColor","IconSize","AnchorLink$1"],"mappings":"0WAmCA,MAAMA,EAAaC,EAAM,WAAmE,CAACC,EAAOC,IAAQ,CACpG,KAAA,CAAE,GAAAC,EAAI,KAAAC,EAAM,SAAAC,EAAU,UAAAC,EAAW,OAAAC,EAAS,QAAS,WAAAC,EAAa,IAAK,QAAAC,EAAS,OAAAC,CAAA,EAAWT,EACzFU,EAAWJ,IAAW,SACtB,CAAE,SAAAK,EAAU,UAAAC,CAAA,EAAcC,EAC9BZ,CAAA,EAEIa,EAAgBC,EAAWC,EAAiB,WAAYX,CAAS,EAEjEY,EAAc,CAClB,GAAAf,EACA,CAAC,aAAa,EAAGO,EACjB,CAAC,kBAAkB,EAAGS,EAAY,WAClC,QAAAV,CAAA,EAGIW,EAAgB,IAEjBpB,EAAA,cAAAA,EAAA,SAAA,KAAAK,EACAM,GACCX,EAAA,cAACqB,EAAA,CACC,UAAWJ,EAAiB,iBAC5B,QAASK,EACT,MAAOC,EAAS,YAAa,GAAG,EAChC,WAAYA,EAAS,YAAa,GAAG,EACrC,KAAMC,EAAS,OACf,UAAAX,CAAA,CAAA,CAGN,EAIA,OAAAb,EAAA,cAAAA,EAAA,SAAA,KACGQ,IAAe,KACdR,EAAA,cAAC,IAAA,CACC,KAAAI,EACA,OAAAG,EACA,UAAWQ,EACX,IAAKJ,EAAW,sBAAwB,OACxC,IAAKC,EACJ,GAAGM,CAAA,EAEHE,EAAc,CAAA,EAGlBZ,IAAe,UACdR,EAAA,cAAC,SAAA,CACC,KAAK,SACL,UAAWiB,EAAiB,oBAAoB,EAChD,IAAKL,EACJ,GAAGM,CAAA,EAEHlB,EAAA,cAAA,OAAA,CAAK,UAAWe,CAAA,EAAgBK,GAAgB,CAAA,CAGvD,CAEJ,CAAC,EAEDK,EAAe1B"}

package/Avatar.js

@@ -1,2 +1,2 @@
-import r from"react";import{Icon as p}from"./components/Icons/Icon.js";import{AnalyticsId as v,IconSize as u}from"./constants.js";import b from"./components/Icons/Check.js";import x from"classnames";import a from"./components/Avatar/styles.module.scss";import{palette as o}from"./theme/palette.js";var A=(t=>(t.xsmall="xsmall",t.small="small",t))(A||{});const w=r.forwardRef(function(c,n){const{children:e,className:i="",selected:l=!1,variant:s="normal",size:m="small",testId:d}=c,f=e.charAt(0).toLocaleUpperCase()+e.substring(1,2);return r.createElement("span",{className:x(a.avatar,l&&a["avatar--selected"],s==="black"&&a["avatar--black"],m==="xsmall"&&a["avatar--xsmall"],m==="small"&&a["avatar--small"],i),ref:n,"data-testid":d,"data-analyticsid":v.Avatar},l?r.createElement(p,{svgIcon:b,size:u.Small,color:s==="black"?o.neutral900:o.blueberry600}):f)});export{w as A,A as a};
+import r from"react";import p from"classnames";import{AnalyticsId as v,IconSize as u}from"./constants.js";import{palette as o}from"./theme/palette.js";import{Icon as b}from"./components/Icons/Icon.js";import A from"./components/Icons/Check.js";import a from"./components/Avatar/styles.module.scss";var x=(t=>(t.xsmall="xsmall",t.small="small",t))(x||{});const I=r.forwardRef(function(c,n){const{children:e,className:i="",selected:l=!1,variant:s="normal",size:m="small",testId:d}=c,f=e.charAt(0).toLocaleUpperCase()+e.substring(1,2);return r.createElement("span",{className:p(a.avatar,l&&a["avatar--selected"],s==="black"&&a["avatar--black"],m==="xsmall"&&a["avatar--xsmall"],m==="small"&&a["avatar--small"],i),ref:n,"data-testid":d,"data-analyticsid":v.Avatar},l?r.createElement(b,{svgIcon:A,size:u.Small,color:s==="black"?o.neutral900:o.blueberry600}):f)}),z=I;export{z as A,x as a};
 //# sourceMappingURL=Avatar.js.map

package/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { palette } from '../../theme/palette';\nimport { AnalyticsId } from '../../constants';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        variant === 'black' && styles['avatar--black'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","Avatar","React","props","ref","children","className","selected","variant","size","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":"0SAUY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAoBZ,MAAMC,EAAqBC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC1H,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,KAAAC,EAAO,QAAkB,OAAAC,CAAA,EAAWP,EACtGQ,EAAgBN,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EACtF,OACGH,EAAA,cAAA,OAAA,CACC,UAAWU,EACTC,EAAO,OACPN,GAAYM,EAAO,oBACnBL,IAAY,SAAWK,EAAO,iBAC9BJ,IAAS,UAAqBI,EAAO,kBACrCJ,IAAS,SAAoBI,EAAO,iBACpCP,CACF,EACA,IAAAF,EACA,cAAaM,EACb,mBAAkBI,EAAY,MAAA,EAE7BP,EACEL,EAAA,cAAAa,EAAA,CAAK,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOT,IAAY,QAAUU,EAAQ,WAAaA,EAAQ,YAAA,CAAc,EAEpHP,CAEJ,CAEJ,CAAC"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        variant === 'black' && styles['avatar--black'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","Avatar","React","props","ref","children","className","selected","variant","size","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette","Avatar$1"],"mappings":"0SAWY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAoBZ,MAAMC,EAAqBC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC1H,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,KAAAC,EAAO,QAAkB,OAAAC,CAAA,EAAWP,EACtGQ,EAAgBN,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EAEpF,OAAAH,EAAA,cAAC,OAAA,CACC,UAAWU,EACTC,EAAO,OACPN,GAAYM,EAAO,kBAAkB,EACrCL,IAAY,SAAWK,EAAO,eAAe,EAC7CJ,IAAS,UAAqBI,EAAO,gBAAgB,EACrDJ,IAAS,SAAoBI,EAAO,eAAe,EACnDP,CACF,EACA,IAAAF,EACA,cAAaM,EACb,mBAAkBI,EAAY,MAAA,EAE7BP,EACCL,EAAA,cAACa,EAAK,CAAA,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOT,IAAY,QAAUU,EAAQ,WAAaA,EAAQ,YAAc,CAAA,EAEpHP,CAAA,CAIR,CAAC,EAEDQ,EAAelB"}

package/Badge.js

@@ -1,2 +1,2 @@
-import r from"react";import n from"classnames";import a from"./components/Badge/styles.module.scss";import{AnalyticsId as o}from"./constants.js";const u=r.forwardRef(function(t,d){const{children:b,className:s="",color:e="black",testId:l}=t,c=n(a.badge,{[a["badge--black"]]:e==="black",[a["badge--white"]]:e==="white",[a["badge--blueberry"]]:e==="blueberry",[a["badge--banana"]]:e==="banana",[a["badge--cherry"]]:e==="cherry",[a["badge--kiwi"]]:e==="kiwi",[a["badge--neutral"]]:e==="neutral",[a["badge--plum"]]:e==="plum"},s);return r.createElement("span",{className:c,ref:d,"data-testid":l,"data-analyticsid":o.Badge},b)});export{u as B};
+import r from"react";import n from"classnames";import{AnalyticsId as o}from"./constants.js";import a from"./components/Badge/styles.module.scss";const i=r.forwardRef(function(t,d){const{children:s,className:b="",color:e="black",testId:c}=t,l=n(a.badge,{[a["badge--black"]]:e==="black",[a["badge--white"]]:e==="white",[a["badge--blueberry"]]:e==="blueberry",[a["badge--banana"]]:e==="banana",[a["badge--cherry"]]:e==="cherry",[a["badge--kiwi"]]:e==="kiwi",[a["badge--neutral"]]:e==="neutral",[a["badge--plum"]]:e==="plum"},b);return r.createElement("span",{className:l,ref:d,"data-testid":c,"data-analyticsid":o.Badge},s)}),y=i;export{y as B};
 //# sourceMappingURL=Badge.js.map

package/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\n\nexport type BadgeColors = PaletteNames;\nexport type BadgeChildren = string | number;\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'black', testId } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--black']]: color === 'black',\n      [badgeStyles['badge--white']]: color === 'white',\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--banana']]: color === 'banana',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--kiwi']]: color === 'kiwi',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n      [badgeStyles['badge--plum']]: color === 'plum',\n    },\n    className\n  );\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","React","props","ref","children","className","color","testId","badgeClasses","classNames","badgeStyles","AnalyticsId"],"mappings":"iJAsBA,MAAMA,EAAmBC,EAAM,WAAW,SAA2BC,EAAmBC,EAAsC,CAC5H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,MAAAC,EAAQ,QAAS,OAAAC,CAAW,EAAAL,EACxDM,EAAeC,EACnBC,EAAY,MACZ,CACE,CAACA,EAAY,iBAAkBJ,IAAU,QACzC,CAACI,EAAY,iBAAkBJ,IAAU,QACzC,CAACI,EAAY,qBAAsBJ,IAAU,YAC7C,CAACI,EAAY,kBAAmBJ,IAAU,SAC1C,CAACI,EAAY,kBAAmBJ,IAAU,SAC1C,CAACI,EAAY,gBAAiBJ,IAAU,OACxC,CAACI,EAAY,mBAAoBJ,IAAU,UAC3C,CAACI,EAAY,gBAAiBJ,IAAU,MAC1C,EACAD,CAAA,EAGF,OACGJ,EAAA,cAAA,OAAA,CAAK,UAAWO,EAAc,IAAAL,EAAU,cAAaI,EAAQ,mBAAkBI,EAAY,KAAA,EACzFP,CACH,CAEJ,CAAC"}
+{"version":3,"file":"Badge.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\n\nimport badgeStyles from './styles.module.scss';\n\nexport type BadgeColors = PaletteNames;\nexport type BadgeChildren = string | number;\n\nexport interface BadgeProps {\n  /** Sets the content of the badge. */\n  children: BadgeChildren;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the badge background color. */\n  color?: BadgeColors;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type BadgeType = React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;\nconst Badge: BadgeType = React.forwardRef(function BadgeForwardedRef(props: BadgeProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', color = 'black', testId } = props;\n  const badgeClasses = classNames(\n    badgeStyles.badge,\n    {\n      [badgeStyles['badge--black']]: color === 'black',\n      [badgeStyles['badge--white']]: color === 'white',\n      [badgeStyles['badge--blueberry']]: color === 'blueberry',\n      [badgeStyles['badge--banana']]: color === 'banana',\n      [badgeStyles['badge--cherry']]: color === 'cherry',\n      [badgeStyles['badge--kiwi']]: color === 'kiwi',\n      [badgeStyles['badge--neutral']]: color === 'neutral',\n      [badgeStyles['badge--plum']]: color === 'plum',\n    },\n    className\n  );\n\n  return (\n    <span className={badgeClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Badge}>\n      {children}\n    </span>\n  );\n});\n\nexport default Badge;\n"],"names":["Badge","React","props","ref","children","className","color","testId","badgeClasses","classNames","badgeStyles","AnalyticsId","Badge$1"],"mappings":"iJAuBA,MAAMA,EAAmBC,EAAM,WAAW,SAA2BC,EAAmBC,EAAsC,CAC5H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,MAAAC,EAAQ,QAAS,OAAAC,CAAW,EAAAL,EACxDM,EAAeC,EACnBC,EAAY,MACZ,CACE,CAACA,EAAY,cAAc,CAAC,EAAGJ,IAAU,QACzC,CAACI,EAAY,cAAc,CAAC,EAAGJ,IAAU,QACzC,CAACI,EAAY,kBAAkB,CAAC,EAAGJ,IAAU,YAC7C,CAACI,EAAY,eAAe,CAAC,EAAGJ,IAAU,SAC1C,CAACI,EAAY,eAAe,CAAC,EAAGJ,IAAU,SAC1C,CAACI,EAAY,aAAa,CAAC,EAAGJ,IAAU,OACxC,CAACI,EAAY,gBAAgB,CAAC,EAAGJ,IAAU,UAC3C,CAACI,EAAY,aAAa,CAAC,EAAGJ,IAAU,MAC1C,EACAD,CAAA,EAIA,OAAAJ,EAAA,cAAC,OAAK,CAAA,UAAWO,EAAc,IAAAL,EAAU,cAAaI,EAAQ,mBAAkBI,EAAY,KAAA,EACzFP,CACH,CAEJ,CAAC,EAEDQ,EAAeZ"}

package/Button.js

@@ -1,2 +1,2 @@
-import e,{useRef as lt,useEffect as it}from"react";import{AnalyticsId as U,IconSize as k}from"./constants.js";import{isTest as ct,isProd as ut}from"./utils/environment.js";import{getColor as i}from"./theme/currys/color.js";import{Icon as mt}from"./components/Icons/Icon.js";import{useHover as V}from"./hooks/useHover.js";import{useIcons as dt}from"./hooks/useIcons.js";import{useBreakpoint as bt}from"./hooks/useBreakpoint.js";import{breakpoints as pt}from"./theme/grid.js";import w from"classnames";import t from"./components/Button/styles.module.scss";import ft from"./components/Icons/ArrowRight.js";import{useSize as ht}from"./hooks/useSize.js";const gt=(o,n,a,d,s,v)=>v&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":d==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?k.Small:o?k.Medium:k.XSmall,wt=(o,n,a)=>{if(a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop p\xE5 Button uten tekst for \xE5 opprettholde UU krav")},At=e.forwardRef(function(n,a){const{ariaLabel:d,id:s,children:v,wrapperClassName:$,className:j,arrow:E=!1,concept:B="normal",disabled:b=!1,ellipsis:x=!1,fluid:q=!1,htmlMarkup:C="button",mode:D="onlight",onClick:R,size:X="medium",variant:I="fill",href:G,tabIndex:S,testId:z,target:M,type:J="button",...A}=n,[p,f,F]=dt(e.Children.toArray(v)),{hoverRef:W,isHovered:K}=C==="button"?V(a):V(a),H=lt(null),c=ht(H),l=!!(p||f)&&!F,Q=p&&(f||E)&&!l,y=D==="ondark",h=bt()<pt.md,L=B==="destructive"&&!b,Y=I==="outline",u=I==="borderless",Z=gt(I==="fill",u,b,B,y,h),O=E&&!u,m=X==="large"&&!L&&!u,tt={...A},P=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:q||x},$),et=w(t.button,{[t["button--destructive"]]:L,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:p&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:O,[t["button--on-dark"]]:y},j),ot=w(t.button__text,{[t["button__text--ellipsis"]]:x}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{wt(l,d,!ct()&&!ut())},[]);const _=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("div",{className:ot,ref:H},b&&u&&e.createElement("div",{className:rt},e.createElement("div",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?d:F))},T=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:et},_(p,N(m,h),l?void 0:t["button__left-icon"]),nt(),O?_(e.createElement(mt,{svgIcon:ft}),N(m,h),t.button__arrow):_(f,N(m,h),t["button__right-icon"])));return e.createElement(e.Fragment,null,C==="button"&&e.createElement("button",{id:s,onClick:R,disabled:b,"data-testid":z,"data-analyticsid":U.Button,className:P,ref:W,tabIndex:S,type:J,...tt},T()),C==="a"&&e.createElement("a",{id:s,onClick:R,"data-testid":z,"data-analyticsid":U.Button,className:P,href:G,target:M,rel:M==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:S,...A},T()))});export{At as B};
+import e,{useRef as lt,useEffect as it}from"react";import w from"classnames";import{Icon as ct}from"./components/Icons/Icon.js";import{AnalyticsId as T,IconSize as k}from"./constants.js";import{useBreakpoint as ut}from"./hooks/useBreakpoint.js";import{useHover as U}from"./hooks/useHover.js";import{useIcons as mt}from"./hooks/useIcons.js";import{useSize as dt}from"./hooks/useSize.js";import{getColor as i}from"./theme/currys/color.js";import{breakpoints as bt}from"./theme/grid.js";import{isTest as pt,isProd as ft}from"./utils/environment.js";import ht from"./components/Icons/ArrowRight.js";import t from"./components/Button/styles.module.scss";const gt=(o,n,a,d,s,v)=>v&&a?!s||o?i("neutral",n?500:700):i("white"):a?!s||o?i("neutral",500):`${i("white")}b3`:o&&!s||!o&&s?"white":d==="normal"?i("blueberry",600):i("cherry",500),N=(o,n)=>n&&o?k.Small:o?k.Medium:k.XSmall,wt=(o,n,a)=>{if(a&&o&&(n===void 0||n===""))throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav")},vt=e.forwardRef(function(n,a){const{ariaLabel:d,id:s,children:v,wrapperClassName:V,className:j,arrow:B=!1,concept:E="normal",disabled:b=!1,ellipsis:R=!1,fluid:q=!1,htmlMarkup:C="button",mode:D="onlight",onClick:S,size:X="medium",variant:I="fill",href:G,tabIndex:z,testId:M,target:x,type:J="button",...A}=n,[p,f,F]=mt(e.Children.toArray(v)),{hoverRef:W,isHovered:K}=C==="button"?U(a):U(a),$=lt(null),c=dt($),l=!!(p||f)&&!F,Q=p&&(f||B)&&!l,y=D==="ondark",h=ut()<bt.md,H=E==="destructive"&&!b,Y=I==="outline",u=I==="borderless",Z=gt(I==="fill",u,b,E,y,h),L=B&&!u,m=X==="large"&&!H&&!u,tt={...A},O=w(t["button-wrapper"],{[t["button-wrapper--fluid"]]:q||R},V),et=w(t.button,{[t["button--destructive"]]:H,[t["button--normal"]]:!m,[t["button--large"]]:m,[t["button--outline"]]:Y,[t["button--borderless"]]:u,[t["button--left-icon"]]:p&&!l,[t["button--right-icon"]]:f&&!l,[t["button--both-icons"]]:Q,[t["button--only-icon"]]:l,[t["button--arrow"]]:L,[t["button--on-dark"]]:y},j),ot=w(t.button__text,{[t["button__text--ellipsis"]]:R}),rt=w(t.diagonal,{[t["diagonal--on-dark"]]:y});it(()=>{wt(l,d,!pt()&&!ft())},[]);const _=(r,g,at)=>{const st=r&&r.props&&r.props.color?r.props.color:Z;return r&&Object.keys(r).length>0?e.cloneElement(r,{size:g,color:st,isHovered:K,className:at}):null},nt=()=>{let r,g;return c&&(r=Math.atan2(c.height,c.width),g=Math.sqrt(Math.pow(c.width,2)+Math.pow(c.height,2))),e.createElement("div",{className:ot,ref:$},b&&u&&e.createElement("div",{className:rt},e.createElement("div",{style:{transform:`rotate(${r}rad)`,width:g},className:t.diagonal__line})),e.createElement("span",null,l?d:F))},P=()=>e.createElement(e.Fragment,null,e.createElement("div",{className:et},_(p,N(m,h),l?void 0:t["button__left-icon"]),nt(),L?_(e.createElement(ct,{svgIcon:ht}),N(m,h),t.button__arrow):_(f,N(m,h),t["button__right-icon"])));return e.createElement(e.Fragment,null,C==="button"&&e.createElement("button",{id:s,onClick:S,disabled:b,"data-testid":M,"data-analyticsid":T.Button,className:O,ref:W,tabIndex:z,type:J,...tt},P()),C==="a"&&e.createElement("a",{id:s,onClick:S,"data-testid":M,"data-analyticsid":T.Button,className:O,href:G,target:x,rel:x==="_blank"?"noopener noreferrer":n.rel,ref:W,tabIndex:z,...A},P()))}),Ft=vt;export{Ft as B};
 //# sourceMappingURL=Button.js.map

package/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { isTest, isProd } from '../../utils/environment';\nimport { getColor } from '../../theme/currys/color';\nimport Icon, { IconProps, IconSize } from './../Icons/';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { breakpoints } from '../../theme/grid';\nimport classNames from 'classnames';\n\nimport buttonStyles from './styles.module.scss';\nimport ArrowRight from '../Icons/ArrowRight';\nimport { useSize } from '../../hooks/useSize';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps {\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?: boolean;\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  mode?: ButtonMode;\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  /** 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) => {\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 = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\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 buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === '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 && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const rest = { ...(restProps as React.HtmlHTMLAttributes<HTMLButtonElement>) };\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(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\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 = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = () => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <div className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <div className={diagonalClasses}>\n            <div style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </div>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </div>\n    );\n  };\n\n  const renderbuttonContentWrapper = () => {\n    return (\n      <>\n        <div className={buttonClasses}>\n          {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n          {renderButtonContent()}\n          {hasArrow\n            ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n            : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\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          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","mode","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","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, { IconProps, IconSize } from './../Icons/';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useIcons } from '../../hooks/useIcons';\nimport { useSize } from '../../hooks/useSize';\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 ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\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?: boolean;\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  mode?: ButtonMode;\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  /** 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) => {\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 = false,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\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 buttonContentSize = useSize(buttonContentRef);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === '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 && !borderlessVariant;\n  const large = size === 'large' && !destructive && !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(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\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 = (\n    iconElement: React.ReactElement<IconProps> | {} | undefined | null,\n    iconSize: number,\n    iconClassName?: string\n  ): React.ReactElement<IconProps> | React.Component<IconProps> | null => {\n    const color =\n      iconElement && (iconElement as React.ReactElement<IconProps>).props && (iconElement as React.ReactElement<IconProps>).props.color\n        ? (iconElement as React.ReactElement<IconProps>).props.color\n        : iconColor;\n    return iconElement && Object.keys(iconElement).length > 0\n      ? React.cloneElement(iconElement as React.ReactElement<IconProps>, { size: iconSize, color, isHovered, className: iconClassName })\n      : null;\n  };\n\n  const renderButtonContent = () => {\n    let angle;\n    let diagonalWidth;\n    if (buttonContentSize) {\n      angle = Math.atan2(buttonContentSize.height, buttonContentSize.width);\n      diagonalWidth = Math.sqrt(Math.pow(buttonContentSize.width, 2) + Math.pow(buttonContentSize.height, 2));\n    }\n\n    return (\n      <div className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <div className={diagonalClasses}>\n            <div style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </div>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </div>\n    );\n  };\n\n  const renderbuttonContentWrapper = () => {\n    return (\n      <>\n        <div className={buttonClasses}>\n          {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n          {renderButtonContent()}\n          {hasArrow\n            ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n            : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n        </div>\n      </>\n    );\n  };\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\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          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","mode","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","buttonContentSize","useSize","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","color","renderButtonContent","angle","diagonalWidth","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}

package/CHANGELOG.md

@@ -1,3 +1,61 @@
+## [3.0.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.17.0&targetVersion=GTv3.0.0) (2023-03-13)
+
+
+### Features
+
+*  expanderhierarchy-komponent ([40154eb](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/40154eb7f96b010fdb04b1d80149a908e8b9f802)), closes [#269610](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/269610)
+*  listekomponent ([0aa2c83](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/0aa2c8335e5f73d273bc3711a22b9cf84fb5c723)), closes [#285187](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/285187)
+*  popmenu ([1cef3d4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/1cef3d4e1a6e54657d88b044cf8d968d72cc1a14)), closes [#260926](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/260926)
+
+
+### Bug Fixes
+
+*  anchorlink med/uten fokus tar like stor plass ([0d04f59](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/0d04f594338024ec81378559d449cecc2b8f018c)), closes [#295268](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/295268)
+*  dra og slipp fungerer i Slider på Android ([95fecd9](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/95fecd96e253c0be7e6c890db2f1e22d3c16b094)), closes [#296701](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/296701)
+*  panel - gir padding til knapp om det ligger innhold i nærheten ([5618f31](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/5618f313650da6eb2e4cc08fe3ca9c43cb7791af)), closes [#292897](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292897)
+
+## 3.0.0-beta.0 (2023-02-22)
+
+
+### ⚠ BREAKING CHANGES
+
+* smallViewportVariant endrer navn til breakpointConfig. Table har ingen standard responsiv oppførsel.
+* Tidligere måtte man spesifisere role="alert" som prop selv, det vil si at man kan ha brukt variant alert/crisis for det rent visuelle uten å få innholdet automatisk lest opp.
+* NotificationPanel bruker ikke dangerouslySetInnerHTML for å sette label mer. Ved behov må man gjøre dette selv som bruker av komponenten.
+
+### Features
+
+*  notificationPanel - nytt design ([2770165](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/27701653e83fda36e1314ba7b376982d7fdbb731)), closes [#292726](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292726)
+*  notificationpanel har automatisk role=alert om variant er alert eller crisis ([b9ab235](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/b9ab2356ee9589c97af5f13eae21b182f0693dda)), closes [#295272](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/295272)
+*  nye farger fra design ([031f202](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/031f2029f30340675ffac6a42f234b8b2ecb25b6)), closes [#292726](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292726)
+*  tabell har mulighet for flere responsive visninger ([1cbaa62](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/1cbaa62d1fdfbd407dd90746960e2a597f37a123)), closes [#288929](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/288929)
+*  table har to gjenbrukbare configer for ulike breakpoints ([a6ac619](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/a6ac6196cc351041a13e08c68058754447b236be)), closes [#296512](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/296512)
+
+
+### Bug Fixes
+
+*  table bruker neste breakpoint i bootstrap 5 ([458f59a](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/458f59a2bbfb690abc40fcb95925349ae6c03427))
+
+
+### Code Refactoring
+
+*  fjern deprecated options i Table ([49fbced](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/49fbcedca0b8c93c314b6a1e86ed8558918777db))
+*  notificationpanel bruker ikke dangerouslySetInnerHTML ([75c8fc3](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/75c8fc3f636f299ad1bde80ce0b66bedd50b655e)), closes [#294226](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/294226)
+
+## [2.17.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.16.1&targetVersion=GTv2.17.0) (2023-02-23)
+
+
+### Features
+
+*  avrunder tag ([193ea63](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/193ea6391ced4b2c4c626c79298d8693f197fd27)), closes [#296200](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/296200)
+*  nytt ikon ([9ee93b8](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/9ee93b84c5a399c3cf1d45f5ee909e2b5f43bd97)), closes [#296600](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/296600)
+*  nytt ikon - unspecifiedFile ([e628a45](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/e628a4567e00a24c3c16bf3e1bab68dcd879398d)), closes [#296600](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/296600)
+
+
+### Bug Fixes
+
+*  Panel vises riktig på mobilvisning ([82790a2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/82790a2365ba09f9c4e1fe4d9d624cdab62eef76)), closes [#296298](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/296298)
+
 ## [2.16.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.16.0&targetVersion=GTv2.16.1) (2023-02-16)
 
 
@@ -348,7 +406,7 @@
 
 ## 2.0.0-beta.1 (2022-09-15)
 
-## 2.0.0-beta.0 (2022-09-12)
+## 2.0.0-beta.0 (2022-09-15)
 
 
 ### Features
@@ -450,8 +508,8 @@
 
 ### Bug Fixes
 
-*  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
 *  panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
+*  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
 
 ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/Checkbox.js

@@ -1,2 +1,2 @@
-import c,{useState as D,useEffect as H}from"react";import o from"classnames";import{a as L}from"./uuid.js";import M from"./components/Icons/Check.js";import{Icon as T}from"./components/Icons/Icon.js";import{FormMode as p,FormVariant as V,AnalyticsId as X,IconSize as j}from"./constants.js";import{getColor as t}from"./theme/currys/color.js";import e from"./components/Checkbox/styles.module.scss";const Z=c.forwardRef((C,y)=>{const{className:w,checked:n=!1,disabled:r,label:d,inputId:b=L(),mode:i,name:g=b,variant:v,errorText:a,error:x=!!a,value:N=d,testId:E,required:I,onChange:f,...S}=C,[l,u]=D(n),m=x||i===p.oninvalid,h=i===p.ondark,_=i===p.onblueberry,k=v===V.bigform,F=o(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:a,[e["checkbox-wrapper--bigform"]]:k}),z=o(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:h,[e["checkbox-label--on-blueberry"]]:_,[e["checkbox-label--invalid"]]:m,[e["checkbox-label--bigform"]]:k}),R=o(e.checkbox,w),W=o(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--checked"]]:l,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper--on-dark"]]:h,[e["checkbox__icon-wrapper--on-blueberry"]]:_,[e["checkbox__icon-wrapper--invalid"]]:m}),q=o(e["checkbox-errors"],{[e["checkbox-errors--bigform"]]:k});let s=t("blueberry",500);r&&(s=t("neutral",400)),h&&(s=t("blueberry",200)),m&&(s=t("cherry",500)),H(()=>{u(n)},[n]);const A=B=>{f&&f(B),u(!l)};return c.createElement("div",{"data-testid":E,"data-analyticsid":X.Checkbox,className:F},a&&c.createElement("p",{className:q},a),c.createElement("label",{htmlFor:b,className:z},c.createElement("input",{id:b,name:g,className:R,type:"checkbox",checked:l,disabled:r,value:N,ref:y,"aria-invalid":x,required:I,onChange:A,...S}),c.createElement("span",{className:W},l&&c.createElement(T,{color:s,className:e.checkbox__icon,svgIcon:M,size:j.XSmall})),c.createElement("span",{className:e["checkbox-label__text"]},d)))});export{Z as C};
+import c,{useState as D,useEffect as H}from"react";import o from"classnames";import{FormMode as p,FormVariant as L,AnalyticsId as M,IconSize as T}from"./constants.js";import{getColor as t}from"./theme/currys/color.js";import{a as V}from"./uuid.js";import{Icon as X}from"./components/Icons/Icon.js";import $ from"./components/Icons/Check.js";import e from"./components/Checkbox/styles.module.scss";const j=c.forwardRef((_,y)=>{const{className:w,checked:n=!1,disabled:r,label:d,inputId:b=V(),mode:i,name:g=b,variant:v,errorText:a,error:x=!!a,value:N=d,testId:E,required:I,onChange:f,...S}=_,[s,u]=D(n),m=x||i===p.oninvalid,h=i===p.ondark,C=i===p.onblueberry,k=v===L.bigform,F=o(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:a,[e["checkbox-wrapper--bigform"]]:k}),z=o(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:h,[e["checkbox-label--on-blueberry"]]:C,[e["checkbox-label--invalid"]]:m,[e["checkbox-label--bigform"]]:k}),R=o(e.checkbox,w),W=o(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--checked"]]:s,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper--on-dark"]]:h,[e["checkbox__icon-wrapper--on-blueberry"]]:C,[e["checkbox__icon-wrapper--invalid"]]:m}),q=o(e["checkbox-errors"],{[e["checkbox-errors--bigform"]]:k});let l=t("blueberry",500);r&&(l=t("neutral",400)),h&&(l=t("blueberry",200)),m&&(l=t("cherry",500)),H(()=>{u(n)},[n]);const A=B=>{f&&f(B),u(!s)};return c.createElement("div",{"data-testid":E,"data-analyticsid":M.Checkbox,className:F},a&&c.createElement("p",{className:q},a),c.createElement("label",{htmlFor:b,className:z},c.createElement("input",{id:b,name:g,className:R,type:"checkbox",checked:s,disabled:r,value:N,ref:y,"aria-invalid":x,required:I,onChange:A,...S}),c.createElement("span",{className:W},s&&c.createElement(X,{color:l,className:e.checkbox__icon,svgIcon:$,size:T.XSmall})),c.createElement("span",{className:e["checkbox-label__text"]},d)))}),Z=j;export{Z as C,j as a};
 //# 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';\nimport { uuid } from '../../utils/uuid';\n\nimport Check from '../Icons/Check';\nimport Icon from '../Icons';\nimport { getColor } from '../../theme/currys/color';\n\nimport checkboxStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant, IconSize } from '../../constants';\n\nexport interface CheckboxProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the checkbox */\n  label: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  variant?: keyof typeof FormVariant;\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  /** 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    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\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--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox-label--invalid']]: invalid,\n    [checkboxStyles['checkbox-label--bigform']]: bigform,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--checked']]: isChecked,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: invalid,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors'], {\n    [checkboxStyles['checkbox-errors--bigform']]: bigform,\n  });\n\n  let iconColor = getColor('blueberry', 500);\n  if (disabled) iconColor = getColor('neutral', 400);\n  if (onDark) iconColor = getColor('blueberry', 200);\n  if (invalid) iconColor = getColor('cherry', 500);\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  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={checkboxLabelClasses}>\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={ref}\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        <span className={checkboxStyles['checkbox-label__text']}>{label}</span>\n      </label>\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","onChange","rest","isChecked","setIsChecked","useState","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","AnalyticsId","Icon","Check","IconSize"],"mappings":"6YAgCO,MAAMA,EAAWC,EAAM,WAAW,CAACC,EAAsBC,IAAqC,CAC7F,KAAA,CACJ,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,EACA,SAAAC,KACGC,CACD,EAAAjB,EACE,CAACkB,EAAWC,CAAY,EAAIC,EAASjB,CAAO,EAC5CkB,EAAUT,GAASJ,IAASc,EAAS,UACrCC,EAASf,IAASc,EAAS,OAC3BE,EAAchB,IAASc,EAAS,YAChCG,EAAUf,IAAYgB,EAAY,QAElCC,EAAyBC,EAAWC,EAAe,oBAAqB,CAC5E,CAACA,EAAe,iCAAkClB,EAClD,CAACkB,EAAe,8BAA+BJ,CAAA,CAChD,EACKK,EAAuBF,EAAWC,EAAe,kBAAmB,CACxE,CAACA,EAAe,6BAA8BzB,EAC9C,CAACyB,EAAe,4BAA6BN,EAC7C,CAACM,EAAe,iCAAkCL,EAClD,CAACK,EAAe,4BAA6BR,EAC7C,CAACQ,EAAe,4BAA6BJ,CAAA,CAC9C,EACKM,EAAkBH,EAAWC,EAAe,SAAU3B,CAAS,EAC/D8B,EAA6BJ,EAAWC,EAAe,0BAA2B,CACtF,CAACA,EAAe,oCAAqCX,EACrD,CAACW,EAAe,qCAAsCzB,EACtD,CAACyB,EAAe,oCAAqCN,EACrD,CAACM,EAAe,yCAA0CL,EAC1D,CAACK,EAAe,oCAAqCR,CAAA,CACtD,EACKY,EAAcL,EAAWC,EAAe,mBAAoB,CAChE,CAACA,EAAe,6BAA8BJ,CAAA,CAC/C,EAEG,IAAAS,EAAYC,EAAS,YAAa,GAAG,EACrC/B,IAAsB8B,EAAAC,EAAS,UAAW,GAAG,GAC7CZ,IAAoBW,EAAAC,EAAS,YAAa,GAAG,GAC7Cd,IAAqBa,EAAAC,EAAS,SAAU,GAAG,GAE/CC,EAAU,IAAM,CACdjB,EAAahB,CAAO,CAAA,EACnB,CAACA,CAAO,CAAC,EAEN,MAAAkC,EAAmBC,GAAiD,CACpEtB,GACFA,EAASsB,CAAC,EAGZnB,EAAa,CAACD,CAAS,CAAA,EAGzB,OACGnB,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkByB,EAAY,SAAU,UAAWZ,CAAA,EAC1EhB,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAWkC,CAAc,EAAAtB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWwB,CAAA,EACjC/B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWsB,EACX,KAAK,WACL,QAASb,EACT,SAAAd,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,SAAAG,EACA,SAAUsB,EACT,GAAGpB,CAAA,CACN,EACClB,EAAA,cAAA,OAAA,CAAK,UAAWiC,CAAA,EACdd,GAAcnB,EAAA,cAAAyC,EAAA,CAAK,MAAON,EAAW,UAAWL,EAAe,eAAmB,QAASY,EAAO,KAAMC,EAAS,MAAQ,CAAA,CAC5H,EACC3C,EAAA,cAAA,OAAA,CAAK,UAAW8B,EAAe,uBAAA,EAA0BxB,CAAM,CAClE,CACF,CAEJ,CAAC"}
+{"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, FormMode, FormVariant, IconSize } from '../../constants';\nimport { getColor } from '../../theme/currys/color';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icons';\nimport Check from '../Icons/Check';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the checkbox */\n  label: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  variant?: keyof typeof FormVariant;\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  /** 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    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\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--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox-label--invalid']]: invalid,\n    [checkboxStyles['checkbox-label--bigform']]: bigform,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--checked']]: isChecked,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: invalid,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors'], {\n    [checkboxStyles['checkbox-errors--bigform']]: bigform,\n  });\n\n  let iconColor = getColor('blueberry', 500);\n  if (disabled) iconColor = getColor('neutral', 400);\n  if (onDark) iconColor = getColor('blueberry', 200);\n  if (invalid) iconColor = getColor('cherry', 500);\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  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={checkboxLabelClasses}>\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={ref}\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        <span className={checkboxStyles['checkbox-label__text']}>{label}</span>\n      </label>\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","onChange","rest","isChecked","setIsChecked","useState","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","AnalyticsId","Icon","Check","IconSize","Checkbox$1"],"mappings":"6YAgCO,MAAMA,EAAWC,EAAM,WAAW,CAACC,EAAsBC,IAAqC,CAC7F,KAAA,CACJ,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACD,EAAAjB,EACE,CAACkB,EAAWC,CAAY,EAAIC,EAASjB,CAAO,EAC5CkB,EAAUT,GAASJ,IAASc,EAAS,UACrCC,EAASf,IAASc,EAAS,OAC3BE,EAAchB,IAASc,EAAS,YAChCG,EAAUf,IAAYgB,EAAY,QAElCC,EAAyBC,EAAWC,EAAe,kBAAkB,EAAG,CAC5E,CAACA,EAAe,8BAA8B,CAAC,EAAGlB,EAClD,CAACkB,EAAe,2BAA2B,CAAC,EAAGJ,CAAA,CAChD,EACKK,EAAuBF,EAAWC,EAAe,gBAAgB,EAAG,CACxE,CAACA,EAAe,0BAA0B,CAAC,EAAGzB,EAC9C,CAACyB,EAAe,yBAAyB,CAAC,EAAGN,EAC7C,CAACM,EAAe,8BAA8B,CAAC,EAAGL,EAClD,CAACK,EAAe,yBAAyB,CAAC,EAAGR,EAC7C,CAACQ,EAAe,yBAAyB,CAAC,EAAGJ,CAAA,CAC9C,EACKM,EAAkBH,EAAWC,EAAe,SAAU3B,CAAS,EAC/D8B,EAA6BJ,EAAWC,EAAe,wBAAwB,EAAG,CACtF,CAACA,EAAe,iCAAiC,CAAC,EAAGX,EACrD,CAACW,EAAe,kCAAkC,CAAC,EAAGzB,EACtD,CAACyB,EAAe,iCAAiC,CAAC,EAAGN,EACrD,CAACM,EAAe,sCAAsC,CAAC,EAAGL,EAC1D,CAACK,EAAe,iCAAiC,CAAC,EAAGR,CAAA,CACtD,EACKY,EAAcL,EAAWC,EAAe,iBAAiB,EAAG,CAChE,CAACA,EAAe,0BAA0B,CAAC,EAAGJ,CAAA,CAC/C,EAEG,IAAAS,EAAYC,EAAS,YAAa,GAAG,EACrC/B,IAAsB8B,EAAAC,EAAS,UAAW,GAAG,GAC7CZ,IAAoBW,EAAAC,EAAS,YAAa,GAAG,GAC7Cd,IAAqBa,EAAAC,EAAS,SAAU,GAAG,GAE/CC,EAAU,IAAM,CACdjB,EAAahB,CAAO,CAAA,EACnB,CAACA,CAAO,CAAC,EAEN,MAAAkC,EAAmBC,GAAiD,CACpEtB,GACFA,EAASsB,CAAC,EAGZnB,EAAa,CAACD,CAAS,CAAA,EAIvB,OAAAnB,EAAA,cAAC,OAAI,cAAae,EAAQ,mBAAkByB,EAAY,SAAU,UAAWZ,CAC1E,EAAAhB,mBAAc,IAAE,CAAA,UAAWsB,GAActB,CAAU,kBACnD,QAAM,CAAA,QAASL,EAAS,UAAWwB,CAClC,EAAA/B,EAAA,cAAC,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWsB,EACX,KAAK,WACL,QAASb,EACT,SAAAd,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,SAAAG,EACA,SAAUsB,EACT,GAAGpB,CAAA,CAAA,EAENlB,EAAA,cAAC,OAAK,CAAA,UAAWiC,CACd,EAAAd,GAAcnB,EAAA,cAAAyC,EAAA,CAAK,MAAON,EAAW,UAAWL,EAAe,eAAmB,QAASY,EAAO,KAAMC,EAAS,MAAQ,CAAA,CAC5H,EACA3C,EAAA,cAAC,OAAK,CAAA,UAAW8B,EAAe,sBAAsB,CAAI,EAAAxB,CAAM,CAClE,CACF,CAEJ,CAAC,EAEDsC,EAAe7C"}

package/Close.js

@@ -1,2 +1,2 @@
-import e from"react";import{palette as s}from"./theme/palette.js";import{Icon as r}from"./components/Icons/Icon.js";import{AnalyticsId as i}from"./constants.js";import m from"./components/Icons/X.js";import o from"./components/Close/styles.module.scss";import{useBreakpoint as c,Breakpoint as n}from"./hooks/useBreakpoint.js";import b from"classnames";const z=t=>{const a=c()===n.xs||t.small?38:48,l=b(o.close,{[o["close--small"]]:t.small});return e.createElement("button",{"data-testid":t.testId,"data-analyticsid":i.Close,className:l,"aria-label":t.ariaLabel||"Lukk",onClick:t.onClick,type:"button"},e.createElement(r,{svgIcon:m,color:s.blueberry600,size:a}))};export{z as C};
+import o from"react";import d from"classnames";import{AnalyticsId as b}from"./constants.js";import{useBreakpoint as u,Breakpoint as k}from"./hooks/useBreakpoint.js";import{palette as C}from"./theme/palette.js";import{Icon as y}from"./components/Icons/Icon.js";import I from"./components/Icons/X.js";import e from"./components/Close/styles.module.scss";const B=o.forwardRef(function(s,r){const{small:t,testId:a,ariaLabel:l="Lukk",onClick:i,className:n,color:c=C.blueberry600,isHovered:m}=s,p=u()===k.xs||t?38:48,f=d(e.close,{[e["close--small"]]:t},n);return o.createElement("button",{ref:r,"data-testid":a,"data-analyticsid":b.Close,className:f,"aria-label":l,onClick:i,type:"button"},o.createElement(y,{svgIcon:I,color:c,size:p,isHovered:m}))}),F=B;export{F 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';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icons';\nimport X from '../Icons/X';\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { AnalyticsId } from '../../constants';\nimport classNames from 'classnames';\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?: () => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Close = (props: CloseProps): JSX.Element => {\n  const breakpoint = useBreakpoint();\n\n  const iconSize = breakpoint === Breakpoint.xs || props.small ? 38 : 48;\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: props.small });\n\n  return (\n    <button\n      data-testid={props.testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={props.ariaLabel || 'Lukk'}\n      onClick={props.onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={palette.blueberry600} size={iconSize} />\n    </button>\n  );\n};\n\nexport default Close;\n"],"names":["Close","props","iconSize","useBreakpoint","Breakpoint","closeClasses","classNames","styles","React","AnalyticsId","Icon","X","palette"],"mappings":"gWAoBM,MAAAA,EAASC,GAAmC,CAGhD,MAAMC,EAFaC,MAEaC,EAAW,IAAMH,EAAM,MAAQ,GAAK,GAC9DI,EAAeC,EAAWC,EAAO,MAAO,CAAE,CAACA,EAAO,iBAAkBN,EAAM,KAAO,CAAA,EAEvF,OACGO,EAAA,cAAA,SAAA,CACC,cAAaP,EAAM,OACnB,mBAAkBQ,EAAY,MAC9B,UAAWJ,EACX,aAAYJ,EAAM,WAAa,OAC/B,QAASA,EAAM,QACf,KAAK,QAAA,EAEJO,EAAA,cAAAE,EAAA,CAAK,QAASC,EAAG,MAAOC,EAAQ,aAAc,KAAMV,CAAU,CAAA,CACjE,CAEJ"}
+{"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 { palette } from '../../theme/palette';\nimport Icon from '../Icons';\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?: () => 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  /** Gives hovered effect to X icon */\n  isHovered?: boolean;\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, isHovered } = props;\n  const breakpoint = useBreakpoint();\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={ref}\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","isHovered","iconSize","useBreakpoint","Breakpoint","closeClasses","classNames","styles","AnalyticsId","Icon","X","Close$1"],"mappings":"gWA6BA,MAAMA,EAAQC,EAAM,WAAW,SAA4BC,EAAmBC,EAA4C,CAClH,KAAA,CAAE,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,EAAY,OAAQ,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAQC,EAAQ,aAAc,UAAAC,CAAA,EAAcT,EAGrGU,EAFaC,MAEaC,EAAW,IAAMV,EAAQ,GAAK,GAExDW,EAAeC,EAAWC,EAAO,MAAO,CAAE,CAACA,EAAO,cAAc,CAAC,EAAGb,CAAM,EAAGI,CAAS,EAG1F,OAAAP,EAAA,cAAC,SAAA,CACC,IAAAE,EACA,cAAaE,EACb,mBAAkBa,EAAY,MAC9B,UAAWH,EACX,aAAYT,EACZ,QAAAC,EACA,KAAK,QAAA,kBAEJY,EAAK,CAAA,QAASC,EAAG,MAAAX,EAAc,KAAMG,EAAU,UAAAD,EAAsB,CAAA,CAG5E,CAAC,EAEDU,EAAerB"}

package/ErrorWrapper.js

@@ -1,2 +1,2 @@
-import o from"react";import a from"classnames";import e from"./components/ErrorWrapper/styles.module.scss";const d=t=>{const{errorText:r,className:s,testId:p}=t,c=a(e["error-wrapper"],s,{[e["error-wrapper--with-error"]]:r}),l=a(e["error-wrapper__errors"]);return o.createElement("div",{className:c,"data-testid":p||"error-wrapper-testid"},r&&o.createElement("p",{role:"alert",className:l},r),t.children)};export{d as E};
+import a from"react";import o from"classnames";import e from"./components/ErrorWrapper/styles.module.scss";const m=t=>{const{errorText:r,className:s,testId:p}=t,c=o(e["error-wrapper"],s,{[e["error-wrapper--with-error"]]:r}),l=o(e["error-wrapper__errors"]);return a.createElement("div",{className:c,"data-testid":p||"error-wrapper-testid"},r&&a.createElement("p",{role:"alert",className:l},r),t.children)},w=m;export{w as E,m as a};
 //# 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';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\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 { errorText, className, testId } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], className, { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle} data-testid={testId || 'error-wrapper-testid'}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","className","testId","withErrorStyle","cn","styles","errorStyles","React"],"mappings":"2GAgBO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,OAAAC,CAAA,EAAWH,EAEnCI,EAAiBC,EAAGC,EAAO,iBAAkBJ,EAAW,CAAE,CAACI,EAAO,8BAA+BL,CAAW,CAAA,EAE5GM,EAAcF,EAAGC,EAAO,wBAAwB,EAEtD,OACGE,EAAA,cAAA,MAAA,CAAI,UAAWJ,EAAgB,cAAaD,GAAU,sBAAA,EACpDF,GACEO,EAAA,cAAA,IAAA,CAAE,KAAK,QAAQ,UAAWD,CACxB,EAAAN,CACH,EAEDD,EAAM,QACT,CAEJ"}
+{"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 ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\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 { errorText, className, testId } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], className, { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle} data-testid={testId || 'error-wrapper-testid'}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","className","testId","withErrorStyle","cn","styles","errorStyles","React","ErrorWrapper$1"],"mappings":"2GAiBO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,UAAAC,EAAW,UAAAC,EAAW,OAAAC,CAAA,EAAWH,EAEnCI,EAAiBC,EAAGC,EAAO,eAAe,EAAGJ,EAAW,CAAE,CAACI,EAAO,2BAA2B,CAAC,EAAGL,CAAW,CAAA,EAE5GM,EAAcF,EAAGC,EAAO,uBAAuB,CAAC,EAEtD,uBACG,MAAI,CAAA,UAAWF,EAAgB,cAAaD,GAAU,sBACpD,EAAAF,GACEO,EAAA,cAAA,IAAA,CAAE,KAAK,QAAQ,UAAWD,GACxBN,CACH,EAEDD,EAAM,QACT,CAEJ,EAEAS,EAAeV"}

package/FormGroup.js

@@ -1,2 +1,2 @@
-import r from"react";import i from"classnames";import a from"./components/FormGroup/styles.module.scss";import{C as x}from"./Checkbox.js";import{FormMode as C,FormVariant as N,AnalyticsId as y}from"./constants.js";import{R}from"./RadioButton.js";import{I as W}from"./Input.js";import{T as M}from"./Title.js";import{F as S}from"./FormLayout.js";import{E as B}from"./ErrorWrapper.js";import{S as A}from"./Select.js";import{isComponent as l}from"./utils/component.js";const D=r.forwardRef((t,_)=>{const{className:k,fieldsetClassName:w,mode:n=C.onwhite,variant:s=N.normal,error:m,name:o,htmlMarkup:d="fieldset",renderError:F=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,f=n===C.ondark,u=s===N.bigform,v=i(a["form-group-wrapper"],{[a["form-group-wrapper--on-dark"]]:f,[a["form-group-wrapper--invalid"]]:m},k),G=i(a["form-group-wrapper__title"],{[a["form-group-wrapper__title--on-dark"]]:f&&!m,[a["form-group-wrapper__title--bigform"]]:u}),T=i(a["form-group"]),c=i(a["field-set__legend"],{[a["field-set__legend--on-dark"]]:f&&!m,[a["field-set__legend--bigform"]]:u}),g=i(a["field-set"],w),p=e=>l(e,S)?r.cloneElement(e,{variant:s,mapHelper:p}):l(e,D)?r.cloneElement(e,{mode:n,variant:s,error:m,renderError:!1}):l(e,x)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,R)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,W)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:s,error:!!m}):l(e,A)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,error:!!m}):e,E=()=>r.createElement("div",{className:T},d==="div"&&r.createElement("div",{id:t.title,className:g},t.legend&&r.createElement("h5",{className:c},t.legend),r.Children.map(t.children,p)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:g},t.legend&&r.createElement("legend",{className:c},t.legend),r.Children.map(t.children,p)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":y.FormGroup,className:v,ref:_,tabIndex:-1},t.title&&r.createElement(M,{className:G,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},t.title),F?r.createElement(B,{className:I,errorText:m,testId:b},E()):E())});export{D as F};
+import r from"react";import l from"classnames";import{FormMode as C,FormVariant as N,AnalyticsId as y}from"./constants.js";import{isComponent as s}from"./utils/component.js";import{C as R}from"./Checkbox.js";import{E as W}from"./ErrorWrapper.js";import{F as M}from"./FormLayout.js";import{I as S}from"./Input.js";import{R as B}from"./RadioButton.js";import{S as A}from"./Select.js";import{T as D}from"./Title.js";import o from"./components/FormGroup/styles.module.scss";const _=r.forwardRef((t,F)=>{const{className:k,fieldsetClassName:w,mode:m=C.onwhite,variant:n=N.normal,error:a,name:i,htmlMarkup:d="fieldset",renderError:G=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,p=m===C.ondark,u=n===N.bigform,v=l(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:p,[o["form-group-wrapper--invalid"]]:a},k),T=l(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:p&&!a,[o["form-group-wrapper__title--bigform"]]:u}),x=l(o["form-group"]),c=l(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:p&&!a,[o["field-set__legend--bigform"]]:u}),g=l(o["field-set"],w),f=e=>s(e,M)?r.cloneElement(e,{variant:n,mapHelper:f}):s(e,_)?r.cloneElement(e,{mode:m,variant:n,error:a,renderError:!1}):s(e,R)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,B)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,S)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,A)?r.cloneElement(e,{name:i??e.props.name,mode:m,error:!!a}):e,E=()=>r.createElement("div",{className:x},d==="div"&&r.createElement("div",{id:t.title,className:g},t.legend&&r.createElement("h5",{className:c},t.legend),r.Children.map(t.children,f)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:g},t.legend&&r.createElement("legend",{className:c},t.legend),r.Children.map(t.children,f)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":y.FormGroup,className:v,ref:F,tabIndex:-1},t.title&&r.createElement(D,{className:T,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},t.title),G?r.createElement(W,{className:I,errorText:a,testId:b},E()):E())}),U=_;export{U as F,_ as a};
 //# sourceMappingURL=FormGroup.js.map

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Select, { SelectProps } from '../Select';\nimport { isComponent } from '../../utils/component';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    variant = FormVariant.normal,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        mode,\n        variant,\n        error,\n        renderError: false,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = () => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div id={props.title} className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.title} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the errorWrapper. */\n  errorWrapperClassName?: string;\n  /** Adds custom classes to the fieldset element. */\n  fieldsetClassName?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the data-testid attribute for the error-wrapper. */\n  errorWrapperTestId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n  /** Renders the error component (Default: true) */\n  renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const {\n    className,\n    fieldsetClassName,\n    mode = FormMode.onwhite,\n    variant = FormVariant.normal,\n    error,\n    name,\n    htmlMarkup = 'fieldset',\n    renderError = true,\n    errorWrapperClassName,\n    errorWrapperTestId,\n  } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        mode,\n        variant,\n        error,\n        renderError: false,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  const formGroupContent = () => {\n    return (\n      <div className={formGroupClasses}>\n        {htmlMarkup === 'div' && (\n          <div id={props.title} className={fieldsetClasses}>\n            {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </div>\n        )}\n        {htmlMarkup === 'fieldset' && (\n          <fieldset name={props.title} className={fieldsetClasses}>\n            {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n            {React.Children.map(props.children, mapFormComponent)}\n          </fieldset>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      {renderError ? (\n        <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n          {formGroupContent()}\n        </ErrorWrapper>\n      ) : (\n        formGroupContent()\n      )}\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper","FormGroup$1"],"mappings":"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"}

package/FormLayout.js

@@ -1,2 +1,2 @@
-import o from"react";import l from"classnames";import e from"./components/FormLayout/styles.module.scss";import{FormVariant as h,AnalyticsId as u}from"./constants.js";var y=(t=>(t.one="one",t.two="two",t.three="three",t.four="four",t.five="five",t))(y||{});const x=o.forwardRef((t,v)=>{const{maxColumns:r="one",colMinWidth:f=300,variant:m,className:s,mapHelper:a}=t,c={"--min-col-width":`${f}px`},n=l(e["form-layout-container"],{[e["form-layout-container--bigform"]]:m===h.bigform},s),d=l(e["form-layout-child"],{[e["form-layout-child--two"]]:r==="two",[e["form-layout-child--three"]]:r==="three",[e["form-layout-child--four"]]:r==="four",[e["form-layout-child--five"]]:r==="five"});return o.createElement("div",{"data-testid":t.testId,"data-analyticsid":u.FormLayout,style:c,className:n},o.Children.map(t.children,i=>o.createElement("div",{className:d},a?a(i):i)))});export{x as F,y as a};
+import e from"react";import l from"classnames";import{FormVariant as u,AnalyticsId as h}from"./constants.js";import o from"./components/FormLayout/styles.module.scss";var y=(t=>(t.one="one",t.two="two",t.three="three",t.four="four",t.five="five",t))(y||{});const v=e.forwardRef((t,p)=>{const{maxColumns:r="one",colMinWidth:m=300,variant:s,className:f,mapHelper:a}=t,c={"--min-col-width":`${m}px`},n=l(o["form-layout-container"],{[o["form-layout-container--bigform"]]:s===u.bigform},f),d=l(o["form-layout-child"],{[o["form-layout-child--two"]]:r==="two",[o["form-layout-child--three"]]:r==="three",[o["form-layout-child--four"]]:r==="four",[o["form-layout-child--five"]]:r==="five"});return e.createElement("div",{"data-testid":t.testId,"data-analyticsid":h.FormLayout,style:c,className:n},e.Children.map(t.children,i=>e.createElement("div",{className:d},a?a(i):i)))}),g=v;export{g as F,y as a,v as b};
 //# sourceMappingURL=FormLayout.js.map

package/FormLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport { AnalyticsId, FormVariant } from '../../constants';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, variant, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--bigform']]: variant === FormVariant.bigform,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormLayout} style={cssVariable} className={formLayoutContainerClasses}>\n      {React.Children.map(props.children, (child: React.ReactNode) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","variant","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormVariant","formLayoutChildClasses","AnalyticsId","child"],"mappings":"uKAOY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,KAAO,OALGA,IAAAA,GAAA,CAAA,CAAA,EAyBL,MAAMC,EAAaC,EAAM,WAAW,CAACC,EAAwBC,IAAyC,CACrG,KAAA,CAAE,WAAYC,EAAU,MAAuB,YAAAC,EAAc,IAAK,QAAAC,EAAS,UAAAC,EAAW,UAAAC,CAAc,EAAAN,EAEpGO,EAAc,CAAE,kBAAmB,GAAGJ,OACtCK,EAA6BC,EACjCC,EAAgB,yBAChB,CACE,CAACA,EAAgB,mCAAoCN,IAAYO,EAAY,OAC/E,EACAN,CAAA,EAEIO,EAAyBH,EAAWC,EAAgB,qBAAsB,CAC9E,CAACA,EAAgB,2BAA4BR,IAAY,MACzD,CAACQ,EAAgB,6BAA8BR,IAAY,QAC3D,CAACQ,EAAgB,4BAA6BR,IAAY,OAC1D,CAACQ,EAAgB,4BAA6BR,IAAY,MAAA,CAC3D,EAED,OACGH,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,OAAQ,mBAAkBa,EAAY,WAAY,MAAON,EAAa,UAAWC,CAAA,EACtGT,EAAM,SAAS,IAAIC,EAAM,SAAWc,GAC3Bf,EAAA,cAAA,MAAA,CAAI,UAAWa,CAAA,EAAyBN,EAAYA,EAAUQ,CAAK,EAAIA,CAAM,CACtF,CACH,CAEJ,CAAC"}
+{"version":3,"file":"FormLayout.js","sources":["../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormVariant } from '../../constants';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport enum FormLayoutColumns {\n  one = 'one',\n  two = 'two',\n  three = 'three',\n  four = 'four',\n  five = 'five',\n}\n\nexport interface FormLayoutProps {\n  /** The max number of columns that will exist if space is available */\n  maxColumns?: keyof typeof FormLayoutColumns;\n  /** Sets the minimum width for the columns in pixels - this determines how many will fit on a row */\n  colMinWidth?: number;\n  /** Items in the FormLayout component */\n  children?: React.ReactNode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Function that helps map the form children */\n  mapHelper?: (child: React.ReactNode) => React.ReactNode;\n}\n\nexport const FormLayout = React.forwardRef((props: FormLayoutProps, ref: React.ForwardedRef<HTMLElement>) => {\n  const { maxColumns: columns = FormLayoutColumns.one, colMinWidth = 300, variant, className, mapHelper } = props;\n\n  const cssVariable = { '--min-col-width': `${colMinWidth}px` } as React.CSSProperties;\n  const formLayoutContainerClasses = classNames(\n    formGroupStyles['form-layout-container'],\n    {\n      [formGroupStyles['form-layout-container--bigform']]: variant === FormVariant.bigform,\n    },\n    className\n  );\n  const formLayoutChildClasses = classNames(formGroupStyles['form-layout-child'], {\n    [formGroupStyles['form-layout-child--two']]: columns === FormLayoutColumns.two,\n    [formGroupStyles['form-layout-child--three']]: columns === FormLayoutColumns.three,\n    [formGroupStyles['form-layout-child--four']]: columns === FormLayoutColumns.four,\n    [formGroupStyles['form-layout-child--five']]: columns === FormLayoutColumns.five,\n  });\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormLayout} style={cssVariable} className={formLayoutContainerClasses}>\n      {React.Children.map(props.children, (child: React.ReactNode) => {\n        return <div className={formLayoutChildClasses}>{mapHelper ? mapHelper(child) : child}</div>;\n      })}\n    </div>\n  );\n});\n\nexport default FormLayout;\n"],"names":["FormLayoutColumns","FormLayout","React","props","ref","columns","colMinWidth","variant","className","mapHelper","cssVariable","formLayoutContainerClasses","classNames","formGroupStyles","FormVariant","formLayoutChildClasses","AnalyticsId","child","FormLayout$1"],"mappings":"uKAQY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,KAAO,OALGA,IAAAA,GAAA,CAAA,CAAA,EAyBL,MAAMC,EAAaC,EAAM,WAAW,CAACC,EAAwBC,IAAyC,CACrG,KAAA,CAAE,WAAYC,EAAU,MAAuB,YAAAC,EAAc,IAAK,QAAAC,EAAS,UAAAC,EAAW,UAAAC,CAAc,EAAAN,EAEpGO,EAAc,CAAE,kBAAmB,GAAGJ,OACtCK,EAA6BC,EACjCC,EAAgB,uBAAuB,EACvC,CACE,CAACA,EAAgB,gCAAgC,CAAC,EAAGN,IAAYO,EAAY,OAC/E,EACAN,CAAA,EAEIO,EAAyBH,EAAWC,EAAgB,mBAAmB,EAAG,CAC9E,CAACA,EAAgB,wBAAwB,CAAC,EAAGR,IAAY,MACzD,CAACQ,EAAgB,0BAA0B,CAAC,EAAGR,IAAY,QAC3D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,OAC1D,CAACQ,EAAgB,yBAAyB,CAAC,EAAGR,IAAY,MAAA,CAC3D,EAED,uBACG,MAAI,CAAA,cAAaF,EAAM,OAAQ,mBAAkBa,EAAY,WAAY,MAAON,EAAa,UAAWC,GACtGT,EAAM,SAAS,IAAIC,EAAM,SAAWc,GAC5Bf,EAAA,cAAC,OAAI,UAAWa,GAAyBN,EAAYA,EAAUQ,CAAK,EAAIA,CAAM,CACtF,CACH,CAEJ,CAAC,EAEDC,EAAejB"}

package/HelpBubble.js

@@ -1,2 +1,2 @@
-import v from"classnames";import r,{useRef as W,useState as K,useEffect as Q}from"react";import{AnalyticsId as Y}from"./constants.js";import{useInterval as $}from"./hooks/useInterval.js";import{useIsVisible as z}from"./hooks/useIsVisible.js";import{useLayoutEvent as S}from"./hooks/useLayoutEvent.js";import{useSize as tt}from"./hooks/useSize.js";import{mergeRefs as et}from"./utils/refs.js";import{A as ot}from"./AnchorLink.js";import{C as nt}from"./Close.js";import s from"./components/HelpBubble/styles.module.scss";const it=373,b=12,w=16,T=20,rt=4,N=12,k=(t,e,n)=>n!==l.positionautomatic?n:t.top>e.height+w?l.positionabove:l.positionbelow,H=t=>t.left+t.width/2,st=t=>document.documentElement.clientWidth-t.right+t.width/2,d=(t,e)=>H(t)-e.width/2,lt=(t,e)=>d(t,e)+e.width,bt=(t,e)=>d(t,e)>b,ct=(t,e)=>lt(t,e)<document.documentElement.clientWidth-b,ut=(t,e)=>ct(t,e)?bt(t,e)?"floating":"left":"right",R=(t,e)=>t.top-w-e.height,x=t=>t.bottom+w,at=()=>document.documentElement.clientWidth-b*2,ft=()=>document.documentElement.clientWidth>it+b*2,y=t=>t.top-w-rt,mt=t=>H(t)-T/2,pt=t=>st(t)-T/2,ht=(t,e,n)=>{const i=ut(t,e),o=k(t,e,n);return i==="left"?o===l.positionabove?"leftabove":"leftbelow":i==="right"?o===l.positionabove?"rightabove":"rightbelow":o===l.positionabove?"floatingabove":"floatingbelow"},gt=(t,e,n)=>{const i=ht(t,e,n),o=ft()?void 0:at();return i==="leftabove"?{left:b,top:R(t,e),width:o}:i==="leftbelow"?{left:b,top:x(t),width:o}:i==="rightabove"?{right:b,top:R(t,e),width:o}:i==="rightbelow"?{right:b,top:x(t),width:o}:i==="floatingbelow"?{left:d(t,e),top:x(t),width:o}:{left:d(t,e),top:R(t,e),width:o}},dt=(t,e,n)=>{const i=mt(e),o=pt(e),u=t.left+N,c=t.right+N;return t.right?n===l.positionabove?{right:o>c?o:c,top:y(e)}:{right:o>c?o:c,top:e.bottom}:n===l.positionabove?{left:i>u?i:u,top:y(e)}:{left:i>u?i:u,top:e.bottom}};var l=(t=>(t.positionautomatic="positionautomatic",t.positionbelow="positionbelow",t.positionabove="positionabove",t))(l||{});const wt=r.forwardRef((t,e)=>{const{helpBubbleId:n,children:i,controllerRef:o,className:u="",variant:c="positionautomatic",showBubble:m,noCloseButton:B,linkText:p="Mer hjelp",linkUrl:C,onLinkClick:E,onClose:O,closeAriaLabel:F,role:L,testId:X}=t,A=W(null),V=W(null),h=tt(A),[a,D]=K(),M=z(o,0),P=()=>{var I;D((I=o.current)==null?void 0:I.getBoundingClientRect())};$(P,500),S(P,["scroll","resize"],10),Q(()=>{m&&P()},[m]);const f=L==="tooltip";if(!m&&!f)return null;const U=v(s.helpbubble,{[s["helpbubble--visible"]]:!f&&M||f&&m},u),g=a&&h&&k(a,h,c),G=v(s.helpbubble__arrow,{[s["helpbubble__arrow--over"]]:g==="positionbelow",[s["helpbubble__arrow--under"]]:g==="positionabove"}),j=v(s.helpbubble__content,{[s["helpbubble__content--close"]]:!B&&!f}),_=a&&h&&gt(a,h,c),Z=_&&a&&g&&dt(_,a,g),q=()=>{if(!f){if(E&&p)return r.createElement("button",{className:s.helpbubble__link,onClick:E,type:"button"},p);if(C&&p)return r.createElement(ot,{href:C},p)}},J=()=>{if(!(B||f))return r.createElement("div",{className:s.helpbubble__close},r.createElement(nt,{small:!0,onClick:O,ariaLabel:F}))};return r.createElement(r.Fragment,null,r.createElement("div",{id:n,ref:et([e,A]),className:U,style:_,"data-testid":X,"data-analyticsid":Y.HelpBubble,role:L},J(),r.createElement("div",{className:j},i,q())),r.createElement("div",{ref:V,className:G,style:Z}))});wt.displayName="HelpBubble";export{wt as H,l as a};
+import e from"react";import c from"classnames";import{AnalyticsId as y}from"./constants.js";import{A as L}from"./AnchorLink.js";import{C as A}from"./Close.js";import{P as w,a as I}from"./PopOver.js";import t from"./components/HelpBubble/styles.module.scss";const M=w,b=e.forwardRef((m,p)=>{const{children:u,className:f="",noCloseButton:o,linkText:r="Mer hjelp",linkUrl:n,onLinkClick:s,onClose:d,closeAriaLabel:h,showBubble:a,helpBubbleId:B,variant:C,controllerRef:k,role:i,testId:_}=m,l=i==="tooltip";if(!a&&!l)return null;const E=c(t.helpbubble,f),N=c(t.helpbubble__content,{[t["helpbubble__content--close"]]:!o&&!l}),v=()=>{if(!l){if(s&&r)return e.createElement("button",{className:t.helpbubble__link,onClick:s,type:"button"},r);if(n&&r)return e.createElement(L,{href:n},r)}},H=()=>{if(!(o||l))return e.createElement("div",{className:t.helpbubble__close},e.createElement(A,{small:!0,onClick:d,ariaLabel:h}))};return e.createElement(I,{id:B,variant:C,controllerRef:k,role:i,ref:p,show:l&&a,testId:_},e.createElement("div",{className:E,"data-analyticsid":y.HelpBubble},H(),e.createElement("div",{className:N},u,v())))});b.displayName="HelpBubble";const U=b;export{U as H,M as a};
 //# sourceMappingURL=HelpBubble.js.map