@helsenorge/designsystem-react 10.0.2 → 10.2.0

package/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { palette } from '../../theme/palette';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div\n            className={dialogClasses}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            ref={dialogRef}\n          >\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              aria-label={contentIsScrollable ? ariaLabel : undefined}\n              aria-labelledby={contentIsScrollable ? ariaLabelledBy : undefined}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","_a","cn"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.large,\n    zIndex = ZIndex.Modal,\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role=\"dialog\" aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(size && styles[`modal__contentWrapper__scroll--${size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","React","_a","cn"],"mappings":"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"}

package/components/Modal/styles.module.scss

@@ -34,6 +34,7 @@
   box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
   background-color: $white;
   animation: open 200ms 1;
+  outline: none;
 
   &__title {
     &--error {
@@ -92,7 +93,7 @@
       width: 696px;
     }
 
-    @container (max-width: 319px) {
+    @include tiny-screens-media-query {
       padding-bottom: getSpacer(2xs);
     }
   }
@@ -170,12 +171,17 @@
     overflow: auto;
     overflow-x: hidden;
 
+    &:focus-visible {
+      outline: 1px solid $black;
+      outline-offset: -1px;
+    }
+
     @media print {
       overflow: hidden;
       max-height: none;
     }
 
-    @container (max-width: 319px) {
+    @include tiny-screens-media-query {
       max-height: calc(100dvh - 4rem);
     }
 
@@ -191,7 +197,7 @@
           padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
         }
 
-        @container (max-width: 319px) {
+        @include tiny-screens-media-query {
           padding: getSpacer(2xs) getSpacer(2xs) getSpacer(4xs);
         }
       }
@@ -203,7 +209,7 @@
           padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
         }
 
-        @container (max-width: 319px) {
+        @include tiny-screens-media-query {
           padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
         }
       }
@@ -258,7 +264,7 @@
         padding: getSpacer(l) getSpacer(xl) 0;
       }
 
-      @container (max-width: 319px) {
+      @include tiny-screens-media-query {
         padding: getSpacer(2xs) getSpacer(2xs) 0;
       }
     }
@@ -266,7 +272,7 @@
     &--medium {
       padding: getSpacer(m) getSpacer(m) 0;
 
-      @container (max-width: 319px) {
+      @include tiny-screens-media-query {
         padding: getSpacer(2xs) getSpacer(2xs) 0;
       }
     }

package/components/NotificationPanel/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "../../constants.js";
 import { useUuid } from "../../hooks/useUuid.js";
@@ -16,7 +16,7 @@ const FluidWrapper = ({ fluid, children }) => {
   }
   return children;
 };
-const NotificationPanel = React.forwardRef((props, ref) => {
+const NotificationPanel = React__default.forwardRef((props, ref) => {
   const {
     children,
     variant = "info",
@@ -51,7 +51,7 @@ const NotificationPanel = React.forwardRef((props, ref) => {
       [styles["notification-panel__children--outline"]]: outlineVariant
     });
     const CustomTag = labelHtmlMarkup;
-    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);
+    const [expanderOpen, setExpanderOpen] = React__default.useState(expanderOpenFromStart);
     return /* @__PURE__ */ jsxs("div", { className: contentClasses, id: !label ? uuid : void 0, children: [
       label && /* @__PURE__ */ jsx(CustomTag, { className: labelClasses, id: uuid, children: label }),
       children && /* @__PURE__ */ jsx("div", { className: childrenClasses, children }),

package/components/NotificationPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["React"],"mappings":"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"}

package/components/PanelList/index.js

@@ -1,18 +1,18 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "../../constants.js";
 import { b as PanelVariant, P as Panel } from "../../Panel.js";
 import styles from "./styles.module.scss";
-const isPanelComponent = (element) => React.isValidElement(element) && element.type === Panel;
-const PanelList = React.forwardRef(function BadgeForwardedRef(props, ref) {
+const isPanelComponent = (element) => React__default.isValidElement(element) && element.type === Panel;
+const PanelList = React__default.forwardRef(function BadgeForwardedRef(props, ref) {
   const { testId, children, variant = PanelVariant.fill } = props;
-  const renderPanel = (panel, firstChild) => React.cloneElement(panel, {
+  const renderPanel = (panel, firstChild) => React__default.cloneElement(panel, {
     variant,
     noTopBorder: variant === PanelVariant.line && !firstChild,
     className: classNames(panel.props.className, variant !== PanelVariant.line && styles["panel-list__panel"])
   });
-  return /* @__PURE__ */ jsx("div", { ref, "data-testid": testId, "data-analyticsid": AnalyticsId.PanelList, children: React.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child) });
+  return /* @__PURE__ */ jsx("div", { ref, "data-testid": testId, "data-analyticsid": AnalyticsId.PanelList, children: React__default.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child) });
 });
 export {
   PanelList as default

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxB,MAAM,eAA2B,OAAO,KAAM,QAA+B,SAAS;AAExF,MAAM,YAAY,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,SAAS;AAE1D,QAAM,cAAc,CAAC,OAAuC,eAC1D,MAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,aAAa,YAAY,aAAa,QAAQ,CAAC;AAAA,IAC/C,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,aAAa,QAAQ,OAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAA,oBAAC,OAAI,EAAA,KAAU,eAAa,QAAQ,oBAAkB,YAAY,WAC/D,UAAM,MAAA,SAAS,IAAI,UAAU,CAAC,OAAO,UAAW,iBAAiB,KAAK,IAAI,YAAY,OAAO,UAAU,CAAC,IAAI,KAAM,EACrH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["React"],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxBA,eAAM,eAA2B,OAAO,KAAM,QAA+B,SAAS;AAExF,MAAM,YAAYA,eAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,SAAS;AAE1D,QAAM,cAAc,CAAC,OAAuC,eAC1DA,eAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,aAAa,YAAY,aAAa,QAAQ,CAAC;AAAA,IAC/C,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,aAAa,QAAQ,OAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAA,oBAAC,OAAI,EAAA,KAAU,eAAa,QAAQ,oBAAkB,YAAY,WAC/D,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,OAAO,UAAW,iBAAiB,KAAK,IAAI,YAAY,OAAO,UAAU,CAAC,IAAI,KAAM,EACrH,CAAA;AAEJ,CAAC;"}

package/components/PopMenu/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState } from "react";
+import React__default, { useRef, useState } from "react";
 import classNames from "classnames";
 import { IconSize, AnalyticsId } from "../../constants.js";
 import { useBreakpoint } from "../../hooks/useBreakpoint.js";
@@ -71,12 +71,12 @@ const PopMenu = (props) => {
           arrowClassName: styles["pop-menu__pop-over-arrow"],
           controllerRef: iconRef,
           popOverRef,
-          children: React.Children.map(
+          children: React__default.Children.map(
             children,
-            (child) => React.cloneElement(child, {
-              children: React.Children.map(
+            (child) => React__default.cloneElement(child, {
+              children: React__default.Children.map(
                 child.props.children,
-                (child2) => isComponent(child2, LinkList.Link) ? React.cloneElement(child2, {
+                (child2) => isComponent(child2, LinkList.Link) ? React__default.cloneElement(child2, {
                   onClick: (event) => handleClick(() => child2.props.onClick && child2.props.onClick(event))
                 }) : child2
               )

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","child"],"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","React","child"],"mappings":"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"}

package/components/Portal/index.js

@@ -1,13 +1,13 @@
-import React from "react";
+import React__default 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"), []);
+  const el = React__default.useMemo(() => document.createElement("div"), []);
   el.setAttribute("data-analyticsid", AnalyticsId.Portal);
   if (testId) {
     el.setAttribute("data-testid", testId);
   }
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     const target = parent && !!parent.appendChild ? parent : document.body;
     const classList = ["portal-container"];
     if (className) className.split(" ").forEach((item) => classList.push(item));

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":[],"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;"}
+{"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":["React"],"mappings":";;;AAiBA,SAAwB,OAAO,EAAE,UAAU,QAAQ,WAAW,UAA0C;AAEhG,QAAA,KAAKA,eAAM,QAAQ,MAAM,SAAS,cAAc,KAAK,GAAG,EAAE;AAC7D,KAAA,aAAa,oBAAoB,YAAY,MAAM;AACtD,MAAI,QAAQ;AACP,OAAA,aAAa,eAAe,MAAM;AAAA,EAAA;AAGvCA,iBAAM,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/PromoPanel/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "../../constants.js";
 import { useBreakpoint, Breakpoint } from "../../hooks/useBreakpoint.js";
@@ -13,7 +13,7 @@ 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 });
+    return React__default.cloneElement(props.linkComponent, { children: props.children });
   }
   if (props.linkHtmlMarkup === "button") {
     return /* @__PURE__ */ jsx("button", { type: "button", onClick: props.linkOnClick, children: props.children });

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":[],"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;"}
+{"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":["React"],"mappings":";;;;;;;;;;;;;AAsDA,MAAM,iBAAgD,CAAS,UAAA;AAC7D,MAAI,MAAM,eAAe;AAChB,WAAAA,eAAM,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/StickyNote/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useLayoutEffect } from "react";
 import classNames from "classnames";
 import { useHover } from "../../hooks/useHover.js";
 import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
@@ -73,16 +73,22 @@ const StickyNote = (props) => {
     }
     (_a = textareaRef.current) == null ? void 0 : _a.focus();
   };
-  useEffect(() => {
-    textareaRef && textareaRef.current && resizeTextarea(textareaRef.current);
-  }, []);
-  const resizeTextarea = (target) => {
+  const resizeTextarea = () => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    resizeTarget(textarea);
+  };
+  const resizeTarget = (target) => {
     target.style.height = "inherit";
     target.style.height = `${target.scrollHeight}px`;
   };
+  useLayoutEffect(() => {
+    resizeTextarea();
+    setTimeout(() => resizeTextarea(), 1e3);
+  }, []);
   const handleChange = (e) => {
     const textarea = e.target;
-    resizeTextarea(textarea);
+    resizeTarget(textarea);
     textareaProps.onChange && textareaProps.onChange(e);
   };
   return /* @__PURE__ */ jsxs("div", { children: [

package/components/StickyNote/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["interface TriangleProps {\n  type: 'default' | 'active' | 'error';\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ type }) => {\n  const palette = ((): Palette => {\n    switch (type) {\n      case 'active':\n        return {\n          border: '#C59302',\n          background: '#F5E080',\n        };\n      case 'error':\n        return {\n          border: '#C83521',\n          background: '#EEC0A5',\n        };\n      default:\n        return {\n          border: '#F5E080',\n          background: '#F5E080',\n        };\n    }\n  })();\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"path-1-inside-1_1_44\" fill=\"white\">\n        <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" />\n      </mask>\n      <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" fill={palette.background} />\n      <path\n        d=\"M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z\"\n        fill={palette.border}\n        mask=\"url(#path-1-inside-1_1_44)\"\n      />\n    </svg>\n  );\n};\n\nexport default Triangle;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport Triangle from './Triangle';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered } = useHover<HTMLDivElement>(stickynoteRef);\n  const triangleType = error ? 'error' : isTextareaFocused ? 'active' : 'default';\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      onClickWhileDisabled && onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  useEffect(() => {\n    // Resize textarea to fit default value\n    textareaRef && textareaRef.current && resizeTextarea(textareaRef.current);\n  }, []);\n\n  const resizeTextarea = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTextarea(textarea);\n    textareaProps.onChange && textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n        />\n        <button\n          onClick={onXButtonClick}\n          aria-label={arialabelXButton}\n          data-testid=\"closeButton\"\n          className={classNames(styles['sticky-note__x-button'])}\n          type=\"button\"\n        >\n          <Icon svgIcon={X} color=\"black\" size={IconSize.XXSmall} />\n        </button>\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle type={triangleType} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["interface TriangleProps {\n  type: 'default' | 'active' | 'error';\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ type }) => {\n  const palette = ((): Palette => {\n    switch (type) {\n      case 'active':\n        return {\n          border: '#C59302',\n          background: '#F5E080',\n        };\n      case 'error':\n        return {\n          border: '#C83521',\n          background: '#EEC0A5',\n        };\n      default:\n        return {\n          border: '#F5E080',\n          background: '#F5E080',\n        };\n    }\n  })();\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"path-1-inside-1_1_44\" fill=\"white\">\n        <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" />\n      </mask>\n      <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" fill={palette.background} />\n      <path\n        d=\"M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z\"\n        fill={palette.border}\n        mask=\"url(#path-1-inside-1_1_44)\"\n      />\n    </svg>\n  );\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport Triangle from './Triangle';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered } = useHover<HTMLDivElement>(stickynoteRef);\n  const triangleType = error ? 'error' : isTextareaFocused ? 'active' : 'default';\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      onClickWhileDisabled && onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    textareaProps.onChange && textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n        />\n        <button\n          onClick={onXButtonClick}\n          aria-label={arialabelXButton}\n          data-testid=\"closeButton\"\n          className={classNames(styles['sticky-note__x-button'])}\n          type=\"button\"\n        >\n          <Icon svgIcon={X} color=\"black\" size={IconSize.XXSmall} />\n        </button>\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle type={triangleType} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":[],"mappings":"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"}

package/components/Tabs/Tabs.d.ts

@@ -24,6 +24,8 @@ export interface TabsProps {
     ariaLabelRightButton?: string;
     /** Sets aria label on the "scroll to the left" button in TabList */
     ariaLabelLeftButton?: string;
+    /** Overrides the default z-index of the tabs header */
+    zIndex?: number;
 }
 declare const TabsRoot: React.FC<TabsProps>;
 type TabsComponent = typeof TabsRoot & {

package/components/Tabs/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef } from "react";
+import React__default, { useState, useRef } from "react";
 import classNames from "classnames";
-import { a as Tab, T as TabList } from "../../TabList.js";
+import { T as TabList, a as Tab } from "../../TabList.js";
 import { T as TabPanel } from "../../TabPanel.js";
 import designsystemlayout from "../../scss/layout.module.scss";
 import styles from "./styles.module.scss";
@@ -15,7 +15,8 @@ const TabsRoot = ({
   sticky = true,
   testId,
   ariaLabelRightButton,
-  ariaLabelLeftButton
+  ariaLabelLeftButton,
+  zIndex
 }) => {
   const isControlled = activeTab !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = useState(0);
@@ -40,6 +41,9 @@ const TabsRoot = ({
         className: classNames(styles["tab-list-wrapper"], {
           [styles["tab-list-wrapper--sticky"]]: sticky
         }),
+        style: {
+          zIndex
+        },
         children: [
           /* @__PURE__ */ jsx(
             TabList,
@@ -57,7 +61,7 @@ const TabsRoot = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { ref: tabsRef, style: { marginTop: "-50px" }, children: /* @__PURE__ */ jsx(TabPanel, { ref: tabPanelRef, color, isFirst: activeTabIndex == 0, children: React.Children.toArray(children)[activeTabIndex] }) })
+    /* @__PURE__ */ jsx("div", { ref: tabsRef, style: { marginTop: "-50px" }, children: /* @__PURE__ */ jsx(TabPanel, { ref: tabPanelRef, color, isFirst: activeTabIndex == 0, children: React__default.Children.toArray(children)[activeTabIndex] }) })
   ] });
 };
 const Tabs = TabsRoot;

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":[],"mappings":";;;;;;;AAsCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QAED,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAM,MAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["React"],"mappings":";;;;;;;AAwCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QACD,OAAO;AAAA,UACL;AAAA,QACF;AAAA,QAEA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAMA,eAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/TagList/index.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { AnalyticsId } from "../../constants.js";
 import styles from "./styles.module.scss";
 const TagList = ({ children, testId }) => {
-  return /* @__PURE__ */ jsx("ul", { className: styles["tag-list"], "data-testid": testId, "data-analyticsid": AnalyticsId.TagList, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx("li", { className: styles["tag-list__item"], children: child })) });
+  return /* @__PURE__ */ jsx("ul", { className: styles["tag-list"], "data-testid": testId, "data-analyticsid": AnalyticsId.TagList, children: React__default.Children.map(children, (child) => /* @__PURE__ */ jsx("li", { className: styles["tag-list__item"], children: child })) });
 };
 export {
   TagList as default