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

package/ListEditMode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListEditMode.js","sources":["../src/components/ListEditMode/ListEditMode.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gCAAgC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE3E,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAIyB;AACvB,QAAM,EAAE,WAAW,UAAA,IAAc,iBAAA;AAEjC,SACE,oBAAC,UAAA,EAAO,KAAK,WAAW,SAAkB,MAAK,UAAS,WAAW,WAAW,OAAO,6BAA6B,CAAC,GACjH,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,MAAM,SAAS;AAAA,MACf,OAAO,UAAU,SAAS,yCAAyC;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;AAEO,MAAM,mBAAmB,CAAC,UAAgD;AAC/E,QAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAEpE,QAAM,iBAAiB,WAAW,OAAO,sBAAsB,GAAG,SAAS,OAAO,yBAAyB,KAAK,EAAE,GAAG;AAAA,IACnH,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY;AAAA,IACpD,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY,UAAU,YAAY;AAAA,EAAA,CAC3E;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAA,gCAAa,YAAA,EAAW,MAAM,GAAG,SAAS,UAAU,OAAM,OAAM;AAAA,IAChE;AAAA,EAAA,GACH;AAEJ;AAEA,iBAAiB,cAAc;"}

package/MaxCharacters.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { FormOnColor } from "./constants.js";
-import styles from "./components/MaxCharacters/styles.module.scss";
-const MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
-  const progress = length / maxCharacters;
-  const counterTextClass = classNames(styles["max-characters"], {
-    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
-    [styles[`max-characters--invalid`]]: progress > 1
-  });
-  const ariaLevel = progress > 0.95 ? "polite" : "off";
-  return /* @__PURE__ */ jsx("div", { "aria-live": ariaLevel, "aria-atomic": "true", className: counterTextClass, style: { maxWidth }, children: `${length}/${maxCharacters} ${maxText ? maxText : "tegn"}` });
-};
-export {
-  MaxCharacters as M
-};
-//# sourceMappingURL=MaxCharacters.js.map

package/MaxCharacters.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MaxCharacters.js","sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"names":[],"mappings":";;;;AAqBA,MAAM,gBAA8C,CAAC,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;AAC7G,QAAM,WAAW,SAAS;AAE1B,QAAM,mBAAmB,WAAW,OAAO,gBAAgB,GAAG;AAAA,IAC5D,CAAC,OAAO,yBAAyB,CAAC,GAAG,YAAY,YAAY;AAAA,IAC7D,CAAC,OAAO,yBAAyB,CAAC,GAAG,WAAW;AAAA,EAAA,CACjD;AAED,QAAM,YAAY,WAAW,OAAO,WAAW;AAE/C,SACE,oBAAC,SAAI,aAAW,WAAW,eAAa,QAAQ,WAAW,kBAAkB,OAAO,EAAE,YACnF,UAAA,GAAG,MAAM,IAAI,aAAa,IAAI,UAAU,UAAU,MAAM,IAC3D;AAEJ;"}

package/NotificationBadge.js

@@ -1,68 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { palette } from "./theme/palette.js";
-import { I as Icon } from "./Icon.js";
-import CheckFill from "./components/Icons/CheckFill.js";
-import ErrorSignFill from "./components/Icons/ErrorSignFill.js";
-import InfoSignFill from "./components/Icons/InfoSignFill.js";
-import TriangleX from "./components/Icons/TriangleX.js";
-const NotificationBadge = (props) => {
-  const { variant, size, className = "", testId, isHovered = false } = props;
-  switch (variant) {
-    case "info":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: InfoSignFill,
-          color: palette.blueberry700,
-          hoverColor: palette.blueberry700,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-    case "warn":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: ErrorSignFill,
-          color: palette.banana800,
-          hoverColor: palette.banana700,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-    case "error":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: TriangleX,
-          color: palette.cherry700,
-          hoverColor: palette.cherry700,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-    case "success":
-      return /* @__PURE__ */ jsx(
-        Icon,
-        {
-          svgIcon: CheckFill,
-          color: palette.kiwi900,
-          hoverColor: palette.kiwi900,
-          size,
-          className,
-          testId,
-          isHovered
-        }
-      );
-  }
-};
-export {
-  NotificationBadge as N
-};
-//# sourceMappingURL=NotificationBadge.js.map

package/NotificationBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationBadge.js","sources":["../src/components/Badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\n\nimport { IconSize } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nexport type BadgeNotificationVariant = 'info' | 'warn' | 'error' | 'success';\n\nexport interface NotificationBadgeProps {\n  /** Changes the type of the badge */\n  variant: BadgeNotificationVariant;\n  /** Sets the size of the badge */\n  size: IconSize;\n  /** Adds custom classes to the element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets hover state */\n  isHovered?: boolean;\n}\n\nconst NotificationBadge = (props: NotificationBadgeProps): React.JSX.Element => {\n  const { variant, size, className = '', testId, isHovered = false } = props;\n  switch (variant) {\n    case 'info':\n      return (\n        <Icon\n          svgIcon={InfoSignFill}\n          color={palette.blueberry700}\n          hoverColor={palette.blueberry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'warn':\n      return (\n        <Icon\n          svgIcon={ErrorSignFill}\n          color={palette.banana800}\n          hoverColor={palette.banana700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'error':\n      return (\n        <Icon\n          svgIcon={TriangleX}\n          color={palette.cherry700}\n          hoverColor={palette.cherry700}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n    case 'success':\n      return (\n        <Icon\n          svgIcon={CheckFill}\n          color={palette.kiwi900}\n          hoverColor={palette.kiwi900}\n          size={size}\n          className={className}\n          testId={testId}\n          isHovered={isHovered}\n        />\n      );\n  }\n};\n\nexport default NotificationBadge;\n"],"names":[],"mappings":";;;;;;;AAyBA,MAAM,oBAAoB,CAAC,UAAqD;AAC9E,QAAM,EAAE,SAAS,MAAM,YAAY,IAAI,QAAQ,YAAY,UAAU;AACrE,UAAQ,SAAA;AAAA,IACN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN,KAAK;AACH,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,YAAY,QAAQ;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,EACF;AAGR;"}

package/Panel.js

@@ -1,265 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default from "react";
-import classNames from "classnames";
-import { LanguageLocales, IconSize } from "./constants.js";
-import { useExpand } from "./hooks/useExpand.js";
-import { B as Button } from "./Button.js";
-import { I as Icon } from "./Icon.js";
-import { P as PanelTitle } from "./PanelTitle.js";
-import { useLanguage } from "./utils/language.js";
-import { H as Highlighter } from "./Highlighter.js";
-import ChevronDown from "./components/Icons/ChevronDown.js";
-import ChevronRight from "./components/Icons/ChevronRight.js";
-import ChevronUp from "./components/Icons/ChevronUp.js";
-import styles from "./components/Panel/styles.module.scss";
-const expandButtonOpen$1 = "See details";
-const expandButtonClose$1 = "Hide details";
-const enGB = {
-  expandButtonOpen: expandButtonOpen$1,
-  expandButtonClose: expandButtonClose$1
-};
-const expandButtonOpen = "Se detaljer";
-const expandButtonClose = "Skjul detaljer";
-const nbNO = {
-  expandButtonOpen,
-  expandButtonClose
-};
-const getResources = (language) => {
-  switch (language) {
-    case LanguageLocales.ENGLISH:
-      return enGB;
-    case LanguageLocales.NORWEGIAN:
-    default:
-      return nbNO;
-  }
-};
-var PanelLayout = /* @__PURE__ */ ((PanelLayout2) => {
-  PanelLayout2["vertical"] = "vertical";
-  PanelLayout2["horizontal"] = "horizontal";
-  PanelLayout2["combined"] = "combined";
-  PanelLayout2["bAsRightCol"] = "bAsRightCol";
-  return PanelLayout2;
-})(PanelLayout || {});
-var PanelVariant = /* @__PURE__ */ ((PanelVariant2) => {
-  PanelVariant2["fill"] = "fill";
-  PanelVariant2["line"] = "line";
-  PanelVariant2["outline"] = "outline";
-  return PanelVariant2;
-})(PanelVariant || {});
-var PanelStacking = /* @__PURE__ */ ((PanelStacking2) => {
-  PanelStacking2["default"] = "default";
-  PanelStacking2["bFirst"] = "bFirst";
-  return PanelStacking2;
-})(PanelStacking || {});
-var PanelStatus = /* @__PURE__ */ ((PanelStatus2) => {
-  PanelStatus2["none"] = "none";
-  PanelStatus2["new"] = "new";
-  PanelStatus2["error"] = "error";
-  PanelStatus2["draft"] = "draft";
-  return PanelStatus2;
-})(PanelStatus || {});
-const ExpandButton = ({
-  onClick,
-  isExpanded,
-  resources
-}) => {
-  const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      variant: "borderless",
-      textClassName: styles["expander__button__text"],
-      wrapperClassName: buttonClassName,
-      "aria-expanded": isExpanded,
-      onClick,
-      children: [
-        /* @__PURE__ */ jsx(Icon, { svgIcon: isExpanded ? ChevronUp : ChevronDown, size: IconSize.XSmall }),
-        /* @__PURE__ */ jsx("span", { children: isExpanded ? resources.expandButtonClose : resources.expandButtonOpen })
-      ]
-    }
-  );
-};
-const PanelRoot = React__default.forwardRef(function PanelForwardedRef({
-  layout = "vertical",
-  variant = "fill",
-  color = "neutral",
-  stacking = "default",
-  testId,
-  children,
-  expanded = false,
-  status = "none",
-  buttonBottomAriaLabel,
-  buttonBottomOnClick,
-  buttonBottomText,
-  className,
-  resources,
-  onExpand,
-  highlightText
-}, ref) {
-  const [preContainer, setPreContainer] = React__default.useState([]);
-  const [title, setTitle] = React__default.useState([]);
-  const [content, setContent] = React__default.useState([]);
-  const [expandableContent, setExpandableContent] = React__default.useState([]);
-  const [hasIcon, setHasIcon] = React__default.useState(false);
-  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
-  const localRef = React__default.useRef(null);
-  const panelRef = ref ?? localRef;
-  const expandedContentRef = React__default.useRef(null);
-  const defaultScroll = 100;
-  const { language } = useLanguage(LanguageLocales.NORWEGIAN);
-  const defaultResources = getResources(language);
-  const mergedResources = {
-    ...defaultResources,
-    ...resources
-  };
-  React__default.useEffect(() => {
-    let localHasIcon = false;
-    const newPreContainer = [];
-    const newTitle = [];
-    const newContent = [];
-    const newExpandableContent = [];
-    React__default.Children.forEach(children, (child) => {
-      if (React__default.isValidElement(child)) {
-        if (child.type === PreContainer) {
-          newPreContainer.push(child);
-        } else if (child.type === PanelTitle) {
-          newTitle.push(
-            React__default.cloneElement(child, { highlightText: child.props.highlightText || highlightText })
-          );
-          if (child.props.icon) {
-            localHasIcon = true;
-          }
-        } else if (child.type === A || child.type === B || child.type === C) {
-          newContent.push(child);
-        } else if (child.type === ExpandedContent) {
-          newExpandableContent.push(child);
-        }
-      }
-    });
-    setPreContainer(newPreContainer);
-    setTitle(newTitle);
-    setContent(newContent);
-    setExpandableContent(newExpandableContent);
-    setHasIcon(localHasIcon);
-  }, [children]);
-  React__default.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) {
-          const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-          if (prefersReducedMotion) {
-            return;
-          }
-          window.scrollBy({
-            top: scrollAmount,
-            behavior: "smooth"
-          });
-        }
-      }
-    }
-  }, [isExpanded]);
-  const colorScheme = variant === "fill" ? color : "white";
-  const outerClassnames = classNames(className, {
-    [styles["panel__border--outline--outer"]]: variant === "outline",
-    [styles["panel__border--line"]]: variant === "line",
-    [styles["panel__border--fill--neutral"]]: variant === "fill" && colorScheme === "neutral",
-    [styles["panel__border--fill--new"]]: variant === "fill" && status === "new",
-    [styles["panel__border--fill--status"]]: variant === "fill" && status !== "none"
-    /* none */
-  });
-  const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
-    [styles["panel--line"]]: variant === "line",
-    [styles["panel--new"]]: status === "new",
-    [styles["panel--draft"]]: status === "draft",
-    [styles["panel--error"]]: status === "error",
-    [styles["panel--icon"]]: hasIcon
-  });
-  const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], {
-    [styles[`panel__content--b-first`]]: stacking === "bFirst"
-    /* bFirst */
-  });
-  const expanderBorderLayout = classNames({
-    [styles["panel__expander__border--expanded"]]: isExpanded && status === "none",
-    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === "none",
-    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === "none" && variant === "line"
-    /* line */
-  });
-  const handleExpandClick = () => {
-    setIsExpanded(!isExpanded);
-    if (onExpand) onExpand();
-  };
-  return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
-    [styles["panel__border--outline--inner"]]: variant === "outline"
-    /* outline */
-  }), children: /* @__PURE__ */ jsx("div", { className: expanderBorderLayout, children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
-    /* @__PURE__ */ jsxs(Highlighter, { searchText: highlightText, children: [
-      preContainer,
-      title
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, 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, { searchText: highlightText, children: expandableContent })
-    ] })
-  ] }) }) }) }) : /* @__PURE__ */ jsx("div", { className: outerClassnames, children: /* @__PURE__ */ jsx("div", { className: classNames({
-    [styles["panel__border--outline--inner"]]: variant === "outline"
-    /* outline */
-  }), children: /* @__PURE__ */ jsxs("div", { className: panelClassnames, "data-testid": testId, ref: panelRef, children: [
-    /* @__PURE__ */ jsxs(Highlighter, { searchText: highlightText, children: [
-      preContainer,
-      title
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: contentContainerLayout, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: content }) }),
-    buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", { className: styles["panel__button-bottom"], children: /* @__PURE__ */ jsxs(Button, { variant: "borderless", type: "button", size: "medium", onClick: buttonBottomOnClick, "aria-label": buttonBottomAriaLabel, children: [
-      buttonBottomText,
-      /* @__PURE__ */ jsx(Icon, { svgIcon: ChevronRight, size: IconSize.XSmall })
-    ] }) })
-  ] }) }) });
-});
-const PreContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx("div", { className: styles["panel__pre-container"], children });
-};
-const A = ({ children }) => {
-  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--a"]);
-  return /* @__PURE__ */ jsx("div", { className: styling, children });
-};
-const B = ({ children }) => {
-  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--b"]);
-  return /* @__PURE__ */ jsx("div", { className: styling, children });
-};
-const C = ({ children }) => {
-  const styling = classNames(styles["panel__content__item"], styles["panel__content__item--c"]);
-  return /* @__PURE__ */ jsx("div", { className: styling, children });
-};
-const ExpandedContent = ({ children }) => {
-  const styling = classNames(styles["panel__expander__content"]);
-  return /* @__PURE__ */ jsx("div", { className: styling, children });
-};
-PanelRoot.displayName = "Panel";
-const Panel = PanelRoot;
-Panel.PreContainer = PreContainer;
-Panel.Title = PanelTitle;
-Panel.A = A;
-Panel.B = B;
-Panel.C = C;
-Panel.ExpandedContent = ExpandedContent;
-export {
-  A,
-  B,
-  C,
-  ExpandedContent as E,
-  Panel as P,
-  PanelLayout as a,
-  PanelVariant as b,
-  PanelStacking as c,
-  PanelStatus as d,
-  PreContainer as e
-};
-//# sourceMappingURL=Panel.js.map

package/Panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/resourceHelper.ts","../src/components/Panel/Panel.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\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 { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\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  /** 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?: () => 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}\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.forwardRef(function PanelForwardedRef(\n  {\n    layout = PanelLayout.vertical,\n    variant = PanelVariant.fill,\n    color = 'neutral',\n    stacking = PanelStacking.default,\n    testId,\n    children,\n    expanded = false,\n    status = PanelStatus.none,\n    buttonBottomAriaLabel,\n    buttonBottomOnClick,\n    buttonBottomText,\n    className,\n    resources,\n    onExpand,\n    highlightText,\n  }: PanelProps,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\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  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 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        if (child.type === PreContainer) {\n          newPreContainer.push(child);\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, { highlightText: child.props.highlightText || highlightText })\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(child);\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(child);\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 = variant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(className, {\n    [styles['panel__border--outline--outer']]: variant === PanelVariant.outline,\n    [styles['panel__border--line']]: variant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: variant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: variant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: variant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: variant === 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`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n    if (onExpand) onExpand();\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n            <Highlighter searchText={highlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={highlightText}>{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={highlightText}>{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']]: variant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef}>\n          <Highlighter searchText={highlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={highlightText}>{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"],"names":["PanelLayout","PanelVariant","PanelStacking","PanelStatus","React"],"mappings":"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"}

package/PanelTitle.js

@@ -1,19 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import { H as Highlighter } from "./Highlighter.js";
-import { T as Title } from "./Title.js";
-import styles from "./components/Panel/PanelTitle/styles.module.scss";
-const 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, { appearance: "title3", htmlMarkup: titleMarkup, children: /* @__PURE__ */ jsx(Highlighter, { searchText: highlightText, children: title }) }),
-      badge && /* @__PURE__ */ jsx("div", { className: styles["paneltitle__badge"], children: badge })
-    ] })
-  ] });
-};
-export {
-  PanelTitle as P
-};
-//# sourceMappingURL=PanelTitle.js.map

package/PanelTitle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelTitle.js","sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx"],"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"],"names":[],"mappings":";;;;;AAwBA,MAAM,aAAwC,CAAC,UAA2B;AACxE,QAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,8BACG,OAAA,EAAI,WAAW,WAAW,OAAO,YAAY,GAAG,EAAE,CAAC,OAAO,sBAAsB,CAAC,GAAG,MAAM,GAAG,eAAa,QACxG,UAAA;AAAA,IAAA,4BAAS,OAAA,EAAI,WAAW,OAAO,kBAAkB,GAAI,UAAA,MAAK;AAAA,IAC1D,SACC,qBAAC,OAAA,EAAI,WAAW,OAAO,mBAAmB,GACxC,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAM,YAAW,UAAS,YAAY,aACrC,8BAAC,aAAA,EAAY,YAAY,eAAgB,UAAA,MAAA,CAAM,GACjD;AAAA,MACC,SAAS,oBAAC,OAAA,EAAI,WAAW,OAAO,mBAAmB,GAAI,UAAA,MAAA,CAAM;AAAA,IAAA,EAAA,CAChE;AAAA,EAAA,GAEJ;AAEJ;"}

package/PopOver.js

@@ -1,80 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useRef } from "react";
-import { u as useFloating, a as useClick, b as useDismiss, c as useInteractions, d as useMergeRefs, F as FloatingFocusManager, e as FloatingArrow, f as autoUpdate, o as offset, g as flip, s as shift, h as hide, i as arrow } from "./floating-ui.react.js";
-import classNames from "classnames";
-import { ZIndex, AnalyticsId } from "./constants.js";
-import { getAriaLabelAttributes } from "./utils/accessibility.js";
-import styles from "./components/PopOver/styles.module.scss";
-var PopOverVariant = /* @__PURE__ */ ((PopOverVariant2) => {
-  PopOverVariant2["positionautomatic"] = "positionautomatic";
-  PopOverVariant2["positionbelow"] = "positionbelow";
-  PopOverVariant2["positionabove"] = "positionabove";
-  return PopOverVariant2;
-})(PopOverVariant || {});
-const PopOver = React__default.forwardRef((props, ref) => {
-  var _a;
-  const {
-    ariaLabel,
-    ariaLabelledById,
-    id,
-    children,
-    controllerRef,
-    show = false,
-    className = "",
-    variant = "positionautomatic",
-    role = "dialog",
-    testId,
-    zIndex = ZIndex.PopOver,
-    placement
-  } = props;
-  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });
-  const placementProp = placement ?? (variant === "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 click = useClick(context);
-  const dismiss = useDismiss(context);
-  const { getFloatingProps } = useInteractions([click, dismiss]);
-  const isVisible = show && !((_a = middlewareData.hide) == null ? void 0 : _a.referenceHidden);
-  const mergedRef = useMergeRefs([refs.setFloating, ref]);
-  return /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      ref: mergedRef,
-      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";
-export {
-  PopOver as P,
-  PopOverVariant as a
-};
-//# sourceMappingURL=PopOver.js.map

package/PopOver.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/PopOver.tsx"],"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"],"names":["PopOverVariant","React"],"mappings":";;;;;;;AAwBO,IAAK,mCAAAA,oBAAL;AACLA,kBAAA,mBAAA,IAAoB;AACpBA,kBAAA,eAAA,IAAgB;AAChBA,kBAAA,eAAA,IAAgB;AAHN,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAuCZ,MAAM,UAAUC,eAAM,WAAuE,CAAC,OAAO,QAAQ;;AAC3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,SAAS,OAAO;AAAA,IAChB;AAAA,EAAA,IACE;AAEJ,QAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAE7F,QAAM,gBAAgB,cAAc,YAAY,kBAA+B,QAAQ;AAEvF,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,gBAAgB,SAAS,eAAA,IAAmB,YAAY;AAAA,IACpE,YAAY,CAAC,OAAO,EAAE,GAAG,KAAA,GAAQ,MAAM,EAAE,SAAS,GAAG,GAAG,QAAQ,MAAM,EAAE,SAAS,SAAA,CAAU,CAAC;AAAA,IAC5F,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,UAAU;AAAA,MACR,WAAW,cAAc;AAAA,IAAA;AAAA,EAC3B,CACD;AAED,QAAM,QAAQ,SAAS,OAAO;AAC9B,QAAM,UAAU,WAAW,OAAO;AAElC,QAAM,EAAE,iBAAA,IAAqB,gBAAgB,CAAC,OAAO,OAAO,CAAC;AAE7D,QAAM,YAAY,QAAQ,GAAC,oBAAe,SAAf,mBAAqB;AAEhD,QAAM,YAAY,aAA0C,CAAC,KAAK,aAAa,GAAG,CAAC;AAEnF,SACE,oBAAC,sBAAA,EAAqB,SAAkB,OAAO,OAC7C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,OAAO,EAAE,GAAG,gBAAgB,YAAY,YAAY,YAAY,UAAU,OAAA;AAAA,MAC1E,WAAW,WAAW,OAAO,SAAS,SAAS;AAAA,MAC9C,GAAG,iBAAA;AAAA,MACJ;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAC7B,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW,OAAO,gBAAgB;AAAA,YAClC;AAAA,YACA,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,aAAa;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAED,QAAQ,cAAc;"}