@helsenorge/designsystem-react 15.5.0 → 15.5.1

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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' | 'none';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\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.FC<NotificationPanelProps> = props => {\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    ref,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): React.ReactNode => {\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 && ariaRole !== 'none' ? 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":";;;;;;;;;;;;AAgEA,IAAM,gBAA0C,EAAE,OAAO,eAAe;CACtE,IAAI,OAGF,OAAO,oBAAC,OAAD;EAAK,WAFS,WAAW,OAAO,gBAEhB;EAAe;CAAc,CAAA;CAEtD,OAAO;AACT;AAEA,IAAM,qBAAsD,UAAS;CACnE,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,QACA,QACE;CACJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,qBAAqB;CAC5E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAuC;EAC3C,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,8BAA8B;EACvE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;EAClD,CAAC;EACD,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;EACrD,CAAC;EAGD,OACE,qBAAC,OAAD;GAAK,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;aAAvD;IACG,SACC,oBAAC,iBAAD;KAAW,WAAW;KAAc,IAAI;eACrC;IACQ,CAAA;IAEZ,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAkB;IAAc,CAAA;IAC5D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAD;KACE,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;IACO,CAAA;GAET;;CAET;CAEA,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;CAC/C,GACA,SACF;CAEA,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,YAAY,aAAa,SAAS,uBAAuB;EAAE;EAAO,IAAI;CAAQ,CAAC,IAAI,KAAA;CAE/G,OACE,oBAAC,cAAD;EAAqB;YACnB,qBAAC,OAAD;GACO;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;aANN;IAQE,oBAAC,mBAAD;KACW;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;IACnB,CAAA;IACA,eACC,oBAAC,QAAD;KAAM,WAAW,OAAO;eACtB,oBAAC,eAAD;MAAO,WAAW,MAAM;MAA4B;MAAS,OAAM;KAAS,CAAA;IACxE,CAAA;IAEP,cAAc;GACZ;;CACO,CAAA;AAElB;;;AC9KA,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":[],"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' | 'none';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\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.FC<NotificationPanelProps> = props => {\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    ref,\n  } = props;\n  const labelId = useIdWithFallback(labelIdProp);\n  const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n  const isMobile = useIsMobileBreakpoint();\n\n  const renderContent = (): React.ReactNode => {\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 && ariaRole !== 'none' ? 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":";;;;;;;;;;;;AAgEA,IAAM,gBAA0C,EAAE,OAAO,eAAe;CACtE,IAAI,OAAO;EACT,MAAM,eAAe,WAAW,OAAO,gBAAgB;EAEvD,OAAO,oBAAC,OAAD;GAAK,WAAW;GAAe;EAAc,CAAA;CACtD;CACA,OAAO;AACT;AAEA,IAAM,qBAAsD,UAAS;CACnE,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,SAAS,aACT,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,QACA,QACE;CACJ,MAAM,UAAU,kBAAkB,WAAW;CAC7C,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,qBAAqB;CAC5E,MAAM,WAAW,sBAAsB;CAEvC,MAAM,sBAAuC;EAC3C,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,WAAW,OAAO,8BAA8B;EACvE,MAAM,eAAe,WAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;EAClD,CAAC;EACD,MAAM,kBAAkB,WAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;EACrD,CAAC;EAGD,OACE,qBAAC,OAAD;GAAK,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;GAAvD,UAAA;IACG,SACC,oBAAC,iBAAD;KAAW,WAAW;KAAc,IAAI;KACrC,UAAA;IACQ,CAAA;IAEZ,YAAY,oBAAC,OAAD;KAAK,WAAW;KAAkB;IAAc,CAAA;IAC5D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAD;KACE,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;KAEN,UAAA;IACO,CAAA;GAET;;CAET;CAEA,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;CAC/C,GACA,SACF;CAEA,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,YAAY,aAAa,SAAS,uBAAuB;EAAE;EAAO,IAAI;CAAQ,CAAC,IAAI,KAAA;CAE/G,OACE,oBAAC,cAAD;EAAqB;EACnB,UAAA,qBAAC,OAAD;GACO;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;GANN,UAAA;IAQE,oBAAC,mBAAD;KACW;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;IACnB,CAAA;IACA,eACC,oBAAC,QAAD;KAAM,WAAW,OAAO;KACtB,UAAA,oBAAC,eAAD;MAAO,WAAW,MAAM;MAA4B;MAAS,OAAM;KAAS,CAAA;IACxE,CAAA;IAEP,cAAc;GACZ;;CACO,CAAA;AAElB;;;AC9KA,IAAA,4BAAe"}

package/lib/components/Panel/index.js

@@ -49,11 +49,6 @@ var ExpandButton = ({ onClick, isExpanded, resources }) => {
 };
 var PanelRoot = ({ layout = PanelLayout.vertical, variant = PanelVariant.fill, color = "neutral", stacking = PanelStacking.default, testId, children, expanded = false, focusable, status = PanelStatus.none, buttonBottomAriaLabel, buttonBottomOnClick, buttonBottomText, className, resources, onExpand, highlightText, ref }) => {
 	const panelListContext = React.useContext(PanelListContext);
-	const [preContainer, setPreContainer] = React.useState([]);
-	const [title, setTitle] = React.useState([]);
-	const [content, setContent] = React.useState([]);
-	const [expandableContent, setExpandableContent] = React.useState([]);
-	const [hasIcon, setHasIcon] = React.useState(false);
 	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
 	const localRef = React.useRef(null);
 	const panelRef = ref ?? localRef;
@@ -67,7 +62,7 @@ var PanelRoot = ({ layout = PanelLayout.vertical, variant = PanelVariant.fill, c
 		...getResources(language),
 		...resources
 	};
-	React.useEffect(() => {
+	const { preContainer, title, content, expandableContent, hasIcon } = React.useMemo(() => {
 		let index = 0;
 		let localHasIcon = false;
 		const newPreContainer = [];
@@ -88,12 +83,14 @@ var PanelRoot = ({ layout = PanelLayout.vertical, variant = PanelVariant.fill, c
 				else if (child.type === ExpandedContent) newExpandableContent.push(React.cloneElement(child, { key }));
 			}
 		});
-		setPreContainer(newPreContainer);
-		setTitle(newTitle);
-		setContent(newContent);
-		setExpandableContent(newExpandableContent);
-		setHasIcon(localHasIcon);
-	}, [children]);
+		return {
+			preContainer: newPreContainer,
+			title: newTitle,
+			content: newContent,
+			expandableContent: newExpandableContent,
+			hasIcon: localHasIcon
+		};
+	}, [children, effectiveHighlightText]);
 	React.useEffect(() => {
 		if (expanded) return;
 		if (isExpanded) {
@@ -222,26 +219,30 @@ var PreContainer = ({ children }) => {
 	});
 };
 var A = ({ children }) => {
+	const styling = classNames(styles["panel__content__item"], styles["panel__content__item--a"]);
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
+		className: styling,
 		children
 	});
 };
 var B = ({ children }) => {
+	const styling = classNames(styles["panel__content__item"], styles["panel__content__item--b"]);
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
+		className: styling,
 		children
 	});
 };
 var C = ({ children }) => {
+	const styling = classNames(styles["panel__content__item"], styles["panel__content__item--c"]);
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
+		className: styling,
 		children
 	});
 };
 var ExpandedContent = ({ children }) => {
+	const styling = classNames(styles["panel__expander__content"]);
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__expander__content"]),
+		className: styling,
 		children
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Panel.en-GB.json","../../../src/resources/HN.Designsystem.Panel.nb-NO.json","../../../src/components/Panel/resourceHelper.ts","../../../src/components/Panel/Panel.tsx","../../../src/components/Panel/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"See details\",\n  \"expandButtonClose\": \"Hide details\"\n}\n","{\n  \"expandButtonOpen\": \"Se detaljer\",\n  \"expandButtonClose\": \"Skjul detaljer\"\n}\n","import type { HNDesignsystemPanel } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PanelTitleProps } from './PanelTitle';\nimport type { HNDesignsystemPanel } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nimport PanelTitle from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { PanelListContext } from '../PanelList/utils';\n\nimport styles from './styles.module.scss';\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Expands or collapses the panel. Only applicable when ExpandedContent is used */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: (isExpanded?: boolean) => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /** Ref passed to the panel container */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot: React.FC<PanelProps> = ({\n  layout = PanelLayout.vertical,\n  variant = PanelVariant.fill,\n  color = 'neutral',\n  stacking = PanelStacking.default,\n  testId,\n  children,\n  expanded = false,\n  focusable,\n  status = PanelStatus.none,\n  buttonBottomAriaLabel,\n  buttonBottomOnClick,\n  buttonBottomText,\n  className,\n  resources,\n  onExpand,\n  highlightText,\n  ref,\n}: PanelProps) => {\n  const panelListContext = React.useContext(PanelListContext);\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  // Use context values if available, otherwise use props\n  const effectiveVariant = panelListContext?.variant ?? variant;\n  const effectiveHighlightText = panelListContext?.highlightText ?? highlightText;\n  const effectiveClassName = panelListContext?.applyPanelClassName(className) ?? className;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let index = 0;\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        const key = child.key ?? `panel-child-${index++}`;\n\n        if (child.type === PreContainer) {\n          newPreContainer.push(React.cloneElement(child, { key }));\n        } else if (isComponent<PanelTitleProps>(child, PanelTitle)) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, {\n              key,\n              highlightText: child.props.highlightText || effectiveHighlightText,\n            })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(React.cloneElement(child, { key }));\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(React.cloneElement(child, { key }));\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    if (expanded) {\n      // Hvis panel åpnes controlled skal ikke scroll skje\n      return;\n    }\n    // Scroller oppover når expanded content åpnes uncontrolled\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = effectiveVariant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(effectiveClassName, {\n    [styles['panel__border--outline--outer']]: effectiveVariant === PanelVariant.outline,\n    [styles['panel__border--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: effectiveVariant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: effectiveVariant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: effectiveVariant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]:\n      !isExpanded && status === PanelStatus.none && effectiveVariant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n            <Highlighter searchText={effectiveHighlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={effectiveHighlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n          <Highlighter searchText={effectiveHighlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n","import Panel from './Panel';\nexport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nexport * from './Panel';\nexport default Panel;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/resources/HN.Designsystem.Panel.en-GB.json","../../../src/resources/HN.Designsystem.Panel.nb-NO.json","../../../src/components/Panel/resourceHelper.ts","../../../src/components/Panel/Panel.tsx","../../../src/components/Panel/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"See details\",\n  \"expandButtonClose\": \"Hide details\"\n}\n","{\n  \"expandButtonOpen\": \"Se detaljer\",\n  \"expandButtonClose\": \"Skjul detaljer\"\n}\n","import type { HNDesignsystemPanel } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PanelTitleProps } from './PanelTitle';\nimport type { HNDesignsystemPanel } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nimport PanelTitle from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { PanelListContext } from '../PanelList/utils';\n\nimport styles from './styles.module.scss';\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Expands or collapses the panel. Only applicable when ExpandedContent is used */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: (isExpanded?: boolean) => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /** Ref passed to the panel container */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot: React.FC<PanelProps> = ({\n  layout = PanelLayout.vertical,\n  variant = PanelVariant.fill,\n  color = 'neutral',\n  stacking = PanelStacking.default,\n  testId,\n  children,\n  expanded = false,\n  focusable,\n  status = PanelStatus.none,\n  buttonBottomAriaLabel,\n  buttonBottomOnClick,\n  buttonBottomText,\n  className,\n  resources,\n  onExpand,\n  highlightText,\n  ref,\n}: PanelProps) => {\n  const panelListContext = React.useContext(PanelListContext);\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  // Use context values if available, otherwise use props\n  const effectiveVariant = panelListContext?.variant ?? variant;\n  const effectiveHighlightText = panelListContext?.highlightText ?? highlightText;\n  const effectiveClassName = panelListContext?.applyPanelClassName(className) ?? className;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const { preContainer, title, content, expandableContent, hasIcon } = React.useMemo(() => {\n    let index = 0;\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        const key = child.key ?? `panel-child-${index++}`;\n\n        if (child.type === PreContainer) {\n          newPreContainer.push(React.cloneElement(child, { key }));\n        } else if (isComponent<PanelTitleProps>(child, PanelTitle)) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, {\n              key,\n              highlightText: child.props.highlightText || effectiveHighlightText,\n            })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(React.cloneElement(child, { key }));\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(React.cloneElement(child, { key }));\n        }\n      }\n    });\n\n    return {\n      preContainer: newPreContainer,\n      title: newTitle,\n      content: newContent,\n      expandableContent: newExpandableContent,\n      hasIcon: localHasIcon,\n    };\n  }, [children, effectiveHighlightText]);\n\n  React.useEffect(() => {\n    if (expanded) {\n      // Hvis panel åpnes controlled skal ikke scroll skje\n      return;\n    }\n    // Scroller oppover når expanded content åpnes uncontrolled\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = effectiveVariant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(effectiveClassName, {\n    [styles['panel__border--outline--outer']]: effectiveVariant === PanelVariant.outline,\n    [styles['panel__border--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: effectiveVariant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: effectiveVariant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: effectiveVariant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: effectiveVariant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]:\n      !isExpanded && status === PanelStatus.none && effectiveVariant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n            <Highlighter searchText={effectiveHighlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={effectiveHighlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: effectiveVariant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n          <Highlighter searchText={effectiveHighlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={effectiveHighlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n","import Panel from './Panel';\nexport { PanelLayout, PanelStacking, PanelStatus, PanelVariant } from './constants';\nexport * from './Panel';\nexport default Panel;\n"],"mappings":"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"}

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.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PanelListContext, type PanelListContextValue } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { PanelVariant } from '../Panel/constants';\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  /** Ref passed to the container element */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst PanelList: React.FC<PanelListProps> = (props: PanelListProps) => {\n  const { testId, children, variant = PanelVariant.fill, highlightText, ref } = props;\n\n  const contextValue: PanelListContextValue = React.useMemo(\n    () => ({\n      variant,\n      highlightText,\n      applyPanelClassName: (existingClassName?: string) => classNames(existingClassName, styles[`panel-list__panel--${variant}`]),\n    }),\n    [variant, highlightText]\n  );\n\n  return (\n    <PanelListContext.Provider value={contextValue}>\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        {children}\n      </div>\n    </PanelListContext.Provider>\n  );\n};\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport * from './utils';\nexport default PanelList;\n"],"mappings":";;;;;;;AAuBA,IAAM,aAAuC,UAA0B;CACrE,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,eAAe,QAAQ;CAE9E,MAAM,eAAsC,MAAM,eACzC;EACL;EACA;EACA,sBAAsB,sBAA+B,WAAW,mBAAmB,OAAO,sBAAsB,UAAU;CAC5H,IACA,CAAC,SAAS,aAAa,CACzB;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;YAChC,oBAAC,OAAD;GACO;GACL,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW,WAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,QAAQ,CAAC;GAE1F;EACE,CAAA;CACoB,CAAA;AAE/B;;;AC5CA,IAAA,oBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { PanelListContext, type PanelListContextValue } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { PanelVariant } from '../Panel/constants';\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  /** Ref passed to the container element */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nconst PanelList: React.FC<PanelListProps> = (props: PanelListProps) => {\n  const { testId, children, variant = PanelVariant.fill, highlightText, ref } = props;\n\n  const contextValue: PanelListContextValue = React.useMemo(\n    () => ({\n      variant,\n      highlightText,\n      applyPanelClassName: (existingClassName?: string) => classNames(existingClassName, styles[`panel-list__panel--${variant}`]),\n    }),\n    [variant, highlightText]\n  );\n\n  return (\n    <PanelListContext.Provider value={contextValue}>\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        {children}\n      </div>\n    </PanelListContext.Provider>\n  );\n};\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport * from './utils';\nexport default PanelList;\n"],"mappings":";;;;;;;AAuBA,IAAM,aAAuC,UAA0B;CACrE,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,eAAe,QAAQ;CAE9E,MAAM,eAAsC,MAAM,eACzC;EACL;EACA;EACA,sBAAsB,sBAA+B,WAAW,mBAAmB,OAAO,sBAAsB,UAAU;CAC5H,IACA,CAAC,SAAS,aAAa,CACzB;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;EAChC,UAAA,oBAAC,OAAD;GACO;GACL,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW,WAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,QAAQ,CAAC;GAE1F;EACE,CAAA;CACoB,CAAA;AAE/B;;;AC5CA,IAAA,oBAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PopMenu/constants.ts","../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["export 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","import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LinkListProps, LinkProps } from '../LinkList';\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 from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList from '../LinkList';\nimport PopOver from '../PopOver';\nimport { PopMenuLabelPosition, type PopMenuVariant } from './constants';\n\nimport styles from './styles.module.scss';\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 { PopMenuVariant, PopMenuLabelPosition } from './constants';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,aAAA;CACA,eAAA,YAAA;CACA,eAAA,iBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;CACL,qBAAA,WAAA;CACA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;AC0CA,IAAa,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,sBAAsB;CAEvC,gBAAgB,gBAAgB;EAC9B,UAAU,KAAK;CACjB,CAAC;CAED,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,gBAAgB;CAC/E,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;EAC7C,UAAU,KAAK;EACf,IAAI,IAAI,GAAG;CACb;CAEA,MAAM,uBAAuD;EAC3D,IAAI,YAA2B,UAAU,gBAAQ,GAC/C,OACE,oBAAC,iBAAD;GACE,QAAQ;GACR,WAAW,WAAW,OAAO,uBAAuB,gBAAgB;GACpE,eAAe;GACf,MAAK;GACL,MAAM;aAEL,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,UACjD,YAAuB,OAAO,iBAAS,IAAI,IACvC,MAAM,aAAa,OAAO,EACxB,UAAU,UACR,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,KAAK,CAAC,EACvE,CAAC,IACD,KACN,EACF,CAAC,CACH;EACO,CAAA;CAGf;CAEA,MAAM,0BAAgC;EACpC,UAAU,CAAC,MAAM;CACnB;CAEA,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAD;EAAU,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA,IAExF,WAAW,oBAAC,cAAD;EAAe;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA;CAGlG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAD;EAAM,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAGlH,MAAM,YAAY,oBAAC,cAAD;EAAM,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAE5G,OACE,qBAAC,OAAD;EAAK,KAAK;EAAU,WAAW,WAAW,gBAAgB;EAAG,oBAAkB,YAAY;YAA3F,CACE,qBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;aANvC;IAQG,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;IACtF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;GAClF;MACP,UAAU,eAAe,CACvB;;AAET;;;AC/IA,IAAA,kBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PopMenu/constants.ts","../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["export 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","import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LinkListProps, LinkProps } from '../LinkList';\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 from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList from '../LinkList';\nimport PopOver from '../PopOver';\nimport { PopMenuLabelPosition, type PopMenuVariant } from './constants';\n\nimport styles from './styles.module.scss';\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 { PopMenuVariant, PopMenuLabelPosition } from './constants';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,aAAA;CACA,eAAA,YAAA;CACA,eAAA,iBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;CACL,qBAAA,WAAA;CACA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;AC0CA,IAAa,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,sBAAsB;CAEvC,gBAAgB,gBAAgB;EAC9B,UAAU,KAAK;CACjB,CAAC;CAED,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,gBAAgB;CAC/E,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;EAC7C,UAAU,KAAK;EACf,IAAI,IAAI,GAAG;CACb;CAEA,MAAM,uBAAuD;EAC3D,IAAI,YAA2B,UAAU,gBAAQ,GAC/C,OACE,oBAAC,iBAAD;GACE,QAAQ;GACR,WAAW,WAAW,OAAO,uBAAuB,gBAAgB;GACpE,eAAe;GACf,MAAK;GACL,MAAM;GAEL,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,UACjD,YAAuB,OAAO,iBAAS,IAAI,IACvC,MAAM,aAAa,OAAO,EACxB,UAAU,UACR,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,KAAK,CAAC,EACvE,CAAC,IACD,KACN,EACF,CAAC,CACH;EACO,CAAA;CAGf;CAEA,MAAM,0BAAgC;EACpC,UAAU,CAAC,MAAM;CACnB;CAEA,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAD;EAAU,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA,IAExF,WAAW,oBAAC,cAAD;EAAe;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA;CAGlG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAD;EAAM,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAGlH,MAAM,YAAY,oBAAC,cAAD;EAAM,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAE5G,OACE,qBAAC,OAAD;EAAK,KAAK;EAAU,WAAW,WAAW,gBAAgB;EAAG,oBAAkB,YAAY;EAA3F,UAAA,CACE,qBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;GANvC,UAAA;IAQG,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;IACtF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;GAClF;EACP,CAAA,GAAA,UAAU,eAAe,CACvB;;AAET;;;AC/IA,IAAA,kBAAe"}

package/lib/components/Progressbar/index.js

@@ -44,13 +44,14 @@ var Progressbar = ({ value, size = ProgressbarSize.large, mode = ProgressBarMode
 	useEffect(() => {
 		if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) wrapperRef.current.parentElement.style.position = "relative";
 	}, []);
+	const wrapperClasses = classNames({
+		[styles["progressbar--overlay"]]: overlay,
+		[styles["progressbar--overlay-screen"]]: overlay === Overlay.screen,
+		[styles["progressbar--overlay-parent"]]: overlay === Overlay.parent
+	});
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		ref: wrapperRef,
-		className: classNames({
-			[styles["progressbar--overlay"]]: overlay,
-			[styles["progressbar--overlay-screen"]]: overlay === Overlay.screen,
-			[styles["progressbar--overlay-parent"]]: overlay === Overlay.parent
-		}),
+		className: wrapperClasses,
 		"data-testid": testId,
 		role: "progressbar",
 		"aria-valuemin": 0,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Progressbar/constants.ts","../../../src/components/Progressbar/Progressbar.tsx","../../../src/components/Progressbar/index.ts"],"sourcesContent":["export 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}\n","import { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Overlay, ProgressBarMode, ProgressbarSize } from './constants';\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\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 { ProgressbarSize, ProgressBarMode, Overlay } from './constants';\nexport * from './Progressbar';\nexport default Progressbar;\n"],"mappings":";;;;;;;AAAA,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,WAAA;CACA,gBAAA,YAAA;CACA,gBAAA,WAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,YAAA;CACA,gBAAA,aAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;;AACF,EAAA,CAAA,CAAA;;;ACWA,IAAM,eAA2C,EAC/C,OACA,OAAO,gBAAgB,OACvB,OAAO,gBAAgB,SACvB,SACA,QACA,gBACsB;CACtB,IAAI,SACF,OAAO,gBAAgB;CAGzB,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC;CAExC,IAAI;CACJ,IAAI,SAAS,gBAAgB,OAC3B,QAAQ;MACH,IAAI,SAAS,gBAAgB,QAClC,QAAQ;MAER,QAAQ;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,IAAI;CAE9C,gBAAgB;EACd,IAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,OACnE,WAAW,QAAQ,cAAc,MAAM,WAAW;CAEtD,GAAG,CAAC,CAAC;CAQL,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EACE,KAAK;EACL,WAViB,WAAW;IAC/B,OAAO,0BAA0B;IACjC,OAAO,iCAAiC,YAAY,QAAQ;IAC5D,OAAO,iCAAiC,YAAY,QAAQ;EAC/D,CAMiB;EACX,eAAa;EACb,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,cAAc,IAAI,CAAC;YAExE,qBAAC,OAAD;GACE,MAAK;GACL,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,YAAY,GAAG;GAC/B,WAAW,OAAO;aALpB;IAOE,oBAAC,UAAD;KAAQ,IAAI;KAAe,IAAI;KAAe,GAAG;KAAQ,QAAQ;KAAoC;KAAa,MAAK;IAAQ,CAAA;IAC/H,oBAAC,UAAD;KACE,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,QAAQ;KACK;KACb,MAAK;KACL,iBAAiB;KACC;KAClB,WAAW,OAAO;KAClB,WAAW,cAAc,cAAc,GAAG,cAAc;IACzD,CAAA;IACD,oBAAC,QAAD;KACE,WAAU;KACV,UAAU;KACV,MAAM;KACN,GAAG;KACH,GAAG;KACH,YAAW;KACX,mBAAkB;eAEjB,SAAS,gBAAgB,SAAS;IAC/B,CAAA;GACH;;CACF,CAAA,GACL,oBAAC,OAAD;EAAK,WAAW,OAAO;EAA8B,aAAU;EAAY,eAAY;YACpF;CACE,CAAA,CACL,EAAA,CAAA;AAEN;;;ACzHA,IAAA,sBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Progressbar/constants.ts","../../../src/components/Progressbar/Progressbar.tsx","../../../src/components/Progressbar/index.ts"],"sourcesContent":["export 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}\n","import { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Overlay, ProgressBarMode, ProgressbarSize } from './constants';\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\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 { ProgressbarSize, ProgressBarMode, Overlay } from './constants';\nexport * from './Progressbar';\nexport default Progressbar;\n"],"mappings":";;;;;;;AAAA,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,WAAA;CACA,gBAAA,YAAA;CACA,gBAAA,WAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,kBAAL,yBAAA,iBAAA;CACL,gBAAA,YAAA;CACA,gBAAA,aAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,UAAL,yBAAA,SAAA;CACL,QAAA,YAAA;CACA,QAAA,YAAA;;AACF,EAAA,CAAA,CAAA;;;ACWA,IAAM,eAA2C,EAC/C,OACA,OAAO,gBAAgB,OACvB,OAAO,gBAAgB,SACvB,SACA,QACA,gBACsB;CACtB,IAAI,SACF,OAAO,gBAAgB;CAGzB,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,GAAG,CAAC;CAExC,IAAI;CACJ,IAAI,SAAS,gBAAgB,OAC3B,QAAQ;MACH,IAAI,SAAS,gBAAgB,QAClC,QAAQ;MAER,QAAQ;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,IAAI;CAE9C,gBAAgB;EACd,IAAI,YAAY,QAAQ,UAAU,WAAW,SAAS,eAAe,OACnE,WAAW,QAAQ,cAAc,MAAM,WAAW;CAEtD,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,WAAW;GAC/B,OAAO,0BAA0B;GACjC,OAAO,iCAAiC,YAAY,QAAQ;GAC5D,OAAO,iCAAiC,YAAY,QAAQ;CAC/D,CAAC;CAED,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW;EACX,eAAa;EACb,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,OAAO,YAAY,QAAQ,SAAS,EAAE,QAAQ,OAAO,cAAc,IAAI,CAAC;EAExE,UAAA,qBAAC,OAAD;GACE,MAAK;GACL,OAAO;GACP,QAAQ;GACR,SAAS,OAAO,YAAY,GAAG;GAC/B,WAAW,OAAO;GALpB,UAAA;IAOE,oBAAC,UAAD;KAAQ,IAAI;KAAe,IAAI;KAAe,GAAG;KAAQ,QAAQ;KAAoC;KAAa,MAAK;IAAQ,CAAA;IAC/H,oBAAC,UAAD;KACE,IAAI;KACJ,IAAI;KACJ,GAAG;KACH,QAAQ;KACK;KACb,MAAK;KACL,iBAAiB;KACC;KAClB,WAAW,OAAO;KAClB,WAAW,cAAc,cAAc,GAAG,cAAc;IACzD,CAAA;IACD,oBAAC,QAAD;KACE,WAAU;KACV,UAAU;KACV,MAAM;KACN,GAAG;KACH,GAAG;KACH,YAAW;KACX,mBAAkB;KAEjB,UAAA,SAAS,gBAAgB,SAAS;IAC/B,CAAA;GACH;;CACF,CAAA,GACL,oBAAC,OAAD;EAAK,WAAW,OAAO;EAA8B,aAAU;EAAY,eAAY;EACpF,UAAA;CACE,CAAA,CACL,EAAA,CAAA;AAEN;;;ACzHA,IAAA,sBAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PromoPanel/PromoPanel.tsx","../../../src/components/PromoPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isComponent } from '../../utils/component';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport Illustration, { type IllustrationProps } from '../Illustration';\nimport LazyIllustration, { type LazyIllustrationProps } from '../LazyIllustration';\nimport Title 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. If an Illustration or LazyIllustration is passed without a size prop, a default size based on breakpoint is applied. */\n  illustration?: React.ReactNode;\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, undefined, 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  const illustration = ((): React.ReactNode => {\n    const node = props.illustration;\n\n    if (!node) {\n      return node;\n    }\n\n    if (isComponent(node, Illustration)) {\n      return node.props.size === undefined ? React.cloneElement<IllustrationProps>(node, { size: illustrationSize }) : node;\n    }\n\n    if (isComponent(node, LazyIllustration)) {\n      return node.props.size === undefined ? React.cloneElement<LazyIllustrationProps>(node, { size: illustrationSize }) : node;\n    }\n\n    return node;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={refObject}>\n      {illustration}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <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":";;;;;;;;;;;;;;;;AA0DA,IAAM,kBAAgD,UAAS;CAC7D,IAAI,MAAM,eACR,OAAO,MAAM,aAAa,MAAM,eAAe,KAAA,GAAW,MAAM,QAAQ;CAG1E,IAAI,MAAM,mBAAmB,UAC3B,OACE,oBAAC,UAAD;EAAQ,MAAM;EAAU,SAAS,MAAM;YACpC,MAAM;CACD,CAAA;CAGZ,OACE,oBAAC,KAAD;EAAG,MAAM,MAAM;EAAM,QAAQ,MAAM;EAAQ,SAAS,MAAM;YACvD,MAAM;CACN,CAAA;AAEP;AAEA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,WAAW,cAAc,iBAAiC;CAElE,MAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;CAE5E,MAAM,aAAa,cAAc;CAEjC,MAAM,oBAAoB,WACxB,OAAO,YACP,OAAO,eAAe,UACtB,CAAC,MAAM,gBAAgB,OAAO,8BAChC;CAEA,MAAM,iBACJ,oBAAC,gBAAD;EACE,MAAM,MAAM;EACZ,QAAQ,MAAM;EACd,eAAe,MAAM;EACL;EAChB,aAAa,MAAM;YAElB,MAAM,SAAS,MAAM;CACR,CAAA;CAGlB,MAAM,0BAAkC;EACtC,IAAI,cAAc,WAAW,IAC3B,OAAO;EAGT,OAAO;CACT,EAAA,CAAG;CAEH,MAAM,sBAAuC;EAC3C,MAAM,OAAO,MAAM;EAEnB,IAAI,CAAC,MACH,OAAO;EAGT,IAAI,YAAY,MAAM,oBAAY,GAChC,OAAO,KAAK,MAAM,SAAS,KAAA,IAAY,MAAM,aAAgC,MAAM,EAAE,MAAM,iBAAiB,CAAC,IAAI;EAGnH,IAAI,YAAY,MAAM,wBAAgB,GACpC,OAAO,KAAK,MAAM,SAAS,KAAA,IAAY,MAAM,aAAoC,MAAM,EAAE,MAAM,iBAAiB,CAAC,IAAI;EAGvH,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,OAAD;EAAK,WAAW;EAAmB,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,KAAK;YAA7G;GACG;GACD,qBAAC,OAAD;IAAK,WAAW,OAAO;cAAvB,CACG,MAAM,SACL,oBAAC,eAAD;KAAO,YAAY;KAAiB,YAAY;eAC7C;IACI,CAAA,GAER,CAAC,MAAM,QAAQ,iBAAiB,MAAM,QACpC;;GACL,oBAAC,cAAD;IACE,WAAW,OAAO;IAClB,SAAS,MAAM,WAAW,WAAW,eAAe;IACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;IACnD;IACX,OAAO,SAAS,aAAa,GAAG;IAChC,YAAY,SAAS,aAAa,GAAG;GACtC,CAAA;EACE;;AAET;;;ACnJA,IAAA,qBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PromoPanel/PromoPanel.tsx","../../../src/components/PromoPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { AnchorLinkTags, AnchorLinkTargets } from '../AnchorLink';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isComponent } from '../../utils/component';\nimport Icon from '../Icon';\nimport ArrowRight from '../Icons/ArrowRight';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport Illustration, { type IllustrationProps } from '../Illustration';\nimport LazyIllustration, { type LazyIllustrationProps } from '../LazyIllustration';\nimport Title 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. If an Illustration or LazyIllustration is passed without a size prop, a default size based on breakpoint is applied. */\n  illustration?: React.ReactNode;\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, undefined, 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  const illustration = ((): React.ReactNode => {\n    const node = props.illustration;\n\n    if (!node) {\n      return node;\n    }\n\n    if (isComponent(node, Illustration)) {\n      return node.props.size === undefined ? React.cloneElement<IllustrationProps>(node, { size: illustrationSize }) : node;\n    }\n\n    if (isComponent(node, LazyIllustration)) {\n      return node.props.size === undefined ? React.cloneElement<LazyIllustrationProps>(node, { size: illustrationSize }) : node;\n    }\n\n    return node;\n  })();\n\n  return (\n    <div className={promoPanelClasses} data-testid={props.testId} data-analyticsid={AnalyticsId.PromoPanel} ref={refObject}>\n      {illustration}\n      <div className={styles.promopanel__content}>\n        {props.title && (\n          <Title htmlMarkup={titleHtmlMarkup} appearance={'title3'}>\n            {promoPanelLink}\n          </Title>\n        )}\n        {!props.title ? promoPanelLink : props.children}\n      </div>\n      <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":";;;;;;;;;;;;;;;;AA0DA,IAAM,kBAAgD,UAAS;CAC7D,IAAI,MAAM,eACR,OAAO,MAAM,aAAa,MAAM,eAAe,KAAA,GAAW,MAAM,QAAQ;CAG1E,IAAI,MAAM,mBAAmB,UAC3B,OACE,oBAAC,UAAD;EAAQ,MAAM;EAAU,SAAS,MAAM;EACpC,UAAA,MAAM;CACD,CAAA;CAGZ,OACE,oBAAC,KAAD;EAAG,MAAM,MAAM;EAAM,QAAQ,MAAM;EAAQ,SAAS,MAAM;EACvD,UAAA,MAAM;CACN,CAAA;AAEP;AAEA,IAAM,cAAwC,UAAS;CACrD,MAAM,EAAE,WAAW,cAAc,iBAAiC;CAElE,MAAM,EAAE,QAAQ,WAAW,kBAAkB,MAAM,iBAAiB,QAAQ;CAE5E,MAAM,aAAa,cAAc;CAEjC,MAAM,oBAAoB,WACxB,OAAO,YACP,OAAO,eAAe,UACtB,CAAC,MAAM,gBAAgB,OAAO,8BAChC;CAEA,MAAM,iBACJ,oBAAC,gBAAD;EACE,MAAM,MAAM;EACZ,QAAQ,MAAM;EACd,eAAe,MAAM;EACL;EAChB,aAAa,MAAM;EAElB,UAAA,MAAM,SAAS,MAAM;CACR,CAAA;CAGlB,MAAM,0BAAkC;EACtC,IAAI,cAAc,WAAW,IAC3B,OAAO;EAGT,OAAO;CACT,EAAA,CAAG;CAEH,MAAM,sBAAuC;EAC3C,MAAM,OAAO,MAAM;EAEnB,IAAI,CAAC,MACH,OAAO;EAGT,IAAI,YAAY,MAAM,oBAAY,GAChC,OAAO,KAAK,MAAM,SAAS,KAAA,IAAY,MAAM,aAAgC,MAAM,EAAE,MAAM,iBAAiB,CAAC,IAAI;EAGnH,IAAI,YAAY,MAAM,wBAAgB,GACpC,OAAO,KAAK,MAAM,SAAS,KAAA,IAAY,MAAM,aAAoC,MAAM,EAAE,MAAM,iBAAiB,CAAC,IAAI;EAGvH,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,OAAD;EAAK,WAAW;EAAmB,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,KAAK;EAA7G,UAAA;GACG;GACD,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACG,MAAM,SACL,oBAAC,eAAD;KAAO,YAAY;KAAiB,YAAY;KAC7C,UAAA;IACI,CAAA,GAER,CAAC,MAAM,QAAQ,iBAAiB,MAAM,QACpC;;GACL,oBAAC,cAAD;IACE,WAAW,OAAO;IAClB,SAAS,MAAM,WAAW,WAAW,eAAe;IACpD,MAAM,cAAc,WAAW,KAAK,SAAS,QAAQ,SAAS;IACnD;IACX,OAAO,SAAS,aAAa,GAAG;IAChC,YAAY,SAAS,aAAa,GAAG;GACtC,CAAA;EACE;;AAET;;;ACnJA,IAAA,qBAAe"}

package/lib/components/ServiceMessage/index.js

@@ -136,8 +136,9 @@ var ServiceMessage = ({ label, dismissable = true, onDismiss, info, extraInfo, u
 	const handleClick = () => {
 		if (hasExpander) setIsExpanded(!isExpanded);
 	};
+	const classes = classNames(styles["service-message"], styles[`service-message--${variant}`]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(styles["service-message"], styles[`service-message--${variant}`]),
+		className: classes,
 		role: ariaRole,
 		...ariaLabelAttributes,
 		"data-testid": testId,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AnchorLinkTargets } from '../AnchorLink';\nimport type { NotificationPanelVariants } from '../NotificationPanel';\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 NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport { renderElementHeader } from '../ElementHeader/utils';\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';\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 labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  const elementHeader = renderElementHeader(label, {\n    titleHtmlMarkup: 'span',\n    isHovered,\n    size: 'compact',\n    parentType: 'expanderlist',\n    chevronIcon: hasExpander ? (isExpanded ? ChevronUp : ChevronDown) : undefined,\n    icon: <NotificationBadge variant={variant} size={iconSize} isHovered={hasExpander && isHovered} />,\n    closeButton:\n      !hasExpander && dismissable ? (\n        <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n      ) : undefined,\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              {hasExpander ? (\n                <h1 className={styles['service-message__title']} id={id}>\n                  <button type=\"button\" className={styles['service-message__toggle']} onClick={onExpand} aria-expanded={isExpanded}>\n                    {elementHeader}\n                  </button>\n                </h1>\n              ) : (\n                <h1 className={styles['service-message__title']} id={id}>\n                  {elementHeader}\n                </h1>\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 type ServiceMessageRoles = 'alert' | 'region' | 'auto' | 'none';\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 role of the service message - default: auto, will decide based on variant */\n  messageRole?: ServiceMessageRoles;\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  messageRole = 'auto',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const autoRole = variant === 'error' ? 'alert' : 'region';\n  const ariaRole = messageRole === 'auto' ? autoRole : messageRole === 'none' ? undefined : messageRole;\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":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AnchorLinkTargets } from '../AnchorLink';\nimport type { NotificationPanelVariants } from '../NotificationPanel';\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 NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport { renderElementHeader } from '../ElementHeader/utils';\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';\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 labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  const elementHeader = renderElementHeader(label, {\n    titleHtmlMarkup: 'span',\n    isHovered,\n    size: 'compact',\n    parentType: 'expanderlist',\n    chevronIcon: hasExpander ? (isExpanded ? ChevronUp : ChevronDown) : undefined,\n    icon: <NotificationBadge variant={variant} size={iconSize} isHovered={hasExpander && isHovered} />,\n    closeButton:\n      !hasExpander && dismissable ? (\n        <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n      ) : undefined,\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              {hasExpander ? (\n                <h1 className={styles['service-message__title']} id={id}>\n                  <button type=\"button\" className={styles['service-message__toggle']} onClick={onExpand} aria-expanded={isExpanded}>\n                    {elementHeader}\n                  </button>\n                </h1>\n              ) : (\n                <h1 className={styles['service-message__title']} id={id}>\n                  {elementHeader}\n                </h1>\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 type ServiceMessageRoles = 'alert' | 'region' | 'auto' | 'none';\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 role of the service message - default: auto, will decide based on variant */\n  messageRole?: ServiceMessageRoles;\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  messageRole = 'auto',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const autoRole = variant === 'error' ? 'alert' : 'region';\n  const ariaRole = messageRole === 'auto' ? autoRole : messageRole === 'none' ? undefined : messageRole;\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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon 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":";;;;;;;AA4BA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,WAAW,OAAO,mBAAmB,SAAS;CAC3E,MAAM,aAAa,WAAW,OAAO,wBAAwB,OAAO,wBAAwB,QAAQ;CACpG,MAAM,eAAe,WAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,SAC3C,CAAC;CAED,OACE,qBAAC,QAAD;EAAM,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACE,oBAAC,QAAD;GAAM,WAAW;aACf,oBAAC,cAAD;IAAM,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;GAAU,CAAA;EAChE,CAAA,GACN,oBAAC,QAAD;GAAM,WAAW;GAAe;EAAe,CAAA,CAC3C;;AAEV;;;AC3CA,IAAA,wBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon 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":";;;;;;;AA4BA,IAAM,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,WAAW,OAAO,mBAAmB,SAAS;CAC3E,MAAM,aAAa,WAAW,OAAO,wBAAwB,OAAO,wBAAwB,QAAQ;CACpG,MAAM,eAAe,WAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,SAC3C,CAAC;CAED,OACE,qBAAC,QAAD;EAAM,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;EAA1F,UAAA,CACE,oBAAC,QAAD;GAAM,WAAW;GACf,UAAA,oBAAC,cAAD;IAAM,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;GAAU,CAAA;EAChE,CAAA,GACN,oBAAC,QAAD;GAAM,WAAW;GAAe;EAAe,CAAA,CAC3C;;AAEV;;;AC3CA,IAAA,wBAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\nimport type { StepperProps } from '../Stepper';\n\nimport { AnalyticsId } from '../../constants';\nimport StepButtons from '../StepButtons';\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":";;;;;;AAiCA,IAAM,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;CAE1E,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;YAAzE;GACG,WAAW,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAgB;GAAa,CAAA;GAChE,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,eAAe,gBAAgB;IAAI;GAAc,CAAA;GAClF,iBACC,oBAAC,qBAAD;IACc;IACG;IACI;IACL;IACd,QAAQ;GACT,CAAA;EAEA;;AAET;;;AC5DA,IAAA,eAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ButtonProps } from '../Button';\nimport type { StepperProps } from '../Stepper';\n\nimport { AnalyticsId } from '../../constants';\nimport StepButtons from '../StepButtons';\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":";;;;;;AAiCA,IAAM,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;CAE1E,OACE,qBAAC,OAAD;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;EAAzE,UAAA;GACG,WAAW,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAgB,UAAA;GAAa,CAAA;GAChE,oBAAC,OAAD;IAAK,WAAW,WAAW,OAAO,eAAe,gBAAgB;IAAI;GAAc,CAAA;GAClF,iBACC,oBAAC,qBAAD;IACc;IACG;IACI;IACL;IACd,QAAQ;GACT,CAAA;EAEA;;AAET;;;AC5DA,IAAA,eAAe"}

package/lib/components/Stepper/index.js

@@ -85,9 +85,11 @@ var getValidatedProps = (value, min, max) => {
 //#endregion
 //#region src/components/Stepper/Dot.tsx
 var Dot = ({ index, completed, distanceBetweenDots, position }) => {
+	const classes = classNames(styles.stepper__dot, completed && styles["stepper__dot--completed"], position && styles[`stepper__dot--${position}`]);
+	const style = !position && typeof index !== "undefined" && typeof distanceBetweenDots !== "undefined" ? { left: `${index * distanceBetweenDots + 8}px` } : void 0;
 	return /* @__PURE__ */ jsx("span", {
-		className: classNames(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,
+		className: classes,
+		style,
 		"data-testid": "dot"
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/index.ts"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n","import Stepper from './Stepper';\nexport * from './Stepper';\nexport * from './utils';\nexport default Stepper;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/index.ts"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n","import Stepper from './Stepper';\nexport * from './Stepper';\nexport * from './utils';\nexport default Stepper;\n"],"mappings":"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"}