@helsenorge/designsystem-react 13.0.0-workspaces-beta.5 → 13.0.0-workspaces-beta.7

package/lib/components/NotificationPanel/index.js

@@ -34,12 +34,12 @@ import "../../ChevronUp.js";
 import "../../useExpand.js";
 import { t as Expander_default } from "../../Expander.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var FluidWrapper = ({ fluid, children }) => {
 	if (fluid) return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["fluid-wrapper"]),
+		className: cn(styles["fluid-wrapper"]),
 		children
 	});
 	return children;
@@ -51,13 +51,13 @@ var NotificationPanel_default = React.forwardRef((props, ref) => {
 	const isMobile = useIsMobileBreakpoint();
 	const renderContent = () => {
 		const outlineVariant = compactVariant === "outline";
-		const contentClasses = classNames(styles["notification-panel__content"]);
-		const labelClasses = classNames(styles["notification-panel__label"], {
+		const contentClasses = cn(styles["notification-panel__content"]);
+		const labelClasses = cn(styles["notification-panel__label"], {
 			[styles["notification-panel__label--no-content"]]: !children && !expanderChildren,
 			[styles["notification-panel__label--compact"]]: !!compactVariant,
 			[styles["notification-panel__label--outline"]]: outlineVariant
 		});
-		const childrenClasses = classNames(styles["notification-panel__children"], {
+		const childrenClasses = cn(styles["notification-panel__children"], {
 			[styles["notification-panel__children--with-label"]]: label,
 			[styles["notification-panel__children--expander-no-label"]]: expanderChildren && !label,
 			[styles["notification-panel__children--outline"]]: outlineVariant
@@ -85,7 +85,7 @@ var NotificationPanel_default = React.forwardRef((props, ref) => {
 			]
 		});
 	};
-	const notificationPanelClasses = classNames(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
+	const notificationPanelClasses = cn(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
 		[styles["notification-panel--compact"]]: !!compactVariant,
 		[styles["notification-panel--compact--basic"]]: compactVariant === "basic",
 		[styles["notification-panel--compact--outline"]]: compactVariant === "outline",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\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' | 'status';\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    labelId: labelIdProp,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    role,\n    testId,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\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    return (\n      <div className={contentClasses} id={!label ? labelId : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={labelId}>\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: labelId }) : 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 || isMobile ? 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=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,WAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AClET,IAAA,4BDqE0B,MAAM,YAAoD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,WACE;CACJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAmC;EACvC,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,WAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,WAAW,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC,GAAG,KAAA;AAExF,QACE,oBAAC,cAAA;EAAoB;YACnB,qBAAC,OAAA;GACM;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;;IAEJ,oBAAC,2BAAA;KACU;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;MAClB;IACD,eACC,oBAAC,QAAA;KAAK,WAAW,OAAO;eACtB,oBAAC,eAAA;MAAM,WAAW,MAAM;MAA4B;MAAS,OAAM;OAAU;MACxE;IAER,eAAe;;IACZ;GACO;EAEjB"}
+{"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\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' | 'status';\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    labelId: labelIdProp,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    role,\n    testId,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\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    return (\n      <div className={contentClasses} id={!label ? labelId : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={labelId}>\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: labelId }) : 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 || isMobile ? 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=\"black\" />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,GAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AClET,IAAA,4BDqE0B,MAAM,YAAoD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,WACE;CACJ,MAAM,UAAU,kBAAkB,YAAY;CAC9C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAmC;EACvC,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,GAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,GAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,GAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,GAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,WAAW,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC,GAAG,KAAA;AAExF,QACE,oBAAC,cAAA;EAAoB;YACnB,qBAAC,OAAA;GACM;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;;IAEJ,oBAAC,2BAAA;KACU;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;MAClB;IACD,eACC,oBAAC,QAAA;KAAK,WAAW,OAAO;eACtB,oBAAC,eAAA;MAAM,WAAW,MAAM;MAA4B;MAAS,OAAM;OAAU;MACxE;IAER,eAAe;;IACZ;GACO;EAEjB"}

package/lib/components/PanelList/index.js

@@ -31,7 +31,7 @@ import "../../ChevronRight.js";
 import "../../PanelTitle.js";
 import { c as PanelVariant, l as Panel_default } from "../../Panel.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var isPanelComponent = (element) => React.isValidElement(element) && element.type === Panel_default;
@@ -39,14 +39,14 @@ var PanelList_default = React.forwardRef(function BadgeForwardedRef(props, ref)
 	const { testId, children, variant = PanelVariant.fill, highlightText } = props;
 	const renderPanel = (panel) => React.cloneElement(panel, {
 		variant,
-		className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),
+		className: cn(panel.props.className, styles[`panel-list__panel--${variant}`]),
 		highlightText: panel.props.highlightText || highlightText
 	});
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.PanelList,
-		className: classNames({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
+		className: cn({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
 		children: React.Children.map(children, (child) => isPanelComponent(child) ? renderPanel(child) : child)
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/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?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\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, highlightText } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n      highlightText: panel.props.highlightText || highlightText,\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport default PanelList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,oBAAoB,YACxB,MAAM,eAA2B,QAAQ,IAAK,QAA+B,SAAS;ACpBxF,IAAA,oBDsBkB,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;CAC5H,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,kBAAkB;CAEzE,MAAM,eAAe,UACnB,MAAM,aAAa,OAAO;EACf;EACT,WAAW,WAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,WAAW;EACrF,eAAe,MAAM,MAAM,iBAAiB;EAC7C,CAAC;AAEJ,QACE,oBAAC,OAAA;EACM;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,WAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,SAAS,CAAC;YAE3F,MAAM,SAAS,IAAI,WAAU,UAAU,iBAAiB,MAAM,GAAG,YAAY,MAAM,GAAG,MAAO;GAC1F;EAER"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/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?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\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, highlightText } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n      highlightText: panel.props.highlightText || highlightText,\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport default PanelList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,oBAAoB,YACxB,MAAM,eAA2B,QAAQ,IAAK,QAA+B,SAAS;ACpBxF,IAAA,oBDsBkB,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;CAC5H,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,kBAAkB;CAEzE,MAAM,eAAe,UACnB,MAAM,aAAa,OAAO;EACf;EACT,WAAW,GAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,WAAW;EACrF,eAAe,MAAM,MAAM,iBAAiB;EAC7C,CAAC;AAEJ,QACE,oBAAC,OAAA;EACM;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,GAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,SAAS,CAAC;YAE3F,MAAM,SAAS,IAAI,WAAU,UAAU,iBAAiB,MAAM,GAAG,YAAY,MAAM,GAAG,MAAO;GAC1F;EAER"}

package/lib/components/PanelListOld/index.js

@@ -35,7 +35,7 @@ import "../../Pencil.js";
 import "../../Watch.js";
 import { i as PanelOldVariant, t as PanelOld_default } from "../../PanelOld.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var isPanelComponent = (element) => React.isValidElement(element) && element.type === PanelOld_default;
@@ -44,7 +44,7 @@ var PanelListOld_default = React.forwardRef(function BadgeForwardedRef(props, re
 	const renderPanel = (panel, firstChild) => React.cloneElement(panel, {
 		variant,
 		noTopBorder: variant === PanelOldVariant.line && !firstChild,
-		className: classNames(panel.props.className, variant !== PanelOldVariant.line && styles["panel-list__panel"])
+		className: cn(panel.props.className, variant !== PanelOldVariant.line && styles["panel-list__panel"])
 	});
 	return /* @__PURE__ */ jsx("div", {
 		ref,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelListOld/PanelListOld.tsx","../../../src/components/PanelListOld/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport PanelOld, { PanelOldProps, PanelOldVariant } from '../PanelOld';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListOldProps {\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 PanelOldVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: unknown | null | undefined): element is React.ReactElement<PanelOldProps> =>\n  React.isValidElement<PanelOldProps>(element) && (element as React.ReactElement).type === PanelOld;\n\nconst PanelListOld = React.forwardRef(function BadgeForwardedRef(props: PanelListOldProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelOldVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelOldProps>, firstChild: boolean): React.ReactElement =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelOldVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelOldVariant.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 PanelListOld;\n","import PanelListOld from './PanelListOld';\nexport * from './PanelListOld';\nexport default PanelListOld;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAM,oBAAoB,YACxB,MAAM,eAA8B,QAAQ,IAAK,QAA+B,SAAS;ACjB3F,IAAA,uBDmBqB,MAAM,WAAW,SAAS,kBAAkB,OAA0B,KAAyC;CAClI,MAAM,EAAE,QAAQ,UAAU,UAAU,gBAAgB,SAAS;CAE7D,MAAM,eAAe,OAA0C,eAC7D,MAAM,aAAa,OAAO;EACf;EACT,aAAa,YAAY,gBAAgB,QAAQ,CAAC;EAClD,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,gBAAgB,QAAQ,OAAO,qBAAqB;EAC9G,CAAC;AAEJ,QACE,oBAAC,OAAA;EAAS;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YAC/D,MAAM,SAAS,IAAI,WAAW,OAAO,UAAW,iBAAiB,MAAM,GAAG,YAAY,OAAO,UAAU,EAAE,GAAG,MAAO;GAChH;EAER"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelListOld/PanelListOld.tsx","../../../src/components/PanelListOld/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport PanelOld, { PanelOldProps, PanelOldVariant } from '../PanelOld';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListOldProps {\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 PanelOldVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: unknown | null | undefined): element is React.ReactElement<PanelOldProps> =>\n  React.isValidElement<PanelOldProps>(element) && (element as React.ReactElement).type === PanelOld;\n\nconst PanelListOld = React.forwardRef(function BadgeForwardedRef(props: PanelListOldProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelOldVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelOldProps>, firstChild: boolean): React.ReactElement =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelOldVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelOldVariant.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 PanelListOld;\n","import PanelListOld from './PanelListOld';\nexport * from './PanelListOld';\nexport default PanelListOld;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAM,oBAAoB,YACxB,MAAM,eAA8B,QAAQ,IAAK,QAA+B,SAAS;ACjB3F,IAAA,uBDmBqB,MAAM,WAAW,SAAS,kBAAkB,OAA0B,KAAyC;CAClI,MAAM,EAAE,QAAQ,UAAU,UAAU,gBAAgB,SAAS;CAE7D,MAAM,eAAe,OAA0C,eAC7D,MAAM,aAAa,OAAO;EACf;EACT,aAAa,YAAY,gBAAgB,QAAQ,CAAC;EAClD,WAAW,GAAW,MAAM,MAAM,WAAW,YAAY,gBAAgB,QAAQ,OAAO,qBAAqB;EAC9G,CAAC;AAEJ,QACE,oBAAC,OAAA;EAAS;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YAC/D,MAAM,SAAS,IAAI,WAAW,OAAO,UAAW,iBAAiB,MAAM,GAAG,YAAY,OAAO,UAAU,EAAE,GAAG,MAAO;GAChH;EAER"}

package/lib/components/PopMenu/index.js

@@ -60,7 +60,7 @@ import "../../ChevronRight.js";
 import { t as VerticalDots_default } from "../../VerticalDots.js";
 import { t as LinkList_default } from "../../LinkList.js";
 import React, { useRef, useState } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 let PopMenuVariant = /* @__PURE__ */ function(PopMenuVariant$1) {
@@ -93,7 +93,7 @@ const PopMenu = (props) => {
 	const renderChildren = () => {
 		if (isComponent(children, LinkList_default)) return /* @__PURE__ */ jsx(PopOver_default, {
 			testId: popOverTestId,
-			className: classNames(styles["pop-menu__pop-over"], popOverClassName),
+			className: cn(styles["pop-menu__pop-over"], popOverClassName),
 			controllerRef: iconRef,
 			role: "dialog",
 			show: isOpen,
@@ -126,7 +126,7 @@ const PopMenu = (props) => {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: outerRef,
-		className: classNames(popMenuClassName),
+		className: cn(popMenuClassName),
 		"data-analyticsid": AnalyticsId.PopMenu,
 		children: [/* @__PURE__ */ jsxs(Button_default, {
 			variant: "borderless",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PopMenu: React.FC<PopMenuProps>"],"sources":["../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport Button from '../Button';\nimport Icon, { 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  /** @deprecated Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (): void => {\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon ref={iconRef} svgIcon={svgIcon ?? VerticalDots} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} ref={iconRef} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  return (\n    <div ref={outerRef} className={classNames(popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={isOpen}\n        onClick={toggleOpenOnClick}\n        ref={triggerButtonRef}\n        ariaLabel={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n        testId={isOpen ? closeButtonTestId : openButtonTestId}\n      >\n        {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n        {isOpen ? closeIcon : openIcon}\n        {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n      </Button>\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n","import PopMenu from './PopMenu';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,aAAA;AACA,kBAAA,YAAA;AACA,kBAAA,iBAAA;;;AAGF,IAAY,uBAAA,yBAAA,wBAAL;AACL,wBAAA,WAAA;AACA,wBAAA,UAAA;;;AA8BF,MAAaA,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,KAAK;CACxD,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,uBAAuB;AAExC,iBAAgB,gBAAgB;AAC9B,YAAU,MAAM;GAChB;CAEF,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,iBAAiB;CAChF,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;AAC7C,YAAU,MAAM;AAChB,MAAI,GAAI,KAAI;;CAGd,MAAM,uBAAuD;AAC3D,MAAI,YAA2B,UAAU,iBAAS,CAChD,QACE,oBAAC,iBAAA;GACC,QAAQ;GACR,WAAW,WAAW,OAAO,uBAAuB,iBAAiB;GACrE,eAAe;GACf,MAAK;GACL,MAAM;aAEL,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,YACjD,YAAuB,SAAO,iBAAS,KAAK,GACxC,MAAM,aAAa,SAAO,EACxB,UAAU,UACR,kBAAkB,QAAM,MAAM,WAAW,QAAM,MAAM,QAAQ,MAAM,CAAC,EACvE,CAAC,GACF,QACL,EACF,CAAC,CACH;IACO;;CAKhB,MAAM,0BAAgC;AACpC,YAAU,CAAC,OAAO;;CAGpB,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAA;EAAS,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;GAA0B,GAEzF,WAAW,oBAAC,cAAA;EAAc;EAAS,MAAM,SAAS;EAAQ,WAAW;GAA0B;CAGnG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAA;EAAK,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;GAA0B;CAGnH,MAAM,YAAY,oBAAC,cAAA;EAAK,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;GAA0B;AAE7G,QACE,qBAAC,OAAA;EAAI,KAAK;EAAU,WAAW,WAAW,iBAAiB;EAAE,oBAAkB,YAAY;aACzF,qBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;;IAEpC,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAA,EAAA,UAAM,WAAA,CAAiB;IACvF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAA,EAAA,UAAM,WAAA,CAAiB;;IAClF,EACR,UAAU,gBAAgB,CAAA;GACvB;;ACrJV,IAAA,kBDyJe"}
+{"version":3,"file":"index.js","names":["PopMenu: React.FC<PopMenuProps>"],"sources":["../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport Button from '../Button';\nimport Icon, { 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  /** @deprecated Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (): void => {\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon ref={iconRef} svgIcon={svgIcon ?? VerticalDots} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} ref={iconRef} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  return (\n    <div ref={outerRef} className={classNames(popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={isOpen}\n        onClick={toggleOpenOnClick}\n        ref={triggerButtonRef}\n        ariaLabel={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n        testId={isOpen ? closeButtonTestId : openButtonTestId}\n      >\n        {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n        {isOpen ? closeIcon : openIcon}\n        {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n      </Button>\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n","import PopMenu from './PopMenu';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,aAAA;AACA,kBAAA,YAAA;AACA,kBAAA,iBAAA;;;AAGF,IAAY,uBAAA,yBAAA,wBAAL;AACL,wBAAA,WAAA;AACA,wBAAA,UAAA;;;AA8BF,MAAaA,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,KAAK;CACxD,MAAM,UAAU,OAAO,KAAK;CAC5B,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,uBAAuB;AAExC,iBAAgB,gBAAgB;AAC9B,YAAU,MAAM;GAChB;CAEF,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,iBAAiB;CAChF,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;AAC7C,YAAU,MAAM;AAChB,MAAI,GAAI,KAAI;;CAGd,MAAM,uBAAuD;AAC3D,MAAI,YAA2B,UAAU,iBAAS,CAChD,QACE,oBAAC,iBAAA;GACC,QAAQ;GACR,WAAW,GAAW,OAAO,uBAAuB,iBAAiB;GACrE,eAAe;GACf,MAAK;GACL,MAAM;aAEL,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,YACjD,YAAuB,SAAO,iBAAS,KAAK,GACxC,MAAM,aAAa,SAAO,EACxB,UAAU,UACR,kBAAkB,QAAM,MAAM,WAAW,QAAM,MAAM,QAAQ,MAAM,CAAC,EACvE,CAAC,GACF,QACL,EACF,CAAC,CACH;IACO;;CAKhB,MAAM,0BAAgC;AACpC,YAAU,CAAC,OAAO;;CAGpB,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAA;EAAS,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;GAA0B,GAEzF,WAAW,oBAAC,cAAA;EAAc;EAAS,MAAM,SAAS;EAAQ,WAAW;GAA0B;CAGnG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAA;EAAK,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;GAA0B;CAGnH,MAAM,YAAY,oBAAC,cAAA;EAAK,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;GAA0B;AAE7G,QACE,qBAAC,OAAA;EAAI,KAAK;EAAU,WAAW,GAAW,iBAAiB;EAAE,oBAAkB,YAAY;aACzF,qBAAC,gBAAA;GACC,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;;IAEpC,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAA,EAAA,UAAM,WAAA,CAAiB;IACvF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAA,EAAA,UAAM,WAAA,CAAiB;;IAClF,EACR,UAAU,gBAAgB,CAAA;GACvB;;ACrJV,IAAA,kBDyJe"}

package/lib/components/Progressbar/index.js

@@ -1,7 +1,7 @@
 import { c as ZIndex } from "../../constants2.js";
 import { t as palette } from "../../palette.js";
 import React, { useEffect, useRef } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 let ProgressbarSize = /* @__PURE__ */ function(ProgressbarSize$1) {
@@ -43,7 +43,7 @@ var Progressbar = ({ value, size = ProgressbarSize.large, mode = ProgressBarMode
 	}, []);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		ref: wrapperRef,
-		className: classNames({
+		className: cn({
 			[styles["progressbar--overlay"]]: overlay,
 			[styles["progressbar--overlay-screen"]]: overlay === Overlay.screen,
 			[styles["progressbar--overlay-parent"]]: overlay === Overlay.parent

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Progressbar: React.FC<ProgressbarProps>"],"sources":["../../../src/components/Progressbar/Progressbar.tsx","../../../src/components/Progressbar/index.ts"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport enum ProgressbarSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ProgressBarMode {\n  ondark = 'ondark',\n  onlight = 'onlight',\n}\n\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\nexport interface ProgressbarProps {\n  /** The value of the progressbar given in percent. Value between 0 and 100 */\n  value: number;\n  /** Size of the progressbar. Default is large */\n  size?: ProgressbarSize;\n  /** Changes the visuals of the ProgressBar. Default is onLight */\n  mode?: ProgressBarMode;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Aria label for the progressbar */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({\n  value,\n  size = ProgressbarSize.large,\n  mode = ProgressBarMode.onlight,\n  overlay,\n  testId,\n  ariaLabel,\n}: ProgressbarProps) => {\n  if (overlay) {\n    mode = ProgressBarMode.ondark;\n  }\n  // Restrict value to be between 0 and 100\n  value = Math.max(0, Math.min(value, 100));\n\n  let width;\n  if (size === ProgressbarSize.large) {\n    width = 96;\n  } else if (size === ProgressbarSize.medium) {\n    width = 50;\n  } else {\n    width = 44;\n  }\n\n  const totalRadius = width / 2;\n  const strokeWidth = 8;\n  const radius = totalRadius - strokeWidth / 2;\n  const viewBoxSize = totalRadius * 2;\n  const viewBoxCenter = totalRadius;\n  const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;\n  const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (value / 100) * circumference;\n  const valueText = `${value}%`;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n    }\n  }, []);\n\n  const wrapperClasses = classNames({\n    [styles['progressbar--overlay']]: overlay,\n    [styles['progressbar--overlay-screen']]: overlay === Overlay.screen,\n    [styles['progressbar--overlay-parent']]: overlay === Overlay.parent,\n  });\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={wrapperClasses}\n        data-testid={testId}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}\n      >\n        <svg\n          role=\"presentation\"\n          width={viewBoxSize}\n          height={viewBoxSize}\n          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n          className={styles['progressbar__svg']}\n        >\n          <circle cx={viewBoxCenter} cy={viewBoxCenter} r={radius} stroke={circleBackgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n          <circle\n            cx={viewBoxCenter}\n            cy={viewBoxCenter}\n            r={radius}\n            stroke={mainColor}\n            strokeWidth={strokeWidth}\n            fill=\"none\"\n            strokeDasharray={circumference}\n            strokeDashoffset={strokeDashoffset}\n            className={styles['progressbar__progress-circle']}\n            transform={`rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`}\n          />\n          <text\n            className=\"progress-wheel__text--large\"\n            fontSize={'1.5rem'}\n            fill={mainColor}\n            x={viewBoxCenter}\n            y={viewBoxCenter}\n            textAnchor=\"middle\"\n            alignmentBaseline=\"middle\"\n          >\n            {size === ProgressbarSize.large && valueText}\n          </text>\n        </svg>\n      </div>\n      <div className={styles['progressbar__sr-only-text']} aria-live=\"assertive\" aria-atomic=\"true\">\n        {valueText}\n      </div>\n    </>\n  );\n};\n\nexport default Progressbar;\n","import Progressbar from './Progressbar';\nexport * from './Progressbar';\nexport default Progressbar;\n"],"mappings":";;;;;;AASA,IAAY,kBAAA,yBAAA,mBAAL;AACL,mBAAA,WAAA;AACA,mBAAA,YAAA;AACA,mBAAA,WAAA;;;AAGF,IAAY,kBAAA,yBAAA,mBAAL;AACL,mBAAA,YAAA;AACA,mBAAA,aAAA;;;AAGF,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,YAAA;;;AAiBF,IAAMA,eAA2C,EAC/C,OACA,OAAO,gBAAgB,OACvB,OAAO,gBAAgB,SACvB,SACA,QACA,gBACsB;AACtB,KAAI,QACF,QAAO,gBAAgB;AAGzB,SAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,IAAI,CAAC;CAEzC,IAAI;AACJ,KAAI,SAAS,gBAAgB,MAC3B,SAAQ;UACC,SAAS,gBAAgB,OAClC,SAAQ;KAER,SAAQ;CAGV,MAAM,cAAc,QAAQ;CAC5B,MAAM,cAAc;CACpB,MAAM,SAAS,cAAc,cAAc;CAC3C,MAAM,cAAc,cAAc;CAClC,MAAM,gBAAgB;CACtB,MAAM,wBAAwB,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CAChG,MAAM,YAAY,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CACpF,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,mBAAmB,gBAAiB,QAAQ,MAAO;CACzD,MAAM,YAAY,GAAG,MAAM;CAE3B,MAAM,aAAa,OAAuB,KAAK;AAE/C,iBAAgB;AACd,MAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,MACnE,YAAW,QAAQ,cAAc,MAAM,WAAW;IAEnD,EAAE,CAAC;AAQN,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EACC,KAAK;EACL,WAViB,WAAW;IAC/B,OAAO,0BAA0B;IACjC,OAAO,iCAAiC,YAAY,QAAQ;IAC5D,OAAO,iCAAiC,YAAY,QAAQ;GAC9D,CAAC;EAOI,eAAa;EACb,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,eAAe,GAAG,EAAE;YAEzE,qBAAC,OAAA;GACC,MAAK;GACL,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,YAAY,GAAG;GAC/B,WAAW,OAAO;;IAElB,oBAAC,UAAA;KAAO,IAAI;KAAe,IAAI;KAAe,GAAG;KAAQ,QAAQ;KAAoC;KAAa,MAAK;MAAS;IAChI,oBAAC,UAAA;KACC,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,QAAQ;KACK;KACb,MAAK;KACL,iBAAiB;KACC;KAClB,WAAW,OAAO;KAClB,WAAW,cAAc,cAAc,GAAG,cAAc;MACxD;IACF,oBAAC,QAAA;KACC,WAAU;KACV,UAAU;KACV,MAAM;KACN,GAAG;KACH,GAAG;KACH,YAAW;KACX,mBAAkB;eAEjB,SAAS,gBAAgB,SAAS;MAC9B;;IACH;GACF,EACN,oBAAC,OAAA;EAAI,WAAW,OAAO;EAA8B,aAAU;EAAY,eAAY;YACpF;GACG,CAAA,EAAA,CACL;;ACtIP,IAAA,sBD0Ie"}
+{"version":3,"file":"index.js","names":["Progressbar: React.FC<ProgressbarProps>"],"sources":["../../../src/components/Progressbar/Progressbar.tsx","../../../src/components/Progressbar/index.ts"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport enum ProgressbarSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ProgressBarMode {\n  ondark = 'ondark',\n  onlight = 'onlight',\n}\n\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\nexport interface ProgressbarProps {\n  /** The value of the progressbar given in percent. Value between 0 and 100 */\n  value: number;\n  /** Size of the progressbar. Default is large */\n  size?: ProgressbarSize;\n  /** Changes the visuals of the ProgressBar. Default is onLight */\n  mode?: ProgressBarMode;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Aria label for the progressbar */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({\n  value,\n  size = ProgressbarSize.large,\n  mode = ProgressBarMode.onlight,\n  overlay,\n  testId,\n  ariaLabel,\n}: ProgressbarProps) => {\n  if (overlay) {\n    mode = ProgressBarMode.ondark;\n  }\n  // Restrict value to be between 0 and 100\n  value = Math.max(0, Math.min(value, 100));\n\n  let width;\n  if (size === ProgressbarSize.large) {\n    width = 96;\n  } else if (size === ProgressbarSize.medium) {\n    width = 50;\n  } else {\n    width = 44;\n  }\n\n  const totalRadius = width / 2;\n  const strokeWidth = 8;\n  const radius = totalRadius - strokeWidth / 2;\n  const viewBoxSize = totalRadius * 2;\n  const viewBoxCenter = totalRadius;\n  const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;\n  const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (value / 100) * circumference;\n  const valueText = `${value}%`;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n    }\n  }, []);\n\n  const wrapperClasses = classNames({\n    [styles['progressbar--overlay']]: overlay,\n    [styles['progressbar--overlay-screen']]: overlay === Overlay.screen,\n    [styles['progressbar--overlay-parent']]: overlay === Overlay.parent,\n  });\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={wrapperClasses}\n        data-testid={testId}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}\n      >\n        <svg\n          role=\"presentation\"\n          width={viewBoxSize}\n          height={viewBoxSize}\n          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n          className={styles['progressbar__svg']}\n        >\n          <circle cx={viewBoxCenter} cy={viewBoxCenter} r={radius} stroke={circleBackgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n          <circle\n            cx={viewBoxCenter}\n            cy={viewBoxCenter}\n            r={radius}\n            stroke={mainColor}\n            strokeWidth={strokeWidth}\n            fill=\"none\"\n            strokeDasharray={circumference}\n            strokeDashoffset={strokeDashoffset}\n            className={styles['progressbar__progress-circle']}\n            transform={`rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`}\n          />\n          <text\n            className=\"progress-wheel__text--large\"\n            fontSize={'1.5rem'}\n            fill={mainColor}\n            x={viewBoxCenter}\n            y={viewBoxCenter}\n            textAnchor=\"middle\"\n            alignmentBaseline=\"middle\"\n          >\n            {size === ProgressbarSize.large && valueText}\n          </text>\n        </svg>\n      </div>\n      <div className={styles['progressbar__sr-only-text']} aria-live=\"assertive\" aria-atomic=\"true\">\n        {valueText}\n      </div>\n    </>\n  );\n};\n\nexport default Progressbar;\n","import Progressbar from './Progressbar';\nexport * from './Progressbar';\nexport default Progressbar;\n"],"mappings":";;;;;;AASA,IAAY,kBAAA,yBAAA,mBAAL;AACL,mBAAA,WAAA;AACA,mBAAA,YAAA;AACA,mBAAA,WAAA;;;AAGF,IAAY,kBAAA,yBAAA,mBAAL;AACL,mBAAA,YAAA;AACA,mBAAA,aAAA;;;AAGF,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,YAAA;;;AAiBF,IAAMA,eAA2C,EAC/C,OACA,OAAO,gBAAgB,OACvB,OAAO,gBAAgB,SACvB,SACA,QACA,gBACsB;AACtB,KAAI,QACF,QAAO,gBAAgB;AAGzB,SAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,IAAI,CAAC;CAEzC,IAAI;AACJ,KAAI,SAAS,gBAAgB,MAC3B,SAAQ;UACC,SAAS,gBAAgB,OAClC,SAAQ;KAER,SAAQ;CAGV,MAAM,cAAc,QAAQ;CAC5B,MAAM,cAAc;CACpB,MAAM,SAAS,cAAc,cAAc;CAC3C,MAAM,cAAc,cAAc;CAClC,MAAM,gBAAgB;CACtB,MAAM,wBAAwB,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CAChG,MAAM,YAAY,SAAS,gBAAgB,UAAU,QAAQ,eAAe,QAAQ;CACpF,MAAM,gBAAgB,IAAI,KAAK,KAAK;CACpC,MAAM,mBAAmB,gBAAiB,QAAQ,MAAO;CACzD,MAAM,YAAY,GAAG,MAAM;CAE3B,MAAM,aAAa,OAAuB,KAAK;AAE/C,iBAAgB;AACd,MAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,MACnE,YAAW,QAAQ,cAAc,MAAM,WAAW;IAEnD,EAAE,CAAC;AAQN,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EACC,KAAK;EACL,WAViB,GAAW;IAC/B,OAAO,0BAA0B;IACjC,OAAO,iCAAiC,YAAY,QAAQ;IAC5D,OAAO,iCAAiC,YAAY,QAAQ;GAC9D,CAAC;EAOI,eAAa;EACb,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,eAAe,GAAG,EAAE;YAEzE,qBAAC,OAAA;GACC,MAAK;GACL,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,YAAY,GAAG;GAC/B,WAAW,OAAO;;IAElB,oBAAC,UAAA;KAAO,IAAI;KAAe,IAAI;KAAe,GAAG;KAAQ,QAAQ;KAAoC;KAAa,MAAK;MAAS;IAChI,oBAAC,UAAA;KACC,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,QAAQ;KACK;KACb,MAAK;KACL,iBAAiB;KACC;KAClB,WAAW,OAAO;KAClB,WAAW,cAAc,cAAc,GAAG,cAAc;MACxD;IACF,oBAAC,QAAA;KACC,WAAU;KACV,UAAU;KACV,MAAM;KACN,GAAG;KACH,GAAG;KACH,YAAW;KACX,mBAAkB;eAEjB,SAAS,gBAAgB,SAAS;MAC9B;;IACH;GACF,EACN,oBAAC,OAAA;EAAI,WAAW,OAAO;EAA8B,aAAU;EAAY,eAAY;YACpF;GACG,CAAA,EAAA,CACL;;ACtIP,IAAA,sBD0Ie"}

package/lib/components/PromoPanel/index.js

@@ -18,7 +18,7 @@ import "../../Illustration.js";
 import "../../IllustrationNames.js";
 import { t as LazyIllustration_default } from "../../LazyIllustration.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var PromoPanelLink = (props) => {
@@ -39,7 +39,7 @@ var PromoPanel = (props) => {
 	const { isHovered, refObject } = usePseudoClasses();
 	const { color = "neutral", titleHtmlMarkup = "h2", linkHtmlMarkup = "a" } = props;
 	const breakpoint = useBreakpoint();
-	const promoPanelClasses = classNames(styles.promopanel, styles[`promopanel--${color}`], !props.illustration && styles["promopanel--no-illustration"]);
+	const promoPanelClasses = cn(styles.promopanel, styles[`promopanel--${color}`], !props.illustration && styles["promopanel--no-illustration"]);
 	const promoPanelLink = /* @__PURE__ */ jsx(PromoPanelLink, {
 		href: props.href,
 		target: props.target,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PromoPanelLink: React.FC<PromoPanelLinkProps>","PromoPanel: React.FC<PromoPanelProps>"],"sources":["../../../src/components/PromoPanel/PromoPanel.tsx","../../../src/components/PromoPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={refObject}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n","import PromoPanel from './PromoPanel';\nexport * from './PromoPanel';\nexport default PromoPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsDA,IAAMA,kBAAgD,UAAS;AAC7D,KAAI,MAAM,cACR,QAAO,MAAM,aAAa,MAAM,eAAe,EAAE,UAAU,MAAM,UAAU,CAAC;AAG9E,KAAI,MAAM,mBAAmB,SAC3B,QACE,oBAAC,UAAA;EAAO,MAAM;EAAU,SAAS,MAAM;YACpC,MAAM;GACA;AAGb,QACE,oBAAC,KAAA;EAAE,MAAM,MAAM;EAAM,QAAQ,MAAM;EAAQ,SAAS,MAAM;YACvD,MAAM;GACL;;AAIR,IAAMC,cAAwC,UAAS;CACrD,MAAM,EAAE,WAAW,cAAc,kBAAkC;CAEnE,MAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;CAE5E,MAAM,aAAa,eAAe;CAElC,MAAM,oBAAoB,WACxB,OAAO,YACP,OAAO,eAAe,UACtB,CAAC,MAAM,gBAAgB,OAAO,+BAC/B;CAED,MAAM,iBACJ,oBAAC,gBAAA;EACC,MAAM,MAAM;EACZ,QAAQ,MAAM;EACd,eAAe,MAAM;EACL;EAChB,aAAa,MAAM;YAElB,MAAM,SAAS,MAAM;GACP;CAGnB,MAAM,0BAAkC;AACtC,MAAI,cAAc,WAAW,GAC3B,QAAO;AAGT,SAAO;KACL;AAEJ,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,KAAK;;GAC1G,MAAM,gBACL,oBAAC,0BAAA;IACC,kBAAkB,MAAM;IACxB,MAAM;IACC;IACP,WAAW,OAAO;KAClB;GAEJ,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,MAAM,SACL,oBAAC,eAAA;KAAM,YAAY;KAAiB,YAAY;eAC7C;MACK,EAET,CAAC,MAAM,QAAQ,iBAAiB,MAAM,SAAA;KACnC;GACN,oBAAC,cAAA;IACC,WAAW,OAAO;IAClB,SAAS,MAAM,WAAW,WAAW,uBAAe;IACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;IACnD;IACX,OAAO,SAAS,aAAa,IAAI;IACjC,YAAY,SAAS,aAAa,IAAI;KACtC;;GACE;;AClIV,IAAA,qBDsIe"}
+{"version":3,"file":"index.js","names":["PromoPanelLink: React.FC<PromoPanelLinkProps>","PromoPanel: React.FC<PromoPanelProps>"],"sources":["../../../src/components/PromoPanel/PromoPanel.tsx","../../../src/components/PromoPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\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, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const { color = 'neutral', titleHtmlMarkup = 'h2', linkHtmlMarkup = 'a' } = props;\n\n  const breakpoint = useBreakpoint();\n\n  const promoPanelClasses = classNames(\n    styles.promopanel,\n    styles[`promopanel--${color}`],\n    !props.illustration && styles['promopanel--no-illustration']\n  );\n\n  const promoPanelLink = (\n    <PromoPanelLink\n      href={props.href}\n      target={props.target}\n      linkComponent={props.linkComponent}\n      linkHtmlMarkup={linkHtmlMarkup}\n      linkOnClick={props.linkOnClick}\n    >\n      {props.title || props.children}\n    </PromoPanelLink>\n  );\n\n  const illustrationSize = ((): number => {\n    if (breakpoint >= Breakpoint.md) {\n      return 156;\n    }\n\n    return 110;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={refObject}>\n      {props.illustration && (\n        <LazyIllustration\n          illustrationName={props.illustration}\n          size={illustrationSize}\n          color={color}\n          className={styles.promopanel__illustration}\n        />\n      )}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <Icon\n        className={styles.promopanel__icon}\n        svgIcon={props.target === '_blank' ? ArrowUpRight : ArrowRight}\n        size={breakpoint >= Breakpoint.md ? IconSize.Small : IconSize.XSmall}\n        isHovered={isHovered}\n        color={getColor('blueberry', 500)}\n        hoverColor={getColor('blueberry', 600)}\n      />\n    </div>\n  );\n};\n\nexport default PromoPanel;\n","import PromoPanel from './PromoPanel';\nexport * from './PromoPanel';\nexport default PromoPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsDA,IAAMA,kBAAgD,UAAS;AAC7D,KAAI,MAAM,cACR,QAAO,MAAM,aAAa,MAAM,eAAe,EAAE,UAAU,MAAM,UAAU,CAAC;AAG9E,KAAI,MAAM,mBAAmB,SAC3B,QACE,oBAAC,UAAA;EAAO,MAAM;EAAU,SAAS,MAAM;YACpC,MAAM;GACA;AAGb,QACE,oBAAC,KAAA;EAAE,MAAM,MAAM;EAAM,QAAQ,MAAM;EAAQ,SAAS,MAAM;YACvD,MAAM;GACL;;AAIR,IAAMC,cAAwC,UAAS;CACrD,MAAM,EAAE,WAAW,cAAc,kBAAkC;CAEnE,MAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;CAE5E,MAAM,aAAa,eAAe;CAElC,MAAM,oBAAoB,GACxB,OAAO,YACP,OAAO,eAAe,UACtB,CAAC,MAAM,gBAAgB,OAAO,+BAC/B;CAED,MAAM,iBACJ,oBAAC,gBAAA;EACC,MAAM,MAAM;EACZ,QAAQ,MAAM;EACd,eAAe,MAAM;EACL;EAChB,aAAa,MAAM;YAElB,MAAM,SAAS,MAAM;GACP;CAGnB,MAAM,0BAAkC;AACtC,MAAI,cAAc,WAAW,GAC3B,QAAO;AAGT,SAAO;KACL;AAEJ,QACE,qBAAC,OAAA;EAAI,WAAW;EAAmB,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,KAAK;;GAC1G,MAAM,gBACL,oBAAC,0BAAA;IACC,kBAAkB,MAAM;IACxB,MAAM;IACC;IACP,WAAW,OAAO;KAClB;GAEJ,qBAAC,OAAA;IAAI,WAAW,OAAO;eACpB,MAAM,SACL,oBAAC,eAAA;KAAM,YAAY;KAAiB,YAAY;eAC7C;MACK,EAET,CAAC,MAAM,QAAQ,iBAAiB,MAAM,SAAA;KACnC;GACN,oBAAC,cAAA;IACC,WAAW,OAAO;IAClB,SAAS,MAAM,WAAW,WAAW,uBAAe;IACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;IACnD;IACX,OAAO,SAAS,aAAa,IAAI;IACjC,YAAY,SAAS,aAAa,IAAI;KACtC;;GACE;;AClIV,IAAA,qBDsIe"}

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

@@ -447,26 +447,3 @@ $padding-clickable-area-left: 8px;
   margin-top: -$padding-clickable-area-top-bottom;
   padding-left: calc(2.8rem + $padding-clickable-area-left);
 }
-
-/******** RESET *********/
-@mixin reset-radio-button() {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-
-  & + label {
-    cursor: pointer;
-    display: block;
-    font-size: 18px;
-    font-weight: 400;
-    margin: 0;
-    word-break: normal;
-    overflow-wrap: break-word;
-    hyphens: auto;
-  }
-}

package/lib/components/ServiceMessage/index.js

@@ -23,7 +23,7 @@ import { t as ChevronDown_default } from "../../ChevronDown.js";
 import { t as ChevronUp_default } from "../../ChevronUp.js";
 import { t as Forward_default } from "../../Forward.js";
 import React, { useId, useState } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {
@@ -32,7 +32,7 @@ var Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpan
 	const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;
 	const CustomTag = hasExpander ? "button" : "span";
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["service-message__label-container"], hasExpander && styles[`service-message__label-container--has-expander`]),
+		className: cn(styles["service-message__label-container"], hasExpander && styles[`service-message__label-container--has-expander`]),
 		ref: refObject,
 		children: /* @__PURE__ */ jsx("div", {
 			className: styles["service-message__container"],
@@ -93,7 +93,7 @@ var Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnTe
 							children: info
 						}),
 						extraInfo && /* @__PURE__ */ jsx("p", {
-							className: classNames(styles["service-message__info"], styles["service-message__info--extra"]),
+							className: cn(styles["service-message__info"], styles["service-message__info--extra"]),
 							children: extraInfo
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -111,7 +111,7 @@ var Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnTe
 								})]
 							}), dismissable && /* @__PURE__ */ jsxs("button", {
 								ref: closeButtonRef,
-								className: classNames(styles["service-message__action"], styles["service-message__action--close"]),
+								className: cn(styles["service-message__action"], styles["service-message__action--close"]),
 								"aria-label": closeBtnText,
 								onClick: onDismiss,
 								children: [closeBtnText, /* @__PURE__ */ jsx(Icon_default, {
@@ -141,7 +141,7 @@ var ServiceMessage = ({ label, dismissable = true, onDismiss, info, extraInfo, u
 		if (hasExpander) setIsExpanded(!isExpanded);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(styles["service-message"], styles[`service-message--${variant}`]),
+		className: cn(styles["service-message"], styles[`service-message--${variant}`]),
 		role: ariaRole,
 		...ariaLabelAttributes,
 		"data-testid": testId,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Label: React.FC<LabelProps>","Content: React.FC<ContentProps>","ServiceMessage: React.FC<ServiceMessageProps>"],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={refObject}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (hasExpander) setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAMA,SAA+B,EAAE,OAAO,SAAS,IAAI,aAAa,YAAY,aAAa,UAAU,WAAW,mBAAmB;CACvI,MAAM,aAAa,eAAe;CAClC,MAAM,EAAE,WAAW,cAAc,kBAAkC;CAEnE,MAAM,WAAW,aAAa,YAAY,KAAK,SAAS,SAAS,SAAS;CAC1E,MAAM,YAAY,cAAc,WAAW;AAO3C,QACE,oBAAC,OAAA;EAAI,WANuB,WAC5B,OAAO,qCACP,eAAe,OAAO,kDACvB;EAGwC,KAAK;YAC1C,oBAAC,OAAA;GAAI,WAAW,OAAO;aACrB,oBAAC,OAAA;IAAI,WAAW,OAAO;cACrB,oBAAC,OAAA;KAAI,WAAW,OAAO;eACrB,qBAAC,OAAA;MAAI,WAAW,OAAO;;OACrB,oBAAC,2BAAA;QAA2B;QAAS,MAAM;QAAqB;SAAa;OAC7E,oBAAC,MAAA;QAAG,WAAW,OAAO;QAA+B;kBACnD,oBAAC,WAAA;SACC,WAAW,OAAO;SAClB,SAAS,cAAc,WAAW,KAAA;SAClC,iBAAe,cAAc,aAAa,KAAA;mBAEzC;UACS;SACT;OACJ,eAAe,oBAAC,cAAA;QAAK,MAAM;QAAU,SAAS,aAAa,oBAAY;QAAwB;SAAa;OAC5G,CAAC,eAAe,eACf,oBAAC,eAAA;QAAM,SAAS;QAAW,WAAW;QAAc,WAAW,OAAO;SAA6B;;OAEjG;MACF;KACF;IACF;GACF;;AAeV,IAAMC,WAAmC,EAAE,MAAM,WAAW,UAAU,KAAK,QAAQ,aAAa,cAAc,gBAAgB;CAC5H,MAAM,EAAE,WAAW,aAAa,WAAW,8BAA8B,kBAAqC;CAC9G,MAAM,EAAE,WAAW,gBAAgB,WAAW,yBAAyB,kBAAqC;CAE5G,MAAM,SAAS,OAAO;AAEtB,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;YACrB,oBAAC,OAAA;GAAI,WAAW,OAAO;aACrB,oBAAC,OAAA;IAAI,WAAW,OAAO;cACrB,qBAAC,OAAA;KAAI,WAAW,OAAO;;MACpB,QAAQ,oBAAC,KAAA;OAAE,WAAW,OAAO;iBAA2B;QAAS;MACjE,aACC,oBAAC,KAAA;OAAE,WAAW,WAAW,OAAO,0BAA0B,OAAO,gCAAgC;iBAAG;QAAc;MAEpH,qBAAC,OAAA;OAAI,WAAW,OAAO;kBACpB,UACC,qBAAC,KAAA;QAAE,WAAW,OAAO;QAA4B,MAAM;QAAK,KAAK;QAAqB;mBACnF,UACD,oBAAC,cAAA;SAAK,MAAM,SAAS;SAAQ,SAAS;SAAS,OAAO,SAAS,aAAa,IAAI;SAAE,WAAW;UAA6B,CAAA;SACxH,EAGL,eACC,qBAAC,UAAA;QACC,KAAK;QACL,WAAW,WAAW,OAAO,4BAA4B,OAAO,kCAAkC;QAClG,cAAY;QACZ,SAAS;mBAER,cACD,oBAAC,cAAA;SAAK,MAAM,SAAS;SAAQ,SAAS;SAAG,OAAO,SAAS,aAAa,IAAI;SAAE,WAAW;UAAwB,CAAA;SACxG,CAAA;QAEP;;MACF;KACF;IACF;GACF;;AA+BV,IAAMC,kBAAiD,EACrD,OACA,cAAc,MACd,WACA,MACA,WACA,UACA,KACA,SAAS,SACT,eAAe,iBACf,wBAAwB,OACxB,UAAU,SACV,aACI;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAkB,sBAAsB;CAE5E,MAAM,UAAU,OAAO;CACvB,MAAM,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC;CAEhC,MAAM,WAAW,YAAY,UAAU,UAAU;CACjD,MAAM,sBAAsB,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC;CAE1E,MAAM,oBAA0B;AAC9B,MAAI,YAAa,eAAc,CAAC,WAAW;;AAK7C,QACE,qBAAC,OAAA;EAAI,WAHS,WAAW,OAAO,oBAAoB,OAAO,oBAAoB,WAAW;EAGjE,MAAM;EAAU,GAAI;EAAqB,eAAa;aAC7E,oBAAC,OAAA;GACQ;GACE;GACT,IAAI;GACS;GACD;GACC;GACb,UAAU;GACC;GACG;IACd,EACD,eAAe,cACd,oBAAC,SAAA;GACO;GACK;GACD;GACL;GACG;GACK;GACF;GACG;IACd,CAAA;GAEA;;AC5MV,IAAA,yBDgNe"}
+{"version":3,"file":"index.js","names":["Label: React.FC<LabelProps>","Content: React.FC<ContentProps>","ServiceMessage: React.FC<ServiceMessageProps>"],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={refObject}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (hasExpander) setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAMA,SAA+B,EAAE,OAAO,SAAS,IAAI,aAAa,YAAY,aAAa,UAAU,WAAW,mBAAmB;CACvI,MAAM,aAAa,eAAe;CAClC,MAAM,EAAE,WAAW,cAAc,kBAAkC;CAEnE,MAAM,WAAW,aAAa,YAAY,KAAK,SAAS,SAAS,SAAS;CAC1E,MAAM,YAAY,cAAc,WAAW;AAO3C,QACE,oBAAC,OAAA;EAAI,WANuB,GAC5B,OAAO,qCACP,eAAe,OAAO,kDACvB;EAGwC,KAAK;YAC1C,oBAAC,OAAA;GAAI,WAAW,OAAO;aACrB,oBAAC,OAAA;IAAI,WAAW,OAAO;cACrB,oBAAC,OAAA;KAAI,WAAW,OAAO;eACrB,qBAAC,OAAA;MAAI,WAAW,OAAO;;OACrB,oBAAC,2BAAA;QAA2B;QAAS,MAAM;QAAqB;SAAa;OAC7E,oBAAC,MAAA;QAAG,WAAW,OAAO;QAA+B;kBACnD,oBAAC,WAAA;SACC,WAAW,OAAO;SAClB,SAAS,cAAc,WAAW,KAAA;SAClC,iBAAe,cAAc,aAAa,KAAA;mBAEzC;UACS;SACT;OACJ,eAAe,oBAAC,cAAA;QAAK,MAAM;QAAU,SAAS,aAAa,oBAAY;QAAwB;SAAa;OAC5G,CAAC,eAAe,eACf,oBAAC,eAAA;QAAM,SAAS;QAAW,WAAW;QAAc,WAAW,OAAO;SAA6B;;OAEjG;MACF;KACF;IACF;GACF;;AAeV,IAAMC,WAAmC,EAAE,MAAM,WAAW,UAAU,KAAK,QAAQ,aAAa,cAAc,gBAAgB;CAC5H,MAAM,EAAE,WAAW,aAAa,WAAW,8BAA8B,kBAAqC;CAC9G,MAAM,EAAE,WAAW,gBAAgB,WAAW,yBAAyB,kBAAqC;CAE5G,MAAM,SAAS,OAAO;AAEtB,QACE,oBAAC,OAAA;EAAI,WAAW,OAAO;YACrB,oBAAC,OAAA;GAAI,WAAW,OAAO;aACrB,oBAAC,OAAA;IAAI,WAAW,OAAO;cACrB,qBAAC,OAAA;KAAI,WAAW,OAAO;;MACpB,QAAQ,oBAAC,KAAA;OAAE,WAAW,OAAO;iBAA2B;QAAS;MACjE,aACC,oBAAC,KAAA;OAAE,WAAW,GAAW,OAAO,0BAA0B,OAAO,gCAAgC;iBAAG;QAAc;MAEpH,qBAAC,OAAA;OAAI,WAAW,OAAO;kBACpB,UACC,qBAAC,KAAA;QAAE,WAAW,OAAO;QAA4B,MAAM;QAAK,KAAK;QAAqB;mBACnF,UACD,oBAAC,cAAA;SAAK,MAAM,SAAS;SAAQ,SAAS;SAAS,OAAO,SAAS,aAAa,IAAI;SAAE,WAAW;UAA6B,CAAA;SACxH,EAGL,eACC,qBAAC,UAAA;QACC,KAAK;QACL,WAAW,GAAW,OAAO,4BAA4B,OAAO,kCAAkC;QAClG,cAAY;QACZ,SAAS;mBAER,cACD,oBAAC,cAAA;SAAK,MAAM,SAAS;SAAQ,SAAS;SAAG,OAAO,SAAS,aAAa,IAAI;SAAE,WAAW;UAAwB,CAAA;SACxG,CAAA;QAEP;;MACF;KACF;IACF;GACF;;AA+BV,IAAMC,kBAAiD,EACrD,OACA,cAAc,MACd,WACA,MACA,WACA,UACA,KACA,SAAS,SACT,eAAe,iBACf,wBAAwB,OACxB,UAAU,SACV,aACI;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAkB,sBAAsB;CAE5E,MAAM,UAAU,OAAO;CACvB,MAAM,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC;CAEhC,MAAM,WAAW,YAAY,UAAU,UAAU;CACjD,MAAM,sBAAsB,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC;CAE1E,MAAM,oBAA0B;AAC9B,MAAI,YAAa,eAAc,CAAC,WAAW;;AAK7C,QACE,qBAAC,OAAA;EAAI,WAHS,GAAW,OAAO,oBAAoB,OAAO,oBAAoB,WAAW;EAGjE,MAAM;EAAU,GAAI;EAAqB,eAAa;aAC7E,oBAAC,OAAA;GACQ;GACE;GACT,IAAI;GACS;GACD;GACC;GACb,UAAU;GACC;GACG;IACd,EACD,eAAe,cACd,oBAAC,SAAA;GACO;GACK;GACD;GACL;GACG;GACK;GACF;GACG;IACd,CAAA;GAEA;;AC5MV,IAAA,yBDgNe"}

package/lib/components/SharingStatus/index.js

@@ -2,14 +2,14 @@ import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
 import { t as palette } from "../../palette.js";
 import { t as Icon_default } from "../../Icon.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var SharingStatus = (props) => {
 	const { color = "neutral", icon, children, className, testId, wrapText } = props;
-	const sharingStatusClasses = classNames(styles["sharing-status"], className);
-	const dotClasses = classNames(styles["sharing-status__dot"], styles[`sharing-status__dot--${color}`]);
-	const labelClasses = classNames(styles["sharing-status__label"], styles[`sharing-status__label--${color}`], { [styles["sharing-status__label--wrap"]]: wrapText });
+	const sharingStatusClasses = cn(styles["sharing-status"], className);
+	const dotClasses = cn(styles["sharing-status__dot"], styles[`sharing-status__dot--${color}`]);
+	const labelClasses = cn(styles["sharing-status__label"], styles[`sharing-status__label--${color}`], { [styles["sharing-status__label--wrap"]]: wrapText });
 	return /* @__PURE__ */ jsxs("span", {
 		className: sharingStatusClasses,
 		"data-testid": testId,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SharingStatus: React.FC<SharingStatusProps>"],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n","import SharingStatus from './SharingStatus';\nexport * from './SharingStatus';\nexport default SharingStatus;\n"],"mappings":";;;;;;;AA2BA,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,WAAW,OAAO,mBAAmB,UAAU;CAC5E,MAAM,aAAa,WAAW,OAAO,wBAAwB,OAAO,wBAAwB,SAAS;CACrG,MAAM,eAAe,WAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,UAC1C,CAAC;AAEF,QACE,qBAAC,QAAA;EAAK,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;aACxF,oBAAC,QAAA;GAAK,WAAW;aACf,oBAAC,cAAA;IAAK,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;KAAW;IAChE,EACP,oBAAC,QAAA;GAAK,WAAW;GAAe;IAAgB,CAAA;GAC3C;;ACxCX,IAAA,wBD4Ce"}
+{"version":3,"file":"index.js","names":["SharingStatus: React.FC<SharingStatusProps>"],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n","import SharingStatus from './SharingStatus';\nexport * from './SharingStatus';\nexport default SharingStatus;\n"],"mappings":";;;;;;;AA2BA,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,GAAW,OAAO,mBAAmB,UAAU;CAC5E,MAAM,aAAa,GAAW,OAAO,wBAAwB,OAAO,wBAAwB,SAAS;CACrG,MAAM,eAAe,GAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,UAC1C,CAAC;AAEF,QACE,qBAAC,QAAA;EAAK,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;aACxF,oBAAC,QAAA;GAAK,WAAW;aACf,oBAAC,cAAA;IAAK,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;KAAW;IAChE,EACP,oBAAC,QAAA;GAAK,WAAW;GAAe;IAAgB,CAAA;GAC3C;;ACxCX,IAAA,wBD4Ce"}

package/lib/components/Step/index.js

@@ -1,7 +1,7 @@
 import { n as AnalyticsId } from "../../constants2.js";
 import { t as StepButtons_default } from "../../StepButtons.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var Step = ({ stepper, children, className, contentClassName, backButton, forwardButton, additionalButtons, cancelButton, stickyButtons = false, testId }) => {
@@ -16,7 +16,7 @@ var Step = ({ stepper, children, className, contentClassName, backButton, forwar
 				children: stepper
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: classNames(styles.step__content, contentClassName),
+				className: cn(styles.step__content, contentClassName),
 				children
 			}),
 			hasNavigation && /* @__PURE__ */ jsx(StepButtons_default, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Step: React.FC<StepProps>"],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n","import Step from './Step';\nexport * from './Step';\nexport default Step;\n"],"mappings":";;;;;;AAkCA,IAAMA,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,QACE,qBAAC,OAAA;EAAI,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;;GACtE,WAAW,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAgB;KAAc;GACjE,oBAAC,OAAA;IAAI,WAAW,WAAW,OAAO,eAAe,iBAAiB;IAAG;KAAe;GACnF,iBACC,oBAAC,qBAAA;IACa;IACG;IACI;IACL;IACd,QAAQ;KACR;;GAEA;;AC3DV,IAAA,eD+De"}
+{"version":3,"file":"index.js","names":["Step: React.FC<StepProps>"],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n","import Step from './Step';\nexport * from './Step';\nexport default Step;\n"],"mappings":";;;;;;AAkCA,IAAMA,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,QACE,qBAAC,OAAA;EAAI,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;;GACtE,WAAW,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAgB;KAAc;GACjE,oBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,eAAe,iBAAiB;IAAG;KAAe;GACnF,iBACC,oBAAC,qBAAA;IACa;IACG;IACI;IACL;IACd,QAAQ;KACR;;GAEA;;AC3DV,IAAA,eD+De"}

package/lib/components/Stepper/index.js

@@ -3,7 +3,7 @@ import { n as getAriaLabelAttributes } from "../../accessibility.js";
 import "../../debounce.js";
 import { t as useSize } from "../../useSize.js";
 import React, { useRef } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 var MARKER_DOT_MIN_DISTANCE_PX = 4;
@@ -29,7 +29,7 @@ const getValidatedProps = (value, min, max) => {
 };
 var Dot = ({ index, completed, distanceBetweenDots, position }) => {
 	return /* @__PURE__ */ jsx("span", {
-		className: classNames(styles.stepper__dot, completed && styles["stepper__dot--completed"], position && styles[`stepper__dot--${position}`]),
+		className: cn(styles.stepper__dot, completed && styles["stepper__dot--completed"], position && styles[`stepper__dot--${position}`]),
 		style: !position && typeof index !== "undefined" && typeof distanceBetweenDots !== "undefined" ? { left: `${index * distanceBetweenDots + 8}px` } : void 0,
 		"data-testid": "dot"
 	});