@chayns-components/core 5.0.0-beta.90 → 5.0.0-beta.901

package/lib/cjs/components/page-provider/PageProvider.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _pageProvider = require("../../utils/pageProvider");
+var _ColorSchemeProvider = _interopRequireDefault(require("../color-scheme-provider/ColorSchemeProvider"));
+var _PageProvider = require("./PageProvider.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+`;
+const PageProvider = ({
+  children,
+  color,
+  colorMode,
+  cssVariables = {},
+  secondaryColor,
+  siteId,
+  style = {},
+  designSettings,
+  shouldRemovePadding,
+  shouldUseUsableHeight
+}) => {
+  const [usableHeight, setUsableHeight] = (0, _react.useState)(0);
+  const [padding, setPadding] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const fetchUsableHeight = async () => {
+      const height = await (0, _pageProvider.getUsableHeight)();
+      setUsableHeight(height);
+    };
+    void fetchUsableHeight();
+  }, []);
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setPadding((0, _pageProvider.getPagePadding)());
+    };
+    setPadding((0, _pageProvider.getPagePadding)());
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [padding]);
+  return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
+    className: "page-provider",
+    $padding: shouldRemovePadding ? 0 : padding,
+    $usableHeight: shouldUseUsableHeight ? usableHeight : undefined
+  }, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
+    color: color,
+    secondaryColor: secondaryColor,
+    colorMode: colorMode,
+    style: style,
+    siteId: siteId,
+    designSettings: designSettings,
+    cssVariables: cssVariables
+  }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
+};
+PageProvider.displayName = 'PageProvider';
+var _default = exports.default = PageProvider;
+//# sourceMappingURL=PageProvider.js.map

package/lib/cjs/components/page-provider/PageProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_pageProvider","_ColorSchemeProvider","_interopRequireDefault","_PageProvider","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","usableHeight","setUsableHeight","useState","padding","setPadding","useEffect","fetchUsableHeight","height","getUsableHeight","handleResize","getPagePadding","window","addEventListener","removeEventListener","createElement","StyledPageProvider","className","$padding","$usableHeight","undefined","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import React, { FC, useEffect, useState, type CSSProperties } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { getPagePadding, getUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Whether the padding should be removed.\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Whether the usable height should be used.\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    designSettings,\n    shouldRemovePadding,\n    shouldUseUsableHeight,\n}) => {\n    const [usableHeight, setUsableHeight] = useState(0);\n    const [padding, setPadding] = useState<CSSProperties['padding']>();\n\n    useEffect(() => {\n        const fetchUsableHeight = async () => {\n            const height = await getUsableHeight();\n            setUsableHeight(height);\n        };\n\n        void fetchUsableHeight();\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            setPadding(getPagePadding());\n        };\n\n        setPadding(getPagePadding());\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [padding]);\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $padding={shouldRemovePadding ? 0 : padding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                style={style}\n                siteId={siteId}\n                designSettings={designSettings}\n                cssVariables={cssVariables}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/page-provider/PageProvider.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPageProvider = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledPageProvider = exports.StyledPageProvider = _styledComponents.default.div`
+    padding: ${({
+  $padding
+}) => $padding};
+    height: ${({
+  $usableHeight
+}) => $usableHeight ? `${$usableHeight}px` : undefined};
+    position: relative;
+
+    .color-scheme-provider:first-child:not(td) {
+        & > h1,
+        & > .h1,
+        & > h2,
+        & > .h2,
+        & > h3,
+        & > .h3,
+        & > h4,
+        & > .h4,
+        & > h5,
+        & > .h5 {
+            &:first-of-type:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+`;
+//# sourceMappingURL=PageProvider.styles.js.map

package/lib/cjs/components/page-provider/PageProvider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPageProvider","exports","styled","div","$padding","$usableHeight","undefined"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n    $padding?: CSSProperties['padding'];\n    $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n    padding: ${({ $padding }) => $padding};\n    height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n    position: relative;\n\n    .color-scheme-provider:first-child:not(td) {\n        & > h1,\n        & > .h1,\n        & > h2,\n        & > .h2,\n        & > h3,\n        & > .h3,\n        & > h4,\n        & > .h4,\n        & > h5,\n        & > .h5 {\n            &:first-of-type:first-child {\n                margin-top: 0;\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAS,CAAC,KAAKA,QAAQ;AACzC,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/popup/Popup.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _uuid = require("../../hooks/uuid");
+var _popup = require("../../types/popup");
+var _AreaContextProvider = _interopRequireDefault(require("../area-provider/AreaContextProvider"));
+var _PopupContentWrapper = _interopRequireDefault(require("./popup-content-wrapper/PopupContentWrapper"));
+var _Popup = require("./Popup.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
+  content,
+  onShow,
+  container,
+  onHide,
+  children,
+  shouldShowOnHover = false,
+  shouldUseChildrenWidth = true,
+  yOffset = 0
+}, ref) => {
+  const [coordinates, setCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [alignment, setAlignment] = (0, _react.useState)(_popup.PopupAlignment.TopLeft);
+  const [offset, setOffset] = (0, _react.useState)(0);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [portal, setPortal] = (0, _react.useState)();
+  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  const [isMeasuring, setIsMeasuring] = (0, _react.useState)(true);
+  const [pseudoSize, setPseudoSize] = (0, _react.useState)();
+  const [newContainer, setNewContainer] = (0, _react.useState)(container ?? null);
+  const timeout = (0, _react.useRef)();
+  const uuid = (0, _uuid.useUuid)();
+
+  // ToDo: Replace with hook if new chayns api is ready
+
+  const popupContentRef = (0, _react.useRef)(null);
+  const popupPseudoContentRef = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (popupRef.current && !container) {
+      const el = popupRef.current;
+      const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('.tapp') || el.closest('body');
+      setNewContainer(element);
+    }
+  }, [container]);
+  const measureHeight = () => {
+    if (popupPseudoContentRef.current) {
+      const height = popupPseudoContentRef.current.offsetHeight;
+      const width = popupPseudoContentRef.current.offsetWidth + 1;
+      setPseudoSize({
+        height,
+        width
+      });
+    }
+  };
+  (0, _react.useEffect)(() => {
+    measureHeight();
+    setIsMeasuring(false);
+  }, []);
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setIsMeasuring(true);
+      setTimeout(() => {
+        measureHeight();
+        setIsMeasuring(false);
+      }, 0);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  const handleShow = (0, _react.useCallback)(() => {
+    if (popupRef.current && pseudoSize) {
+      const {
+        height: pseudoHeight,
+        width: pseudoWidth
+      } = pseudoSize;
+      const {
+        height: childrenHeight,
+        left: childrenLeft,
+        top: childrenTop,
+        width: childrenWidth
+      } = popupRef.current.getBoundingClientRect();
+      if (pseudoHeight > childrenTop - 25) {
+        let isRight = false;
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_popup.PopupAlignment.BottomRight);
+          isRight = true;
+        } else {
+          setAlignment(_popup.PopupAlignment.BottomLeft);
+        }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop + childrenHeight + yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
+        setCoordinates({
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
+        });
+      } else {
+        let isRight = false;
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_popup.PopupAlignment.TopRight);
+          isRight = true;
+        } else {
+          setAlignment(_popup.PopupAlignment.TopLeft);
+        }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop - yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
+        setCoordinates({
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
+        });
+      }
+      setIsOpen(true);
+    }
+  }, [pseudoSize, yOffset]);
+  const handleChildrenClick = () => {
+    handleShow();
+  };
+  const handleHide = (0, _react.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
+    if (shouldShowOnHover) {
+      window.clearTimeout(timeout.current);
+      handleShow();
+    }
+  }, [handleShow, shouldShowOnHover]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    if (!shouldShowOnHover) {
+      return;
+    }
+    timeout.current = window.setTimeout(() => {
+      handleHide();
+    }, 500);
+  }, [handleHide, shouldShowOnHover]);
+  const handleDocumentClick = (0, _react.useCallback)(event => {
+    var _popupContentRef$curr;
+    if (!((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.target))) {
+      handleHide();
+    }
+  }, [handleHide]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  (0, _react.useEffect)(() => {
+    void (0, _chaynsApi.getWindowMetrics)().then(result => {
+      if (result.topBarHeight) {
+        setMenuHeight(result.topBarHeight);
+      }
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleDocumentClick, true);
+      window.addEventListener('blur', handleHide);
+      if (typeof onShow === 'function') {
+        onShow();
+      }
+    } else if (typeof onHide === 'function') {
+      onHide();
+    }
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, true);
+      window.removeEventListener('blur', handleHide);
+    };
+  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);
+  (0, _react.useEffect)(() => {
+    if (!newContainer) {
+      return;
+    }
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false
+    }, isOpen && /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.default, {
+      width: (pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width) ?? 0,
+      offset: offset,
+      coordinates: coordinates,
+      key: `tooltip_${uuid}`,
+      alignment: alignment,
+      ref: popupContentRef,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter
+    }, /*#__PURE__*/_react.default.createElement(_AreaContextProvider.default, {
+      shouldChangeColor: false
+    }, content))), newContainer));
+  }, [alignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isMeasuring && /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
+    ref: popupPseudoContentRef,
+    $menuHeight: menuHeight
+  }, content), /*#__PURE__*/_react.default.createElement(_Popup.StyledPopup, {
+    ref: popupRef,
+    onClick: handleChildrenClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter,
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+var _default = exports.default = Popup;
+//# sourceMappingURL=Popup.js.map

package/lib/cjs/components/popup/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","container","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","ref","coordinates","setCoordinates","useState","x","y","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","useEffect","current","el","element","closest","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","useCallback","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","_popupContentRef$curr","contains","target","useImperativeHandle","hide","show","getWindowMetrics","then","result","topBarHeight","document","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","$shouldUseChildrenWidth","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n        const [isMeasuring, setIsMeasuring] = useState(true);\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element =\n                    el.closest('.dialog-inner') ||\n                    el.closest('.page-provider') ||\n                    el.closest('.tapp') ||\n                    el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        const measureHeight = () => {\n            if (popupPseudoContentRef.current) {\n                const height = popupPseudoContentRef.current.offsetHeight;\n                const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n                setPseudoSize({ height, width });\n            }\n        };\n\n        useEffect(() => {\n            measureHeight();\n\n            setIsMeasuring(false);\n        }, []);\n\n        useEffect(() => {\n            const handleResize = () => {\n                setIsMeasuring(true);\n\n                setTimeout(() => {\n                    measureHeight();\n                    setIsMeasuring(false);\n                }, 0);\n            };\n\n            window.addEventListener('resize', handleResize);\n\n            return () => {\n                window.removeEventListener('resize', handleResize);\n            };\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            handleShow();\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {isMeasuring && (\n                    <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                        {content}\n                    </StyledPopupPseudo>\n                )}\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/popup/Popup.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPopupPseudo = exports.StyledPopup = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledPopup = exports.StyledPopup = _styledComponents.default.span`
+    cursor: pointer;
+    position: relative;
+
+    ${({
+  $shouldUseChildrenWidth
+}) => $shouldUseChildrenWidth && (0, _styledComponents.css)`
+            display: flex;
+            width: fit-content;
+            height: fit-content;
+        `}
+`;
+const StyledPopupPseudo = exports.StyledPopupPseudo = _styledComponents.default.div`
+    top: ${({
+  $menuHeight
+}) => `${$menuHeight - 0}px`};
+    left: 0;
+    margin: 2px;
+    pointer-events: none;
+    opacity: 0;
+    position: absolute;
+`;
+//# sourceMappingURL=Popup.styles.js.map

package/lib/cjs/components/popup/Popup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledPopup","exports","styled","span","$shouldUseChildrenWidth","css","StyledPopupPseudo","div","$menuHeight"],"sources":["../../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledPopupProps = WithTheme<{\n    $shouldUseChildrenWidth: boolean;\n}>;\n\nexport const StyledPopup = styled.span<StyledPopupProps>`\n    cursor: pointer;\n    position: relative;\n\n    ${({ $shouldUseChildrenWidth }) =>\n        $shouldUseChildrenWidth &&\n        css`\n            display: flex;\n            width: fit-content;\n            height: fit-content;\n        `}\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n    $menuHeight: number;\n}>`\n    top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n    left: 0;\n    margin: 2px;\n    pointer-events: none;\n    opacity: 0;\n    position: absolute;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOzC,MAAMW,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,IAAsB;AACxD;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAwB,CAAC,KAC1BA,uBAAuB,IACvB,IAAAC,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,iBAAiB,GAAAL,OAAA,CAAAK,iBAAA,GAAGJ,yBAAM,CAACK,GAEtC;AACF,WAAW,CAAC;EAAEC;AAAY,CAAC,KAAK,GAAGA,WAAW,GAAG,CAAC,IAAI;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/popup/popup-content/PopupContent.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PopupContent = require("./PopupContent.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PopupContent = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement(_PopupContent.StyledPopupContent, null, children);
+PopupContent.displayName = 'PopupContent';
+var _default = exports.default = PopupContent;
+//# sourceMappingURL=PopupContent.js.map

package/lib/cjs/components/popup/popup-content/PopupContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.js","names":["_react","_interopRequireDefault","require","_PopupContent","e","__esModule","default","PopupContent","children","createElement","StyledPopupContent","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport { StyledPopupContent } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    /**\n     * The elements that should be displayed inside the popup content.\n     */\n    children?: ReactNode;\n};\n\nconst PopupContent = ({ children }: PopupContentProps) => (\n    <StyledPopupContent>{children}</StyledPopupContent>\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAA2D,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAS3D,MAAMG,YAAY,GAAGA,CAAC;EAAEC;AAA4B,CAAC,kBACjDR,MAAA,CAAAM,OAAA,CAAAG,aAAA,CAACN,aAAA,CAAAO,kBAAkB,QAAEF,QAA6B,CACrD;AAEDD,YAAY,CAACI,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAE3BC,YAAY","ignoreList":[]}

package/lib/cjs/components/popup/popup-content/PopupContent.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPopupContent = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledPopupContent = exports.StyledPopupContent = _styledComponents.default.div`
+    overflow: hidden;
+    padding: 6px 12px;
+`;
+//# sourceMappingURL=PopupContent.styles.js.map

package/lib/cjs/components/popup/popup-content/PopupContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPopupContent","exports","styled","div"],"sources":["../../../../../src/components/popup/popup-content/PopupContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPopupContent = styled.div`\n    overflow: hidden;\n    padding: 6px 12px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireDefault(require("react"));
+var _popup = require("../../../types/popup");
+var _PopupContentWrapper = require("./PopupContentWrapper.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
+  alignment,
+  children,
+  coordinates,
+  offset,
+  width,
+  onMouseLeave,
+  onMouseEnter
+}, ref) => {
+  const {
+    colorMode
+  } = (0, _chaynsApi.useSite)();
+  const isBottomLeftAlignment = alignment === _popup.PopupAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === _popup.PopupAlignment.TopLeft;
+  const isTopRightAlignment = alignment === _popup.PopupAlignment.TopRight;
+  const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;
+  const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;
+  const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;
+  const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;
+  const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
+  return /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.StyledMotionPopupContentWrapper, {
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    $colorMode: colorMode,
+    $offset: offset,
+    exit: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    initial: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    $position: alignment,
+    ref: ref,
+    "data-ispopup": "true",
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: {
+      left: coordinates.x,
+      top: coordinates.y,
+      width
+    },
+    transition: {
+      type: 'tween'
+    },
+    transformTemplate: ({
+      y = '0px'
+    }) => `
+                    translateX(${percentageOffsetX}%)
+                    translateY(${percentageOffsetY}%)
+                    translateX(${anchorOffsetX}px)
+                    translateY(${anchorOffsetY}px)
+                    translateY(${y})
+                `
+  }, children);
+});
+PopupContentWrapper.displayName = 'PopupContent';
+var _default = exports.default = PopupContentWrapper;
+//# sourceMappingURL=PopupContentWrapper.js.map

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","e","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","width","onMouseLeave","onMouseEnter","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n    width: number;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, children, coordinates, offset, width, onMouseLeave, onMouseEnter }, ref) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y, width }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAA+E,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAY/E,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,WAAW;EAAEC,MAAM;EAAEC,KAAK;EAAEC,YAAY;EAAEC;AAAa,CAAC,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGV,SAAS,KAAKW,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGb,SAAS,KAAKW,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGf,SAAS,KAAKW,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIzB,MAAA,CAAAM,OAAA,CAAA0B,aAAA,CAAC7B,oBAAA,CAAA8B,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEnB,SAAU;IACtBoB,OAAO,EAAEzB,MAAO;IAChB0B,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCS,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CU,SAAS,EAAE/B,SAAU;IACrBO,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBD,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3B2B,KAAK,EAAE;MAAEC,IAAI,EAAE/B,WAAW,CAACgC,CAAC;MAAEC,GAAG,EAAEjC,WAAW,CAACwB,CAAC;MAAEtB;IAAM,CAAE;IAC1DgC,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEZ,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiCT,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCM,CAAC;AAClC;EAAkB,GAEDzB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,CAAC0C,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7C,OAAA,GAElCC,mBAAmB","ignoreList":[]}