@helsenorge/designsystem-react 5.0.0-beta.0 → 5.0.0

package/AnchorLink.js

@@ -1,2 +1,2 @@
-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};
+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';\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"}
+{"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,EACC,cAAgBO,EAChB,mBAAqBS,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/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { 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 = (): JSX.Element => {\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      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n    </span>\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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"}
+{"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 = (): JSX.Element => {\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      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span style={{ transform: `rotate(${angle}rad)`, width: diagonalWidth }} className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(<Icon svgIcon={ArrowRight} />, getLargeIconSize(large, mobile), buttonStyles['button__arrow'])\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n    </span>\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,64 @@
+## [4.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.3.1&targetVersion=GTv4.4.0) (2023-09-15)
+
+### Features
+
+- helpquestion ([a402a67](https://github.com/helsenorge/designsystem/commit/a402a6728a9273ca89b1e87c4972ab97c8ab2712)), closes
+  [#301149](https://github.com/helsenorge/designsystem/issues/301149)
+- step støtter sticky knapper ([5be5ed3](https://github.com/helsenorge/designsystem/commit/5be5ed35a13fad559e400c2ecae5f439e2bb48fd)),
+  closes [#307046](https://github.com/helsenorge/designsystem/issues/307046)
+- tableExpandedRow støtter id for bruk med aria-controls og html-validering
+  ([968475c](https://github.com/helsenorge/designsystem/commit/968475c4403211caa9ed994b27c10f188e11d752)), closes
+  [#308148](https://github.com/helsenorge/designsystem/issues/308148)
+
+### Bug Fixes
+
+- dropdown content havner nå over relative innhold på siden
+  ([16418c7](https://github.com/helsenorge/designsystem/commit/16418c78eea3a333abac52858f31ee75c83a6cee)), closes
+  [#309133](https://github.com/helsenorge/designsystem/issues/309133)
+- expander large story riktig prop verdi
+  ([5b206e6](https://github.com/helsenorge/designsystem/commit/5b206e6528291d3eb8bb74a1c872348560409e34)), closes
+  [#309218](https://github.com/helsenorge/designsystem/issues/309218)
+- html-feil i logo ([508496c](https://github.com/helsenorge/designsystem/commit/508496c8113e2e19dac48ba3b9b13edce83f1b8d)), closes
+  [#308144](https://github.com/helsenorge/designsystem/issues/308144)
+- html-valideringsfeil ([df9d87d](https://github.com/helsenorge/designsystem/commit/df9d87d2492108812b17092462d56d87499bda92)), closes
+  [#291948](https://github.com/helsenorge/designsystem/issues/291948)
+- table elementer kan rendres etter conditions
+  ([c2742e8](https://github.com/helsenorge/designsystem/commit/c2742e8c8d17dfd69cac2e9b3f8e8979f232b9db)), closes
+  [#308272](https://github.com/helsenorge/designsystem/issues/308272)
+
+## [4.3.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.3.0&targetVersion=GTv4.3.1) (2023-08-28)
+
+### Bug Fixes
+
+- gjorde panel focusable optional og focus border er fjernet
+  ([2fbda76](https://github.com/helsenorge/designsystem/commit/2fbda7641ed3b62ef62029611bce3b669f453a42)), closes
+  [#307802](https://github.com/helsenorge/designsystem/issues/307802)
+- windows high contrast mode checkbox og radiobutton er synlige
+  ([54acf09](https://github.com/helsenorge/designsystem/commit/54acf09210b713e4ba996a10f2fe08783e66102c)), closes
+  [#307340](https://github.com/helsenorge/designsystem/issues/307340)
+
+## [4.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.4&targetVersion=GTv4.3.0) (2023-08-23)
+
+### Features
+
+- trigger-komponent ([5c0ded6](https://github.com/helsenorge/designsystem/commit/5c0ded6f8d71bddb780160d2f3124fd89686730e))
+- trigger/hjelpetrigger/infotrigger ([7c66b8b](https://github.com/helsenorge/designsystem/commit/7c66b8b03569cc596e1263b9d1da048654d45d50)),
+  closes [#301136](https://github.com/helsenorge/designsystem/issues/301136)
+
+### Bug Fixes
+
+- lagt til focusable feature i panel
+  ([050d90f](https://github.com/helsenorge/designsystem/commit/050d90f0796718b58dd0e3965721c0df38a684c5)), closes
+  [#305821](https://github.com/helsenorge/designsystem/issues/305821)
+
+## [4.2.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.3&targetVersion=GTv4.2.4) (2023-08-03)
+
+### Bug Fixes
+
+- table med block-visning inne i table med block-visning har synlige kolonneoverskrifter
+  ([7efd8c2](https://github.com/helsenorge/designsystem/commit/7efd8c2d409ac017d3834e812b6cd4b33e523430)), closes
+  [#301989](https://github.com/helsenorge/designsystem/issues/301989)
+
 ## [4.2.3](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.2&targetVersion=GTv4.2.3) (2023-08-03)
 
 ### Bug Fixes
@@ -789,12 +850,12 @@
 
 ### Bug Fixes
 
-- økt kontrast på understreking av lenker
-  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
-  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 - panel har avstand fra tittel til badge
   ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
   [#282359](https://github.com/helsenorge/designsystem/issues/282359)
+- økt kontrast på understreking av lenker
+  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
+  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/Checkbox.js

@@ -1,2 +1,2 @@
-import b,{useState as H,useEffect as V}from"react";import n from"classnames";import{FormMode as l,FormVariant as X,AnalyticsId as $,IconSize as J}from"./constants.js";import{usePseudoClasses as K}from"./hooks/usePseudoClasses.js";import{getColor as h}from"./theme/currys/color.js";import{isMutableRefObject as Q,mergeRefs as U}from"./utils/refs.js";import{a as Y}from"./uuid.js";import{Icon as Z}from"./components/Icons/Icon.js";import ee from"./components/Icons/Check.js";import{g as ce,r as oe}from"./Label.js";import e from"./components/Checkbox/styles.module.scss";const v=b.forwardRef((p,k)=>{const{className:I,checked:d=!1,disabled:r,label:x,inputId:m=Y(),mode:i=l.onwhite,name:N=m,variant:E,errorText:s,error:f=!!s,value:R=ce(x),testId:S,required:F,onChange:g,...L}=p,[o,w]=H(d),u=i===l.onwhite,C=i===l.ongrey,y=i===l.onblueberry,a=f||i===l.oninvalid,t=i===l.ondark,c=E===X.bigform,{refObject:T,isFocused:W}=K(Q(k)?k:null),j=U([k,T]),z=n(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:s,[e["checkbox-wrapper--bigform"]]:c}),A=n(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:t,[e["checkbox-label--bigform"]]:c,[e["checkbox-label__big-form--checked"]]:c&&o,[e["checkbox-label__big-form--focus"]]:c&&W,[e["checkbox-label__big-form--on-white"]]:c&&u,[e["checkbox-label__big-form--on-grey"]]:c&&C,[e["checkbox-label__big-form--on-blueberry"]]:c&&y,[e["checkbox-label__big-form--on-invalid"]]:c&&a,[e["checkbox-label__big-form--disabled"]]:c&&r}),M=n(e.checkbox,I),O=n(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--on-white"]]:u,[e["checkbox__icon-wrapper--on-grey"]]:C,[e["checkbox__icon-wrapper--on-invalid"]]:a,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper__regular--checked"]]:!c&&o,[e["checkbox__icon-wrapper__regular--invalid"]]:!c&&o&&a,[e["checkbox__icon-wrapper__regular--on-dark"]]:!c&&o&&t,[e["checkbox__icon-wrapper__big-form--checked"]]:c&&o,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&a,[e["checkbox__icon-wrapper--on-dark"]]:t,[e["checkbox__icon-wrapper--on-blueberry"]]:y,[e["checkbox__icon-wrapper--invalid"]]:a,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--disabled"]]:r&&c&&o,[e["checkbox__icon-wrapper__big-form--checked--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--checked--disabled"]]:r&&c&&o}),P=n(e["checkbox-label__text"],{[e["checkbox-label__text__big-form--checked"]]:c&&o,[e["checkbox-label__text__big-form--invalid"]]:c&&o&&a,[e["checkbox-label__text--on-dark"]]:t,[e["checkbox-label__text--disabled"]]:r}),q=n(e["checkbox-errors"]);let _=h("white");(t||c&&o)&&(_=h("blueberry",900)),a&&c&&o&&(_=h("white")),r&&(_=h("neutral",400)),V(()=>{w(d)},[d]);const B=G=>{g&&g(G),w(!o)},D=()=>b.createElement(b.Fragment,null,b.createElement("input",{id:m,name:N,className:M,type:"checkbox",checked:o,disabled:r,value:R,ref:j,"aria-describedby":p["aria-describedby"]??void 0,"aria-invalid":f,required:F,onChange:B,...L}),b.createElement("span",{className:O},o&&b.createElement(Z,{color:_,className:e.checkbox__icon,svgIcon:ee,size:J.XSmall})));return b.createElement("div",{"data-testid":S,"data-analyticsid":$.Checkbox,className:z},s&&b.createElement("p",{className:q},s),oe(x,D(),m,i,r,A,P,e["checkbox-sublabel-wrapper"],c))});v.displayName="Checkbox";const de=v;export{de as C,v as a};
+import b,{useState as H,useEffect as V}from"react";import n from"classnames";import{FormMode as l,FormVariant as X,AnalyticsId as $,IconSize as J}from"./constants.js";import{usePseudoClasses as K}from"./hooks/usePseudoClasses.js";import{getColor as h}from"./theme/currys/color.js";import{isMutableRefObject as Q,mergeRefs as U}from"./utils/refs.js";import{u as Y}from"./uuid.js";import{Icon as Z}from"./components/Icons/Icon.js";import ee from"./components/Icons/Check.js";import{g as ce,r as oe}from"./Label.js";import e from"./components/Checkbox/styles.module.scss";const v=b.forwardRef((p,k)=>{const{className:I,checked:d=!1,disabled:r,label:x,inputId:m=Y(),mode:i=l.onwhite,name:N=m,variant:E,errorText:s,error:f=!!s,value:R=ce(x),testId:S,required:F,onChange:g,...L}=p,[o,w]=H(d),u=i===l.onwhite,C=i===l.ongrey,y=i===l.onblueberry,a=f||i===l.oninvalid,t=i===l.ondark,c=E===X.bigform,{refObject:T,isFocused:W}=K(Q(k)?k:null),j=U([k,T]),z=n(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:s,[e["checkbox-wrapper--bigform"]]:c}),A=n(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:t,[e["checkbox-label--bigform"]]:c,[e["checkbox-label__big-form--checked"]]:c&&o,[e["checkbox-label__big-form--focus"]]:c&&W,[e["checkbox-label__big-form--on-white"]]:c&&u,[e["checkbox-label__big-form--on-grey"]]:c&&C,[e["checkbox-label__big-form--on-blueberry"]]:c&&y,[e["checkbox-label__big-form--on-invalid"]]:c&&a,[e["checkbox-label__big-form--disabled"]]:c&&r}),M=n(e.checkbox,I),O=n(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--on-white"]]:u,[e["checkbox__icon-wrapper--on-grey"]]:C,[e["checkbox__icon-wrapper--on-invalid"]]:a,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper__regular--checked"]]:!c&&o,[e["checkbox__icon-wrapper__regular--invalid"]]:!c&&o&&a,[e["checkbox__icon-wrapper__regular--on-dark"]]:!c&&o&&t,[e["checkbox__icon-wrapper__big-form--checked"]]:c&&o,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&a,[e["checkbox__icon-wrapper--on-dark"]]:t,[e["checkbox__icon-wrapper--on-blueberry"]]:y,[e["checkbox__icon-wrapper--invalid"]]:a,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--disabled"]]:r&&c&&o,[e["checkbox__icon-wrapper__big-form--checked--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--checked--disabled"]]:r&&c&&o}),P=n(e["checkbox-label__text"],{[e["checkbox-label__text__big-form--checked"]]:c&&o,[e["checkbox-label__text__big-form--invalid"]]:c&&o&&a,[e["checkbox-label__text--on-dark"]]:t,[e["checkbox-label__text--disabled"]]:r}),q=n(e["checkbox-errors"]);let _=h("white");(t||c&&o)&&(_=h("blueberry",900)),a&&c&&o&&(_=h("white")),r&&(_=h("neutral",400)),V(()=>{w(d)},[d]);const B=G=>{g&&g(G),w(!o)},D=()=>b.createElement(b.Fragment,null,b.createElement("input",{id:m,name:N,className:M,type:"checkbox",checked:o,disabled:r,value:R,ref:j,"aria-describedby":p["aria-describedby"]??void 0,"aria-invalid":f,required:F,onChange:B,...L}),b.createElement("span",{className:O},o&&b.createElement(Z,{color:_,className:e.checkbox__icon,svgIcon:ee,size:J.XSmall})));return b.createElement("div",{"data-testid":S,"data-analyticsid":$.Checkbox,className:z},s&&b.createElement("p",{className:q},s),oe(x,D(),m,i,r,A,P,e["checkbox-sublabel-wrapper"],c))});v.displayName="Checkbox";const de=v;export{de as C,v as a};
 //# sourceMappingURL=Checkbox.js.map

package/Close.js

@@ -1,2 +1,2 @@
-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};
+import o from"react";import b from"classnames";import{AnalyticsId as k}from"./constants.js";import{useBreakpoint as C,Breakpoint as y}from"./hooks/useBreakpoint.js";import{useHover as R}from"./hooks/useHover.js";import{palette as v}from"./theme/palette.js";import{mergeRefs as I}from"./utils/refs.js";import{Icon as B}from"./components/Icons/Icon.js";import N from"./components/Icons/X.js";import t from"./components/Close/styles.module.scss";const g=o.forwardRef(function(r,s){const{small:e,testId:a,ariaLabel:m="Lukk",onClick:l,className:i,color:c=v.blueberry600}=r,n=C(),{hoverRef:f,isHovered:p}=R(),d=n===y.xs||e?38:48,u=b(t.close,{[t["close--small"]]:e},i);return o.createElement("button",{ref:I([s,f]),"data-testid":a,"data-analyticsid":k.Close,className:u,"aria-label":m,onClick:l,type:"button"},o.createElement(B,{svgIcon:N,color:c,size:d,isHovered:p}))}),$=g;export{$ as C};
 //# sourceMappingURL=Close.js.map

package/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { 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"}
+{"version":3,"file":"Close.js","sources":["../src/components/Close/Close.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { palette } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../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}\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = palette.blueberry600 } = props;\n  const breakpoint = useBreakpoint();\n  const { hoverRef, isHovered } = useHover();\n\n  const iconSize = breakpoint === Breakpoint.xs || small ? 38 : 48;\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, hoverRef])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <Icon svgIcon={X} color={color} size={iconSize} isHovered={isHovered} />\n    </button>\n  );\n});\n\nexport default Close;\n"],"names":["Close","React","props","ref","small","testId","ariaLabel","onClick","className","color","palette","breakpoint","useBreakpoint","hoverRef","isHovered","useHover","iconSize","Breakpoint","closeClasses","classNames","styles","mergeRefs","AnalyticsId","Icon","X","Close$1"],"mappings":"2bA6BA,MAAMA,EAAQC,EAAM,WAAW,SAA4BC,EAAmBC,EAA4C,CAClH,KAAA,CAAE,MAAAC,EAAO,OAAAC,EAAQ,UAAAC,EAAY,OAAQ,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAQC,EAAQ,YAAA,EAAiBR,EAC1FS,EAAaC,IACb,CAAE,SAAAC,EAAU,UAAAC,CAAU,EAAIC,EAAS,EAEnCC,EAAWL,IAAeM,EAAW,IAAMb,EAAQ,GAAK,GAExDc,EAAeC,EAAWC,EAAO,MAAO,CAAE,CAACA,EAAO,cAAc,CAAC,EAAGhB,CAAM,EAAGI,CAAS,EAG1F,OAAAP,EAAA,cAAC,SAAA,CACC,IAAKoB,EAAU,CAAClB,EAAKU,CAAQ,CAAC,EAC9B,cAAaR,EACb,mBAAkBiB,EAAY,MAC9B,UAAWJ,EACX,aAAYZ,EACZ,QAAAC,EACA,KAAK,QAAA,kBAEJgB,EAAK,CAAA,QAASC,EAAG,MAAAf,EAAc,KAAMO,EAAU,UAAAF,EAAsB,CAAA,CAG5E,CAAC,EAEDW,EAAezB"}

package/FormGroup.js

@@ -1,2 +1,2 @@
-import r from"react";import l from"classnames";import{FormMode as N,FormVariant as _,AnalyticsId as x}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 d=r.forwardRef((t,F)=>{const{className:k,fieldsetClassName:w,mode:m=N.onwhite,variant:n=_.normal,error:a,name:i,htmlMarkup:u="fieldset",renderError:G=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,p=m===N.ondark,c=n===_.bigform,v=l(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:p,[o["form-group-wrapper--invalid"]]:a},k),y=l(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:p&&!a,[o["form-group-wrapper__title--bigform"]]:c}),T=l(o["form-group"]),g=l(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:p&&!a,[o["field-set__legend--bigform"]]:c}),E=l(o["field-set"],w),f=e=>s(e,M)?r.cloneElement(e,{variant:n,mapHelper:f}):s(e,d)?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,C=()=>r.createElement("div",{className:T},u==="div"&&r.createElement("div",{id:t.title,className:E},t.legend&&r.createElement("h5",{className:g},t.legend),r.Children.map(t.children,f)),u==="fieldset"&&r.createElement("fieldset",{name:t.title,className:E},t.legend&&r.createElement("legend",{className:g},t.legend),r.Children.map(t.children,f)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":x.FormGroup,className:v,ref:F,tabIndex:-1},t.title&&r.createElement(D,{className:y,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},t.title),G?r.createElement(W,{className:I,errorText:a,testId:b},C()):C())});d.displayName="FormGroup";const U=d;export{U as F,d as a};
+import r from"react";import l from"classnames";import{FormMode as N,FormVariant as _,AnalyticsId as x}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 d=r.forwardRef((t,F)=>{const{className:k,fieldsetClassName:w,mode:m=N.onwhite,variant:n=_.normal,error:a,name:p,htmlMarkup:u="fieldset",renderError:G=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,i=m===N.ondark,c=n===_.bigform,v=l(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:i,[o["form-group-wrapper--invalid"]]:a},k),y=l(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:i&&!a,[o["form-group-wrapper__title--bigform"]]:c}),T=l(o["form-group"]),g=l(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:i&&!a,[o["field-set__legend--bigform"]]:c}),E=l(o["field-set"],w),f=e=>s(e,M)?r.cloneElement(e,{variant:n,mapHelper:f}):s(e,d)?r.cloneElement(e,{mode:m,variant:n,error:a,renderError:!1}):s(e,R)?r.cloneElement(e,{name:p??e.props.name,mode:m,variant:n,error:!!a}):s(e,B)?r.cloneElement(e,{name:p??e.props.name,mode:m,variant:n,error:!!a}):s(e,S)?r.cloneElement(e,{name:p??e.props.name,mode:m,variant:n,error:!!a}):s(e,A)?r.cloneElement(e,{name:p??e.props.name,mode:m,error:!!a}):e,C=()=>r.createElement("div",{className:T},u==="div"&&r.createElement("div",{className:E},t.legend&&r.createElement("h5",{className:g},t.legend),r.Children.map(t.children,f)),u==="fieldset"&&r.createElement("fieldset",{name:t.fieldsetName,className:E},t.legend&&r.createElement("legend",{className:g},t.legend),r.Children.map(t.children,f)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":x.FormGroup,className:v,ref:F,tabIndex:-1},t.title&&r.createElement(D,{className:y,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},t.title),G?r.createElement(W,{className:I,errorText:a,testId:b},C()):C())});d.displayName="FormGroup";const U=d;export{U as F,d 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 { 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\nFormGroup.displayName = 'FormGroup';\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":"sdAiDO,MAAMA,EAAYC,EAAM,WAAW,CAACC,EAAuBC,IAA4C,CACtG,KAAA,CACJ,UAAAC,EACA,kBAAAC,EACA,KAAAC,EAAOC,EAAS,QAChB,QAAAC,EAAUC,EAAY,OACtB,MAAAC,EACA,KAAAC,EACA,WAAAC,EAAa,WACb,YAAAC,EAAc,GACd,sBAAAC,EACA,mBAAAC,CACE,EAAAb,EACEc,EAASV,IAASC,EAAS,OAC3BU,EAAUT,IAAYC,EAAY,QAClCS,EAA0BC,EAC9BC,EAAgB,oBAAoB,EACpC,CACE,CAACA,EAAgB,6BAA6B,CAAC,EAAGJ,EAClD,CAACI,EAAgB,6BAA6B,CAAC,EAAGV,CACpD,EACAN,CAAA,EAEIiB,EAAeF,EAAWC,EAAgB,2BAA2B,EAAG,CAC5E,CAACA,EAAgB,oCAAoC,CAAC,EAAGJ,GAAU,CAACN,EACpE,CAACU,EAAgB,oCAAoC,CAAC,EAAGH,CAAA,CAC1D,EACKK,EAAmBH,EAAWC,EAAgB,YAAY,CAAC,EAE3DG,EAAgBJ,EAAWC,EAAgB,mBAAmB,EAAG,CACrE,CAACA,EAAgB,4BAA4B,CAAC,EAAGJ,GAAU,CAACN,EAC5D,CAACU,EAAgB,4BAA4B,CAAC,EAAGH,CAAA,CAClD,EAEKO,EAAkBL,EAAWC,EAAgB,WAAW,EAAGf,CAAiB,EAE5EoB,EAAoBC,GACpBC,EAA4BD,EAAOE,CAAU,EACxC3B,EAAM,aAAayB,EAA8C,CACtE,QAAAlB,EACA,UAAWiB,CAAA,CACZ,EACQE,EAA4BD,EAAO1B,CAAS,EAC9CC,EAAM,aAAayB,EAAO,CAC/B,KAAApB,EACA,QAAAE,EACA,MAAAE,EACA,YAAa,EAAA,CACd,EACQiB,EAA2BD,EAAOG,CAAQ,EAC5C5B,EAAM,aAAayB,EAA4C,CACpE,KAAMf,GAAQe,EAAM,MAAM,KAC1B,KAAApB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,EACQiB,EAA8BD,EAAOI,CAAW,EAClD7B,EAAM,aAAayB,EAA+C,CACvE,KAAMf,GAAQe,EAAM,MAAM,KAC1B,KAAApB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,EACQiB,EAAwBD,EAAOK,CAAK,EACtC9B,EAAM,aAAayB,EAAyC,CACjE,KAAMf,GAAQe,EAAM,MAAM,KAC1B,KAAApB,EACA,QAAAE,EACA,MAAO,CAAC,CAACE,CAAA,CACV,EACQiB,EAAyBD,EAAOM,CAAM,EACxC/B,EAAM,aAAayB,EAA0C,CAClE,KAAMf,GAAQe,EAAM,MAAM,KAC1B,KAAApB,EACA,MAAO,CAAC,CAACI,CAAA,CACV,EAEIgB,EAGHO,EAAmB,IAErBhC,EAAA,cAAC,MAAI,CAAA,UAAWqB,CACb,EAAAV,IAAe,OACbX,EAAA,cAAA,MAAA,CAAI,GAAIC,EAAM,MAAO,UAAWsB,GAC9BtB,EAAM,QAAWD,EAAA,cAAA,KAAA,CAAG,UAAWsB,CAAA,EAAgBrB,EAAM,MAAO,EAC5DD,EAAM,SAAS,IAAIC,EAAM,SAAUuB,CAAgB,CACtD,EAEDb,IAAe,YACbX,EAAA,cAAA,WAAA,CAAS,KAAMC,EAAM,MAAO,UAAWsB,CACrC,EAAAtB,EAAM,QAAUD,EAAA,cAAC,UAAO,UAAWsB,CAAA,EAAgBrB,EAAM,MAAO,EAChED,EAAM,SAAS,IAAIC,EAAM,SAAUuB,CAAgB,CACtD,CAEJ,EAKF,OAAAxB,EAAA,cAAC,OAAI,cAAaC,EAAM,OAAQ,mBAAkBgC,EAAY,UAAW,UAAWhB,EAAyB,IAAAf,EAAU,SAAU,EAC9H,EAAAD,EAAM,OACJD,EAAA,cAAAkC,EAAA,CAAM,UAAWd,EAAc,WAAY,KAAM,WAAY,SAAU,OAAQ,CAAE,UAAW,EAAG,aAAcX,EAAQ,EAAI,CACvH,CAAA,EAAAR,EAAM,KACT,EAEDW,EACCZ,EAAA,cAACmC,GAAa,UAAWtB,EAAuB,UAAWJ,EAAO,OAAQK,GACvEkB,EAAiB,CACpB,EAEAA,EAEJ,CAAA,CAEJ,CAAC,EAEDjC,EAAU,YAAc,YAExB,MAAAqC,EAAerC"}
+{"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 name for the child input element */\n  name?: string;\n  /** Unique name for the fieldset */\n  fieldsetName?: 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 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.fieldsetName} 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\nFormGroup.displayName = 'FormGroup';\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.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 { 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"}
+{"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,CAAW,MACjDK,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/HighlightBox.js

@@ -0,0 +1,2 @@
+import e from"react";import l from"classnames";import"./theme/grid.js";import{useBreakpoint as C,Breakpoint as I}from"./hooks/useBreakpoint.js";import{AnalyticsId as p,IconSize as N}from"./constants.js";import{Icon as y}from"./components/Icons/Icon.js";import{T as B}from"./Title.js";import t from"./components/HighlightBox/styles.module.scss";var H=(i=>(i.medium="medium",i.large="large",i.fluid="fluid",i))(H||{});const u=({className:i,size:r,children:s})=>e.createElement("div",{className:i,"data-testid":"highlightbox-wrapper"},e.createElement("div",{className:t.highlightbox__row},e.createElement("div",{className:l(t.highlightbox__col,r==="medium"&&t["highlightbox__col--offset"])},s))),x=i=>{const{children:r,className:s}=i,a=l(t["highlightbox__content-wrapper"],s);return e.createElement("div",{className:a},e.createElement("div",{className:l(t.highlightbox__row)},r))},W=i=>{const{children:r,color:s="white",size:a="medium",testId:n,svgIcon:c,htmlMarkup:b="div",className:f,contentWrapperClassName:v,title:g,titleHtmlMarkup:k="h2"}=i,_=C(),o=l(t.highlightbox,t[`highlightbox--${s}`],t[`highlightbox--${a}`],c&&t["highlightbox--has-icon"],{container:a==="medium"||a==="large"},f),m=()=>{if(c){const w=a==="large"&&_&&_>=I.md?N.Medium:N.Small,E=e.createElement(B,{testId:"titleId",htmlMarkup:k,appearance:"title4"},g);return e.createElement(e.Fragment,null,e.createElement("div",{className:t.highlightbox__icon},e.createElement(y,{svgIcon:c,size:w}),g&&e.createElement("div",{className:t.mobile},E)),e.createElement("div",{className:t.highlightbox__content},g&&e.createElement("div",{className:t.desktop,"aria-hidden":"true"},E),r))}return r},h=b,d=l(t["highlightbox__content-wrapper"],v);return a==="medium"?e.createElement(u,{className:o,size:a},e.createElement(h,{className:d,"data-testid":n,"data-analyticsid":p.HighlightBox},m())):a==="large"&&c?e.createElement(u,{className:o,size:a},e.createElement(x,{className:d},e.createElement(h,{className:l(t.highlightbox__col,t["highlightbox__col--large-with-icon"]),"data-testid":n,"data-analyticsid":p.HighlightBox},m()))):a==="large"?e.createElement(u,{className:o,size:a},e.createElement(x,{className:d},e.createElement(h,{className:l(t.highlightbox__col,t["highlightbox__col--offset"]),"data-testid":n,"data-analyticsid":p.HighlightBox},m()))):a==="fluid"?e.createElement(h,{className:o,"data-testid":n},m()):null},j=W;export{j as H,H as a};
+//# sourceMappingURL=HighlightBox.js.map

package/HighlightBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HighlightBox.js","sources":["../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icons';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont'\n>;\n\ninterface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightbox__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightBoxSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles['highlightbox'],\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            <Icon svgIcon={svgIcon} size={iconSize} />\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightbox__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightBox","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"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"}

package/Input.js

@@ -1,2 +1,2 @@
-import r,{useRef as re,useState as ne}from"react";import C from"classnames";import{FormMode as i,FormVariant as ae,IconSize as y,AnalyticsId as oe,AVERAGE_CHARACTER_WIDTH_PX as ie}from"./constants.js";import{useBreakpoint as ce,Breakpoint as le}from"./hooks/useBreakpoint.js";import{getColor as I}from"./theme/currys/color.js";import{a as se}from"./uuid.js";import{E as de}from"./ErrorWrapper.js";import{Icon as pe}from"./components/Icons/Icon.js";import{a as me}from"./Label.js";import{M as ue}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var be=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(be||{});const fe=(e,c,m)=>{const l=c?"1.5rem":"2rem",u=c?`${m}px`:"0px",b="4px";return`calc(${e*ie}px + ${l} + ${u} + ${b})`},S=r.forwardRef((e,c)=>{const{className:m,defaultValue:l,placeholder:u,type:b="text",inputId:g=se(),name:N,transparent:$=!1,icon:a,iconRight:f,mode:n=i.onwhite,variant:A,label:F,error:M,errorText:x,testId:z,disabled:o,readOnly:B,autoComplete:D,afterInputChildren:V,width:v,required:H,onChange:E,onKeyDown:X,autoFocus:q,maxCharacters:s,maxText:G,...K}=e,L=ce(),d=re(null),[k,O]=ne(l||""),P=n===i.ondark,j=n===i.onblueberry,J=!!s&&k.toString().length>s,h=n===i.oninvalid||!!x||!!M||J,w=A===ae.bigform,Q=$&&n!==i.ondark&&!h,U=C(t["input-wrapper"],m),Y=C(t["content-wrapper"],{[t["content-wrapper--transparent"]]:Q,[t["content-wrapper--on-blueberry"]]:j,[t["content-wrapper--on-dark"]]:P,[t["content-wrapper--invalid"]]:h,[t["content-wrapper--bigform"]]:w,[t["content-wrapper--disabled"]]:o,[t["content-wrapper--with-icon"]]:a}),Z=C(t["content-wrapper__input"],{[t["content-wrapper__input--bigform"]]:w,[t["content-wrapper__input--disabled"]]:o}),T=o?I("neutral",500):I("black"),W=L===le.xs||!w?y.XSmall:y.Small,_=()=>a!==void 0?r.createElement(pe,{color:T,size:W,svgIcon:a}):null,ee=()=>{if(d&&d.current&&a){const p=f?0:1;d.current.children[p].focus()}},te=p=>{E&&E(p),O(p.target.value)},R=v?fe(v,!!a,W):void 0;return r.createElement(de,{errorText:x},r.createElement("div",{"data-testid":z,"data-analyticsid":oe.Input,className:U},me(F,g,n,o),r.createElement("div",{onClick:ee,ref:d,className:Y,style:{maxWidth:R}},!f&&_(),r.createElement("input",{onChange:te,onKeyDown:X,name:N,type:b,defaultValue:l,id:g,className:Z,ref:c,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!h,disabled:o,placeholder:u,readOnly:B,autoComplete:D||"off",required:H,autoFocus:q,...K}),f&&_()),s&&r.createElement(ue,{maxCharacters:s,length:k.toString().length,maxText:G,mode:n,maxWidth:R}),V))});S.displayName="Input";const Ie=S;export{Ie as I,be as a};
+import r,{useRef as re,useState as ne}from"react";import C from"classnames";import{FormMode as i,FormVariant as ae,IconSize as y,AnalyticsId as oe,AVERAGE_CHARACTER_WIDTH_PX as ie}from"./constants.js";import{useBreakpoint as ce,Breakpoint as le}from"./hooks/useBreakpoint.js";import{getColor as I}from"./theme/currys/color.js";import{u as se}from"./uuid.js";import{E as de}from"./ErrorWrapper.js";import{Icon as pe}from"./components/Icons/Icon.js";import{a as me}from"./Label.js";import{M as ue}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var be=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(be||{});const fe=(e,c,m)=>{const l=c?"1.5rem":"2rem",u=c?`${m}px`:"0px",b="4px";return`calc(${e*ie}px + ${l} + ${u} + ${b})`},S=r.forwardRef((e,c)=>{const{className:m,defaultValue:l,placeholder:u,type:b="text",inputId:g=se(),name:N,transparent:$=!1,icon:a,iconRight:f,mode:n=i.onwhite,variant:A,label:F,error:M,errorText:x,testId:z,disabled:o,readOnly:B,autoComplete:D,afterInputChildren:V,width:v,required:H,onChange:E,onKeyDown:X,autoFocus:q,maxCharacters:s,maxText:G,...K}=e,L=ce(),d=re(null),[k,O]=ne(l||""),P=n===i.ondark,j=n===i.onblueberry,J=!!s&&k.toString().length>s,h=n===i.oninvalid||!!x||!!M||J,w=A===ae.bigform,Q=$&&n!==i.ondark&&!h,U=C(t["input-wrapper"],m),Y=C(t["content-wrapper"],{[t["content-wrapper--transparent"]]:Q,[t["content-wrapper--on-blueberry"]]:j,[t["content-wrapper--on-dark"]]:P,[t["content-wrapper--invalid"]]:h,[t["content-wrapper--bigform"]]:w,[t["content-wrapper--disabled"]]:o,[t["content-wrapper--with-icon"]]:a}),Z=C(t["content-wrapper__input"],{[t["content-wrapper__input--bigform"]]:w,[t["content-wrapper__input--disabled"]]:o}),T=o?I("neutral",500):I("black"),W=L===le.xs||!w?y.XSmall:y.Small,_=()=>a!==void 0?r.createElement(pe,{color:T,size:W,svgIcon:a}):null,ee=()=>{if(d&&d.current&&a){const p=f?0:1;d.current.children[p].focus()}},te=p=>{E&&E(p),O(p.target.value)},R=v?fe(v,!!a,W):void 0;return r.createElement(de,{errorText:x},r.createElement("div",{"data-testid":z,"data-analyticsid":oe.Input,className:U},me(F,g,n,o),r.createElement("div",{onClick:ee,ref:d,className:Y,style:{maxWidth:R}},!f&&_(),r.createElement("input",{onChange:te,onKeyDown:X,name:N,type:b,defaultValue:l,id:g,className:Z,ref:c,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!h,disabled:o,placeholder:u,readOnly:B,autoComplete:D||"off",required:H,autoFocus:q,...K}),f&&_()),s&&r.createElement(ue,{maxCharacters:s,length:k.toString().length,maxText:G,mode:n,maxWidth:R}),V))});S.displayName="Input";const Ie=S;export{Ie as I,be as a};
 //# sourceMappingURL=Input.js.map

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getColor } from '../../theme/currys';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onChange'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode = FormMode.onwhite,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n  const [input, setInput] = useState(defaultValue || '');\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    setInput(e.target.value);\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {renderLabel(label, inputId, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={handleChange}\n            onKeyDown={onKeyDown}\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-labelledby={props['aria-labelledby'] ?? undefined}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","FormMode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { getColor } from '../../theme/currys';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onChange'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode = FormMode.onwhite,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n  const [input, setInput] = useState(defaultValue || '');\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    setInput(e.target.value);\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {renderLabel(label, inputId, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            onChange={handleChange}\n            onKeyDown={onKeyDown}\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-labelledby={props['aria-labelledby'] ?? undefined}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","FormMode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","input","setInput","useState","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","handleChange","e","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n});\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n});\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}

package/ListHeaderText.js

@@ -1,2 +1,2 @@
-import e from"react";import s from"classnames";import{S as E}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const h=e.forwardRef((m,N)=>{const{firstText:l,firstTextEmphasised:n=!1,secondText:a=void 0,secondTextEmphasised:o=!1,subText:p=!1,statusDotVariant:r,className:c="",testId:i,titleHtmlMarkup:d="span"}=m,x=s(c,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:p}),f=s({[t["text-wrapper__text--emphasised"]]:n}),T=s({[t["text-wrapper__text--emphasised"]]:o}),u=d;return e.createElement("div",{"data-testid":i,className:x},r!==void 0&&e.createElement("span",null,e.createElement(E,{text:"",variant:r})),e.createElement(u,{className:t["list-header__title"]},e.createElement("span",{className:f},l),a&&e.createElement("span",{className:T},a)))}),C=h;export{C as L,h as a};
+import e from"react";import s from"classnames";import{S as N}from"./StatusDot.js";import t from"./components/ListHeader/styles.module.scss";const m=e.forwardRef((l,h)=>{const{firstText:n,firstTextEmphasised:p=!1,secondText:a=void 0,secondTextEmphasised:o=!1,subText:c=!1,statusDotVariant:r,className:i="",testId:d,titleHtmlMarkup:x="span"}=l,f=s(i,t["text-wrapper"],{[t["text-wrapper--sub-level"]]:c}),T=s({[t["text-wrapper__text--emphasised"]]:p}),u=s({[t["text-wrapper__text--emphasised"]]:o}),E=x;return e.createElement("span",{"data-testid":d,className:f},r!==void 0&&e.createElement("span",null,e.createElement(N,{text:"",variant:r})),e.createElement(E,{className:t["list-header__title"]},e.createElement("span",{className:T},n),a&&e.createElement("span",{className:u},a)))});m.displayName="ListHeaderText";const C=m;export{C as L,m as a};
 //# sourceMappingURL=ListHeaderText.js.map

package/ListHeaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <div data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </div>\n  );\n});\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","CustomTag","StatusDot","ListHeaderText$1"],"mappings":"4IA+BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EACA,gBAAAC,EAAkB,MAChB,EAAAV,EAEEW,EAA2BC,EAAGJ,EAAWK,EAAO,cAAc,EAAG,CACrE,CAACA,EAAO,yBAAyB,CAAC,EAAGP,CAAA,CACtC,EACKQ,EAAgCF,EAAG,CACvC,CAACC,EAAO,gCAAgC,CAAC,EAAGV,CAAA,CAC7C,EACKY,EAAiCH,EAAG,CACxC,CAACC,EAAO,gCAAgC,CAAC,EAAGR,CAAA,CAC7C,EACKW,EAAYN,EAElB,uBACG,MAAI,CAAA,cAAaD,EAAQ,UAAWE,GAClCJ,IAAqB,QACnBR,EAAA,cAAA,OAAA,qBACEkB,EAAU,CAAA,KAAM,GAAI,QAASV,CAAkB,CAAA,CAClD,EAEDR,EAAA,cAAAiB,EAAA,CAAU,UAAWH,EAAO,oBAAoB,CAC/C,EAAAd,EAAA,cAAC,QAAK,UAAWe,GAAgCZ,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWgB,CAAiC,EAAAX,CAAW,CAC9E,CACF,CAEJ,CAAC,EAEDc,EAAepB"}
+{"version":3,"file":"ListHeaderText.js","sources":["../src/components/ListHeader/ListHeaderText/ListHeaderText.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport StatusDot, { StatusDotVariant } from '../../StatusDot';\nimport { TitleTags } from '../../Title';\nimport styles from '../styles.module.scss';\n\nexport type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ListHeaderTextProps {\n  /** The first text in the ListHeaderText Component */\n  firstText: string;\n  /** Will style the first text as bold */\n  firstTextEmphasised?: boolean;\n  /** The second text in the ListHeaderText Component */\n  secondText?: string;\n  /** Will style the second text as bold */\n  secondTextEmphasised?: boolean;\n  /** Whether or not this ListHeaderText is a sub text */\n  subText?: boolean;\n  /** Decides the variant for the StatusDot */\n  statusDotVariant?: StatusDotVariant;\n  /** Adds custom classes to the ListHeaderText component. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Changes the underlying element of the title. Default: span*/\n  titleHtmlMarkup?: TitleTags;\n}\n\nexport const ListHeaderText: ListHeaderTextType = React.forwardRef((props: ListHeaderTextProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    firstText,\n    firstTextEmphasised = false,\n    secondText = undefined,\n    secondTextEmphasised = false,\n    subText = false,\n    statusDotVariant,\n    className = '',\n    testId,\n    titleHtmlMarkup = 'span',\n  } = props;\n\n  const headerTextWrapperClasses = cn(className, styles['text-wrapper'], {\n    [styles['text-wrapper--sub-level']]: subText,\n  });\n  const firstHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: firstTextEmphasised,\n  });\n  const secondHeaderTextSegmentClasses = cn({\n    [styles['text-wrapper__text--emphasised']]: secondTextEmphasised,\n  });\n  const CustomTag = titleHtmlMarkup;\n\n  return (\n    <span data-testid={testId} className={headerTextWrapperClasses}>\n      {statusDotVariant !== undefined && (\n        <span>\n          <StatusDot text={''} variant={statusDotVariant} />\n        </span>\n      )}\n      <CustomTag className={styles['list-header__title']}>\n        <span className={firstHeaderTextSegmentClasses}>{firstText}</span>\n        {secondText && <span className={secondHeaderTextSegmentClasses}>{secondText}</span>}\n      </CustomTag>\n    </span>\n  );\n});\n\nListHeaderText.displayName = 'ListHeaderText';\n\nexport default ListHeaderText;\n"],"names":["ListHeaderText","React","props","ref","firstText","firstTextEmphasised","secondText","secondTextEmphasised","subText","statusDotVariant","className","testId","titleHtmlMarkup","headerTextWrapperClasses","cn","styles","firstHeaderTextSegmentClasses","secondHeaderTextSegmentClasses","CustomTag","StatusDot","ListHeaderText$1"],"mappings":"4IA+BO,MAAMA,EAAqCC,EAAM,WAAW,CAACC,EAA4BC,IAAkC,CAC1H,KAAA,CACJ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,WAAAC,EAAa,OACb,qBAAAC,EAAuB,GACvB,QAAAC,EAAU,GACV,iBAAAC,EACA,UAAAC,EAAY,GACZ,OAAAC,EACA,gBAAAC,EAAkB,MAChB,EAAAV,EAEEW,EAA2BC,EAAGJ,EAAWK,EAAO,cAAc,EAAG,CACrE,CAACA,EAAO,yBAAyB,CAAC,EAAGP,CAAA,CACtC,EACKQ,EAAgCF,EAAG,CACvC,CAACC,EAAO,gCAAgC,CAAC,EAAGV,CAAA,CAC7C,EACKY,EAAiCH,EAAG,CACxC,CAACC,EAAO,gCAAgC,CAAC,EAAGR,CAAA,CAC7C,EACKW,EAAYN,EAElB,uBACG,OAAK,CAAA,cAAaD,EAAQ,UAAWE,GACnCJ,IAAqB,QACnBR,EAAA,cAAA,OAAA,qBACEkB,EAAU,CAAA,KAAM,GAAI,QAASV,CAAkB,CAAA,CAClD,EAEDR,EAAA,cAAAiB,EAAA,CAAU,UAAWH,EAAO,oBAAoB,CAC/C,EAAAd,EAAA,cAAC,QAAK,UAAWe,GAAgCZ,CAAU,EAC1DE,GAAeL,EAAA,cAAA,OAAA,CAAK,UAAWgB,CAAiC,EAAAX,CAAW,CAC9E,CACF,CAEJ,CAAC,EAEDN,EAAe,YAAc,iBAE7B,MAAAoB,EAAepB"}

package/MaxCharacters.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormMode } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, mode, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: mode === FormMode.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":["MaxCharacters","maxCharacters","maxText","length","mode","maxWidth","progress","counterTextClass","classNames","styles","FormMode","ariaLevel","MaxCharacters$1"],"mappings":"sJAqBA,MAAMA,EAA8C,CAAC,CAAE,cAAAC,EAAe,QAAAC,EAAS,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,KAAe,CAC1G,MAAMC,EAAWH,EAASF,EAEpBM,EAAmBC,EAAWC,EAAO,gBAAgB,EAAG,CAC5D,CAACA,EAAO,yBAAyB,CAAC,EAAGL,IAASM,EAAS,OACvD,CAACD,EAAO,yBAAyB,CAAC,EAAGH,EAAW,CAAA,CACjD,EAEKK,EAAYL,EAAW,IAAO,SAAW,MAE/C,uBACG,MAAI,CAAA,YAAWK,EAAW,cAAa,OAAQ,UAAWJ,EAAkB,MAAO,CAAE,SAAAF,IACnF,GAAGF,KAAUF,KAAiBC,GAAoB,QACrD,CAEJ,EAEAU,EAAeZ"}
+{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormMode } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, mode, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: mode === FormMode.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":["MaxCharacters","maxCharacters","maxText","length","mode","maxWidth","progress","counterTextClass","classNames","styles","FormMode","ariaLevel","React","MaxCharacters$1"],"mappings":"sJAqBA,MAAMA,EAA8C,CAAC,CAAE,cAAAC,EAAe,QAAAC,EAAS,OAAAC,EAAQ,KAAAC,EAAM,SAAAC,KAAe,CAC1G,MAAMC,EAAWH,EAASF,EAEpBM,EAAmBC,EAAWC,EAAO,gBAAgB,EAAG,CAC5D,CAACA,EAAO,yBAAyB,CAAC,EAAGL,IAASM,EAAS,OACvD,CAACD,EAAO,yBAAyB,CAAC,EAAGH,EAAW,CAAA,CACjD,EAEKK,EAAYL,EAAW,IAAO,SAAW,MAG7C,OAAAM,EAAA,cAAC,OAAI,YAAWD,EAAW,cAAa,OAAQ,UAAWJ,EAAkB,MAAO,CAAE,SAAAF,IACnF,GAAGF,CAAM,IAAIF,CAAa,IAAIC,GAAoB,MAAM,EAC3D,CAEJ,EAEAW,EAAeb"}