@helsenorge/designsystem-react 6.0.0-beta.9 → 6.0.1

package/components/PopMenu/PopMenu.js

@@ -1,75 +1,77 @@
-import o, { useRef as s, useState as h } from "react";
+import t, { useRef as s, useState as g } from "react";
 import a from "classnames";
-import { IconSize as b, AnalyticsId as L } from "../../constants.js";
-import { useBreakpoint as w } from "../../hooks/useBreakpoint.js";
-import { useHover as H } from "../../hooks/useHover.js";
-import { useOutsideEvent as _ } from "../../hooks/useOutsideEvent.js";
-import { getColor as g } from "../../theme/currys/color.js";
-import { breakpoints as z } from "../../theme/grid.js";
-import { isComponent as A } from "../../utils/component.js";
-import M from "../Close/Close.js";
-import { Icon as T } from "../Icon/Icon.js";
-import P from "../Icons/VerticalDots.js";
-import $ from "../LinkList/LinkList.js";
-import x from "../PopOver/PopOver.js";
-import t from "./styles.module.scss";
-var D = /* @__PURE__ */ ((e) => (e.onWhite = "on-white", e.onGray = "on-gray", e.onBlueberry = "on-blueberry", e))(D || {});
-const G = (e) => {
-  const l = s(null), m = s(null), p = s(null), [r, n] = h(!1), {
-    children: i,
-    popOverClassName: d,
-    popMenuClassName: v,
-    openButtonTestId: I,
-    closeButtonTestId: C,
-    popOverTestId: k,
-    popMenuVariant: c = "on-white",
-    openButtonAriaLabel: B,
-    closeButtonAriaLabel: N
-  } = e, u = a(t["pop-menu-button"], {
-    [t[`pop-menu-button--${c}`]]: c
-  }), f = w() < z.md;
-  _(p, () => n(!r));
-  const { isHovered: y } = H(m), O = f ? b.XSmall : b.Small, E = () => {
-    if (A(i, $))
-      return /* @__PURE__ */ o.createElement(
-        x,
+import { IconSize as I, AnalyticsId as w } from "../../constants.js";
+import { useBreakpoint as H } from "../../hooks/useBreakpoint.js";
+import { useHover as z } from "../../hooks/useHover.js";
+import { useOutsideEvent as A } from "../../hooks/useOutsideEvent.js";
+import { getColor as M } from "../../theme/currys/color.js";
+import { breakpoints as P } from "../../theme/grid.js";
+import { isComponent as T } from "../../utils/component.js";
+import $ from "../Close/Close.js";
+import { Icon as x } from "../Icon/Icon.js";
+import D from "../Icons/VerticalDots.js";
+import G from "../LinkList/LinkList.js";
+import W from "../PopOver/PopOver.js";
+import r from "./styles.module.scss";
+var X = /* @__PURE__ */ ((e) => (e.onWhite = "on-white", e.onGray = "on-gray", e.onBlueberry = "on-blueberry", e))(X || {});
+const j = (e) => {
+  const l = s(null), m = s(null), p = s(null), [n, i] = g(!1), {
+    children: c,
+    popOverClassName: C,
+    popMenuClassName: k,
+    openButtonTestId: B,
+    closeButtonTestId: N,
+    popOverTestId: y,
+    popMenuVariant: u = "on-white",
+    openButtonAriaLabel: O,
+    closeButtonAriaLabel: h
+  } = e, f = a(r["pop-menu-button"], {
+    [r[`pop-menu-button--${u}`]]: u
+  }), d = H() < P.md;
+  A(p, () => i(!n));
+  const { isHovered: E } = z(m), R = d ? I.XSmall : I.Small, S = () => {
+    if (T(c, G))
+      return /* @__PURE__ */ t.createElement(
+        W,
         {
-          testId: k,
-          className: a(t["pop-menu__pop-over"], d),
-          arrowClassName: t["pop-menu__pop-over-arrow"],
+          testId: y,
+          className: a(r["pop-menu__pop-over"], C),
+          arrowClassName: r["pop-menu__pop-over-arrow"],
           controllerRef: l,
           popOverRef: p
         },
-        i
+        c
       );
-  }, R = /* @__PURE__ */ o.createElement(
+  }, b = (o, v) => {
+    v && v.stopPropagation(), i(o);
+  }, _ = /* @__PURE__ */ t.createElement(
     "button",
     {
       ref: m,
-      "data-testid": I,
-      className: u,
-      "aria-label": B || "Se mer",
-      onClick: () => n(!0),
+      "data-testid": B,
+      className: f,
+      "aria-label": O || "Se mer",
+      onClick: (o) => b(!0, o),
       type: "button"
     },
-    /* @__PURE__ */ o.createElement(T, { svgIcon: P, className: "test", color: g("black"), size: O, isHovered: y })
-  ), S = /* @__PURE__ */ o.createElement(
-    M,
+    /* @__PURE__ */ t.createElement(x, { svgIcon: D, className: "test", color: M("black"), size: R, isHovered: E })
+  ), L = /* @__PURE__ */ t.createElement(
+    $,
     {
-      ariaLabel: N,
+      ariaLabel: h,
       color: "black",
-      className: u,
-      testId: C,
+      className: f,
+      testId: N,
       ref: l,
-      onClick: () => n(!1),
-      small: f
+      onClick: (o) => b(!1, o),
+      small: d
     }
   );
-  return /* @__PURE__ */ o.createElement("div", { className: a(t["pop-menu-button"], v), "data-analyticsid": L.PopMenu }, r ? S : R, r && E());
-}, ne = G;
+  return /* @__PURE__ */ t.createElement("div", { className: a(r["pop-menu-button"], k), "data-analyticsid": w.PopMenu }, n ? L : _, n && S());
+}, le = j;
 export {
-  G as PopMenu,
-  D as PopMenuVariant,
-  ne as default
+  j as PopMenu,
+  X as PopMenuVariant,
+  le as default
 };
 //# sourceMappingURL=PopMenu.js.map

package/components/PopMenu/PopMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopMenu.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 Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } 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 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}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = 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  } = 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  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\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={closeRef}\n          popOverRef={popOverRef}\n        >\n          {children}\n        </PopOver>\n      );\n    }\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(): void => setIsOpen(true)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(): void => setIsOpen(false)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":";;;;;;;;;;;;;;;AAmBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,YACVA,EAAA,SAAS,WACTA,EAAA,cAAc,gBAHJA,IAAAA,KAAA,CAAA,CAAA;AA2BC,MAAAC,IAAkC,CAACC,MAAwB;AAChE,QAAAC,IAAWC,EAA0B,IAAI,GACzCC,IAAUD,EAA0B,IAAI,GACxCE,IAAaF,EAAuB,IAAI,GACxC,CAACG,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC;AAAA,IACJ,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,qBAAAC;AAAA,IACA,sBAAAC;AAAA,EACE,IAAAhB,GACEiB,IAAgBC,EAAWC,EAAO,iBAAiB,GAAG;AAAA,IAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,GAAGA;AAAA,EAAA,CACjD,GAEKM,IADaC,MACSC,EAAY;AACxC,EAAAC,EAAgBnB,GAAY,MAAME,EAAU,CAACD,CAAM,CAAC;AACpD,QAAM,EAAE,WAAWmB,EAAoB,IAAIC,EAAStB,CAAO,GACrDuB,IAAiBN,IAASO,EAAS,SAASA,EAAS,OAErDC,IAAiB,MAAM;AACvB,QAAAC,EAA2BrB,GAAUsB,CAAQ;AAE7C,aAAA,gBAAAC,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQnB;AAAA,UACR,WAAWK,EAAWC,EAAO,oBAAoB,GAAGV,CAAgB;AAAA,UACpE,gBAAgBU,EAAO,0BAA0B;AAAA,UACjD,eAAelB;AAAA,UACf,YAAAG;AAAA,QAAA;AAAA,QAECI;AAAA,MAAA;AAAA,EAGP,GAGIyB,IACJ,gBAAAF,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK5B;AAAA,MACL,eAAaQ;AAAA,MACb,WAAWM;AAAA,MACX,cAAYF,KAAuB;AAAA,MACnC,SAAS,MAAYT,EAAU,EAAI;AAAA,MACnC,MAAK;AAAA,IAAA;AAAA,IAEJ,gBAAAyB,EAAA,cAAAG,GAAA,EAAK,SAASC,GAAc,WAAU,QAAO,OAAOC,EAAS,OAAO,GAAG,MAAMV,GAAgB,WAAWF,GAAqB;AAAA,EAAA,GAI5Ha,IACJ,gBAAAN,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,WAAWtB;AAAA,MACX,OAAM;AAAA,MACN,WAAWC;AAAA,MACX,QAAQL;AAAA,MACR,KAAKX;AAAA,MACL,SAAS,MAAYK,EAAU,EAAK;AAAA,MACpC,OAAOc;AAAA,IAAA;AAAA,EAAA;AAIX,yCACG,OAAI,EAAA,WAAWF,EAAWC,EAAO,iBAAiB,GAAGT,CAAgB,GAAG,oBAAkB6B,EAAY,WACnGlC,IAAsBgC,IAAbJ,GACV5B,KAAUuB,GACb;AAEJ,GAEAY,KAAezC;"}
+{"version":3,"file":"PopMenu.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 Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } 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 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}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = 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  } = 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  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\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={closeRef}\n          popOverRef={popOverRef}\n        >\n          {children}\n        </PopOver>\n      );\n    }\n  };\n\n  const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(isOpen);\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(true, e)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(false, e)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":";;;;;;;;;;;;;;;AAmBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,YACVA,EAAA,SAAS,WACTA,EAAA,cAAc,gBAHJA,IAAAA,KAAA,CAAA,CAAA;AA2BC,MAAAC,IAAkC,CAACC,MAAwB;AAChE,QAAAC,IAAWC,EAA0B,IAAI,GACzCC,IAAUD,EAA0B,IAAI,GACxCE,IAAaF,EAAuB,IAAI,GACxC,CAACG,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC;AAAA,IACJ,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,qBAAAC;AAAA,IACA,sBAAAC;AAAA,EACE,IAAAhB,GACEiB,IAAgBC,EAAWC,EAAO,iBAAiB,GAAG;AAAA,IAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,GAAGA;AAAA,EAAA,CACjD,GAEKM,IADaC,MACSC,EAAY;AACxC,EAAAC,EAAgBnB,GAAY,MAAME,EAAU,CAACD,CAAM,CAAC;AACpD,QAAM,EAAE,WAAWmB,EAAoB,IAAIC,EAAStB,CAAO,GACrDuB,IAAiBN,IAASO,EAAS,SAASA,EAAS,OAErDC,IAAiB,MAAM;AACvB,QAAAC,EAA2BrB,GAAUsB,CAAQ;AAE7C,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQnB;AAAA,UACR,WAAWK,EAAWC,EAAO,oBAAoB,GAAGV,CAAgB;AAAA,UACpE,gBAAgBU,EAAO,0BAA0B;AAAA,UACjD,eAAelB;AAAA,UACf,YAAAG;AAAA,QAAA;AAAA,QAECI;AAAA,MAAA;AAAA,EAGP,GAGIyB,IAAgB,CAAC5B,GAAiB6B,MAAwD;AAC9F,IAAAA,KAAKA,EAAE,mBACP5B,EAAUD,CAAM;AAAA,EAAA,GAGZ8B,IACJJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK5B;AAAA,MACL,eAAaQ;AAAA,MACb,WAAWM;AAAA,MACX,cAAYF,KAAuB;AAAA,MACnC,SAAS,CAACmB,MAAkDD,EAAc,IAAMC,CAAC;AAAA,MACjF,MAAK;AAAA,IAAA;AAAA,IAEJH,gBAAAA,EAAA,cAAAK,GAAA,EAAK,SAASC,GAAc,WAAU,QAAO,OAAOC,EAAS,OAAO,GAAG,MAAMZ,GAAgB,WAAWF,GAAqB;AAAA,EAAA,GAI5He,IACJR,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAWxB;AAAA,MACX,OAAM;AAAA,MACN,WAAWC;AAAA,MACX,QAAQL;AAAA,MACR,KAAKX;AAAA,MACL,SAAS,CAACiC,MAAkDD,EAAc,IAAOC,CAAC;AAAA,MAClF,OAAOd;AAAA,IAAA;AAAA,EAAA;AAIX,yCACG,OAAI,EAAA,WAAWF,EAAWC,EAAO,iBAAiB,GAAGT,CAAgB,GAAG,oBAAkB+B,EAAY,WACnGpC,IAAsBkC,IAAbJ,GACV9B,KAAUuB,GACb;AAEJ,GAEAc,KAAe3C;"}

package/components/PopOver/PopOver.js

@@ -16,19 +16,19 @@ const b = t.forwardRef((o, d) => {
     controllerRef: n,
     popOverRef: S,
     show: R = !1,
-    className: g = "",
+    className: _ = "",
     variant: p = "positionautomatic",
     role: c,
-    testId: z,
-    arrowClassName: C
-  } = o, m = S || f(null), N = f(null), s = k(m), [e, _] = A(), E = $(n, 0), l = () => {
+    testId: g,
+    arrowClassName: z
+  } = o, m = S || f(null), C = f(null), s = k(m), [e, N] = A(), E = $(n, 0), l = () => {
     var u;
-    _((u = n.current) == null ? void 0 : u.getBoundingClientRect());
+    N((u = n.current) == null ? void 0 : u.getBoundingClientRect());
   };
   V(l, 500), j(l, ["scroll", "resize"], 10), B(() => {
     l();
   }, []);
-  const I = c === "tooltip", O = v(r.popover, { [r["popover--visible"]]: I ? R : E }, g), i = e && s && x(e, s, p), P = v(r.popover__arrow, C, {
+  const I = c === "tooltip", O = v(r.popover, { [r["popover--visible"]]: I ? R : E }, _), i = e && s && x(e, s, p), P = v(r.popover__arrow, z, {
     [r["popover__arrow--over"]]: i === "positionbelow",
     [r["popover__arrow--under"]]: i === "positionabove"
     /* positionabove */
@@ -40,12 +40,12 @@ const b = t.forwardRef((o, d) => {
       ref: q([d, m]),
       className: O,
       style: a,
-      "data-testid": z,
+      "data-testid": g,
       "data-analyticsid": T.PopOver,
       role: c
     },
     y
-  ), /* @__PURE__ */ t.createElement("div", { ref: N, className: P, style: h }));
+  ), /* @__PURE__ */ t.createElement("div", { ref: C, className: P, style: h }));
 });
 b.displayName = "PopOver";
 const Z = b;

package/components/PopOver/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AA+BZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,EACE,IAAAX,GAEEY,IAAYP,KAAcQ,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAajB,GAAe,CAAC,GAEnDkB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAAnB,EAAc,YAAd,gBAAAmB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYlB,MAAS,WAErBmB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYrB,IAAOc,KAAuBb,CAAS,GAC/HwB,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYP,CAAO,GAC1GyB,IAAeJ,EAAWC,EAAO,gBAAgBnB,GAAgB;AAAA,IACrE,CAACmB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA;AAAA,EAAA,CACzD,GAEKG,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYP,CAAO,GAChG4B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEI,gBAAAhC,EAAA,cAAAA,EAAA,UAAA,MAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKoC,EAAU,CAACrC,GAAKW,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAOM;AAAA,MACP,eAAaxB;AAAA,MACb,oBAAkB6B,EAAY;AAAA,MAC9B,MAAA9B;AAAA,IAAA;AAAA,IAECN;AAAA,EACH,mCACC,OAAI,EAAA,KAAKW,GAAU,WAAWmB,GAAc,OAAOG,EAAA,CAAY,CAClE;AAEJ,CAAC;AAEDtC,EAAQ,cAAc;AAEtB,MAAA0C,IAAe1C;"}
+{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AA+BZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,EACE,IAAAX,GAEEY,IAAYP,KAAcQ,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAajB,GAAe,CAAC,GAEnDkB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAAnB,EAAc,YAAd,gBAAAmB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYlB,MAAS,WAErBmB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYrB,IAAOc,KAAuBb,CAAS,GAC/HwB,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYP,CAAO,GAC1GyB,IAAeJ,EAAWC,EAAO,gBAAgBnB,GAAgB;AAAA,IACrE,CAACmB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA;AAAA,EAAA,CACzD,GAEKG,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYP,CAAO,GAChG4B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIhC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKoC,EAAU,CAACrC,GAAKW,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAOM;AAAA,MACP,eAAaxB;AAAA,MACb,oBAAkB6B,EAAY;AAAA,MAC9B,MAAA9B;AAAA,IAAA;AAAA,IAECN;AAAA,EACH,mCACC,OAAI,EAAA,KAAKW,GAAU,WAAWmB,GAAc,OAAOG,EAAA,CAAY,CAClE;AAEJ,CAAC;AAEDtC,EAAQ,cAAc;AAEtB,MAAA0C,IAAe1C;"}

package/components/Portal/index.js

@@ -1,14 +1,14 @@
 import c from "react";
-import { createPortal as l } from "react-dom";
+import { createPortal as s } from "react-dom";
 import { AnalyticsId as n } from "../../constants.js";
-function p({ children: s, parent: e, className: o, testId: i }) {
+function p({ children: l, 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);
     };
-  }, [t, e, o]), l(s, t);
+  }, [t, e, o]), s(l, t);
 }
 export {
   p as default

package/components/PromoPanel/PromoPanel.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PaletteNames } from '../../theme/palette';
+import { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';
+import { IllustrationProps } from '../Illustration/Illustration';
+import { TitleTags } from '../Title';
+export type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;
+interface PromoPanelProps {
+    /** Used as the link text if set. title or children must be set for the link to have accessible text. */
+    title?: string;
+    /** Used as the link text if title is not set. */
+    children?: string;
+    /** Illustration element */
+    illustration?: React.FC<IllustrationProps>;
+    /** Changes the underlying element of the title. */
+    titleHtmlMarkup?: TitleTags;
+    /** Changes the background color. Default: white */
+    color?: PromoPanelColors;
+    /** Not used if linkComponent is set */
+    href?: string;
+    /** Anchor link target. If linkComponent is set, this prop is only used to display the right icon for external links. */
+    target?: AnchorLinkTargets;
+    /** HTML markup for anchor link. Not used if linkComponent is set. Default: a */
+    linkHtmlMarkup?: AnchorLinkTags;
+    /** Function that is called when clicked. Not used if linkComponent is set. */
+    linkOnClick?: () => void;
+    /** Custom link component. Must be "a" a or "button" element with no styling. */
+    linkComponent?: React.ReactElement;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+declare const PromoPanel: React.FC<PromoPanelProps>;
+export default PromoPanel;
+//# sourceMappingURL=PromoPanel.d.ts.map

package/components/PromoPanel/PromoPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/PromoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAIlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC,CAAC;AAEzF,UAAU,eAAe;IACvB,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IAC3C,mDAAmD;IACnD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,mDAAmD;IACnD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wHAAwH;IACxH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,gFAAgF;IAChF,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/PromoPanel/PromoPanel.js

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

package/components/PromoPanel/PromoPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromoPanel.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 { IllustrationProps } from '../Illustration/Illustration';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type PromoPanelColors = Extract<PaletteNames, 'neutral' | 'blueberry' | 'cherry'>;\n\ninterface 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?: React.FC<IllustrationProps>;\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  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={hoverRef}>\n      {React.isValidElement<IllustrationProps>(props.illustration) &&\n        React.cloneElement(props.illustration, { className: styles.promopanel__illustration })}\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      <div className={styles.promopanel__icon}>\n        <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    </div>\n  );\n};\n\nexport default PromoPanel;\n"],"names":["PromoPanelLink","props","React","PromoPanel","isHovered","hoverRef","useHover","color","titleHtmlMarkup","linkHtmlMarkup","breakpoint","useBreakpoint","promoPanelClasses","classNames","styles","promoPanelLink","AnalyticsId","Title","Icon","ArrowUpRight","ArrowRight","Breakpoint","IconSize","getColor","PromoPanel$1"],"mappings":";;;;;;;;;;;AAsDA,MAAMA,IAAgD,CAASC,MACzDA,EAAM,gBACDC,EAAM,aAAaD,EAAM,eAAe,EAAE,UAAUA,EAAM,UAAU,IAGzEA,EAAM,mBAAmB,WAEzBC,gBAAAA,EAAA,cAAC,YAAO,MAAM,UAAU,SAASD,EAAM,YAAA,GACpCA,EAAM,QACT,IAIDC,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAMD,EAAM,MAAM,QAAQA,EAAM,QAAQ,SAASA,EAAM,YACvD,GAAAA,EAAM,QACT,GAIEE,IAAwC,CAASF,MAAA;AACrD,QAAM,EAAE,WAAAG,GAAW,UAAAC,EAAS,IAAIC,EAAyB,GAEnD,EAAE,OAAAC,IAAQ,WAAW,iBAAAC,IAAkB,MAAM,gBAAAC,IAAiB,IAAQ,IAAAR,GAEtES,IAAaC,KAEbC,IAAoBC;AAAA,IACxBC,EAAO;AAAA,IACPA,EAAO,eAAeP,CAAK,EAAE;AAAA,IAC7B,CAACN,EAAM,gBAAgBa,EAAO,6BAA6B;AAAA,EAAA,GAGvDC,IACJb,gBAAAA,EAAA;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,MAAMC,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,eAAeA,EAAM;AAAA,MACrB,gBAAAQ;AAAA,MACA,aAAaR,EAAM;AAAA,IAAA;AAAA,IAElBA,EAAM,SAASA,EAAM;AAAA,EAAA;AAKxB,SAAAC,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAWU,GAAmB,eAAaX,EAAM,QAAQ,oBAAkBe,EAAY,YAAY,KAAKX,EAAA,GAC1GH,EAAM,eAAkCD,EAAM,YAAY,KACzDC,EAAM,aAAaD,EAAM,cAAc,EAAE,WAAWa,EAAO,yBAA0B,CAAA,GACtFZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,oBACpB,GAAAb,EAAM,SACJC,gBAAAA,EAAA,cAAAe,GAAA,EAAM,YAAYT,GAAiB,YAAY,SAAA,GAC7CO,CACH,GAEAd,EAAM,QAAyBA,EAAM,WAAvBc,CAClB,GACCb,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWY,EAAO,iBACrB,GAAAZ,gBAAAA,EAAA;AAAA,IAACgB;AAAA,IAAA;AAAA,MACC,SAASjB,EAAM,WAAW,WAAWkB,IAAeC;AAAA,MACpD,MAAMV,KAAcW,EAAW,KAAKC,EAAS,QAAQA,EAAS;AAAA,MAC9D,WAAAlB;AAAA,MACA,OAAOmB,EAAS,aAAa,GAAG;AAAA,MAChC,YAAYA,EAAS,aAAa,GAAG;AAAA,IAAA;AAAA,EAEzC,CAAA,CACF;AAEJ,GAEAC,IAAerB;"}

package/components/PromoPanel/index.d.ts

@@ -0,0 +1,4 @@
+import PromoPanel from './PromoPanel';
+export * from './PromoPanel';
+export default PromoPanel;
+//# sourceMappingURL=index.d.ts.map

package/components/PromoPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PromoPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,cAAc,cAAc,CAAC;AAC7B,eAAe,UAAU,CAAC"}

package/components/PromoPanel/index.js

@@ -0,0 +1,5 @@
+import r from "./PromoPanel.js";
+export {
+  r as default
+};
+//# sourceMappingURL=index.js.map

package/components/PromoPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/PromoPanel/styles.module.scss

@@ -0,0 +1,115 @@
+@use 'sass:map';
+@import '../../scss/palette';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+
+$colors: 'neutral', 'blueberry', 'cherry';
+
+.promopanel {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  padding-left: getSpacer(s);
+  padding-right: getSpacer(s);
+  transition: background-color 0.15s ease-in-out;
+
+  &:focus-within {
+    box-shadow: 0 0 0 2px $black, inset 0 0 0 2px $black;
+  }
+
+  @media (min-width: map.get($grid-breakpoints, xs)) {
+    padding-left: 0;
+  }
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding-right: getSpacer(l);
+  }
+
+  &--no-illustration {
+    padding-left: getSpacer(s);
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-left: getSpacer(l);
+    }
+  }
+
+  @each $color in $colors {
+    &--#{$color} {
+      background-color: map.get($palette-map, #{$color}50);
+
+      &:hover {
+        background-color: map.get($palette-map, #{$color}100);
+      }
+    }
+  }
+
+  &__illustration {
+    display: none;
+    flex-shrink: 0;
+
+    @media (min-width: map.get($grid-breakpoints, xs)) {
+      display: inline;
+      width: 120px;
+      height: auto;
+    }
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      width: 156px;
+    }
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      width: 180px;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: getSpacer(3xs);
+    max-width: 696px;
+    padding-top: getSpacer(m);
+    padding-bottom: getSpacer(m);
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      gap: getSpacer(2xs);
+      padding-top: getSpacer(l);
+      padding-bottom: getSpacer(l);
+    }
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      padding-top: getSpacer(xl);
+      padding-bottom: getSpacer(xl);
+    }
+
+    a,
+    button {
+      all: unset;
+      cursor: pointer;
+
+      &::after {
+        inset: 0;
+        content: '';
+        position: absolute;
+      }
+    }
+  }
+
+  &__icon {
+    margin-left: auto;
+    padding-left: getSpacer(s);
+
+    @media (min-width: map.get($grid-breakpoints, xs)) {
+      display: none;
+    }
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      display: block;
+    }
+
+    @media (min-width: map.get($grid-breakpoints, lg)) {
+      padding-left: getSpacer(l);
+    }
+  }
+}

package/components/PromoPanel/styles.module.scss.d.ts

@@ -0,0 +1,16 @@
+export type Styles = {
+  promopanel: string;
+  promopanel__content: string;
+  promopanel__icon: string;
+  promopanel__illustration: string;
+  'promopanel--blueberry': string;
+  'promopanel--cherry': string;
+  'promopanel--neutral': string;
+  'promopanel--no-illustration': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/RadioButton/RadioButton.js

@@ -1,6 +1,6 @@
 import p, { useState as q } from "react";
-import l from "classnames";
-import { FormMode as i, FormSize as D, AnalyticsId as W } from "../../constants.js";
+import i from "classnames";
+import { FormMode as l, FormSize as D, AnalyticsId as W } from "../../constants.js";
 import { usePseudoClasses as $ } from "../../hooks/usePseudoClasses.js";
 import { isMutableRefObject as G, mergeRefs as H } from "../../utils/refs.js";
 import { uuid as J } from "../../utils/uuid.js";
@@ -8,7 +8,7 @@ import { getLabelText as K, renderLabelAsParent as Q } from "../Label/Label.js";
 import e from "./styles.module.scss";
 const oe = (s, o, r, b) => {
   const n = o === "oninvalid", a = s === b;
-  return l({
+  return i({
     [e["radio-button-label__large--on-grey"]]: r && o === "ongrey" && !a,
     [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !a && r,
     [e["radio-button-label__large--selected"]]: r && a && !n,
@@ -20,39 +20,39 @@ const oe = (s, o, r, b) => {
     defaultChecked: b = !1,
     onChange: n,
     disabled: a,
-    label: y,
+    label: f,
     inputId: _ = J(),
-    mode: d = i.onwhite,
+    mode: d = l.onwhite,
     name: C = _,
     size: w,
     errorText: u,
     error: R = !!u,
-    value: k = K(y),
+    value: k = K(f),
     testId: B,
     required: N,
     labelClassNames: L,
     ...S
-  } = s, g = R || d === i.oninvalid, f = d === i.ondark, h = d === i.onblueberry, x = d === i.oninvalid, t = w === D.large, [E, F] = q(b), { refObject: I, isFocused: c } = $(G(o) ? o : null), j = H([o, I]), z = l(e["radio-button-wrapper"], {
+  } = s, g = R || d === l.oninvalid, y = d === l.ondark, h = d === l.onblueberry, x = d === l.oninvalid, t = w === D.large, [E, F] = q(b), { refObject: I, isFocused: c } = $(G(o) ? o : null), j = H([o, I]), z = i(e["radio-button-wrapper"], {
     [e["radio-button-wrapper--with-error"]]: u,
     [e["radio-button-wrapper__large"]]: t,
     [e["radio-button-wrapper__large--focused"]]: t && c,
     [e["radio-button-wrapper__large--selected"]]: t && E && c,
     [e["radio-button-wrapper__large--invalid"]]: t && x && c,
     [e["radio-button-wrapper__large--on-blueberry"]]: t && h && c
-  }), A = l(
+  }), A = i(
     e["radio-button-label"],
     {
       [e["radio-button-label--disabled"]]: a,
-      [e["radio-button-label--on-dark"]]: f,
+      [e["radio-button-label--on-dark"]]: y,
       [e["radio-button-label--invalid"]]: g,
       [e["radio-button-label__large"]]: t,
       [e["radio-button-label__large--disabled"]]: t && a
     },
     L
-  ), M = l(
+  ), M = i(
     e["radio-button"],
     {
-      [e["radio-button--on-dark"]]: f,
+      [e["radio-button--on-dark"]]: y,
       [e["radio-button--disabled"]]: a,
       [e["radio-button--on-blueberry"]]: h,
       [e["radio-button--invalid"]]: g,
@@ -61,7 +61,7 @@ const oe = (s, o, r, b) => {
       [e["radio-button__large--invalid"]]: t && g
     },
     r
-  ), O = l(e["radio-button-errors"]), P = (m) => {
+  ), O = i(e["radio-button-errors"]), P = (m) => {
     F(m.target.checked), n && n(m);
   }, T = () => /* @__PURE__ */ p.createElement(
     "input",
@@ -81,7 +81,7 @@ const oe = (s, o, r, b) => {
     }
   );
   return /* @__PURE__ */ p.createElement("div", { "data-testid": B, "data-analyticsid": W.RadioButton, className: z }, u && /* @__PURE__ */ p.createElement("p", { className: O }, u), Q(
-    y,
+    f,
     T(),
     _,
     d,