@helsenorge/designsystem-react 13.5.0 → 14.0.0-beta.1

package/lib/components/Panel/index.js

@@ -1,36 +1,255 @@
-import "../../uuid.js";
-import "../../environment.js";
-import "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import "../../color.js";
-import "../../Icon.js";
-import "../../language.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
-import "../../component.js";
-import "../../useIcons.js";
-import "../../useBreakpoint.js";
-import "../../useIsMobileBreakpoint.js";
-import "../../ArrowRight.js";
-import "../../Button.js";
-import "../../Spacer.js";
-import "../../usePrevious.js";
-import "../../Title.js";
-import "../../Title2.js";
-import "../../ChevronDown.js";
-import "../../ChevronUp.js";
-import "../../Duolist.js";
-import "../../Highlighter.js";
-import "../../useExpand.js";
-import "../../ChevronRight.js";
-import "../../PanelTitle.js";
-import { a as PanelLayout, c as PanelVariant, i as ExpandedContent, l as Panel_default$1, n as B, o as PanelStacking, r as C, s as PanelStatus, t as A, u as PreContainer } from "../../Panel.js";
-var Panel_default = Panel_default$1;
+import { a as IconSize, s as LanguageLocales } from "../../constants2.js";
+import { t as Icon_default } from "../../Icon.js";
+import { n as useLanguage } from "../../useLanguage.js";
+import { t as isComponent } from "../../component.js";
+import { t as Button_default } from "../../Button.js";
+import { t as ChevronDown_default } from "../../ChevronDown.js";
+import { t as ChevronUp_default } from "../../ChevronUp.js";
+import { t as Highlighter_default } from "../../Highlighter.js";
+import { t as useExpand } from "../../useExpand.js";
+import { t as ChevronRight_default } from "../../ChevronRight.js";
+import { a as PanelVariant, i as PanelStatus, n as PanelLayout, r as PanelStacking, t as PanelListContext } from "../../utils4.js";
+import { t as PanelTitle_default } from "../../PanelTitle.js";
+import classNames from "classnames";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+var HN_Designsystem_Panel_en_GB_default = {
+	expandButtonOpen: "See details",
+	expandButtonClose: "Hide details"
+};
+var HN_Designsystem_Panel_nb_NO_default = {
+	expandButtonOpen: "Se detaljer",
+	expandButtonClose: "Skjul detaljer"
+};
+const getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.ENGLISH: return HN_Designsystem_Panel_en_GB_default;
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_Panel_nb_NO_default;
+	}
+};
+var ExpandButton = ({ onClick, isExpanded, resources }) => {
+	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+	return /* @__PURE__ */ jsxs(Button_default, {
+		variant: "borderless",
+		textClassName: styles["expander__button__text"],
+		wrapperClassName: buttonClassName,
+		"aria-expanded": isExpanded,
+		onClick,
+		children: [/* @__PURE__ */ jsx(Icon_default, {
+			svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
+			size: IconSize.XSmall
+		}), /* @__PURE__ */ jsx("span", { children: isExpanded ? resources.expandButtonClose : resources.expandButtonOpen })]
+	});
+};
+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;
+	const expandedContentRef = React.useRef(null);
+	const defaultScroll = 100;
+	const effectiveVariant = panelListContext?.variant ?? variant;
+	const effectiveHighlightText = panelListContext?.highlightText ?? highlightText;
+	const effectiveClassName = panelListContext?.applyPanelClassName(className) ?? className;
+	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
+	const mergedResources = {
+		...getResources(language),
+		...resources
+	};
+	React.useEffect(() => {
+		let index = 0;
+		let localHasIcon = false;
+		const newPreContainer = [];
+		const newTitle = [];
+		const newContent = [];
+		const newExpandableContent = [];
+		React.Children.forEach(children, (child) => {
+			if (React.isValidElement(child)) {
+				const key = child.key ?? `panel-child-${index++}`;
+				if (child.type === PreContainer) newPreContainer.push(React.cloneElement(child, { key }));
+				else if (isComponent(child, PanelTitle_default)) {
+					newTitle.push(React.cloneElement(child, {
+						key,
+						highlightText: child.props.highlightText || effectiveHighlightText
+					}));
+					if (child.props.icon) localHasIcon = true;
+				} else if (child.type === A || child.type === B || child.type === C) newContent.push(React.cloneElement(child, { key }));
+				else if (child.type === ExpandedContent) newExpandableContent.push(React.cloneElement(child, { key }));
+			}
+		});
+		setPreContainer(newPreContainer);
+		setTitle(newTitle);
+		setContent(newContent);
+		setExpandableContent(newExpandableContent);
+		setHasIcon(localHasIcon);
+	}, [children]);
+	React.useEffect(() => {
+		if (expanded) return;
+		if (isExpanded) {
+			if ("current" in panelRef && panelRef.current && expandedContentRef.current) {
+				const panelRect = panelRef.current.getBoundingClientRect();
+				const expandedContentRect = expandedContentRef.current.getBoundingClientRect();
+				const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);
+				if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {
+					if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+					window.scrollBy({
+						top: scrollAmount,
+						behavior: "smooth"
+					});
+				}
+			}
+		}
+	}, [isExpanded]);
+	const colorScheme = effectiveVariant === PanelVariant.fill ? color : "white";
+	const outerClassnames = classNames(effectiveClassName, {
+		[styles["panel__border--outline--outer"]]: effectiveVariant === PanelVariant.outline,
+		[styles["panel__border--line"]]: effectiveVariant === PanelVariant.line,
+		[styles["panel__border--fill--neutral"]]: effectiveVariant === PanelVariant.fill && colorScheme === "neutral",
+		[styles["panel__border--fill--new"]]: effectiveVariant === PanelVariant.fill && status === PanelStatus.new,
+		[styles["panel__border--fill--status"]]: effectiveVariant === PanelVariant.fill && status !== PanelStatus.none
+	});
+	const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
+		[styles["panel--line"]]: effectiveVariant === PanelVariant.line,
+		[styles["panel--new"]]: status === PanelStatus.new,
+		[styles["panel--draft"]]: status === PanelStatus.draft,
+		[styles["panel--error"]]: status === PanelStatus.error,
+		[styles["panel--icon"]]: hasIcon
+	});
+	const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
+	const expanderBorderLayout = classNames({
+		[styles["panel__expander__border--expanded"]]: isExpanded && status === PanelStatus.none,
+		[styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,
+		[styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && effectiveVariant === PanelVariant.line
+	});
+	const handleExpandClick = () => {
+		setIsExpanded(!isExpanded);
+	};
+	return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: outerClassnames,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
+			children: /* @__PURE__ */ jsx("div", {
+				className: expanderBorderLayout,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: panelClassnames,
+					"data-testid": testId,
+					ref: panelRef,
+					tabIndex: focusable ? -1 : void 0,
+					children: [
+						/* @__PURE__ */ jsxs(Highlighter_default, {
+							searchText: effectiveHighlightText,
+							children: [preContainer, title]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: contentContainerLayout,
+							children: /* @__PURE__ */ jsx(Highlighter_default, {
+								searchText: effectiveHighlightText,
+								children: content
+							})
+						}),
+						/* @__PURE__ */ jsx(ExpandButton, {
+							onClick: handleExpandClick,
+							isExpanded,
+							resources: mergedResources
+						}),
+						isExpanded && /* @__PURE__ */ jsxs("div", {
+							ref: expandedContentRef,
+							"data-testid": testId + "-details",
+							children: [/* @__PURE__ */ jsx("div", { className: styles["panel__expander__separator"] }), /* @__PURE__ */ jsx(Highlighter_default, {
+								searchText: effectiveHighlightText,
+								children: expandableContent
+							})]
+						})
+					]
+				})
+			})
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: outerClassnames,
+		children: /* @__PURE__ */ jsx("div", {
+			className: classNames({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: panelClassnames,
+				"data-testid": testId,
+				ref: panelRef,
+				tabIndex: focusable ? -1 : void 0,
+				children: [
+					/* @__PURE__ */ jsxs(Highlighter_default, {
+						searchText: effectiveHighlightText,
+						children: [preContainer, title]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: contentContainerLayout,
+						children: /* @__PURE__ */ jsx(Highlighter_default, {
+							searchText: effectiveHighlightText,
+							children: content
+						})
+					}),
+					buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", {
+						className: styles["panel__button-bottom"],
+						children: /* @__PURE__ */ jsxs(Button_default, {
+							variant: "borderless",
+							type: "button",
+							size: "medium",
+							onClick: buttonBottomOnClick,
+							"aria-label": buttonBottomAriaLabel,
+							children: [buttonBottomText, /* @__PURE__ */ jsx(Icon_default, {
+								svgIcon: ChevronRight_default,
+								size: IconSize.XSmall
+							})]
+						})
+					})
+				]
+			})
+		})
+	});
+};
+const PreContainer = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: styles["panel__pre-container"],
+		children
+	});
+};
+const A = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
+		children
+	});
+};
+const B = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
+		children
+	});
+};
+const C = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
+		children
+	});
+};
+const ExpandedContent = ({ children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(styles["panel__expander__content"]),
+		children
+	});
+};
+PanelRoot.displayName = "Panel";
+var Panel = PanelRoot;
+Panel.PreContainer = PreContainer;
+Panel.Title = PanelTitle_default;
+Panel.A = A;
+Panel.B = B;
+Panel.C = C;
+Panel.ExpandedContent = ExpandedContent;
+var Panel_default = Panel;
 export { A, B, C, ExpandedContent, PanelLayout, PanelStacking, PanelStatus, PanelVariant, PreContainer, Panel_default as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Panel/index.ts"],"sourcesContent":["import Panel from './Panel';\nexport * from './Panel';\nexport default Panel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":["PanelRoot: React.FC<PanelProps>","mergedResources: HNDesignsystemPanel","newPreContainer: React.ReactNode[]","newTitle: React.ReactNode[]","newContent: React.ReactNode[]","newExpandableContent: React.ReactNode[]","PreContainer: React.FC<ContentProps>","A: React.FC<ContentProps>","B: React.FC<ContentProps>","C: React.FC<ContentProps>","ExpandedContent: React.FC<ContentProps>"],"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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"}

package/lib/components/PanelList/index.js

@@ -1,55 +1,28 @@
-import "../../uuid.js";
-import "../../environment.js";
 import { n as AnalyticsId } from "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import "../../color.js";
-import "../../Icon.js";
-import "../../language.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
-import "../../component.js";
-import "../../useIcons.js";
-import "../../useBreakpoint.js";
-import "../../useIsMobileBreakpoint.js";
-import "../../ArrowRight.js";
-import "../../Button.js";
-import "../../Spacer.js";
-import "../../usePrevious.js";
-import "../../Title.js";
-import "../../Title2.js";
-import "../../ChevronDown.js";
-import "../../ChevronUp.js";
-import "../../Duolist.js";
-import "../../Highlighter.js";
-import "../../useExpand.js";
-import "../../ChevronRight.js";
-import "../../PanelTitle.js";
-import { c as PanelVariant, l as Panel_default } from "../../Panel.js";
+import { a as PanelVariant, t as PanelListContext } from "../../utils4.js";
+import classNames from "classnames";
 import React from "react";
-import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
-var isPanelComponent = (element) => React.isValidElement(element) && element.type === Panel_default;
-var PanelList_default = React.forwardRef(function BadgeForwardedRef(props, ref) {
-	const { testId, children, variant = PanelVariant.fill, highlightText } = props;
-	const renderPanel = (panel) => React.cloneElement(panel, {
+var PanelList = (props) => {
+	const { testId, children, variant = PanelVariant.fill, highlightText, ref } = props;
+	const contextValue = React.useMemo(() => ({
 		variant,
-		className: cn(panel.props.className, styles[`panel-list__panel--${variant}`]),
-		highlightText: panel.props.highlightText || highlightText
+		highlightText,
+		applyPanelClassName: (existingClassName) => classNames(existingClassName, styles[`panel-list__panel--${variant}`])
+	}), [variant, highlightText]);
+	return /* @__PURE__ */ jsx(PanelListContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.PanelList,
+			className: classNames({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
+			children
+		})
 	});
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		"data-testid": testId,
-		"data-analyticsid": AnalyticsId.PanelList,
-		className: cn({ [styles["panel-list--outline"]]: variant === PanelVariant.outline }),
-		children: React.Children.map(children, (child) => isPanelComponent(child) ? renderPanel(child) : child)
-	});
-});
+};
+var PanelList_default = PanelList;
 export { PanelList_default as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PanelList/PanelList.tsx","../../../src/components/PanelList/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel/Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill, highlightText } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>): React.ReactElement<PanelProps> =>\n    React.cloneElement(panel, {\n      variant: variant,\n      className: classNames(panel.props.className, styles[`panel-list__panel--${variant}`]),\n      highlightText: panel.props.highlightText || highlightText,\n    });\n\n  return (\n    <div\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.PanelList}\n      className={classNames({ [styles['panel-list--outline']]: variant === PanelVariant.outline })}\n    >\n      {React.Children.map(children, child => (isPanelComponent(child) ? renderPanel(child) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n","import PanelList from './PanelList';\nexport * from './PanelList';\nexport default PanelList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,IAAM,oBAAoB,YACxB,MAAM,eAA2B,QAAQ,IAAK,QAA+B,SAAS;ACpBxF,IAAA,oBDsBkB,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;CAC5H,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,kBAAkB;CAEzE,MAAM,eAAe,UACnB,MAAM,aAAa,OAAO;EACf;EACT,WAAW,GAAW,MAAM,MAAM,WAAW,OAAO,sBAAsB,WAAW;EACrF,eAAe,MAAM,MAAM,iBAAiB;EAC7C,CAAC;AAEJ,QACE,oBAAC,OAAA;EACM;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,GAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,SAAS,CAAC;YAE3F,MAAM,SAAS,IAAI,WAAU,UAAU,iBAAiB,MAAM,GAAG,YAAY,MAAM,GAAG,MAAO;GAC1F;EAER"}
+{"version":3,"file":"index.js","names":["PanelList: React.FC<PanelListProps>","contextValue: PanelListContextValue"],"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 default PanelList;\n"],"mappings":";;;;;;AAuBA,IAAMA,aAAuC,UAA0B;CACrE,MAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,MAAM,eAAe,QAAQ;CAE9E,MAAMC,eAAsC,MAAM,eACzC;EACL;EACA;EACA,sBAAsB,sBAA+B,WAAW,mBAAmB,OAAO,sBAAsB,WAAW;EAC5H,GACD,CAAC,SAAS,cAAc,CACzB;AAED,QACE,oBAAC,iBAAiB,UAAA;EAAS,OAAO;YAChC,oBAAC,OAAA;GACM;GACL,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW,WAAW,GAAG,OAAO,yBAAyB,YAAY,aAAa,SAAS,CAAC;GAE3F;IACG;GACoB;;AC3ChC,IAAA,oBD+Ce"}

package/lib/components/PopMenu/index.js

@@ -1,68 +1,17 @@
-import "../../uuid.js";
-import "../../environment.js";
 import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
 import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import "../../color.js";
-import "../../spacing.js";
-import "../../currys.js";
 import { t as Icon_default } from "../../Icon.js";
-import "../../ArrowUpRight.js";
-import "../../language.js";
-import "../../Check.js";
-import "../../Avatar.js";
-import "../../CheckFill.js";
-import "../../ErrorSignFill.js";
-import "../../InfoSignFill.js";
-import "../../TriangleX.js";
-import "../../NotificationBadge.js";
-import "../../Badge.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
 import { t as LazyIcon_default } from "../../LazyIcon.js";
 import { t as isComponent } from "../../component.js";
-import "../../useIcons.js";
-import "../../useBreakpoint.js";
 import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
-import "../../ArrowRight.js";
 import { t as Button_default } from "../../Button.js";
-import "../../accessibility.js";
-import "../../Spacer.js";
-import "../../useElementList.js";
-import "../../useFocusableElements.js";
-import "../../useFocusToggle.js";
-import "../../focus.js";
-import "../../useFocusTrap.js";
-import "../../useIntersectionObserver.js";
-import "../../useIsVisible.js";
-import "../../debounce.js";
-import "../../useLayoutEvent.js";
-import "../../usePrevious.js";
-import "../../useSize.js";
-import "../../useResizeObserver.js";
-import "../../useToggle.js";
-import "../../useKeyboardEvent.js";
 import { t as useOutsideEvent } from "../../useOutsideEvent.js";
-import "../../mobile.js";
-import "../../src.js";
-import "../../StatusDot.js";
 import { t as X_default } from "../../X.js";
-import "../../floating-ui.react.js";
-import "../../Duolist.js";
-import "../../Highlighter.js";
-import "../../ElementHeaderText.js";
-import "../../StatusDotList.js";
-import "../../ElementHeader.js";
-import "../../ListEditMode.js";
 import { t as PopOver_default } from "../../PopOver.js";
-import "../../ChevronRight.js";
 import { t as VerticalDots_default } from "../../VerticalDots.js";
 import { t as LinkList_default } from "../../LinkList.js";
+import classNames from "classnames";
 import React, { useRef, useState } from "react";
-import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 let PopMenuVariant = /* @__PURE__ */ function(PopMenuVariant$1) {
@@ -95,7 +44,7 @@ const PopMenu = (props) => {
 	const renderChildren = () => {
 		if (isComponent(children, LinkList_default)) return /* @__PURE__ */ jsx(PopOver_default, {
 			testId: popOverTestId,
-			className: cn(styles["pop-menu__pop-over"], popOverClassName),
+			className: classNames(styles["pop-menu__pop-over"], popOverClassName),
 			controllerRef: iconRef,
 			role: "dialog",
 			show: isOpen,
@@ -128,7 +77,7 @@ const PopMenu = (props) => {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: outerRef,
-		className: cn(popMenuClassName),
+		className: classNames(popMenuClassName),
 		"data-analyticsid": AnalyticsId.PopMenu,
 		children: [/* @__PURE__ */ jsxs(Button_default, {
 			variant: "borderless",

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

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

package/lib/components/PopOver/index.js

@@ -1,5 +1,2 @@
-import "../../constants2.js";
-import "../../accessibility.js";
-import "../../floating-ui.react.js";
 import { n as PopOverVariant, t as PopOver_default } from "../../PopOver.js";
 export { PopOverVariant, PopOver_default as default };

package/lib/components/Portal/index.js

@@ -1,3 +1,2 @@
-import "../../constants2.js";
 import { t as Portal } from "../../Portal.js";
 export { Portal as default };

package/lib/components/Progressbar/index.js

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

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

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