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

package/lib/components/PopMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PopMenu/constants.ts","../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["export enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n","import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LinkListProps, LinkProps } from '../LinkList';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList from '../LinkList';\nimport PopOver from '../PopOver';\nimport { PopMenuLabelPosition, type PopMenuVariant } from './constants';\n\nimport styles from './styles.module.scss';\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** @deprecated Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (): void => {\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon ref={iconRef} svgIcon={svgIcon ?? VerticalDots} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} ref={iconRef} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  return (\n    <div ref={outerRef} className={classNames(popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={isOpen}\n        onClick={toggleOpenOnClick}\n        ref={triggerButtonRef}\n        ariaLabel={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n        testId={isOpen ? closeButtonTestId : openButtonTestId}\n      >\n        {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n        {isOpen ? closeIcon : openIcon}\n        {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n      </Button>\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n","import PopMenu from './PopMenu';\nexport { PopMenuVariant, PopMenuLabelPosition } from './constants';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,aAAU;CACV,eAAA,YAAS;CACT,eAAA,iBAAc;;KACf;AAED,IAAY,uBAAL,yBAAA,sBAAA;CACL,qBAAA,WAAQ;CACR,qBAAA,UAAO;;KACR;;;AC0CD,IAAa,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,KAAK;CACxD,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,uBAAuB;CAExC,gBAAgB,gBAAgB;EAC9B,UAAU,MAAM;GAChB;CAEF,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,iBAAiB;CAChF,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;EAC7C,UAAU,MAAM;EAChB,IAAI,IAAI,IAAI;;CAGd,MAAM,uBAAuD;EAC3D,IAAI,YAA2B,UAAU,iBAAS,EAChD,OACE,oBAAC,iBAAD;GACE,QAAQ;GACR,WAAW,WAAW,OAAO,uBAAuB,iBAAiB;GACrE,eAAe;GACf,MAAK;GACL,MAAM;aAEL,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,UACjD,YAAuB,OAAO,iBAAS,KAAK,GACxC,MAAM,aAAa,OAAO,EACxB,UAAU,UACR,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,MAAM,CAAC,EACvE,CAAC,GACF,MACL,EACF,CAAC,CACH;GACO,CAAA;;CAKhB,MAAM,0BAAgC;EACpC,UAAU,CAAC,OAAO;;CAGpB,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAD;EAAU,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;EAA0B,CAAA,GAEzF,WAAW,oBAAC,cAAD;EAAe;EAAS,MAAM,SAAS;EAAQ,WAAW;EAA0B,CAAA;CAGnG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAD;EAAM,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;EAA0B,CAAA;CAGnH,MAAM,YAAY,oBAAC,cAAD;EAAM,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;EAA0B,CAAA;CAE7G,OACE,qBAAC,OAAD;EAAK,KAAK;EAAU,WAAW,WAAW,iBAAiB;EAAE,oBAAkB,YAAY;YAA3F,CACE,qBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;aANvC;IAQG,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAD,EAAA,UAAO,WAAiB,CAAA;IACvF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAD,EAAA,UAAO,WAAiB,CAAA;IAClF;MACR,UAAU,gBAAgB,CACvB;;;;;AC7IV,IAAA,kBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PopMenu/constants.ts","../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["export enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n","import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LinkListProps, LinkProps } from '../LinkList';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList from '../LinkList';\nimport PopOver from '../PopOver';\nimport { PopMenuLabelPosition, type PopMenuVariant } from './constants';\n\nimport styles from './styles.module.scss';\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** @deprecated Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (): void => {\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon ref={iconRef} svgIcon={svgIcon ?? VerticalDots} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} ref={iconRef} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  return (\n    <div ref={outerRef} className={classNames(popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={isOpen}\n        onClick={toggleOpenOnClick}\n        ref={triggerButtonRef}\n        ariaLabel={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n        testId={isOpen ? closeButtonTestId : openButtonTestId}\n      >\n        {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n        {isOpen ? closeIcon : openIcon}\n        {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n      </Button>\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n","import PopMenu from './PopMenu';\nexport { PopMenuVariant, PopMenuLabelPosition } from './constants';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,aAAA;CACA,eAAA,YAAA;CACA,eAAA,iBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;CACL,qBAAA,WAAA;CACA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;AC0CA,IAAa,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,sBAAsB;CAEvC,gBAAgB,gBAAgB;EAC9B,UAAU,KAAK;CACjB,CAAC;CAED,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,gBAAgB;CAC/E,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;EAC7C,UAAU,KAAK;EACf,IAAI,IAAI,GAAG;CACb;CAEA,MAAM,uBAAuD;EAC3D,IAAI,YAA2B,UAAU,gBAAQ,GAC/C,OACE,oBAAC,iBAAD;GACE,QAAQ;GACR,WAAW,WAAW,OAAO,uBAAuB,gBAAgB;GACpE,eAAe;GACf,MAAK;GACL,MAAM;aAEL,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,UACjD,YAAuB,OAAO,iBAAS,IAAI,IACvC,MAAM,aAAa,OAAO,EACxB,UAAU,UACR,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,KAAK,CAAC,EACvE,CAAC,IACD,KACN,EACF,CAAC,CACH;EACO,CAAA;CAGf;CAEA,MAAM,0BAAgC;EACpC,UAAU,CAAC,MAAM;CACnB;CAEA,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAD;EAAU,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA,IAExF,WAAW,oBAAC,cAAD;EAAe;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA;CAGlG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAD;EAAM,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAGlH,MAAM,YAAY,oBAAC,cAAD;EAAM,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAE5G,OACE,qBAAC,OAAD;EAAK,KAAK;EAAU,WAAW,WAAW,gBAAgB;EAAG,oBAAkB,YAAY;YAA3F,CACE,qBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;aANvC;IAQG,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;IACtF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;GAClF;MACP,UAAU,eAAe,CACvB;;AAET;;;AC/IA,IAAA,kBAAe"}

package/lib/components/Portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Portal/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { AnalyticsId } from '../../constants';\n\nexport interface PortalProps {\n  /** Add custom class to portal, default class is portal-container */\n  className?: string;\n  /** Content to be displayed in Portal */\n  children?: React.ReactNode;\n  /** Default is document.body */\n  parent?: HTMLElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal {\n  // Create div to contain everything\n  const el = React.useMemo(() => document.createElement('div'), []);\n  el.setAttribute('data-analyticsid', AnalyticsId.Portal);\n  if (testId) {\n    el.setAttribute('data-testid', testId);\n  }\n  // On mount function\n  React.useEffect(() => {\n    // work out target in the DOM based on parent prop\n    const target = parent && !!parent.appendChild ? parent : document.body;\n    // Default classes\n    const classList = ['portal-container'];\n    // If className prop is present add each class the classList\n    if (className) className.split(' ').forEach(item => classList.push(item));\n    classList.forEach(item => el.classList.add(item));\n\n    target.appendChild(el);\n    // On unmount function\n    return (): void => {\n      // Remove element from dom\n      target.removeChild(el);\n    };\n  }, [el, parent, className]);\n\n  return createPortal(children, el);\n}\n"],"mappings":";;;;AAiBA,SAAwB,OAAO,EAAE,UAAU,QAAQ,WAAW,UAA0C;CAEtG,MAAM,KAAK,MAAM,cAAc,SAAS,cAAc,MAAM,EAAE,EAAE,CAAC;CACjE,GAAG,aAAa,oBAAoB,YAAY,OAAO;CACvD,IAAI,QACF,GAAG,aAAa,eAAe,OAAO;CAGxC,MAAM,gBAAgB;EAEpB,MAAM,SAAS,UAAU,CAAC,CAAC,OAAO,cAAc,SAAS,SAAS;EAElE,MAAM,YAAY,CAAC,mBAAmB;EAEtC,IAAI,WAAW,UAAU,MAAM,IAAI,CAAC,SAAQ,SAAQ,UAAU,KAAK,KAAK,CAAC;EACzE,UAAU,SAAQ,SAAQ,GAAG,UAAU,IAAI,KAAK,CAAC;EAEjD,OAAO,YAAY,GAAG;EAEtB,aAAmB;GAEjB,OAAO,YAAY,GAAG;;IAEvB;EAAC;EAAI;EAAQ;EAAU,CAAC;CAE3B,OAAO,aAAa,UAAU,GAAG"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Portal/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { AnalyticsId } from '../../constants';\n\nexport interface PortalProps {\n  /** Add custom class to portal, default class is portal-container */\n  className?: string;\n  /** Content to be displayed in Portal */\n  children?: React.ReactNode;\n  /** Default is document.body */\n  parent?: HTMLElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal {\n  // Create div to contain everything\n  const el = React.useMemo(() => document.createElement('div'), []);\n  el.setAttribute('data-analyticsid', AnalyticsId.Portal);\n  if (testId) {\n    el.setAttribute('data-testid', testId);\n  }\n  // On mount function\n  React.useEffect(() => {\n    // work out target in the DOM based on parent prop\n    const target = parent && !!parent.appendChild ? parent : document.body;\n    // Default classes\n    const classList = ['portal-container'];\n    // If className prop is present add each class the classList\n    if (className) className.split(' ').forEach(item => classList.push(item));\n    classList.forEach(item => el.classList.add(item));\n\n    target.appendChild(el);\n    // On unmount function\n    return (): void => {\n      // Remove element from dom\n      target.removeChild(el);\n    };\n  }, [el, parent, className]);\n\n  return createPortal(children, el);\n}\n"],"mappings":";;;;AAiBA,SAAwB,OAAO,EAAE,UAAU,QAAQ,WAAW,UAA0C;CAEtG,MAAM,KAAK,MAAM,cAAc,SAAS,cAAc,KAAK,GAAG,CAAC,CAAC;CAChE,GAAG,aAAa,oBAAoB,YAAY,MAAM;CACtD,IAAI,QACF,GAAG,aAAa,eAAe,MAAM;CAGvC,MAAM,gBAAgB;EAEpB,MAAM,SAAS,UAAU,CAAC,CAAC,OAAO,cAAc,SAAS,SAAS;EAElE,MAAM,YAAY,CAAC,kBAAkB;EAErC,IAAI,WAAW,UAAU,MAAM,GAAG,EAAE,SAAQ,SAAQ,UAAU,KAAK,IAAI,CAAC;EACxE,UAAU,SAAQ,SAAQ,GAAG,UAAU,IAAI,IAAI,CAAC;EAEhD,OAAO,YAAY,EAAE;EAErB,aAAmB;GAEjB,OAAO,YAAY,EAAE;EACvB;CACF,GAAG;EAAC;EAAI;EAAQ;CAAS,CAAC;CAE1B,OAAO,aAAa,UAAU,EAAE;AAClC"}

package/lib/components/Progressbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Progressbar/constants.ts","../../../src/components/Progressbar/Progressbar.tsx","../../../src/components/Progressbar/index.ts"],"sourcesContent":["export enum ProgressbarSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ProgressBarMode {\n  ondark = 'ondark',\n  onlight = 'onlight',\n}\n\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n","import { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Overlay, ProgressBarMode, ProgressbarSize } from './constants';\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport interface ProgressbarProps {\n  /** The value of the progressbar given in percent. Value between 0 and 100 */\n  value: number;\n  /** Size of the progressbar. Default is large */\n  size?: ProgressbarSize;\n  /** Changes the visuals of the ProgressBar. Default is onLight */\n  mode?: ProgressBarMode;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Aria label for the progressbar */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({\n  value,\n  size = ProgressbarSize.large,\n  mode = ProgressBarMode.onlight,\n  overlay,\n  testId,\n  ariaLabel,\n}: ProgressbarProps) => {\n  if (overlay) {\n    mode = ProgressBarMode.ondark;\n  }\n  // Restrict value to be between 0 and 100\n  value = Math.max(0, Math.min(value, 100));\n\n  let width;\n  if (size === ProgressbarSize.large) {\n    width = 96;\n  } else if (size === ProgressbarSize.medium) {\n    width = 50;\n  } else {\n    width = 44;\n  }\n\n  const totalRadius = width / 2;\n  const strokeWidth = 8;\n  const radius = totalRadius - strokeWidth / 2;\n  const viewBoxSize = totalRadius * 2;\n  const viewBoxCenter = totalRadius;\n  const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;\n  const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (value / 100) * circumference;\n  const valueText = `${value}%`;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n    }\n  }, []);\n\n  const wrapperClasses = classNames({\n    [styles['progressbar--overlay']]: overlay,\n    [styles['progressbar--overlay-screen']]: overlay === Overlay.screen,\n    [styles['progressbar--overlay-parent']]: overlay === Overlay.parent,\n  });\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={wrapperClasses}\n        data-testid={testId}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}\n      >\n        <svg\n          role=\"presentation\"\n          width={viewBoxSize}\n          height={viewBoxSize}\n          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n          className={styles['progressbar__svg']}\n        >\n          <circle cx={viewBoxCenter} cy={viewBoxCenter} r={radius} stroke={circleBackgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n          <circle\n            cx={viewBoxCenter}\n            cy={viewBoxCenter}\n            r={radius}\n            stroke={mainColor}\n            strokeWidth={strokeWidth}\n            fill=\"none\"\n            strokeDasharray={circumference}\n            strokeDashoffset={strokeDashoffset}\n            className={styles['progressbar__progress-circle']}\n            transform={`rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`}\n          />\n          <text\n            className=\"progress-wheel__text--large\"\n            fontSize={'1.5rem'}\n            fill={mainColor}\n            x={viewBoxCenter}\n            y={viewBoxCenter}\n            textAnchor=\"middle\"\n            alignmentBaseline=\"middle\"\n          >\n            {size === ProgressbarSize.large && valueText}\n          </text>\n        </svg>\n      </div>\n      <div className={styles['progressbar__sr-only-text']} aria-live=\"assertive\" aria-atomic=\"true\">\n        {valueText}\n      </div>\n    </>\n  );\n};\n\nexport default Progressbar;\n","import Progressbar from './Progressbar';\nexport { ProgressbarSize, ProgressBarMode, Overlay } from './constants';\nexport * from './Progressbar';\nexport default Progressbar;\n"],"mappings":";;;;;;;AAAA,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,WAAQ;CACR,gBAAA,YAAS;CACT,gBAAA,WAAQ;;KACT;AAED,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,YAAS;CACT,gBAAA,aAAU;;KACX;AAED,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAS;CACT,QAAA,YAAS;;KACV;;;ACWD,IAAM,eAA2C,EAC/C,OACA,OAAO,gBAAgB,OACvB,OAAO,gBAAgB,SACvB,SACA,QACA,gBACsB;CACtB,IAAI,SACF,OAAO,gBAAgB;CAGzB,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,IAAI,CAAC;CAEzC,IAAI;CACJ,IAAI,SAAS,gBAAgB,OAC3B,QAAQ;MACH,IAAI,SAAS,gBAAgB,QAClC,QAAQ;MAER,QAAQ;CAGV,MAAM,cAAc,QAAQ;CAC5B,MAAM,cAAc;CACpB,MAAM,SAAS,cAAc,cAAc;CAC3C,MAAM,cAAc,cAAc;CAClC,MAAM,gBAAgB;CACtB,MAAM,wBAAwB,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CAChG,MAAM,YAAY,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CACpF,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,mBAAmB,gBAAiB,QAAQ,MAAO;CACzD,MAAM,YAAY,GAAG,MAAM;CAE3B,MAAM,aAAa,OAAuB,KAAK;CAE/C,gBAAgB;EACd,IAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,OACnE,WAAW,QAAQ,cAAc,MAAM,WAAW;IAEnD,EAAE,CAAC;CAQN,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EACE,KAAK;EACL,WAViB,WAAW;IAC/B,OAAO,0BAA0B;IACjC,OAAO,iCAAiC,YAAY,QAAQ;IAC5D,OAAO,iCAAiC,YAAY,QAAQ;GAC9D,CAMgB;EACX,eAAa;EACb,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,eAAe,GAAG,EAAE;YAEzE,qBAAC,OAAD;GACE,MAAK;GACL,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,YAAY,GAAG;GAC/B,WAAW,OAAO;aALpB;IAOE,oBAAC,UAAD;KAAQ,IAAI;KAAe,IAAI;KAAe,GAAG;KAAQ,QAAQ;KAAoC;KAAa,MAAK;KAAS,CAAA;IAChI,oBAAC,UAAD;KACE,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,QAAQ;KACK;KACb,MAAK;KACL,iBAAiB;KACC;KAClB,WAAW,OAAO;KAClB,WAAW,cAAc,cAAc,GAAG,cAAc;KACxD,CAAA;IACF,oBAAC,QAAD;KACE,WAAU;KACV,UAAU;KACV,MAAM;KACN,GAAG;KACH,GAAG;KACH,YAAW;KACX,mBAAkB;eAEjB,SAAS,gBAAgB,SAAS;KAC9B,CAAA;IACH;;EACF,CAAA,EACN,oBAAC,OAAD;EAAK,WAAW,OAAO;EAA8B,aAAU;EAAY,eAAY;YACpF;EACG,CAAA,CACL,EAAA,CAAA;;;;ACvHP,IAAA,sBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Progressbar/constants.ts","../../../src/components/Progressbar/Progressbar.tsx","../../../src/components/Progressbar/index.ts"],"sourcesContent":["export enum ProgressbarSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ProgressBarMode {\n  ondark = 'ondark',\n  onlight = 'onlight',\n}\n\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\n","import { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Overlay, ProgressBarMode, ProgressbarSize } from './constants';\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport interface ProgressbarProps {\n  /** The value of the progressbar given in percent. Value between 0 and 100 */\n  value: number;\n  /** Size of the progressbar. Default is large */\n  size?: ProgressbarSize;\n  /** Changes the visuals of the ProgressBar. Default is onLight */\n  mode?: ProgressBarMode;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Aria label for the progressbar */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({\n  value,\n  size = ProgressbarSize.large,\n  mode = ProgressBarMode.onlight,\n  overlay,\n  testId,\n  ariaLabel,\n}: ProgressbarProps) => {\n  if (overlay) {\n    mode = ProgressBarMode.ondark;\n  }\n  // Restrict value to be between 0 and 100\n  value = Math.max(0, Math.min(value, 100));\n\n  let width;\n  if (size === ProgressbarSize.large) {\n    width = 96;\n  } else if (size === ProgressbarSize.medium) {\n    width = 50;\n  } else {\n    width = 44;\n  }\n\n  const totalRadius = width / 2;\n  const strokeWidth = 8;\n  const radius = totalRadius - strokeWidth / 2;\n  const viewBoxSize = totalRadius * 2;\n  const viewBoxCenter = totalRadius;\n  const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;\n  const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (value / 100) * circumference;\n  const valueText = `${value}%`;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n    }\n  }, []);\n\n  const wrapperClasses = classNames({\n    [styles['progressbar--overlay']]: overlay,\n    [styles['progressbar--overlay-screen']]: overlay === Overlay.screen,\n    [styles['progressbar--overlay-parent']]: overlay === Overlay.parent,\n  });\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={wrapperClasses}\n        data-testid={testId}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}\n      >\n        <svg\n          role=\"presentation\"\n          width={viewBoxSize}\n          height={viewBoxSize}\n          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n          className={styles['progressbar__svg']}\n        >\n          <circle cx={viewBoxCenter} cy={viewBoxCenter} r={radius} stroke={circleBackgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n          <circle\n            cx={viewBoxCenter}\n            cy={viewBoxCenter}\n            r={radius}\n            stroke={mainColor}\n            strokeWidth={strokeWidth}\n            fill=\"none\"\n            strokeDasharray={circumference}\n            strokeDashoffset={strokeDashoffset}\n            className={styles['progressbar__progress-circle']}\n            transform={`rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`}\n          />\n          <text\n            className=\"progress-wheel__text--large\"\n            fontSize={'1.5rem'}\n            fill={mainColor}\n            x={viewBoxCenter}\n            y={viewBoxCenter}\n            textAnchor=\"middle\"\n            alignmentBaseline=\"middle\"\n          >\n            {size === ProgressbarSize.large && valueText}\n          </text>\n        </svg>\n      </div>\n      <div className={styles['progressbar__sr-only-text']} aria-live=\"assertive\" aria-atomic=\"true\">\n        {valueText}\n      </div>\n    </>\n  );\n};\n\nexport default Progressbar;\n","import Progressbar from './Progressbar';\nexport { ProgressbarSize, ProgressBarMode, Overlay } from './constants';\nexport * from './Progressbar';\nexport default Progressbar;\n"],"mappings":";;;;;;;AAAA,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,WAAA;CACA,gBAAA,YAAA;CACA,gBAAA,WAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,YAAA;CACA,gBAAA,aAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;;AACF,EAAA,CAAA,CAAA;;;ACWA,IAAM,eAA2C,EAC/C,OACA,OAAO,gBAAgB,OACvB,OAAO,gBAAgB,SACvB,SACA,QACA,gBACsB;CACtB,IAAI,SACF,OAAO,gBAAgB;CAGzB,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC;CAExC,IAAI;CACJ,IAAI,SAAS,gBAAgB,OAC3B,QAAQ;MACH,IAAI,SAAS,gBAAgB,QAClC,QAAQ;MAER,QAAQ;CAGV,MAAM,cAAc,QAAQ;CAC5B,MAAM,cAAc;CACpB,MAAM,SAAS,cAAc,cAAc;CAC3C,MAAM,cAAc,cAAc;CAClC,MAAM,gBAAgB;CACtB,MAAM,wBAAwB,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CAChG,MAAM,YAAY,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CACpF,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,mBAAmB,gBAAiB,QAAQ,MAAO;CACzD,MAAM,YAAY,GAAG,MAAM;CAE3B,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,IAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,OACnE,WAAW,QAAQ,cAAc,MAAM,WAAW;CAEtD,GAAG,CAAC,CAAC;CAQL,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EACE,KAAK;EACL,WAViB,WAAW;IAC/B,OAAO,0BAA0B;IACjC,OAAO,iCAAiC,YAAY,QAAQ;IAC5D,OAAO,iCAAiC,YAAY,QAAQ;EAC/D,CAMiB;EACX,eAAa;EACb,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,cAAc,IAAI,CAAC;YAExE,qBAAC,OAAD;GACE,MAAK;GACL,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,YAAY,GAAG;GAC/B,WAAW,OAAO;aALpB;IAOE,oBAAC,UAAD;KAAQ,IAAI;KAAe,IAAI;KAAe,GAAG;KAAQ,QAAQ;KAAoC;KAAa,MAAK;IAAQ,CAAA;IAC/H,oBAAC,UAAD;KACE,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,QAAQ;KACK;KACb,MAAK;KACL,iBAAiB;KACC;KAClB,WAAW,OAAO;KAClB,WAAW,cAAc,cAAc,GAAG,cAAc;IACzD,CAAA;IACD,oBAAC,QAAD;KACE,WAAU;KACV,UAAU;KACV,MAAM;KACN,GAAG;KACH,GAAG;KACH,YAAW;KACX,mBAAkB;eAEjB,SAAS,gBAAgB,SAAS;IAC/B,CAAA;GACH;;CACF,CAAA,GACL,oBAAC,OAAD;EAAK,WAAW,OAAO;EAA8B,aAAU;EAAY,eAAY;YACpF;CACE,CAAA,CACL,EAAA,CAAA;AAEN;;;ACzHA,IAAA,sBAAe"}

package/lib/components/PromoPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PromoPanel/PromoPanel.tsx","../../../src/components/PromoPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\nexport interface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, undefined, props.children);\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={refObject}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n","import PromoPanel from './PromoPanel';\nexport * from './PromoPanel';\nexport default PromoPanel;\n"],"mappings":";;;;;;;;;;;;;;AAwDA,IAAM,kBAAgD,UAAS;CAC7D,IAAI,MAAM,eACR,OAAO,MAAM,aAAa,MAAM,eAAe,KAAA,GAAW,MAAM,SAAS;CAG3E,IAAI,MAAM,mBAAmB,UAC3B,OACE,oBAAC,UAAD;EAAQ,MAAM;EAAU,SAAS,MAAM;YACpC,MAAM;EACA,CAAA;CAGb,OACE,oBAAC,KAAD;EAAG,MAAM,MAAM;EAAM,QAAQ,MAAM;EAAQ,SAAS,MAAM;YACvD,MAAM;EACL,CAAA;;AAIR,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,WAAW,cAAc,kBAAkC;CAEnE,MAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;CAE5E,MAAM,aAAa,eAAe;CAElC,MAAM,oBAAoB,WACxB,OAAO,YACP,OAAO,eAAe,UACtB,CAAC,MAAM,gBAAgB,OAAO,+BAC/B;CAED,MAAM,iBACJ,oBAAC,gBAAD;EACE,MAAM,MAAM;EACZ,QAAQ,MAAM;EACd,eAAe,MAAM;EACL;EAChB,aAAa,MAAM;YAElB,MAAM,SAAS,MAAM;EACP,CAAA;CAGnB,MAAM,0BAAkC;EACtC,IAAI,cAAc,WAAW,IAC3B,OAAO;EAGT,OAAO;KACL;CAEJ,OACE,qBAAC,OAAD;EAAK,WAAW;EAAmB,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,KAAK;YAA7G;GACG,MAAM,gBACL,oBAAC,0BAAD;IACE,kBAAkB,MAAM;IACxB,MAAM;IACC;IACP,WAAW,OAAO;IAClB,CAAA;GAEJ,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,MAAM,SACL,oBAAC,eAAD;KAAO,YAAY;KAAiB,YAAY;eAC7C;KACK,CAAA,EAET,CAAC,MAAM,QAAQ,iBAAiB,MAAM,SACnC;;GACN,oBAAC,cAAD;IACE,WAAW,OAAO;IAClB,SAAS,MAAM,WAAW,WAAW,eAAe;IACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;IACnD;IACX,OAAO,SAAS,aAAa,IAAI;IACjC,YAAY,SAAS,aAAa,IAAI;IACtC,CAAA;GACE;;;;;ACpIV,IAAA,qBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PromoPanel/PromoPanel.tsx","../../../src/components/PromoPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\nexport interface PromoPanelProps {\n  /** Used as the link text if set. title or children must be set for the link to have accessible text. */\n  title?: string;\n  /** Used as the link text if title is not set. */\n  children?: string;\n  /** Illustration element */\n  illustration?: 'Doctor' | 'HealthcarePersonnel';\n  /** Changes the underlying element of the title. */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the background color. Default: white */\n  color?: PromoPanelColors;\n  /** Not used if linkComponent is set */\n  href?: string;\n  /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */\n  target?: AnchorLinkTargets;\n  /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */\n  linkHtmlMarkup?: AnchorLinkTags;\n  /** Function that is called when clicked. Not used if linkComponent is set. */\n  linkOnClick?: () => void;\n  /** Custom link component. Must be \"a\" a or \"button\" element with no styling. */\n  linkComponent?: React.ReactElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface PromoPanelLinkProps {\n  children?: string;\n  href?: string;\n  target?: AnchorLinkTargets;\n  linkComponent?: React.ReactElement;\n  linkHtmlMarkup?: AnchorLinkTags;\n  linkOnClick?: () => void;\n}\n\nconst PromoPanelLink: React.FC<PromoPanelLinkProps> = props => {\n  if (props.linkComponent) {\n    return React.cloneElement(props.linkComponent, undefined, props.children);\n  }\n\n  if (props.linkHtmlMarkup === 'button') {\n    return (\n      <button type={'button'} onClick={props.linkOnClick}>\n        {props.children}\n      </button>\n    );\n  }\n  return (\n    <a href={props.href} target={props.target} onClick={props.linkOnClick}>\n      {props.children}\n    </a>\n  );\n};\n\nconst PromoPanel: React.FC<PromoPanelProps> = props => {\n  const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={refObject}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n","import PromoPanel from './PromoPanel';\nexport * from './PromoPanel';\nexport default PromoPanel;\n"],"mappings":";;;;;;;;;;;;;;AAwDA,IAAM,kBAAgD,UAAS;CAC7D,IAAI,MAAM,eACR,OAAO,MAAM,aAAa,MAAM,eAAe,KAAA,GAAW,MAAM,QAAQ;CAG1E,IAAI,MAAM,mBAAmB,UAC3B,OACE,oBAAC,UAAD;EAAQ,MAAM;EAAU,SAAS,MAAM;YACpC,MAAM;CACD,CAAA;CAGZ,OACE,oBAAC,KAAD;EAAG,MAAM,MAAM;EAAM,QAAQ,MAAM;EAAQ,SAAS,MAAM;YACvD,MAAM;CACN,CAAA;AAEP;AAEA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,WAAW,cAAc,iBAAiC;CAElE,MAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;CAE5E,MAAM,aAAa,cAAc;CAEjC,MAAM,oBAAoB,WACxB,OAAO,YACP,OAAO,eAAe,UACtB,CAAC,MAAM,gBAAgB,OAAO,8BAChC;CAEA,MAAM,iBACJ,oBAAC,gBAAD;EACE,MAAM,MAAM;EACZ,QAAQ,MAAM;EACd,eAAe,MAAM;EACL;EAChB,aAAa,MAAM;YAElB,MAAM,SAAS,MAAM;CACR,CAAA;CAGlB,MAAM,0BAAkC;EACtC,IAAI,cAAc,WAAW,IAC3B,OAAO;EAGT,OAAO;CACT,GAAG;CAEH,OACE,qBAAC,OAAD;EAAK,WAAW;EAAmB,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,KAAK;YAA7G;GACG,MAAM,gBACL,oBAAC,0BAAD;IACE,kBAAkB,MAAM;IACxB,MAAM;IACC;IACP,WAAW,OAAO;GACnB,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,MAAM,SACL,oBAAC,eAAD;KAAO,YAAY;KAAiB,YAAY;eAC7C;IACI,CAAA,GAER,CAAC,MAAM,QAAQ,iBAAiB,MAAM,QACpC;;GACL,oBAAC,cAAD;IACE,WAAW,OAAO;IAClB,SAAS,MAAM,WAAW,WAAW,eAAe;IACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;IACnD;IACX,OAAO,SAAS,aAAa,GAAG;IAChC,YAAY,SAAS,aAAa,GAAG;GACtC,CAAA;EACE;;AAET;;;ACtIA,IAAA,qBAAe"}

package/lib/components/RadioButton/RadioMarker/RadioMarker.d.ts

@@ -0,0 +1,20 @@
+import { FormOnColor, FormSize } from '../../../constants';
+export interface RadioMarkerProps {
+    /** Whether the radio is checked. Controls the inner dot visibility. */
+    checked?: boolean;
+    /** Disables the visual state of the marker. */
+    disabled?: boolean;
+    /** Activates error styling. */
+    error?: boolean;
+    /** Background context the marker is rendered on. */
+    onColor?: keyof typeof FormOnColor;
+    /** Size variant of the marker. */
+    size?: keyof typeof FormSize;
+    /** Adds custom classes to the marker wrapper. */
+    className?: string;
+}
+/**
+ * Does not render an <input>; consumers render this on their end.
+ */
+export declare const RadioMarker: React.FC<RadioMarkerProps>;
+export default RadioMarker;

package/lib/components/RadioButton/RadioMarker/styles.module.scss

@@ -0,0 +1,288 @@
+@use '../../../scss/spacers' as spacers;
+@use '../../../scss/palette' as palette;
+@use 'sass:meta';
+@use 'sass:string';
+
+@mixin dashed-border() {
+  box-shadow: none;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: '';
+
+    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);
+
+    // Variabler for å lettere styre dashen i background-imaget under
+    $stroke: 4;
+    $dash: 0.2;
+    $gap: 7;
+    $scale: 1;
+    $stroke-scaled: $stroke * $scale;
+    $dash-scaled: $dash * $scale;
+    $gap-scaled: $gap * $scale;
+
+    border-radius: 100px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    width: 28px;
+    height: 28px;
+    inset: -2px;
+  }
+}
+
+.radio {
+  &__marker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10rem;
+    height: 1.5rem;
+    width: 1.5rem;
+    min-height: 1.5rem;
+    min-width: 1.5rem;
+    color: palette.$neutral700;
+    box-shadow: 0 0 0 spacers.getSpacer(4xs);
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: transparent !important;
+      color: #fff !important;
+    }
+
+    &--on-blueberry {
+      color: palette.$blueberry500;
+    }
+
+    &--on-dark {
+      color: palette.$neutral200;
+    }
+
+    &--invalid {
+      color: palette.$cherry600;
+    }
+
+    &__regular#{&}--checked,
+    label:has(input:checked) &__regular {
+      color: palette.$blueberry500;
+    }
+
+    &__regular#{&}--checked#{&}--invalid,
+    label:has(input:checked) &__regular#{&}--invalid {
+      color: palette.$cherry600;
+    }
+
+    &__regular#{&}--checked#{&}--on-dark,
+    label:has(input:checked) &__regular#{&}--on-dark {
+      color: palette.$blueberry200;
+    }
+
+    &__regular#{&}--checked#{&}--disabled,
+    label:has(input:checked) &__regular#{&}--disabled {
+      color: palette.$neutral600;
+    }
+
+    &__large {
+      // empty stub — checked-state rules live at the &__marker level below
+    }
+
+    // Large size — checked appearance.
+    &__large#{&}--checked,
+    label:has(input:checked) &__large {
+      color: palette.$blueberry100;
+    }
+
+    &__large#{&}--checked#{&}--invalid,
+    label:has(input:checked) &__large#{&}--invalid {
+      color: palette.$cherry500;
+    }
+
+    &__large#{&}--checked#{&}--disabled,
+    label:has(input:checked) &__large#{&}--disabled {
+      color: palette.$neutral600;
+    }
+
+    &--disabled,
+    &--disabled#{&}--invalid,
+    &--disabled#{&}--on-dark {
+      @include dashed-border;
+
+      background-color: transparent;
+    }
+
+    // Focus styles when an input inside the wrapping label is focus-visible
+    label:has(:focus-visible) &#{&} {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+      color: palette.$black;
+
+      &--on-dark {
+        color: palette.$white;
+      }
+    }
+
+    label:has(:focus-visible) &__regular#{&}--checked,
+    label:has(input:checked:focus-visible) &__regular {
+      color: palette.$black;
+    }
+
+    label:has(:focus-visible) &__regular#{&}--checked#{&}--on-dark,
+    label:has(input:checked:focus-visible) &__regular#{&}--on-dark {
+      color: palette.$white;
+    }
+
+    label:has(:focus-visible) &__large#{&}--checked,
+    label:has(input:checked:focus-visible) &__large {
+      color: palette.$white;
+    }
+
+    label:has(:focus-visible) &__large#{&}--checked#{&}--invalid,
+    label:has(input:checked:focus-visible) &__large#{&}--invalid {
+      color: palette.$black;
+    }
+
+    // Hover styles via wrapping label
+    label:hover &,
+    label:active & {
+      box-shadow: 0 0 0 spacers.getSpacer(3xs);
+    }
+
+    label:hover &--on-white,
+    label:hover &--on-grey {
+      background-color: palette.$neutral100;
+    }
+
+    label:active &--on-white,
+    label:active &--on-grey {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &--on-blueberry {
+      background-color: palette.$blueberry100;
+    }
+
+    label:active &--on-blueberry {
+      background-color: palette.$blueberry200;
+    }
+
+    label:hover &--on-invalid {
+      background-color: palette.$cherry100;
+    }
+
+    label:active &--on-invalid {
+      background-color: palette.$cherry200;
+    }
+
+    label:hover &--on-dark {
+      background-color: palette.$inverted-hover-old;
+    }
+
+    label:hover &__regular#{&}--checked,
+    label:has(input:checked):hover &__regular {
+      background-color: palette.$blueberry50;
+    }
+
+    label:active &__regular#{&}--checked,
+    label:has(input:checked):active &__regular {
+      background-color: palette.$blueberry100;
+    }
+
+    label:hover &__regular#{&}--checked#{&}--invalid,
+    label:has(input:checked):hover &__regular#{&}--invalid {
+      background-color: palette.$cherry100;
+    }
+
+    label:active &__regular#{&}--checked#{&}--invalid,
+    label:has(input:checked):active &__regular#{&}--invalid {
+      background-color: palette.$cherry200;
+    }
+
+    label:hover &__regular#{&}--checked#{&}--on-dark,
+    label:has(input:checked):hover &__regular#{&}--on-dark {
+      background-color: palette.$inverted-hover-old;
+    }
+
+    label:hover &__large#{&}--checked,
+    label:has(input:checked):hover &__large {
+      background-color: unset;
+    }
+
+    label:hover &__large#{&}--checked#{&}--invalid,
+    label:has(input:checked):hover &__large#{&}--invalid {
+      background-color: transparent;
+    }
+
+    label:hover &--disabled,
+    label:hover &--disabled#{&}--invalid,
+    label:hover &--disabled#{&}--on-dark {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+  &__marker-dot {
+    display: none;
+    background-color: palette.$blueberry500;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 10rem;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: #fff !important;
+    }
+  }
+
+  // Show the dot visually
+  &__marker#{&}__marker--checked &__marker-dot,
+  label:has(input:checked) &__marker &__marker-dot {
+    display: block;
+  }
+
+  // Dot color follows the marker state (so the focus ring can turn black
+  // without recoloring the dot).
+  &__marker--on-dark &__marker-dot {
+    background-color: palette.$blueberry200;
+  }
+
+  &__marker--invalid &__marker-dot {
+    background-color: palette.$cherry600;
+  }
+
+  &__marker--disabled &__marker-dot {
+    background-color: palette.$neutral600;
+  }
+
+  &__marker__large#{&}__marker--checked &__marker-dot,
+  label:has(input:checked) &__marker__large &__marker-dot {
+    background-color: palette.$blueberry100;
+  }
+
+  &__marker__large#{&}__marker--checked#{&}__marker--invalid &__marker-dot,
+  label:has(input:checked) &__marker__large#{&}__marker--invalid &__marker-dot {
+    background-color: palette.$cherry500;
+  }
+
+  label:active &__marker-dot {
+    background-color: palette.$blueberry800;
+  }
+
+  label:active &__marker--on-dark &__marker-dot {
+    background-color: palette.$blueberry300;
+  }
+
+  label:active &__marker--invalid &__marker-dot {
+    background-color: palette.$cherry800;
+  }
+
+  label:active &__marker__large#{&}__marker--checked &__marker-dot,
+  label:has(input:checked):active &__marker__large &__marker-dot {
+    background-color: palette.$blueberry200;
+  }
+
+  label:active &__marker__large#{&}__marker--checked#{&}__marker--invalid &__marker-dot,
+  label:has(input:checked):active &__marker__large#{&}__marker--invalid &__marker-dot {
+    background-color: palette.$cherry700;
+  }
+}

package/lib/components/RadioButton/RadioMarker/styles.module.scss.d.ts

@@ -0,0 +1,20 @@
+export type Styles = {
+  radio__marker: string;
+  radio__marker__large: string;
+  radio__marker__regular: string;
+  'radio__marker--checked': string;
+  'radio__marker--disabled': string;
+  'radio__marker--invalid': string;
+  'radio__marker--on-blueberry': string;
+  'radio__marker--on-dark': string;
+  'radio__marker--on-grey': string;
+  'radio__marker--on-invalid': string;
+  'radio__marker--on-white': string;
+  'radio__marker-dot': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/RadioButton/index.d.ts

@@ -1,4 +1,3 @@
 import { default as RadioButton } from './RadioButton';
 export * from './RadioButton';
-export * from './utils';
 export default RadioButton;

package/lib/components/RadioButton/index.js

@@ -1,7 +1,7 @@
-import { n as RadioButton, t as getRadioLabelClasses } from "../../utils3.js";
+import { t as RadioButton } from "../../RadioButton.js";
 //#region src/components/RadioButton/index.ts
 var RadioButton_default = RadioButton;
 //#endregion
-export { RadioButton, RadioButton_default as default, getRadioLabelClasses };
+export { RadioButton, RadioButton_default as default };
 
 //# sourceMappingURL=index.js.map

package/lib/components/RadioButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport * from './utils';\nexport default RadioButton;\n"],"mappings":";;AAGA,IAAA,sBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/RadioButton/index.ts"],"sourcesContent":["import RadioButton from './RadioButton';\nexport * from './RadioButton';\nexport default RadioButton;\n"],"mappings":";;AAEA,IAAA,sBAAe"}