@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/PopMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport 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\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  /** 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<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(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    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\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 = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\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 svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","PopMenu","props","triggerButtonRef","useRef","iconRef","popOverRef","outerRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","svgIcon","labelText","labelTextPosition","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","triggerButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","jsx","PopOver","child","React","event","toggleOpenOnClick","iconComponent","LazyIcon","Icon","openIcon","VerticalDots","getColor","closeIcon","X","triggerButton","jsxs","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport 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\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  /** 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<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(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    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\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 = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\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 svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","child"],"mappings":"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"}

package/components/PopOver/PopOver.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare enum PopOverVariant {
     positionautomatic = "positionautomatic",
     positionbelow = "positionbelow",

package/components/PopOver/index.d.ts

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

package/components/PopOver/index.js

@@ -1,7 +1,7 @@
-import { a } from "../../PopOver.js";
-import { P as p } from "../../PopOver.js";
+import { a as PopOver } from "../../PopOver.js";
+import { P } from "../../PopOver.js";
 export {
-  p as PopOverVariant,
-  a as default
+  P as PopOverVariant,
+  PopOver as default
 };
 //# sourceMappingURL=index.js.map

package/components/Portal/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface PortalProps {
     /** Add custom class to portal, default class is portal-container */
     className?: string;

package/components/Portal/index.js

@@ -1,16 +1,25 @@
-import c from "react";
-import { createPortal as l } from "react-dom";
-import { AnalyticsId as n } from "../../constants.js";
-function p({ children: s, parent: e, className: o, testId: i }) {
-  const t = c.useMemo(() => document.createElement("div"), []);
-  return t.setAttribute("data-analyticsid", n.Portal), i && t.setAttribute("data-testid", i), c.useEffect(() => {
-    const a = e && e.appendChild ? e : document.body, d = ["portal-container"];
-    return o && o.split(" ").forEach((r) => d.push(r)), d.forEach((r) => t.classList.add(r)), a.appendChild(t), () => {
-      a.removeChild(t);
+import React from "react";
+import { createPortal } from "react-dom";
+import { AnalyticsId } from "../../constants.js";
+function Portal({ children, parent, className, testId }) {
+  const el = React.useMemo(() => document.createElement("div"), []);
+  el.setAttribute("data-analyticsid", AnalyticsId.Portal);
+  if (testId) {
+    el.setAttribute("data-testid", testId);
+  }
+  React.useEffect(() => {
+    const target = parent && !!parent.appendChild ? parent : document.body;
+    const classList = ["portal-container"];
+    if (className) className.split(" ").forEach((item) => classList.push(item));
+    classList.forEach((item) => el.classList.add(item));
+    target.appendChild(el);
+    return () => {
+      target.removeChild(el);
     };
-  }, [t, e, o]), l(s, t);
+  }, [el, parent, className]);
+  return createPortal(children, el);
 }
 export {
-  p as default
+  Portal as default
 };
 //# sourceMappingURL=index.js.map

package/components/Portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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"],"names":["Portal","children","parent","className","testId","el","React","AnalyticsId","target","classList","item","createPortal"],"mappings":";;;AAiBA,SAAwBA,EAAO,EAAE,UAAAC,GAAU,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,KAA0C;AAEhG,QAAAC,IAAKC,EAAM,QAAQ,MAAM,SAAS,cAAc,KAAK,GAAG,CAAA,CAAE;AAC7D,SAAAD,EAAA,aAAa,oBAAoBE,EAAY,MAAM,GAClDH,KACCC,EAAA,aAAa,eAAeD,CAAM,GAGvCE,EAAM,UAAU,MAAM;AAEpB,UAAME,IAASN,KAAYA,EAAO,cAAcA,IAAS,SAAS,MAE5DO,IAAY,CAAC,kBAAkB;AAEjC,WAAAN,KAAqBA,EAAA,MAAM,GAAG,EAAE,QAAQ,CAAQO,MAAAD,EAAU,KAAKC,CAAI,CAAC,GACxED,EAAU,QAAQ,CAAQC,MAAAL,EAAG,UAAU,IAAIK,CAAI,CAAC,GAEhDF,EAAO,YAAYH,CAAE,GAEd,MAAY;AAEjB,MAAAG,EAAO,YAAYH,CAAE;AAAA,IAAA;AAAA,EAEtB,GAAA,CAACA,GAAIH,GAAQC,CAAS,CAAC,GAEnBQ,EAAaV,GAAUI,CAAE;AAClC;"}
+{"version":3,"file":"index.js","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"],"names":[],"mappings":";;;AAiBA,SAAwB,OAAO,EAAE,UAAU,QAAQ,WAAW,UAA0C;AAEhG,QAAA,KAAK,MAAM,QAAQ,MAAM,SAAS,cAAc,KAAK,GAAG,EAAE;AAC7D,KAAA,aAAa,oBAAoB,YAAY,MAAM;AACtD,MAAI,QAAQ;AACP,OAAA,aAAa,eAAe,MAAM;AAAA,EAAA;AAGvC,QAAM,UAAU,MAAM;AAEpB,UAAM,SAAS,UAAU,CAAC,CAAC,OAAO,cAAc,SAAS,SAAS;AAE5D,UAAA,YAAY,CAAC,kBAAkB;AAEjC,QAAA,UAAqB,WAAA,MAAM,GAAG,EAAE,QAAQ,CAAQ,SAAA,UAAU,KAAK,IAAI,CAAC;AACxE,cAAU,QAAQ,CAAQ,SAAA,GAAG,UAAU,IAAI,IAAI,CAAC;AAEhD,WAAO,YAAY,EAAE;AAErB,WAAO,MAAY;AAEjB,aAAO,YAAY,EAAE;AAAA,IACvB;AAAA,EACC,GAAA,CAAC,IAAI,QAAQ,SAAS,CAAC;AAEnB,SAAA,aAAa,UAAU,EAAE;AAClC;"}

package/components/Progressbar/Progressbar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare enum ProgressbarSize {
     small = "small",
     medium = "medium",

package/components/Progressbar/index.d.ts

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

package/components/Progressbar/index.js

@@ -1,81 +1,117 @@
-import { jsxs as v, Fragment as $, jsx as s } from "react/jsx-runtime";
-import { useRef as B, useEffect as C } from "react";
-import E from "classnames";
-import { ZIndex as I } from "../../constants.js";
-import { palette as o } from "../../theme/palette.js";
-import a from "./styles.module.scss";
-var R = /* @__PURE__ */ ((e) => (e.small = "small", e.medium = "medium", e.large = "large", e))(R || {}), j = /* @__PURE__ */ ((e) => (e.ondark = "ondark", e.onlight = "onlight", e))(j || {}), D = /* @__PURE__ */ ((e) => (e.screen = "screen", e.parent = "parent", e))(D || {});
-const Z = ({
-  value: e,
-  size: i = "large",
-  mode: c = "onlight",
-  overlay: t,
-  testId: w,
-  ariaLabel: k
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { ZIndex } from "../../constants.js";
+import { palette } from "../../theme/palette.js";
+import styles from "./styles.module.scss";
+var ProgressbarSize = /* @__PURE__ */ ((ProgressbarSize2) => {
+  ProgressbarSize2["small"] = "small";
+  ProgressbarSize2["medium"] = "medium";
+  ProgressbarSize2["large"] = "large";
+  return ProgressbarSize2;
+})(ProgressbarSize || {});
+var ProgressBarMode = /* @__PURE__ */ ((ProgressBarMode2) => {
+  ProgressBarMode2["ondark"] = "ondark";
+  ProgressBarMode2["onlight"] = "onlight";
+  return ProgressBarMode2;
+})(ProgressBarMode || {});
+var Overlay = /* @__PURE__ */ ((Overlay2) => {
+  Overlay2["screen"] = "screen";
+  Overlay2["parent"] = "parent";
+  return Overlay2;
+})(Overlay || {});
+const Progressbar = ({
+  value,
+  size = "large",
+  mode = "onlight",
+  overlay,
+  testId,
+  ariaLabel
 }) => {
-  t && (c = "ondark"), e = Math.max(0, Math.min(e, 100));
-  let n;
-  i === "large" ? n = 96 : i === "medium" ? n = 50 : n = 44;
-  const m = n / 2, p = 8, d = m - p / 2, l = m * 2, r = m, y = c === "onlight" ? o.blueberry100 : o.neutral700, h = c === "onlight" ? o.blueberry600 : o.white, f = 2 * Math.PI * d, _ = f - e / 100 * f, u = `${e}%`, g = B(null);
-  C(() => {
-    var x, b;
-    t === "parent" && ((b = (x = g.current) == null ? void 0 : x.parentElement) != null && b.style) && (g.current.parentElement.style.position = "relative");
+  if (overlay) {
+    mode = "ondark";
+  }
+  value = Math.max(0, Math.min(value, 100));
+  let width;
+  if (size === "large") {
+    width = 96;
+  } else if (size === "medium") {
+    width = 50;
+  } else {
+    width = 44;
+  }
+  const totalRadius = width / 2;
+  const strokeWidth = 8;
+  const radius = totalRadius - strokeWidth / 2;
+  const viewBoxSize = totalRadius * 2;
+  const viewBoxCenter = totalRadius;
+  const circleBackgroundColor = mode === "onlight" ? palette.blueberry100 : palette.neutral700;
+  const mainColor = mode === "onlight" ? palette.blueberry600 : palette.white;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - value / 100 * circumference;
+  const valueText = `${value}%`;
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    var _a, _b;
+    if (overlay === "parent" && ((_b = (_a = wrapperRef.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style)) {
+      wrapperRef.current.parentElement.style.position = "relative";
+    }
   }, []);
-  const N = E({
-    [a["progressbar--overlay"]]: t,
-    [a["progressbar--overlay-screen"]]: t === "screen",
-    [a["progressbar--overlay-parent"]]: t === "parent"
+  const wrapperClasses = classNames({
+    [styles["progressbar--overlay"]]: overlay,
+    [styles["progressbar--overlay-screen"]]: overlay === "screen",
+    [styles["progressbar--overlay-parent"]]: overlay === "parent"
     /* parent */
   });
-  return /* @__PURE__ */ v($, { children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        ref: g,
-        className: N,
-        "data-testid": w,
+        ref: wrapperRef,
+        className: wrapperClasses,
+        "data-testid": testId,
         role: "progressbar",
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-valuenow": e,
-        "aria-label": k,
-        style: t === "screen" ? { zIndex: I.OverlayScreen } : {},
-        children: /* @__PURE__ */ v(
+        "aria-valuenow": value,
+        "aria-label": ariaLabel,
+        style: overlay === "screen" ? { zIndex: ZIndex.OverlayScreen } : {},
+        children: /* @__PURE__ */ jsxs(
           "svg",
           {
             role: "presentation",
-            width: l,
-            height: l,
-            viewBox: `0 0 ${l} ${l}`,
-            className: a.progressbar__svg,
+            width: viewBoxSize,
+            height: viewBoxSize,
+            viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`,
+            className: styles["progressbar__svg"],
             children: [
-              /* @__PURE__ */ s("circle", { cx: r, cy: r, r: d, stroke: y, strokeWidth: p, fill: "none" }),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ jsx("circle", { cx: viewBoxCenter, cy: viewBoxCenter, r: radius, stroke: circleBackgroundColor, strokeWidth, fill: "none" }),
+              /* @__PURE__ */ jsx(
                 "circle",
                 {
-                  cx: r,
-                  cy: r,
-                  r: d,
-                  stroke: h,
-                  strokeWidth: p,
+                  cx: viewBoxCenter,
+                  cy: viewBoxCenter,
+                  r: radius,
+                  stroke: mainColor,
+                  strokeWidth,
                   fill: "none",
-                  strokeDasharray: f,
-                  strokeDashoffset: _,
-                  className: a["progressbar__progress-circle"],
-                  transform: `rotate(-90 ${r} ${r})`
+                  strokeDasharray: circumference,
+                  strokeDashoffset,
+                  className: styles["progressbar__progress-circle"],
+                  transform: `rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`
                 }
               ),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ jsx(
                 "text",
                 {
                   className: "progress-wheel__text--large",
                   fontSize: "1.5rem",
-                  fill: h,
-                  x: r,
-                  y: r,
+                  fill: mainColor,
+                  x: viewBoxCenter,
+                  y: viewBoxCenter,
                   textAnchor: "middle",
                   alignmentBaseline: "middle",
-                  children: i === "large" && u
+                  children: size === "large" && valueText
                 }
               )
             ]
@@ -83,13 +119,13 @@ const Z = ({
         )
       }
     ),
-    /* @__PURE__ */ s("div", { className: a["progressbar__sr-only-text"], "aria-live": "assertive", "aria-atomic": "true", children: u })
+    /* @__PURE__ */ jsx("div", { className: styles["progressbar__sr-only-text"], "aria-live": "assertive", "aria-atomic": "true", children: valueText })
   ] });
 };
 export {
-  D as Overlay,
-  j as ProgressBarMode,
-  R as ProgressbarSize,
-  Z as default
+  Overlay,
+  ProgressBarMode,
+  ProgressbarSize,
+  Progressbar as default
 };
 //# sourceMappingURL=index.js.map

package/components/Progressbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport 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}\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"],"names":["ProgressbarSize","ProgressBarMode","Overlay","Progressbar","value","size","mode","overlay","testId","ariaLabel","width","totalRadius","strokeWidth","radius","viewBoxSize","viewBoxCenter","circleBackgroundColor","palette","mainColor","circumference","strokeDashoffset","valueText","wrapperRef","useRef","useEffect","_b","_a","wrapperClasses","classNames","styles","jsxs","Fragment","jsx","ZIndex"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport 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}\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"],"names":["ProgressbarSize","ProgressBarMode","Overlay"],"mappings":"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"}

package/components/PromoPanel/PromoPanel.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';
 import { TitleTags } from '../Title';

package/components/PromoPanel/index.d.ts

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

package/components/PromoPanel/index.js

@@ -1,60 +1,79 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import C from "react";
-import b from "classnames";
-import { AnalyticsId as g, IconSize as a } from "../../constants.js";
-import { useBreakpoint as P, Breakpoint as m } from "../../hooks/useBreakpoint.js";
-import { useHover as v } from "../../hooks/useHover.js";
-import { getColor as c } from "../../theme/currys/color.js";
-import { I as y } from "../../Icon.js";
-import I from "../Icons/ArrowRight.js";
-import _ from "../Icons/ArrowUpRight.js";
-import { L as N } from "../../LazyIllustration.js";
-import { T as z } from "../../Title.js";
-import n from "./styles.module.scss";
-const H = (t) => t.linkComponent ? C.cloneElement(t.linkComponent, { children: t.children }) : t.linkHtmlMarkup === "button" ? /* @__PURE__ */ e("button", { type: "button", onClick: t.linkOnClick, children: t.children }) : /* @__PURE__ */ e("a", { href: t.href, target: t.target, onClick: t.linkOnClick, children: t.children }), X = (t) => {
-  const { isHovered: u, hoverRef: k } = v(), { color: l = "neutral", titleHtmlMarkup: s = "h2", linkHtmlMarkup: d = "a" } = t, i = P(), f = b(
-    n.promopanel,
-    n[`promopanel--${l}`],
-    !t.illustration && n["promopanel--no-illustration"]
-  ), r = /* @__PURE__ */ e(
-    H,
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { useBreakpoint, Breakpoint } from "../../hooks/useBreakpoint.js";
+import { useHover } from "../../hooks/useHover.js";
+import { getColor } from "../../theme/currys/color.js";
+import { I as Icon } from "../../Icon.js";
+import ArrowRight from "../Icons/ArrowRight.js";
+import ArrowUpRight from "../Icons/ArrowUpRight.js";
+import { L as LazyIllustration } from "../../LazyIllustration.js";
+import { T as Title } from "../../Title.js";
+import styles from "./styles.module.scss";
+const PromoPanelLink = (props) => {
+  if (props.linkComponent) {
+    return React.cloneElement(props.linkComponent, { children: props.children });
+  }
+  if (props.linkHtmlMarkup === "button") {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick: props.linkOnClick, children: props.children });
+  }
+  return /* @__PURE__ */ jsx("a", { href: props.href, target: props.target, onClick: props.linkOnClick, children: props.children });
+};
+const PromoPanel = (props) => {
+  const { isHovered, hoverRef } = useHover();
+  const { color = "neutral", titleHtmlMarkup = "h2", linkHtmlMarkup = "a" } = props;
+  const breakpoint = useBreakpoint();
+  const promoPanelClasses = classNames(
+    styles.promopanel,
+    styles[`promopanel--${color}`],
+    !props.illustration && styles["promopanel--no-illustration"]
+  );
+  const promoPanelLink = /* @__PURE__ */ jsx(
+    PromoPanelLink,
     {
-      href: t.href,
-      target: t.target,
-      linkComponent: t.linkComponent,
-      linkHtmlMarkup: d,
-      linkOnClick: t.linkOnClick,
-      children: t.title || t.children
+      href: props.href,
+      target: props.target,
+      linkComponent: props.linkComponent,
+      linkHtmlMarkup,
+      linkOnClick: props.linkOnClick,
+      children: props.title || props.children
+    }
+  );
+  const illustrationSize = (() => {
+    if (breakpoint >= Breakpoint.md) {
+      return 156;
     }
-  ), h = i >= m.md ? 156 : 110;
-  return /* @__PURE__ */ o("div", { className: f, "data-testid": t.testId, "data-analyticsid": g.PromoPanel, ref: k, children: [
-    t.illustration && /* @__PURE__ */ e(
-      N,
+    return 110;
+  })();
+  return /* @__PURE__ */ jsxs("div", { className: promoPanelClasses, "data-testid": props.testId, "data-analyticsid": AnalyticsId.PromoPanel, ref: hoverRef, children: [
+    props.illustration && /* @__PURE__ */ jsx(
+      LazyIllustration,
       {
-        illustrationName: t.illustration,
-        size: h,
-        color: l,
-        className: n.promopanel__illustration
+        illustrationName: props.illustration,
+        size: illustrationSize,
+        color,
+        className: styles.promopanel__illustration
       }
     ),
-    /* @__PURE__ */ o("div", { className: n.promopanel__content, children: [
-      t.title && /* @__PURE__ */ e(z, { htmlMarkup: s, appearance: "title3", children: r }),
-      t.title ? t.children : r
+    /* @__PURE__ */ jsxs("div", { className: styles.promopanel__content, children: [
+      props.title && /* @__PURE__ */ jsx(Title, { htmlMarkup: titleHtmlMarkup, appearance: "title3", children: promoPanelLink }),
+      !props.title ? promoPanelLink : props.children
     ] }),
-    /* @__PURE__ */ e(
-      y,
+    /* @__PURE__ */ jsx(
+      Icon,
       {
-        className: n.promopanel__icon,
-        svgIcon: t.target === "_blank" ? _ : I,
-        size: i >= m.md ? a.Small : a.XSmall,
-        isHovered: u,
-        color: c("blueberry", 500),
-        hoverColor: c("blueberry", 600)
+        className: styles.promopanel__icon,
+        svgIcon: props.target === "_blank" ? ArrowUpRight : ArrowRight,
+        size: breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall,
+        isHovered,
+        color: getColor("blueberry", 500),
+        hoverColor: getColor("blueberry", 600)
       }
     )
   ] });
 };
 export {
-  X as default
+  PromoPanel as default
 };
 //# sourceMappingURL=index.js.map

package/components/PromoPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } 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, { children: 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, hoverRef } = useHover<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={hoverRef}>\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"],"names":["PromoPanelLink","props","React","jsx","PromoPanel","isHovered","hoverRef","useHover","color","titleHtmlMarkup","linkHtmlMarkup","breakpoint","useBreakpoint","promoPanelClasses","classNames","styles","promoPanelLink","illustrationSize","Breakpoint","jsxs","AnalyticsId","LazyIllustration","Title","Icon","ArrowUpRight","ArrowRight","IconSize","getColor"],"mappings":";;;;;;;;;;;;;AAsDA,MAAMA,IAAgD,CAASC,MACzDA,EAAM,gBACDC,EAAM,aAAaD,EAAM,eAAe,EAAE,UAAUA,EAAM,UAAU,IAGzEA,EAAM,mBAAmB,WAEzB,gBAAAE,EAAC,YAAO,MAAM,UAAU,SAASF,EAAM,aACpC,YAAM,SACT,CAAA,IAID,gBAAAE,EAAA,KAAA,EAAE,MAAMF,EAAM,MAAM,QAAQA,EAAM,QAAQ,SAASA,EAAM,aACvD,UAAAA,EAAM,SACT,CAAA,GAIEG,IAAwC,CAASH,MAAA;AACrD,QAAM,EAAE,WAAAI,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnD,EAAE,OAAAC,IAAQ,WAAW,iBAAAC,IAAkB,MAAM,gBAAAC,IAAiB,IAAQ,IAAAT,GAEtEU,IAAaC,KAEbC,IAAoBC;AAAA,IACxBC,EAAO;AAAA,IACPA,EAAO,eAAeP,CAAK,EAAE;AAAA,IAC7B,CAACP,EAAM,gBAAgBc,EAAO,6BAA6B;AAAA,EAAA,GAGvDC,IACJ,gBAAAb;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,MAAMC,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,eAAeA,EAAM;AAAA,MACrB,gBAAAS;AAAA,MACA,aAAaT,EAAM;AAAA,MAElB,UAAAA,EAAM,SAASA,EAAM;AAAA,IAAA;AAAA,EAAA,GAIpBgB,IACAN,KAAcO,EAAW,KACpB,MAGF;AAIP,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWN,GAAmB,eAAaZ,EAAM,QAAQ,oBAAkBmB,EAAY,YAAY,KAAKd,GAC1G,UAAA;AAAA,IAAAL,EAAM,gBACL,gBAAAE;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,kBAAkBpB,EAAM;AAAA,QACxB,MAAMgB;AAAA,QACN,OAAAT;AAAA,QACA,WAAWO,EAAO;AAAA,MAAA;AAAA,IACpB;AAAA,IAED,gBAAAI,EAAA,OAAA,EAAI,WAAWJ,EAAO,qBACpB,UAAA;AAAA,MAAAd,EAAM,SACJ,gBAAAE,EAAAmB,GAAA,EAAM,YAAYb,GAAiB,YAAY,UAC7C,UACHO,EAAA,CAAA;AAAA,MAEAf,EAAM,QAAyBA,EAAM,WAAvBe;AAAA,IAAuB,GACzC;AAAA,IACA,gBAAAb;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,WAAWR,EAAO;AAAA,QAClB,SAASd,EAAM,WAAW,WAAWuB,IAAeC;AAAA,QACpD,MAAMd,KAAcO,EAAW,KAAKQ,EAAS,QAAQA,EAAS;AAAA,QAC9D,WAAArB;AAAA,QACA,OAAOsB,EAAS,aAAa,GAAG;AAAA,QAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,MAAA;AAAA,IACvC;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys/color';\nimport { PaletteNames } from '../../theme/palette';\nimport { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport LazyIllustration from '../LazyIllustration';\nimport Title, { TitleTags } 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, { children: 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, hoverRef } = useHover<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={hoverRef}>\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"],"names":[],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,iBAAgD,CAAS,UAAA;AAC7D,MAAI,MAAM,eAAe;AAChB,WAAA,MAAM,aAAa,MAAM,eAAe,EAAE,UAAU,MAAM,UAAU;AAAA,EAAA;AAGzE,MAAA,MAAM,mBAAmB,UAAU;AAEnC,WAAA,oBAAC,YAAO,MAAM,UAAU,SAAS,MAAM,aACpC,gBAAM,SACT,CAAA;AAAA,EAAA;AAGJ,SACG,oBAAA,KAAA,EAAE,MAAM,MAAM,MAAM,QAAQ,MAAM,QAAQ,SAAS,MAAM,aACvD,UAAA,MAAM,UACT;AAEJ;AAEA,MAAM,aAAwC,CAAS,UAAA;AACrD,QAAM,EAAE,WAAW,SAAS,IAAI,SAAyB;AAEzD,QAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;AAE5E,QAAM,aAAa,cAAc;AAEjC,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,IACP,OAAO,eAAe,KAAK,EAAE;AAAA,IAC7B,CAAC,MAAM,gBAAgB,OAAO,6BAA6B;AAAA,EAC7D;AAEA,QAAM,iBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,eAAe,MAAM;AAAA,MACrB;AAAA,MACA,aAAa,MAAM;AAAA,MAElB,UAAA,MAAM,SAAS,MAAM;AAAA,IAAA;AAAA,EACxB;AAGF,QAAM,oBAAoB,MAAc;AAClC,QAAA,cAAc,WAAW,IAAI;AACxB,aAAA;AAAA,IAAA;AAGF,WAAA;AAAA,EAAA,GACN;AAGD,SAAA,qBAAC,OAAI,EAAA,WAAW,mBAAmB,eAAa,MAAM,QAAQ,oBAAkB,YAAY,YAAY,KAAK,UAC1G,UAAA;AAAA,IAAA,MAAM,gBACL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB,MAAM;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,WAAW,OAAO;AAAA,MAAA;AAAA,IACpB;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,OAAO,qBACpB,UAAA;AAAA,MAAA,MAAM,SACJ,oBAAA,OAAA,EAAM,YAAY,iBAAiB,YAAY,UAC7C,UACH,eAAA,CAAA;AAAA,MAED,CAAC,MAAM,QAAQ,iBAAiB,MAAM;AAAA,IAAA,GACzC;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,SAAS,MAAM,WAAW,WAAW,eAAe;AAAA,QACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;AAAA,QAC9D;AAAA,QACA,OAAO,SAAS,aAAa,GAAG;AAAA,QAChC,YAAY,SAAS,aAAa,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EACvC,GACF;AAEJ;"}

package/components/RadioButton/RadioButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { FormOnColor, FormSize } from '../../constants';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 export interface RadioButtonProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'> {

package/components/RadioButton/index.d.ts

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

package/components/RadioButton/index.js

@@ -1,8 +1,8 @@
-import { R as o } from "../../RadioButton.js";
-import { g as s } from "../../RadioButton.js";
+import { R as RadioButton } from "../../RadioButton.js";
+import { g } from "../../RadioButton.js";
 export {
-  o as RadioButton,
-  o as default,
-  s as getRadioLabelClasses
+  RadioButton,
+  RadioButton as default,
+  g as getRadioLabelClasses
 };
 //# sourceMappingURL=index.js.map