@helsenorge/designsystem-react 10.1.0 → 10.3.0

package/components/Panel/styles.module.scss

@@ -1,22 +1,22 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 @mixin panel-padding {
-  padding: getSpacer(s);
+  padding: spacers.getSpacer(s);
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(l);
+    padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(l);
   }
 }
 
 @mixin panel-padding-icon {
-  padding: getSpacer(m) getSpacer(s) getSpacer(l);
+  padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: getSpacer(m) getSpacer(m) getSpacer(l);
+    padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
   }
 }
 
@@ -30,8 +30,8 @@
   }
 }
 
-$layout-sm-gap: getSpacer(s);
-$layout-md-col-gap: getSpacer(m);
+$layout-sm-gap: spacers.getSpacer(s);
+$layout-md-col-gap: spacers.getSpacer(m);
 
 .panel-wrapper {
   width: 100%;
@@ -173,13 +173,13 @@ $layout-md-col-gap: getSpacer(m);
     &--layout-2 {
       @media (min-width: map.get($grid-breakpoints, md)) {
         grid-row: span 2;
-        padding-right: getSpacer(2xs);
+        padding-right: spacers.getSpacer(2xs);
       }
     }
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       grid-row: span 2;
-      padding-right: getSpacer(2xs);
+      padding-right: spacers.getSpacer(2xs);
     }
 
     &--layout-3 {
@@ -234,63 +234,63 @@ $layout-md-col-gap: getSpacer(m);
   }
 
   &--fill {
-    background-color: $neutral50;
+    background-color: palette.$neutral50;
   }
 
   &--fill#{&}--selected {
-    background-color: $neutral100;
+    background-color: palette.$neutral100;
   }
 
   &--fill#{&}--selected#{&}--clickable {
     &:hover {
-      background-color: $neutral200;
+      background-color: palette.$neutral200;
     }
   }
 
   &--white {
-    background-color: $white;
+    background-color: palette.$white;
   }
 
   &--fill#{&}--clickable,
   &--white#{&}--clickable {
-    @include hover-and-focus-effects($neutral100, $neutral600);
+    @include hover-and-focus-effects(palette.$neutral100, palette.$neutral600);
   }
 
   &--white#{&}--selected {
-    box-shadow: inset 0 0 0 6px $neutral100;
+    box-shadow: inset 0 0 0 6px palette.$neutral100;
   }
 
   &--stroke {
-    border: 6px solid $neutral100;
+    border: 6px solid palette.$neutral100;
   }
 
   &--stroke#{&}--clickable {
-    @include hover-and-focus-effects($neutral50, $neutral100);
+    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral100);
 
     &:focus {
-      border-color: $neutral600;
+      border-color: palette.$neutral600;
     }
   }
 
   &--line {
-    background-color: $white;
-    border-color: $neutral500;
+    background-color: palette.$white;
+    border-color: palette.$neutral500;
     border-top: 1px solid;
     border-bottom: 1px solid;
   }
 
   &--line#{&}--clickable {
-    @include hover-and-focus-effects($neutral50, $neutral600);
+    @include hover-and-focus-effects(palette.$neutral50, palette.$neutral600);
   }
 
   &--line#{&}--selected {
-    background-color: $neutral50;
+    background-color: palette.$neutral50;
     border-bottom: 0;
   }
 
   &--line#{&}--selected#{&}--clickable {
     &:hover {
-      background-color: $neutral100;
+      background-color: palette.$neutral100;
     }
   }
 
@@ -316,26 +316,26 @@ $layout-md-col-gap: getSpacer(m);
 
   &--new {
     &::before {
-      border-left-color: $blueberry600;
+      border-left-color: palette.$blueberry600;
     }
   }
 
   &--draft {
     &::before {
       border-left-style: dashed;
-      border-left-color: $neutral500;
+      border-left-color: palette.$neutral500;
     }
   }
 
   &--error {
     &::before {
-      border-left-color: $cherry500;
+      border-left-color: palette.$cherry500;
     }
   }
 }
 
 .title-container {
-  padding-bottom: getSpacer(s);
+  padding-bottom: spacers.getSpacer(s);
 
   &--no-content-a {
     padding-bottom: 0;
@@ -346,7 +346,7 @@ $layout-md-col-gap: getSpacer(m);
     display: inline;
 
     &--badge {
-      padding-right: getSpacer(2xs);
+      padding-right: spacers.getSpacer(2xs);
     }
   }
 
@@ -358,7 +358,7 @@ $layout-md-col-gap: getSpacer(m);
 }
 
 .panel-details {
-  background-color: $neutral50;
+  background-color: palette.$neutral50;
   display: none;
 
   @include panel-padding;
@@ -374,30 +374,30 @@ $layout-md-col-gap: getSpacer(m);
   }
 
   &--line {
-    background: $white;
-    border-bottom: 1px solid $neutral500;
+    background: palette.$white;
+    border-bottom: 1px solid palette.$neutral500;
   }
 
   &--white {
-    background: $white;
+    background: palette.$white;
   }
 }
 
 .status-message {
-  font-size: $font-size-sm;
-  color: $cherry500;
+  font-size: font-settings.$font-size-sm;
+  color: palette.$cherry500;
   display: flex;
-  margin-bottom: getSpacer(2xs) * -1;
+  margin-bottom: spacers.getSpacer(2xs) * -1;
   grid-column: 1 / -1;
 
   span {
     padding-left: 5px;
     align-self: center;
-    font-size: $font-size-sm;
+    font-size: font-settings.$font-size-sm;
   }
 
   &--new {
-    color: $blueberry800;
+    color: palette.$blueberry800;
   }
 }
 
@@ -410,24 +410,24 @@ $layout-md-col-gap: getSpacer(m);
   flex-direction: column;
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
-    padding-top: getSpacer(xs);
+    padding-top: spacers.getSpacer(xs);
     flex-direction: row;
   }
 
   &__icon {
     display: flex;
     align-items: center;
-    padding-bottom: getSpacer(2xs);
+    padding-bottom: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
       padding-top: 0;
-      padding-right: getSpacer(m);
+      padding-right: spacers.getSpacer(m);
       padding-bottom: 0;
     }
 
     span {
-      padding-left: getSpacer(2xs);
-      font-size: $font-size-sm;
+      padding-left: spacers.getSpacer(2xs);
+      font-size: font-settings.$font-size-sm;
     }
   }
 }

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/PanelList/styles.module.scss

@@ -1,14 +1,14 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 .panel-list {
   &__panel:not(:last-child) {
-    margin-bottom: getSpacer(2xs);
+    margin-bottom: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
-      margin-bottom: getSpacer(s);
+      margin-bottom: spacers.getSpacer(s);
     }
   }
 }

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/PopMenu/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@import '../../scss/palette';
-@import '../../scss/breakpoints';
+@use '../../scss/palette' as palette;
+@use '../../scss/breakpoints' as *;
 
 .pop-menu-button {
   padding: 0;
@@ -14,7 +14,7 @@
   min-width: 3rem;
 
   &:focus {
-    border: 0.1875rem solid $black;
+    border: 0.1875rem solid palette.$black;
     box-shadow: none;
     outline: none;
   }
@@ -40,12 +40,12 @@ html :focus > .pop-menu-button {
   }
 
   &:active {
-    background-color: $neutral50;
+    background-color: palette.$neutral50;
     border: none;
   }
 
   &:hover {
-    background-color: $neutral50;
+    background-color: palette.$neutral50;
   }
 
   &:active:hover {
@@ -53,8 +53,8 @@ html :focus > .pop-menu-button {
   }
 
   &:active:focus {
-    background-color: $neutral50;
-    border: 0.1875rem solid $black;
+    background-color: palette.$neutral50;
+    border: 0.1875rem solid palette.$black;
   }
 }
 
@@ -64,12 +64,12 @@ html :focus > .pop-menu-button {
   }
 
   &:active {
-    background-color: $neutral100;
+    background-color: palette.$neutral100;
     border: none;
   }
 
   &:hover {
-    background-color: $neutral100;
+    background-color: palette.$neutral100;
   }
 
   &:active:hover {
@@ -77,8 +77,8 @@ html :focus > .pop-menu-button {
   }
 
   &:active:focus {
-    background-color: $neutral100;
-    border: 0.1875rem solid $black;
+    background-color: palette.$neutral100;
+    border: 0.1875rem solid palette.$black;
   }
 }
 
@@ -88,12 +88,12 @@ html :focus > .pop-menu-button {
   }
 
   &:active {
-    background-color: $blueberry100;
+    background-color: palette.$blueberry100;
     border: none;
   }
 
   &:hover {
-    background-color: $blueberry100;
+    background-color: palette.$blueberry100;
   }
 
   &:active:hover {
@@ -101,8 +101,8 @@ html :focus > .pop-menu-button {
   }
 
   &:active:focus {
-    background-color: $blueberry100;
-    border: 0.1875rem solid $black;
+    background-color: palette.$blueberry100;
+    border: 0.1875rem solid palette.$black;
   }
 }
 

package/components/PopOver/styles.module.scss

@@ -1,9 +1,8 @@
 @use 'sass:map';
-@import '../../scss/spacers';
-@import '../../scss/breakpoints';
-@import '../../scss/palette';
-@import '../../scss/font-settings';
-@import '../AnchorLink/styles.module';
+@use '../../scss/spacers' as spacers;
+@use '../../scss/palette' as palette;
+@use '../../scss/font-settings' as font-settings;
+@use '../../scss/breakpoints' as *;
 
 .popover {
   $popover: &;
@@ -14,18 +13,18 @@
   max-width: 23.3125rem;
   text-align: start;
   font-family: inherit;
-  font-size: $font-size-sm;
-  line-height: $lineheight-size-sm;
-  background-color: $white;
+  font-size: font-settings.$font-size-sm;
+  line-height: font-settings.$lineheight-size-sm;
+  background-color: palette.$white;
   z-index: 3;
   visibility: hidden;
-  border: getSpacer(4xs) solid $plum600;
+  border: spacers.getSpacer(4xs) solid palette.$plum600;
   border-radius: 0.5625rem;
   box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
 
   @media (min-width: map.get($grid-breakpoints, lg)) {
-    font-size: $font-size-md;
-    line-height: $lineheight-size-md;
+    font-size: font-settings.$font-size-md;
+    line-height: font-settings.$lineheight-size-md;
   }
 
   &--visible {
@@ -33,7 +32,7 @@
   }
 
   &__arrow {
-    --drop-shadow-color: #{$plum600};
+    --drop-shadow-color: #{palette.$plum600};
 
     width: 0;
     height: 0;
@@ -45,14 +44,14 @@
 
     &--over {
       border-width: 0.625rem;
-      border-bottom-color: $white;
+      border-bottom-color: palette.$white;
       filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
       filter: drop-shadow(0 -0.185rem 0 var(--drop-shadow-color));
     }
 
     &--under {
       border-width: 0.625rem;
-      border-top-color: $white;
+      border-top-color: palette.$white;
       filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
       filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
     }

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

@@ -1,7 +1,4 @@
 export type Styles = {
-  anchorlink: string;
-  anchorlink__icon: string;
-  'anchorlink-wrapper': string;
   popover: string;
   popover__arrow: string;
   'popover__arrow--over': string;

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/Progressbar/styles.module.scss

@@ -1,5 +1,5 @@
-@import '../../scss/palette';
-@import '../../scss/screen-reader';
+@use '../../scss/palette' as palette;
+@use '../../scss/screen-reader' as *;
 
 .progressbar {
   &__svg {
@@ -20,7 +20,7 @@
   }
 
   &--overlay-screen {
-    background: $transparent-grey;
+    background: palette.$transparent-grey;
     position: fixed;
     inset: 0;
   }
@@ -29,7 +29,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: $transparent-grey;
+    background: palette.$transparent-grey;
     height: 100%;
     width: 100%;
   }

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 });