@helsenorge/designsystem-react 13.0.0-beta.2 → 13.0.0-beta.5

package/lib/PanelOld.js

@@ -0,0 +1,322 @@
+import { a as IconSize, n as AnalyticsId } from "./constants2.js";
+import { t as palette } from "./palette.js";
+import { t as Icon_default } from "./Icon.js";
+import { t as Badge_default } from "./Badge.js";
+import { t as ArrowRight_default } from "./ArrowRight.js";
+import { t as Button_default } from "./Button.js";
+import { n as getAriaLabelAttributes } from "./accessibility.js";
+import { t as Title_default } from "./Title2.js";
+import { t as ChevronDown_default } from "./ChevronDown.js";
+import { t as ChevronUp_default } from "./ChevronUp.js";
+import { t as useExpand } from "./useExpand.js";
+import { t as AlertSignFill_default } from "./AlertSignFill.js";
+import { t as Calendar_default } from "./Calendar.js";
+import { t as Pencil_default } from "./Pencil.js";
+import { t as Watch_default } from "./Watch.js";
+import React, { useId } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import panelStyles from "./components/PanelOld/styles.module.scss";
+let PanelOldStatus = /* @__PURE__ */ function(PanelOldStatus$1) {
+	PanelOldStatus$1["normal"] = "normal";
+	PanelOldStatus$1["new"] = "new";
+	PanelOldStatus$1["error"] = "error";
+	PanelOldStatus$1["draft"] = "draft";
+	return PanelOldStatus$1;
+}({});
+let PanelOldVariant = /* @__PURE__ */ function(PanelOldVariant$1) {
+	PanelOldVariant$1["fill"] = "fill";
+	PanelOldVariant$1["white"] = "white";
+	PanelOldVariant$1["stroke"] = "stroke";
+	PanelOldVariant$1["line"] = "line";
+	return PanelOldVariant$1;
+}({});
+let PanelOldLayout = /* @__PURE__ */ function(PanelOldLayout$1) {
+	PanelOldLayout$1["layout1"] = "layout1";
+	PanelOldLayout$1["layout2"] = "layout2";
+	PanelOldLayout$1["layout3a"] = "layout3a";
+	PanelOldLayout$1["layout3b"] = "layout3b";
+	PanelOldLayout$1["layout3c"] = "layout3c";
+	return PanelOldLayout$1;
+}({});
+var StatusText = ({ status, statusMessage }) => {
+	const statusIcon = () => {
+		if (status === PanelOldStatus.error) return {
+			color: palette.cherry500,
+			svgIcon: AlertSignFill_default
+		};
+		return {
+			color: palette.black,
+			svgIcon: Pencil_default
+		};
+	};
+	const statusMessageClass = classNames(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
+	if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) return /* @__PURE__ */ jsxs("div", {
+		className: statusMessageClass,
+		"data-testid": "display-status",
+		children: [
+			/* @__PURE__ */ jsx(Icon_default, {
+				...statusIcon(),
+				size: IconSize.XSmall
+			}),
+			" ",
+			/* @__PURE__ */ jsx("span", { children: statusMessage })
+		]
+	});
+	return null;
+};
+var PreContainer = ({ children }) => {
+	if (typeof children === "undefined") return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: panelStyles["header-container"],
+		children
+	});
+};
+var DateTime = ({ date, time }) => {
+	if (date || time) return /* @__PURE__ */ jsxs("div", {
+		className: panelStyles["datetime-container"],
+		"data-testid": "datetime",
+		children: [date && /* @__PURE__ */ jsxs("div", {
+			className: panelStyles["datetime-container__icon"],
+			children: [/* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: Calendar_default,
+				size: IconSize.XSmall
+			}), /* @__PURE__ */ jsx("span", { children: date })]
+		}), time && /* @__PURE__ */ jsxs("div", {
+			className: panelStyles["datetime-container__icon"],
+			children: [/* @__PURE__ */ jsx(Icon_default, {
+				svgIcon: Watch_default,
+				size: IconSize.XSmall
+			}), /* @__PURE__ */ jsx("span", { children: time })]
+		})]
+	});
+	return null;
+};
+var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
+	const panelLayoutClasses = classNames(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
+	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	return /* @__PURE__ */ jsxs("div", {
+		className: panelLayoutClasses,
+		children: [
+			/* @__PURE__ */ jsx(StatusText, {
+				status,
+				statusMessage
+			}),
+			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+			icon && /* @__PURE__ */ jsx("div", {
+				className: iconClasses,
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: panelStyles["panel__layout-1__content-a"],
+				children: [titleElement, contentA]
+			}),
+			contentB && /* @__PURE__ */ jsx("div", { children: contentB }),
+			ctaContainer
+		]
+	});
+};
+var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
+	const panelLayoutClasses = classNames(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
+	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const lastColumnClass = panelStyles["panel__layout-2__last-column"];
+	return /* @__PURE__ */ jsxs("div", {
+		className: panelLayoutClasses,
+		children: [
+			/* @__PURE__ */ jsx(StatusText, {
+				status,
+				statusMessage
+			}),
+			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+			icon && /* @__PURE__ */ jsx("div", {
+				className: iconClasses,
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: panelStyles["panel__layout-2__content-a"],
+				children: [titleElement, contentA]
+			}),
+			contentB && /* @__PURE__ */ jsx("div", {
+				className: lastColumnClass,
+				children: contentB
+			}),
+			ctaContainer && /* @__PURE__ */ jsx("div", {
+				className: lastColumnClass,
+				children: ctaContainer
+			})
+		]
+	});
+};
+var PanelLayout3 = ({ contentA, contentB, contentHeader, ctaContainer, icon, layout, status, statusMessage, titleElement }) => {
+	const layoutClasses = classNames(panelStyles["panel__layout-3"], {
+		[panelStyles["panel__layout-3--with-icon"]]: icon,
+		[panelStyles["panel__layout-3--a"]]: layout === PanelOldLayout.layout3a,
+		[panelStyles["panel__layout-3--b"]]: layout === PanelOldLayout.layout3b,
+		[panelStyles["panel__layout-3--c"]]: layout === PanelOldLayout.layout3c
+	});
+	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	return /* @__PURE__ */ jsxs("div", {
+		className: layoutClasses,
+		children: [
+			/* @__PURE__ */ jsx(StatusText, {
+				status,
+				statusMessage
+			}),
+			/* @__PURE__ */ jsx(PreContainer, { children: contentHeader }),
+			icon && /* @__PURE__ */ jsx("div", {
+				className: iconClasses,
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [titleElement, contentA] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: panelStyles["panel__layout-3__last-column"],
+				children: [contentB && /* @__PURE__ */ jsx("div", {
+					className: panelStyles["panel__layout-3__last-column__content-b"],
+					children: contentB
+				}), ctaContainer]
+			})
+		]
+	});
+};
+var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref) {
+	const { buttonAriaLabel, buttonAriaLabelledById, buttonText = "Se detaljer", buttonTextClose = "Skjul detaljer", buttonHtmlMarkup = "a", buttonOnClick, children, className, containerAsButton = false, contentA, contentB, contentHeader, date, expanded = false, focusable = false, icon, layout = PanelOldLayout.layout2, noTopBorder, onExpand, renderChildrenWhenClosed = false, status = PanelOldStatus.normal, statusMessage, target = "_self", testId, time, title, titleHtmlMarkup = "h2", url, variant = PanelOldVariant.fill } = props;
+	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
+	const titleId = useId();
+	const buttonTextId = useId();
+	const hasBadge = statusMessage && status === PanelOldStatus.new;
+	const noContentB = typeof contentB === "undefined";
+	const layout1 = layout === "layout1" || noContentB;
+	const layout2 = !noContentB && layout === "layout2";
+	const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
+	const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
+	const panelClasses = classNames(panelStyles.panel, {
+		[panelStyles["panel--fill"]]: variant === PanelOldVariant.fill,
+		[panelStyles["panel--stroke"]]: variant === PanelOldVariant.stroke,
+		[panelStyles["panel--white"]]: variant === PanelOldVariant.white,
+		[panelStyles["panel--line"]]: variant === PanelOldVariant.line,
+		[panelStyles["panel--no-top-border"]]: variant === PanelOldVariant.line && noTopBorder,
+		[panelStyles["panel--selected"]]: isExpanded,
+		[panelStyles["panel--new"]]: status === PanelOldStatus.new,
+		[panelStyles["panel--draft"]]: status === PanelOldStatus.draft,
+		[panelStyles["panel--error"]]: status === PanelOldStatus.error,
+		[panelStyles["panel--status"]]: status && status !== PanelOldStatus.normal,
+		[panelStyles["panel--with-icon"]]: icon,
+		[panelStyles["panel--button"]]: containerAsButton,
+		[panelStyles["panel--clickable"]]: children || url || onExpand || buttonOnClick || containerAsButton
+	});
+	const renderCTAContainer = () => {
+		const hasButton = children || url || buttonOnClick;
+		const btnContainerClasses = classNames(panelStyles["panel__btn-container"], {
+			[panelStyles["panel__btn-container--no-content-b"]]: noContentB,
+			[panelStyles["panel__btn-container--no-button"]]: !hasButton
+		});
+		return (hasButton || date || time) && /* @__PURE__ */ jsxs("div", {
+			className: btnContainerClasses,
+			children: [/* @__PURE__ */ jsx(DateTime, {
+				date,
+				time
+			}), hasButton && /* @__PURE__ */ jsx("div", {
+				className: panelStyles["panel__details-btn"],
+				children: renderDetailsButton()
+			})]
+		});
+	};
+	const renderDetailsButton = () => {
+		const ariaLabelAttributes = getAriaLabelAttributes({
+			label: buttonAriaLabel,
+			id: buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}` || title && titleId && `${buttonTextId} ${titleId}`,
+			prefer: "label"
+		});
+		const commonProps = {
+			onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),
+			className: containerAsButton ? panelStyles["panel__expand"] : void 0,
+			variant: "borderless",
+			ellipsis: true,
+			...ariaLabelAttributes
+		};
+		if (children) return /* @__PURE__ */ jsxs(Button_default, {
+			testId: "expand",
+			"aria-expanded": isExpanded,
+			...commonProps,
+			children: [/* @__PURE__ */ jsx("span", {
+				id: buttonTextId,
+				children: isExpanded ? buttonTextClose : buttonText
+			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default })]
+		});
+		return /* @__PURE__ */ jsxs(Button_default, {
+			testId: "url",
+			htmlMarkup: buttonHtmlMarkup,
+			href: url,
+			target,
+			...commonProps,
+			children: [/* @__PURE__ */ jsx("span", {
+				id: buttonTextId,
+				children: buttonText
+			}), /* @__PURE__ */ jsx(Icon_default, { svgIcon: ArrowRight_default })]
+		});
+	};
+	const renderContent = () => {
+		if (!children || !renderChildrenWhenClosed && !isExpanded) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: classNames(panelStyles["panel-details"], {
+				[panelStyles["panel-details--open"]]: isExpanded,
+				[panelStyles["panel-details--line"]]: variant === PanelOldVariant.line,
+				[panelStyles["panel-details--white"]]: variant === PanelOldVariant.white
+			}),
+			"data-testid": "panel-details",
+			children: /* @__PURE__ */ jsx("div", { children })
+		});
+	};
+	const renderTitle = () => {
+		const titleContainerClasses = classNames(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
+		const titleClasses = classNames(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
+		return title && /* @__PURE__ */ jsxs("div", {
+			className: titleContainerClasses,
+			children: [/* @__PURE__ */ jsx(Title_default, {
+				appearance: "title3",
+				htmlMarkup: titleHtmlMarkup,
+				id: titleId,
+				className: titleClasses,
+				children: title
+			}), hasBadge && /* @__PURE__ */ jsx("div", {
+				className: panelStyles.panel__badge,
+				children: /* @__PURE__ */ jsx(Badge_default, {
+					color: "blueberry",
+					testId: "badge-status",
+					children: statusMessage
+				})
+			})]
+		});
+	};
+	const layoutProps = {
+		contentA,
+		contentB,
+		contentHeader,
+		ctaContainer: renderCTAContainer(),
+		icon,
+		status,
+		statusMessage,
+		titleElement: renderTitle()
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		tabIndex: focusable ? -1 : void 0,
+		ref,
+		"data-testid": testId,
+		className: panelWrapperClasses,
+		"data-analyticsid": AnalyticsId.PanelOld,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: panelClasses,
+			children: [
+				layout1 && /* @__PURE__ */ jsx(PanelLayout1, { ...layoutProps }),
+				layout2 && /* @__PURE__ */ jsx(PanelLayout2, { ...layoutProps }),
+				layout3 && /* @__PURE__ */ jsx(PanelLayout3, {
+					...layoutProps,
+					layout
+				})
+			]
+		}), renderContent()]
+	});
+});
+export { PanelOldVariant as i, PanelOldLayout as n, PanelOldStatus as r, PanelOld_default$1 as t };
+
+//# sourceMappingURL=PanelOld.js.map

package/lib/PanelOld.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelOld.js","names":["StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }>","PreContainer: React.FC<{ children?: React.ReactNode }>","DateTime: React.FC<{ date?: string; time?: string }>","PanelLayout1: React.FC<LayoutProps>","PanelLayout2: React.FC<LayoutProps>","PanelLayout3: React.FC<LayoutProps>","commonProps: Partial<ButtonProps> & AriaLabelAttributes","layoutProps: LayoutProps"],"sources":["../src/components/PanelOld/PanelOld.tsx","../src/components/PanelOld/index.tsx"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useId();\n  const buttonTextId = useId();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n","import PanelOld from './PanelOld';\nexport * from './PanelOld';\nexport default PanelOld;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,YAAA;AACA,kBAAA,SAAA;AACA,kBAAA,WAAA;AACA,kBAAA,WAAA;;;AAGF,IAAY,kBAAA,yBAAA,mBAAL;AACL,mBAAA,UAAA;AACA,mBAAA,WAAA;AACA,mBAAA,YAAA;AACA,mBAAA,UAAA;;;AAGF,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,aAAA;AACA,kBAAA,aAAA;AACA,kBAAA,cAAA;AACA,kBAAA,cAAA;AACA,kBAAA,cAAA;;;AAsEF,IAAMA,cAA0F,EAAE,QAAQ,oBAAoB;CAC5H,MAAM,mBAAuE;AAC3E,MAAI,WAAW,eAAe,MAC5B,QAAO;GAAE,OAAO,QAAQ;GAAW,SAAS;GAAe;AAG7D,SAAO;GAAE,OAAO,QAAQ;GAAO,SAAS;GAAQ;;CAGlD,MAAM,qBAAqB,WAAW,YAAY,mBAAmB,GAClE,YAAY,yBAAyB,WAAW,eAAe,KACjE,CAAC;AAEF,MAAK,WAAW,eAAe,SAAS,WAAW,eAAe,UAAU,cAC1E,QACE,qBAAC,OAAA;EAAI,WAAW;EAAoB,eAAY;;GAC7C,oBAAC,cAAA;IAAK,GAAI,YAAY;IAAE,MAAM,SAAS;KAAU;GAAC;GAAC,oBAAC,QAAA,EAAA,UAAM,eAAA,CAAqB;;GAC5E;AAIV,QAAO;;AAGT,IAAMC,gBAA0D,EAAE,eAAe;AAC/E,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,oBAAC,OAAA;EAAI,WAAW,YAAY;EAAsB;GAAe;;AAG1E,IAAMC,YAAwD,EAAE,MAAM,WAAW;AAC/E,KAAI,QAAQ,KACV,QACE,qBAAC,OAAA;EAAI,WAAW,YAAY;EAAuB,eAAY;aAC5D,QACC,qBAAC,OAAA;GAAI,WAAW,YAAY;cAC1B,oBAAC,cAAA;IAAK,SAAS;IAAU,MAAM,SAAS;KAAU,EAClD,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA;IACf,EAEP,QACC,qBAAC,OAAA;GAAI,WAAW,YAAY;cAC1B,oBAAC,cAAA;IAAK,SAAS;IAAO,MAAM,SAAS;KAAU,EAC/C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA;IACf,CAAA;GAEJ;AAIV,QAAO;;AAGT,IAAMC,gBAAuC,EAC3C,UACA,UACA,eACA,cACA,MACA,QACA,eACA,mBACI;CACJ,MAAM,qBAAqB,WAAW,YAAY,oBAAoB,GACnE,YAAY,gCAAgC,MAC9C,CAAC;CACF,MAAM,cAAc,WAAW,YAAY,aAAa,YAAY,0BAA0B,GAC3F,YAAY,6BAA6B,CAAC,YAAY,CAAC,UACzD,CAAC;AAEF,QACE,qBAAC,OAAA;EAAI,WAAW;;GACd,oBAAC,YAAA;IAAmB;IAAuB;KAAiB;GAC5D,oBAAC,cAAA,EAAA,UAAc,eAAA,CAA6B;GAC3C,QAAQ,oBAAC,OAAA;IAAI,WAAW;cAAc;KAAW;GAClD,qBAAC,OAAA;IAAI,WAAW,YAAY;eACzB,cACA,SAAA;KACG;GACL,YAAY,oBAAC,OAAA,EAAA,UAAK,UAAA,CAAe;GACjC;;GACG;;AAIV,IAAMC,gBAAuC,EAC3C,UACA,UACA,eACA,cACA,MACA,QACA,eACA,mBACI;CACJ,MAAM,qBAAqB,WAAW,YAAY,oBAAoB,GACnE,YAAY,gCAAgC,MAC9C,CAAC;CACF,MAAM,cAAc,WAAW,YAAY,aAAa,YAAY,0BAA0B,GAC3F,YAAY,6BAA6B,CAAC,YAAY,CAAC,UACzD,CAAC;CACF,MAAM,kBAAkB,YAAY;AAEpC,QACE,qBAAC,OAAA;EAAI,WAAW;;GACd,oBAAC,YAAA;IAAmB;IAAuB;KAAiB;GAC5D,oBAAC,cAAA,EAAA,UAAc,eAAA,CAA6B;GAC3C,QAAQ,oBAAC,OAAA;IAAI,WAAW;cAAc;KAAW;GAClD,qBAAC,OAAA;IAAI,WAAW,YAAY;eACzB,cACA,SAAA;KACG;GACL,YAAY,oBAAC,OAAA;IAAI,WAAW;cAAkB;KAAe;GAC7D,gBAAgB,oBAAC,OAAA;IAAI,WAAW;cAAkB;KAAmB;;GAClE;;AAIV,IAAMC,gBAAuC,EAC3C,UACA,UACA,eACA,cACA,MACA,QACA,QACA,eACA,mBACI;CACJ,MAAM,gBAAgB,WAAW,YAAY,oBAAoB;GAC9D,YAAY,gCAAgC;GAC5C,YAAY,wBAAwB,WAAW,eAAe;GAC9D,YAAY,wBAAwB,WAAW,eAAe;GAC9D,YAAY,wBAAwB,WAAW,eAAe;EAChE,CAAC;CACF,MAAM,cAAc,WAAW,YAAY,aAAa,YAAY,0BAA0B,GAC3F,YAAY,6BAA6B,CAAC,YAAY,CAAC,UACzD,CAAC;AAEF,QACE,qBAAC,OAAA;EAAI,WAAW;;GACd,oBAAC,YAAA;IAAmB;IAAuB;KAAiB;GAC5D,oBAAC,cAAA,EAAA,UAAc,eAAA,CAA6B;GAC3C,QAAQ,oBAAC,OAAA;IAAI,WAAW;cAAc;KAAW;GAClD,qBAAC,OAAA,EAAA,UAAA,CACE,cACA,SAAA,EAAA,CACG;GACN,qBAAC,OAAA;IAAI,WAAW,YAAY;eACzB,YAAY,oBAAC,OAAA;KAAI,WAAW,YAAY;eAA6C;MAAe,EACpG,aAAA;KACG;;GACF;;ACpQV,IAAA,qBDwQiB,MAAM,WAAW,SAAS,kBAAkB,OAAsB,KAA6C;CAC9H,MAAM,EACJ,iBACA,wBACA,aAAa,eACb,kBAAkB,kBAClB,mBAAmB,KACnB,eACA,UACA,WACA,oBAAoB,OACpB,UACA,UACA,eACA,MACA,WAAW,OACX,YAAY,OACZ,MACA,SAAS,eAAe,SACxB,aACA,UACA,2BAA2B,OAC3B,SAAS,eAAe,QACxB,eACA,SAAS,SACT,QACA,MACA,OACA,kBAAkB,MAClB,KACA,UAAU,gBAAgB,SACxB;CAEJ,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,SAAS;CACjE,MAAM,UAAU,OAAO;CACvB,MAAM,eAAe,OAAO;CAC5B,MAAM,WAAW,iBAAiB,WAAW,eAAe;CAC5D,MAAM,aAAa,OAAO,aAAa;CACvC,MAAM,UAAU,WAAW,aAAa;CACxC,MAAM,UAAU,CAAC,cAAc,WAAW;CAC1C,MAAM,UAAU,CAAC,eAAe,WAAW,cAAc,WAAW,cAAc,WAAW;CAC7F,MAAM,sBAAsB,WAAW,YAAY,kBAAkB,UAAU;CAE/E,MAAM,eAAe,WAAW,YAAY,OAAO;GAChD,YAAY,iBAAiB,YAAY,gBAAgB;GACzD,YAAY,mBAAmB,YAAY,gBAAgB;GAC3D,YAAY,kBAAkB,YAAY,gBAAgB;GAC1D,YAAY,iBAAiB,YAAY,gBAAgB;GACzD,YAAY,0BAA0B,YAAY,gBAAgB,QAAQ;GAC1E,YAAY,qBAAqB;GACjC,YAAY,gBAAgB,WAAW,eAAe;GACtD,YAAY,kBAAkB,WAAW,eAAe;GACxD,YAAY,kBAAkB,WAAW,eAAe;GACxD,YAAY,mBAAmB,UAAU,WAAW,eAAe;GACnE,YAAY,sBAAsB;GAClC,YAAY,mBAAmB;GAC/B,YAAY,sBAAsB,YAAY,OAAO,YAAY,iBAAiB;EACpF,CAAC;CAEF,MAAM,2BAA2B;EAC/B,MAAM,YAAY,YAAY,OAAO;EACrC,MAAM,sBAAsB,WAAW,YAAY,yBAAyB;IACzE,YAAY,wCAAwC;IACpD,YAAY,qCAAqC,CAAC;GACpD,CAAC;AAEF,UACG,aAAa,QAAQ,SACpB,qBAAC,OAAA;GAAI,WAAW;cACb,oBAAC,UAAA;IAAe;IAAY;KAAQ,EACpC,aAAa,oBAAC,OAAA;IAAI,WAAW,YAAY;cAAwB,qBAAqB;KAAO,CAAA;IAC1F;;CAKZ,MAAM,4BAA6C;EACjD,MAAM,sBAAsB,uBAAuB;GACjD,OAAO;GACP,IAAK,0BAA0B,GAAG,aAAa,GAAG,4BAA8B,SAAS,WAAW,GAAG,aAAa,GAAG;GACvH,QAAQ;GACT,CAAC;EAEF,MAAMC,cAA0D;GAC9D,SAAS,gBAAgB,sBAA4B,cAAc,CAAC,WAAW;GAC/E,WAAW,oBAAoB,YAAY,mBAAmB,KAAA;GAC9D,SAAS;GACT,UAAU;GACV,GAAG;GACJ;AAED,MAAI,SACF,QACE,qBAAC,gBAAA;GAAO,QAAO;GAAS,iBAAe;GAAY,GAAI;cACrD,oBAAC,QAAA;IAAK,IAAI;cAAe,aAAa,kBAAkB;KAAkB,EAC1E,oBAAC,cAAA,EAAK,SAAS,aAAa,oBAAY,qBAAA,CAAe,CAAA;IAChD;AAIb,SACE,qBAAC,gBAAA;GAAO,QAAO;GAAM,YAAY;GAAkB,MAAM;GAAa;GAAQ,GAAI;cAChF,oBAAC,QAAA;IAAK,IAAI;cAAe;KAAkB,EAC3C,oBAAC,cAAA,EAAK,SAAS,oBAAA,CAAc,CAAA;IACtB;;CAIb,MAAM,sBAA8C;AAClD,MAAI,CAAC,YAAa,CAAC,4BAA4B,CAAC,WAC9C,QAAO;AAST,SACE,oBAAC,OAAA;GAAI,WAPqB,WAAW,YAAY,kBAAkB;KAClE,YAAY,yBAAyB;KACrC,YAAY,yBAAyB,YAAY,gBAAgB;KACjE,YAAY,0BAA0B,YAAY,gBAAgB;IACpE,CAAC;GAGqC,eAAY;aAC/C,oBAAC,OAAA,EAAK,UAAA,CAAe;IACjB;;CAIV,MAAM,oBAAoB;EACxB,MAAM,wBAAwB,WAAW,YAAY,oBAAoB,GACtE,YAAY,mCAAmC,CAAC,UAClD,CAAC;EACF,MAAM,eAAe,WAAW,YAAY,2BAA2B,GACpE,YAAY,mCAAmC,UACjD,CAAC;AAEF,SACE,SACE,qBAAC,OAAA;GAAI,WAAW;cACd,oBAAC,eAAA;IAAM,YAAW;IAAS,YAAY;IAAiB,IAAI;IAAS,WAAW;cAC7E;KACK,EACP,YACC,oBAAC,OAAA;IAAI,WAAW,YAAY;cAC1B,oBAAC,eAAA;KAAM,OAAM;KAAY,QAAO;eAC7B;MACK;KACJ,CAAA;IAEJ;;CAKZ,MAAMC,cAA2B;EACrB;EACA;EACK;EACf,cAAc,oBAAoB;EAC5B;EACE;EACO;EACf,cAAc,aAAa;EAC5B;AAED,QACE,qBAAC,OAAA;EACC,UAAU,YAAY,KAAK,KAAA;EACtB;EACL,eAAa;EACb,WAAW;EACX,oBAAkB,YAAY;aAE9B,qBAAC,OAAA;GAAI,WAAW;;IACb,WAAW,oBAAC,cAAA,EAAa,GAAI,aAAA,CAAe;IAC5C,WAAW,oBAAC,cAAA,EAAa,GAAI,aAAA,CAAe;IAC5C,WAAW,oBAAC,cAAA;KAAa,GAAI;KAAqB;MAAU;;IACzD,EACL,eAAe,CAAA;GACZ;EAER"}

package/lib/PanelTitle.js

@@ -0,0 +1,34 @@
+import { t as Title_default } from "./Title2.js";
+import { t as Highlighter_default } from "./Highlighter.js";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/Panel/PanelTitle/styles.module.scss";
+var PanelTitle = (props) => {
+	const { testId, icon, badge, title, titleMarkup = "h3", highlightText } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
+		"data-testid": testId,
+		children: [icon && /* @__PURE__ */ jsx("div", {
+			className: styles["paneltitle__icon"],
+			children: icon
+		}), title && /* @__PURE__ */ jsxs("div", {
+			className: styles["paneltitle__title"],
+			children: [/* @__PURE__ */ jsx(Title_default, {
+				appearance: "title3",
+				htmlMarkup: titleMarkup,
+				children: /* @__PURE__ */ jsx(Highlighter_default, {
+					searchText: highlightText,
+					children: title
+				})
+			}), badge && /* @__PURE__ */ jsx("div", {
+				className: styles["paneltitle__badge"],
+				children: badge
+			})]
+		})]
+	});
+};
+var PanelTitle_default$1 = PanelTitle;
+export { PanelTitle_default$1 as t };
+
+//# sourceMappingURL=PanelTitle.js.map

package/lib/PanelTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTitle.js","names":["PanelTitle: React.FC<PanelTitleProps>"],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n","import PanelTitle from './PanelTitle';\nexport * from './PanelTitle';\nexport default PanelTitle;\n"],"mappings":";;;;;;AAwBA,IAAMA,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,MAAM,CAAC;EAAE,eAAa;aACxG,QAAQ,oBAAC,OAAA;GAAI,WAAW,OAAO;aAAsB;IAAW,EAChE,SACC,qBAAC,OAAA;GAAI,WAAW,OAAO;cACrB,oBAAC,eAAA;IAAM,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAA;KAAY,YAAY;eAAgB;MAAoB;KACvD,EACP,SAAS,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAuB;KAAY,CAAA;IAChE,CAAA;GAEJ;;ACnCV,IAAA,uBDuCe"}

package/lib/Pencil.js

@@ -0,0 +1,27 @@
+import { r as getIcon } from "./Icon.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var Pencil = ({ size, isHovered }) => {
+	return getIcon({
+		size,
+		isHovered,
+		normal: /* @__PURE__ */ jsx("path", { d: "M38.485 15.54l-.757.757-6.035-6.034.757-.758a4.275 4.275 0 016.035 0 4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.619 1.62zM19.927 34.098l-2.66-2.66L32.14 16.773l2.555 2.556-14.768 14.768zm-6.683 3.13l-2.47-2.472 2.416-5.558 5.604 5.604-5.55 2.425zm-4.373 1.908l1.475-3.394 1.914 1.914-3.389 1.48zm19.79-25.84l2.772 2.771L16.56 30.73l-2.667-2.667 14.768-14.768zm10.743-4.71a5.575 5.575 0 00-7.873 0L12.514 27.603a.655.655 0 00-.136.201l-5.359 12.33a.65.65 0 00.857.855l12.312-5.377a.63.63 0 00.199-.136L39.404 16.46a5.574 5.574 0 000-7.873z" }),
+		normalHover: /* @__PURE__ */ jsx("path", { d: "M44.486 15.537l-.757.757-6.035-6.034.757-.758a4.244 4.244 0 013.017-1.25c1.14 0 2.212.445 3.018 1.25a4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.62 1.62zM25.928 34.096l-2.66-2.661L38.14 16.771l2.556 2.556-14.768 14.768zm-6.683 3.128l-2.47-2.47 2.415-5.56 5.605 5.606-5.55 2.424zm-4.373 1.91l1.474-3.395 1.914 1.915-3.388 1.48zm19.79-25.841l2.77 2.77-14.871 14.664-2.667-2.666 14.768-14.768zm10.743-4.71l-.46.46.459-.46a5.53 5.53 0 00-3.936-1.63 5.534 5.534 0 00-3.936 1.63L18.515 27.6a.655.655 0 00-.136.201l-5.192 11.945H7.615v1.3h6v-.005a.663.663 0 00.262-.054l12.312-5.378a.63.63 0 00.199-.136l19.017-19.017a5.574 5.574 0 000-7.872z" }),
+		xSmall: /* @__PURE__ */ jsx("path", { d: "M38.188 15.243l-.754.754-5.702-5.703.753-.755c1.522-1.523 4.178-1.522 5.703 0a4.04 4.04 0 010 5.704zm-3.08 3.08l-5.702-5.704 1.61-1.61 5.703 5.703-1.61 1.61zM19.796 33.633l-2.49-2.49 14.702-14.493 2.387 2.385-14.599 14.598zm-6.856 3.28l-2.117-2.118 2.313-5.32 5.118 5.118-5.314 2.32zm-3.75 1.638l1.2-2.758 1.554 1.555-2.753 1.203zm19.501-25.218l2.602 2.602L16.592 30.43l-2.499-2.499 14.598-14.597zM39.438 8.29V8.29a5.768 5.768 0 00-4.102-1.699 5.765 5.765 0 00-4.102 1.699L12.216 27.306a.895.895 0 00-.184.274L6.673 39.91a.884.884 0 001.165 1.163l12.312-5.377a.888.888 0 00.271-.186l19.017-19.017a5.808 5.808 0 000-8.203z" }),
+		xSmallHover: /* @__PURE__ */ jsx("path", { d: "M44.188 15.871l-.753.753-5.703-5.702.753-.754a4.04 4.04 0 015.703 0 4.003 4.003 0 011.182 2.852 4 4 0 01-1.182 2.851zM41.11 18.95l-5.703-5.702 1.61-1.612 5.703 5.703-1.61 1.61zM25.798 34.263l-2.491-2.49L38.009 17.28l2.386 2.384-14.597 14.599zm-6.857 3.28l-2.118-2.117 2.313-5.322 5.12 5.119-5.315 2.32zm-3.749 1.637l1.199-2.757 1.555 1.555-2.754 1.202zm19.5-25.217l2.602 2.602-14.702 14.493-2.497-2.498 14.597-14.597zm10.747-5.045a5.81 5.81 0 00-8.205 0L18.218 27.934a.895.895 0 00-.185.274l-5.13 11.805h-5.42v1.768h6.001v-.006c.12 0 .242-.024.355-.073l12.312-5.378a.888.888 0 00.272-.185l19.016-19.017a5.764 5.764 0 001.7-4.102c0-1.55-.605-3.006-1.7-4.102z" }),
+		xxSmall: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M32.326 9.147a4 4 0 0 0-5.617.01l-17.2 17.019L8 38.555l12.152-1.803 17.13-17.066A4 4 0 0 0 37.263 14l-4.937-4.853ZM29.522 12l4.937 4.853-2.338 2.329-4.902-4.903L29.522 12Zm-5.146 5.093L13.31 28.04l-.705 5.787 5.656-.84 11.026-10.983-4.913-4.912Z"
+		}),
+		xxSmallHover: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M24.043 6.492a4 4 0 0 0-4.86 2.817l-6.387 23.339 4.883 11.474 9.623-7.637 6.303-23.344a4 4 0 0 0-2.86-4.915l-6.702-1.734Zm-1.002 3.872 6.702 1.734-.86 3.186-6.697-1.794.855-3.126Zm-1.911 6.984-4.108 15.014 2.282 5.364 4.48-3.555 4.056-15.025-6.71-1.798Z"
+		})
+	});
+};
+var Pencil_default = Pencil;
+export { Pencil_default as t };
+
+//# sourceMappingURL=Pencil.js.map

package/lib/Pencil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pencil.js","names":["Pencil: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/Pencil.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst Pencil: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M38.485 15.54l-.757.757-6.035-6.034.757-.758a4.275 4.275 0 016.035 0 4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.619 1.62zM19.927 34.098l-2.66-2.66L32.14 16.773l2.555 2.556-14.768 14.768zm-6.683 3.13l-2.47-2.472 2.416-5.558 5.604 5.604-5.55 2.425zm-4.373 1.908l1.475-3.394 1.914 1.914-3.389 1.48zm19.79-25.84l2.772 2.771L16.56 30.73l-2.667-2.667 14.768-14.768zm10.743-4.71a5.575 5.575 0 00-7.873 0L12.514 27.603a.655.655 0 00-.136.201l-5.359 12.33a.65.65 0 00.857.855l12.312-5.377a.63.63 0 00.199-.136L39.404 16.46a5.574 5.574 0 000-7.873z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M44.486 15.537l-.757.757-6.035-6.034.757-.758a4.244 4.244 0 013.017-1.25c1.14 0 2.212.445 3.018 1.25a4.274 4.274 0 010 6.035zm-3.083 3.083l-6.034-6.035 1.618-1.618 6.035 6.034-1.62 1.62zM25.928 34.096l-2.66-2.661L38.14 16.771l2.556 2.556-14.768 14.768zm-6.683 3.128l-2.47-2.47 2.415-5.56 5.605 5.606-5.55 2.424zm-4.373 1.91l1.474-3.395 1.914 1.915-3.388 1.48zm19.79-25.841l2.77 2.77-14.871 14.664-2.667-2.666 14.768-14.768zm10.743-4.71l-.46.46.459-.46a5.53 5.53 0 00-3.936-1.63 5.534 5.534 0 00-3.936 1.63L18.515 27.6a.655.655 0 00-.136.201l-5.192 11.945H7.615v1.3h6v-.005a.663.663 0 00.262-.054l12.312-5.378a.63.63 0 00.199-.136l19.017-19.017a5.574 5.574 0 000-7.872z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M38.188 15.243l-.754.754-5.702-5.703.753-.755c1.522-1.523 4.178-1.522 5.703 0a4.04 4.04 0 010 5.704zm-3.08 3.08l-5.702-5.704 1.61-1.61 5.703 5.703-1.61 1.61zM19.796 33.633l-2.49-2.49 14.702-14.493 2.387 2.385-14.599 14.598zm-6.856 3.28l-2.117-2.118 2.313-5.32 5.118 5.118-5.314 2.32zm-3.75 1.638l1.2-2.758 1.554 1.555-2.753 1.203zm19.501-25.218l2.602 2.602L16.592 30.43l-2.499-2.499 14.598-14.597zM39.438 8.29V8.29a5.768 5.768 0 00-4.102-1.699 5.765 5.765 0 00-4.102 1.699L12.216 27.306a.895.895 0 00-.184.274L6.673 39.91a.884.884 0 001.165 1.163l12.312-5.377a.888.888 0 00.271-.186l19.017-19.017a5.808 5.808 0 000-8.203z\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M44.188 15.871l-.753.753-5.703-5.702.753-.754a4.04 4.04 0 015.703 0 4.003 4.003 0 011.182 2.852 4 4 0 01-1.182 2.851zM41.11 18.95l-5.703-5.702 1.61-1.612 5.703 5.703-1.61 1.61zM25.798 34.263l-2.491-2.49L38.009 17.28l2.386 2.384-14.597 14.599zm-6.857 3.28l-2.118-2.117 2.313-5.322 5.12 5.119-5.315 2.32zm-3.749 1.637l1.199-2.757 1.555 1.555-2.754 1.202zm19.5-25.217l2.602 2.602-14.702 14.493-2.497-2.498 14.597-14.597zm10.747-5.045a5.81 5.81 0 00-8.205 0L18.218 27.934a.895.895 0 00-.185.274l-5.13 11.805h-5.42v1.768h6.001v-.006c.12 0 .242-.024.355-.073l12.312-5.378a.888.888 0 00.272-.185l19.016-19.017a5.764 5.764 0 001.7-4.102c0-1.55-.605-3.006-1.7-4.102z\" />\n  );\n\n  const xxSmall = (\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M32.326 9.147a4 4 0 0 0-5.617.01l-17.2 17.019L8 38.555l12.152-1.803 17.13-17.066A4 4 0 0 0 37.263 14l-4.937-4.853ZM29.522 12l4.937 4.853-2.338 2.329-4.902-4.903L29.522 12Zm-5.146 5.093L13.31 28.04l-.705 5.787 5.656-.84 11.026-10.983-4.913-4.912Z\"\n    />\n  );\n\n  const xxSmallHover = (\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M24.043 6.492a4 4 0 0 0-4.86 2.817l-6.387 23.339 4.883 11.474 9.623-7.637 6.303-23.344a4 4 0 0 0-2.86-4.915l-6.702-1.734Zm-1.002 3.872 6.702 1.734-.86 3.186-6.697-1.794.855-3.126Zm-1.911 6.984-4.108 15.014 2.282 5.364 4.48-3.555 4.056-15.025-6.71-1.798Z\"\n    />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover, xxSmall, xxSmallHover });\n};\n\nexport default Pencil;\n"],"mappings":";;;AAIA,IAAMA,UAAkC,EAAE,MAAM,gBAAkD;AAiChG,QAAO,QAAQ;EAAE;EAAM;EAAW,QA/BhC,oBAAC,QAAA,EAAK,GAAE,gkBAAA,CAAikB;EA+BjiB,aA3BxC,oBAAC,QAAA,EAAK,GAAE,gqBAAA,CAAiqB;EA2BpnB,QAvBrD,oBAAC,QAAA,EAAK,GAAE,inBAAA,CAAknB;EAuB7jB,aAnB7D,oBAAC,QAAA,EAAK,GAAE,qpBAAA,CAAspB;EAmBplB,SAf1E,oBAAC,QAAA;GACC,UAAS;GACT,UAAS;GACT,GAAE;IACF;EAWiF,cAPnF,oBAAC,QAAA;GACC,UAAS;GACT,UAAS;GACT,GAAE;IACF;EAG+F,CAAC;;AAGtG,IAAA,iBAAe"}

package/lib/PlusSmall.js

@@ -0,0 +1,17 @@
+import { r as getIcon } from "./Icon.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var PlusSmall = ({ size, isHovered }) => {
+	return getIcon({
+		size,
+		isHovered,
+		normal: /* @__PURE__ */ jsx("path", { d: "M25 14.225V23l8.775.001v2h-8.776L25 33.774h-2v-8.776L14.224 25v-2H23L23 14.224h2z" }),
+		normalHover: /* @__PURE__ */ jsx("path", { d: "M25 12.225V23L35.774 23v2H24.999L25 35.774h-2V24.999L12.224 25v-2H23L23 12.224h2z" }),
+		xSmall: /* @__PURE__ */ jsx("path", { d: "M24 14.18v8.556h8.558v2.527H24v8.558h-2.526l-.001-8.558h-8.557v-2.526h8.557v-8.558H24z" }),
+		xSmallHover: /* @__PURE__ */ jsx("path", { d: "M24 11.653v11.084h11.084v2.526H24v11.084h-2.526V25.263H10.39v-2.526h11.084V11.653H24z" })
+	});
+};
+var PlusSmall_default = PlusSmall;
+export { PlusSmall_default as t };
+
+//# sourceMappingURL=PlusSmall.js.map

package/lib/PlusSmall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlusSmall.js","names":["PlusSmall: React.FC<SvgPathProps>"],"sources":["../src/components/Icons/PlusSmall.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst PlusSmall: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = <path d=\"M25 14.225V23l8.775.001v2h-8.776L25 33.774h-2v-8.776L14.224 25v-2H23L23 14.224h2z\" />;\n\n  const normalHover = <path d=\"M25 12.225V23L35.774 23v2H24.999L25 35.774h-2V24.999L12.224 25v-2H23L23 12.224h2z\" />;\n\n  const xSmall = <path d=\"M24 14.18v8.556h8.558v2.527H24v8.558h-2.526l-.001-8.558h-8.557v-2.526h8.557v-8.558H24z\" />;\n\n  const xSmallHover = <path d=\"M24 11.653v11.084h11.084v2.526H24v11.084h-2.526V25.263H10.39v-2.526h11.084V11.653H24z\" />;\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default PlusSmall;\n"],"mappings":";;;AAIA,IAAMA,aAAqC,EAAE,MAAM,gBAAkD;AASnG,QAAO,QAAQ;EAAE;EAAM;EAAW,QARnB,oBAAC,QAAA,EAAK,GAAE,qFAAA,CAAsF;EAQnE,aANtB,oBAAC,QAAA,EAAK,GAAE,qFAAA,CAAsF;EAM3D,QAJxC,oBAAC,QAAA,EAAK,GAAE,0FAAA,CAA2F;EAInD,aAF3C,oBAAC,QAAA,EAAK,GAAE,yFAAA,CAA0F;EAE1C,CAAC;;AAG/E,IAAA,oBAAe"}

package/lib/PopOver.js

@@ -0,0 +1,68 @@
+import { c as ZIndex, n as AnalyticsId } from "./constants2.js";
+import { n as getAriaLabelAttributes } from "./accessibility.js";
+import { _ as autoUpdate, a as useDismiss, d as arrow, f as flip, h as shift, i as useClick, l as useInteractions, m as offset, o as useFloating, p as hide, r as FloatingFocusManager, t as FloatingArrow, u as useMergeRefs } from "./floating-ui.react.js";
+import React, { useRef } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/PopOver/styles.module.scss";
+let PopOverVariant = /* @__PURE__ */ function(PopOverVariant$1) {
+	PopOverVariant$1["positionautomatic"] = "positionautomatic";
+	PopOverVariant$1["positionbelow"] = "positionbelow";
+	PopOverVariant$1["positionabove"] = "positionabove";
+	return PopOverVariant$1;
+}({});
+var PopOver = React.forwardRef((props, ref) => {
+	const { ariaLabel, ariaLabelledById, id, children, controllerRef, show = false, className = "", variant = PopOverVariant.positionautomatic, role = "dialog", testId, zIndex = ZIndex.PopOver, placement } = props;
+	const ariaLabelAttributes = getAriaLabelAttributes({
+		label: ariaLabel,
+		id: ariaLabelledById
+	});
+	const placementProp = placement ?? (variant === PopOverVariant.positionabove ? "top" : "bottom");
+	const arrowRef = useRef(null);
+	const { refs, floatingStyles, context, middlewareData } = useFloating({
+		middleware: [
+			offset(10),
+			flip(),
+			shift({ padding: 8 }),
+			hide(),
+			arrow({ element: arrowRef })
+		],
+		placement: placementProp,
+		whileElementsMounted: autoUpdate,
+		elements: { reference: controllerRef.current }
+	});
+	const { getFloatingProps } = useInteractions([useClick(context), useDismiss(context)]);
+	const isVisible = show && !middlewareData.hide?.referenceHidden;
+	return /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal: false,
+		children: /* @__PURE__ */ jsxs("div", {
+			id,
+			ref: useMergeRefs([refs.setFloating, ref]),
+			style: {
+				...floatingStyles,
+				visibility: isVisible ? "visible" : "hidden",
+				zIndex
+			},
+			className: classNames(styles.popover, className),
+			...getFloatingProps(),
+			role,
+			"data-testid": testId,
+			"data-analyticsid": AnalyticsId.PopOver,
+			...ariaLabelAttributes,
+			children: [children, /* @__PURE__ */ jsx(FloatingArrow, {
+				ref: arrowRef,
+				className: styles["popover__arrow"],
+				context,
+				fill: "var(--core-color-white)",
+				stroke: "var(--color-base-border-onlight)",
+				strokeWidth: 1
+			})]
+		})
+	});
+});
+PopOver.displayName = "PopOver";
+var PopOver_default$1 = PopOver;
+export { PopOverVariant as n, PopOver_default$1 as t };
+
+//# sourceMappingURL=PopOver.js.map

package/lib/PopOver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopOver.js","names":[],"sources":["../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip' | 'dialog';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement | HTMLElement, PopOverProps>((props, ref) => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;AAwBA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,uBAAA;AACA,kBAAA,mBAAA;AACA,kBAAA,mBAAA;;;AAoCF,IAAM,UAAU,MAAM,YAAwE,OAAO,QAAQ;CAC3G,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,cACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAE9F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,EAAE,MAAM,gBAAgB,SAAS,mBAAmB,YAAY;EACpE,YAAY;GAAC,OAAO,GAAG;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,GAAG,CAAC;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,UAAU,CAAC;GAAC;EAC7F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,SAC1B;EACF,CAAC;CAKF,MAAM,EAAE,qBAAqB,gBAAgB,CAH/B,SAAS,QAAQ,EACf,WAAW,QAAQ,CAE0B,CAAC;CAE9D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;AAIhD,QACE,oBAAC,sBAAA;EAA8B;EAAS,OAAO;YAC7C,qBAAC,OAAA;GACK;GACJ,KANY,aAA0C,CAAC,KAAK,aAAa,IAAI,CAAC;GAO9E,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;IAAQ;GAC1F,WAAW,WAAW,OAAO,SAAS,UAAU;GAChD,GAAI,kBAAkB;GAChB;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;cAEH,UACD,oBAAC,eAAA;IACC,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;KACb,CAAA;IACE;GACe;EAEzB;AAEF,QAAQ,cAAc;AC/HtB,IAAA,oBDiIe"}

package/lib/Portal.js

@@ -0,0 +1,26 @@
+import { n as AnalyticsId } from "./constants2.js";
+import React from "react";
+import { createPortal } from "react-dom";
+function Portal({ children, parent, className, testId }) {
+	const el = React.useMemo(() => document.createElement("div"), []);
+	el.setAttribute("data-analyticsid", AnalyticsId.Portal);
+	if (testId) el.setAttribute("data-testid", testId);
+	React.useEffect(() => {
+		const target = parent && !!parent.appendChild ? parent : document.body;
+		const classList = ["portal-container"];
+		if (className) className.split(" ").forEach((item) => classList.push(item));
+		classList.forEach((item) => el.classList.add(item));
+		target.appendChild(el);
+		return () => {
+			target.removeChild(el);
+		};
+	}, [
+		el,
+		parent,
+		className
+	]);
+	return createPortal(children, el);
+}
+export { Portal as t };
+
+//# sourceMappingURL=Portal.js.map

package/lib/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","names":[],"sources":["../src/components/Portal/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { AnalyticsId } from '../../constants';\n\nexport interface PortalProps {\n  /** Add custom class to portal, default class is portal-container */\n  className?: string;\n  /** Content to be displayed in Portal */\n  children?: React.ReactNode;\n  /** Default is document.body */\n  parent?: HTMLElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal {\n  // Create div to contain everything\n  const el = React.useMemo(() => document.createElement('div'), []);\n  el.setAttribute('data-analyticsid', AnalyticsId.Portal);\n  if (testId) {\n    el.setAttribute('data-testid', testId);\n  }\n  // On mount function\n  React.useEffect(() => {\n    // work out target in the DOM based on parent prop\n    const target = parent && !!parent.appendChild ? parent : document.body;\n    // Default classes\n    const classList = ['portal-container'];\n    // If className prop is present add each class the classList\n    if (className) className.split(' ').forEach(item => classList.push(item));\n    classList.forEach(item => el.classList.add(item));\n\n    target.appendChild(el);\n    // On unmount function\n    return (): void => {\n      // Remove element from dom\n      target.removeChild(el);\n    };\n  }, [el, parent, className]);\n\n  return createPortal(children, el);\n}\n"],"mappings":";;;AAiBA,SAAwB,OAAO,EAAE,UAAU,QAAQ,WAAW,UAA0C;CAEtG,MAAM,KAAK,MAAM,cAAc,SAAS,cAAc,MAAM,EAAE,EAAE,CAAC;AACjE,IAAG,aAAa,oBAAoB,YAAY,OAAO;AACvD,KAAI,OACF,IAAG,aAAa,eAAe,OAAO;AAGxC,OAAM,gBAAgB;EAEpB,MAAM,SAAS,UAAU,CAAC,CAAC,OAAO,cAAc,SAAS,SAAS;EAElE,MAAM,YAAY,CAAC,mBAAmB;AAEtC,MAAI,UAAW,WAAU,MAAM,IAAI,CAAC,SAAQ,SAAQ,UAAU,KAAK,KAAK,CAAC;AACzE,YAAU,SAAQ,SAAQ,GAAG,UAAU,IAAI,KAAK,CAAC;AAEjD,SAAO,YAAY,GAAG;AAEtB,eAAmB;AAEjB,UAAO,YAAY,GAAG;;IAEvB;EAAC;EAAI;EAAQ;EAAU,CAAC;AAE3B,QAAO,aAAa,UAAU,GAAG"}