@chayns-components/core 5.0.0-beta.7 → 5.0.0-beta.700

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

@@ -0,0 +1,196 @@
+import { getWindowMetrics } from 'chayns-api';
+import { AnimatePresence } from 'framer-motion';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useUuid } from '../../hooks/uuid';
+import { PopupAlignment } from '../../types/popup';
+import AreaContextProvider from '../area-provider/AreaContextProvider';
+import PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';
+import { StyledPopup, StyledPopupPseudo } from './Popup.styles';
+const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    content,
+    onShow,
+    container = document.querySelector('.tapp') || document.body,
+    onHide,
+    children,
+    shouldShowOnHover = false,
+    yOffset = 0
+  } = _ref;
+  const [coordinates, setCoordinates] = useState({
+    x: 0,
+    y: 0
+  });
+  const [alignment, setAlignment] = useState(PopupAlignment.TopLeft);
+  const [offset, setOffset] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+  const [portal, setPortal] = useState();
+  const [menuHeight, setMenuHeight] = useState(0);
+  const [pseudoSize, setPseudoSize] = useState();
+  const timeout = useRef();
+  const uuid = useUuid();
+
+  // ToDo: Replace with hook if new chayns api is ready
+
+  const popupContentRef = useRef(null);
+  const popupPseudoContentRef = useRef(null);
+  const popupRef = useRef(null);
+  useEffect(() => {
+    if (popupPseudoContentRef.current) {
+      const {
+        height,
+        width
+      } = popupPseudoContentRef.current.getBoundingClientRect();
+      setPseudoSize({
+        height,
+        width
+      });
+    }
+  }, []);
+  const handleShow = 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(PopupAlignment.BottomRight);
+          isRight = true;
+        } else {
+          setAlignment(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(PopupAlignment.TopRight);
+          isRight = true;
+        } else {
+          setAlignment(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 = () => {
+    if (!shouldShowOnHover) {
+      handleShow();
+    }
+  };
+  const handleHide = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = useCallback(() => {
+    if (shouldShowOnHover) {
+      window.clearTimeout(timeout.current);
+      handleShow();
+    }
+  }, [handleShow, shouldShowOnHover]);
+  const handleMouseLeave = useCallback(() => {
+    if (!shouldShowOnHover) {
+      return;
+    }
+    timeout.current = window.setTimeout(() => {
+      handleHide();
+    }, 500);
+  }, [handleHide, shouldShowOnHover]);
+  const handleDocumentClick = useCallback(event => {
+    if (!popupContentRef.current?.contains(event.target) && !shouldShowOnHover) {
+      event.preventDefault();
+      event.stopPropagation();
+      handleHide();
+    }
+  }, [handleHide, shouldShowOnHover]);
+  useImperativeHandle(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  useEffect(() => {
+    void getWindowMetrics().then(result => {
+      if (result.topBarHeight) {
+        setMenuHeight(result.topBarHeight);
+      }
+    });
+  }, []);
+  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]);
+  useEffect(() => {
+    setPortal(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
+      initial: false
+    }, isOpen && /*#__PURE__*/React.createElement(PopupContentWrapper, {
+      offset: offset,
+      coordinates: coordinates,
+      key: `tooltip_${uuid}`,
+      alignment: alignment,
+      ref: popupContentRef,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter
+    }, /*#__PURE__*/React.createElement(AreaContextProvider, {
+      shouldChangeColor: false
+    }, content))), container));
+  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, uuid]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !pseudoSize && /*#__PURE__*/React.createElement(StyledPopupPseudo, {
+    ref: popupPseudoContentRef,
+    $menuHeight: menuHeight
+  }, content), /*#__PURE__*/React.createElement(StyledPopup, {
+    ref: popupRef,
+    onClick: handleChildrenClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+export default Popup;
+//# sourceMappingURL=Popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","pseudoSize","setPseudoSize","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","height","width","getBoundingClientRect","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"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     * 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 = document.querySelector('.tapp') || document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\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\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\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 (popupPseudoContentRef.current) {\n                const { height, width } = popupPseudoContentRef.current.getBoundingClientRect();\n\n                setPseudoSize({ height, width });\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            if (!shouldShowOnHover) {\n                handleShow();\n            }\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 (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\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            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\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                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {!pseudoSize && (\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                >\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/esm/components/popup/Popup.styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const StyledPopup = styled.span`
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    width: fit-content;
+    height: fit-content;
+`;
+export const StyledPopupPseudo = styled.div`
+    top: ${_ref => {
+  let {
+    $menuHeight
+  } = _ref;
+  return `${$menuHeight - 0}px`;
+}};
+    left: 0;
+    pointer-events: none;
+    visibility: hidden;
+    position: absolute;
+`;
+//# sourceMappingURL=Popup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.styles.js","names":["styled","StyledPopup","span","StyledPopupPseudo","div","_ref","$menuHeight"],"sources":["../../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPopup = styled.span`\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    width: fit-content;\n    height: fit-content;\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n    $menuHeight: number;\n}>`\n    top: ${({ $menuHeight }) => `${$menuHeight - 0}px`};\n    left: 0;\n    pointer-events: none;\n    visibility: hidden;\n    position: absolute;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,IAAI;AACtC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAEtC;AACF,WAAWC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAK,GAAGC,WAAW,GAAG,CAAC,IAAI;AAAA;AACtD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyledPopupContent } from './PopupContent.styles';
+const PopupContent = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledPopupContent, null, children);
+};
+PopupContent.displayName = 'PopupContent';
+export default PopupContent;
+//# sourceMappingURL=PopupContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.js","names":["React","StyledPopupContent","PopupContent","_ref","children","createElement","displayName"],"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,OAAOA,KAAK,MAA0B,OAAO;AAC7C,SAASC,kBAAkB,QAAQ,uBAAuB;AAS1D,MAAMC,YAAY,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EAAA,oBACjDH,KAAA,CAAAK,aAAA,CAACJ,kBAAkB,QAAEG,QAA6B,CAAC;AAAA,CACtD;AAEDF,YAAY,CAACI,WAAW,GAAG,cAAc;AAEzC,eAAeJ,YAAY","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const StyledPopupContent = styled.div`
+    overflow: hidden;
+    padding: 6px 12px;
+`;
+//# sourceMappingURL=PopupContent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.styles.js","names":["styled","StyledPopupContent","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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG;AAC5C;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,68 @@
+import { useSite } from 'chayns-api';
+import React from 'react';
+import { PopupAlignment } from '../../../types/popup';
+import { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';
+const PopupContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    alignment,
+    children,
+    coordinates,
+    offset,
+    onMouseLeave,
+    onMouseEnter
+  } = _ref;
+  const {
+    colorMode
+  } = useSite();
+  const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
+  const isTopRightAlignment = alignment === 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.createElement(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
+    },
+    transition: {
+      type: 'tween'
+    },
+    transformTemplate: _ref2 => {
+      let {
+        y = '0px'
+      } = _ref2;
+      return `
+                    translateX(${percentageOffsetX}%)
+                    translateY(${percentageOffsetY}%)
+                    translateX(${anchorOffsetX}px)
+                    translateY(${anchorOffsetY}px)
+                    translateY(${y})
+                `;
+    }
+  }, children);
+});
+PopupContentWrapper.displayName = 'PopupContent';
+export default PopupContentWrapper;
+//# sourceMappingURL=PopupContentWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","PopupContentWrapper","forwardRef","_ref","ref","alignment","children","coordinates","offset","onMouseLeave","onMouseEnter","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"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};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, children, coordinates, offset, 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 }}\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,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,+BAA+B,QAAQ,8BAA8B;AAW9E,MAAMC,mBAAmB,gBAAGH,KAAK,CAACI,UAAU,CACxC,CAAAC,IAAA,EAA2EC,GAAG,KAAK;EAAA,IAAlF;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,MAAM;IAAEC,YAAY;IAAEC;EAAa,CAAC,GAAAP,IAAA;EACrE,MAAM;IAAEQ;EAAU,CAAC,GAAGd,OAAO,CAAC,CAAC;EAE/B,MAAMe,qBAAqB,GAAGP,SAAS,KAAKN,cAAc,CAACc,UAAU;EACrE,MAAMC,kBAAkB,GAAGT,SAAS,KAAKN,cAAc,CAACgB,OAAO;EAC/D,MAAMC,mBAAmB,GAAGX,SAAS,KAAKN,cAAc,CAACkB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,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,oBACIlB,KAAA,CAAAyB,aAAA,CAACvB,+BAA+B;IAC5BwB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,OAAO,EAAEpB,MAAO;IAChBqB,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,EAAE1B,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBM,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3BuB,KAAK,EAAE;MAAEC,IAAI,EAAE1B,WAAW,CAAC2B,CAAC;MAAEC,GAAG,EAAE5B,WAAW,CAACmB;IAAE,CAAE;IACnDU,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEb,CAAC,GAAG;MAAM,CAAC,GAAAa,KAAA;MAAA,OAAK;AACtD,iCAAiCrB,iBAAiB;AAClD,iCAAiCC,iBAAiB;AAClD,iCAAiCC,aAAa;AAC9C,iCAAiCC,aAAa;AAC9C,iCAAiCK,CAAC;AAClC,iBAAiB;IAAA;EAAC,GAEDpB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDL,mBAAmB,CAACuC,WAAW,GAAG,cAAc;AAEhD,eAAevC,mBAAmB","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -0,0 +1,83 @@
+import { ColorMode } from 'chayns-api';
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { PopupAlignment } from '../../../types/popup';
+export const StyledMotionPopupContentWrapper = styled(motion.div)`
+    background-color: ${_ref => {
+  let {
+    theme,
+    $colorMode
+  } = _ref;
+  return $colorMode === ColorMode.Dark ? theme['003'] : theme['001'];
+}};
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    z-index: 100;
+    position: fixed;
+
+    &::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+
+        ${_ref3 => {
+  let {
+    $position,
+    $offset
+  } = _ref3;
+  switch ($position) {
+    case PopupAlignment.TopLeft:
+      return css`
+                        bottom: -7px;
+                        right: ${13 + $offset}px;
+                        transform: rotate(45deg);
+                    `;
+    case PopupAlignment.BottomLeft:
+      return css`
+                        top: -7px;
+                        right: ${13 + $offset}px;
+                        transform: rotate(225deg);
+                    `;
+    case PopupAlignment.TopRight:
+      return css`
+                        transform: rotate(45deg);
+                        bottom: -7px;
+                        left: ${13 + $offset}px;
+                    `;
+    case PopupAlignment.BottomRight:
+      return css`
+                        transform: rotate(225deg);
+                        top: -7px;
+                        left: ${13 + $offset}px;
+                    `;
+    default:
+      return undefined;
+  }
+}}
+    }
+
+    &::before {
+        background-color: inherit;
+        border-radius: 3px;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+    }
+`;
+//# sourceMappingURL=PopupContentWrapper.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["ColorMode","motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","_ref","theme","$colorMode","Dark","_ref2","text","_ref3","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n        $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: fixed;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AASrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAuC;AACvC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,IAAA;EAAA,OAC5EE,UAAU,KAAKT,SAAS,CAACU,IAAI,GAAGF,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACnE;AACA;AACA,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAAF,KAAA;EACrB,QAAQC,SAAS;IACb,KAAKV,cAAc,CAACY,OAAO;MACvB,OAAOb,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGY,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACa,UAAU;MAC1B,OAAOd,GAAG;AAC9B;AACA,iCAAiC,EAAE,GAAGY,OAAO;AAC7C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACc,QAAQ;MACxB,OAAOf,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAO;AAC5C,qBAAqB;IACL,KAAKX,cAAc,CAACe,WAAW;MAC3B,OAAOhB,GAAG;AAC9B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAO;AAC5C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useUuid } from '../../hooks/uuid';
+import { StyledMotionProgressBarProgress, StyledProgressBar, StyledProgressBarBackground, StyledProgressBarLabel, StyledProgressBarProgressWrapper } from './ProgressBar.styles';
+const ProgressBar = _ref => {
+  let {
+    percentage,
+    label,
+    shouldHideProgress = false
+  } = _ref;
+  const [internalPercentage, setInternalPercentage] = useState(0);
+  const uuid = useUuid();
+  useEffect(() => {
+    if (typeof percentage !== 'number') {
+      return;
+    }
+    if (percentage >= 0 && percentage <= 100) {
+      setInternalPercentage(percentage);
+    }
+  }, [percentage]);
+  const progressBar = useMemo(() => {
+    if (shouldHideProgress) {
+      return null;
+    }
+    if (typeof percentage !== 'number') {
+      return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+        key: `progress-bar-loop__${uuid}`,
+        initial: {
+          width: '200px',
+          left: '-200px'
+        },
+        animate: {
+          width: '200px',
+          left: '100%'
+        },
+        exit: {
+          width: '200px',
+          left: '100%'
+        },
+        transition: {
+          type: 'tween',
+          repeat: Infinity,
+          repeatDelay: 0,
+          duration: 1
+        }
+      }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
+    }
+    return /*#__PURE__*/React.createElement(StyledProgressBarProgressWrapper, null, /*#__PURE__*/React.createElement(StyledMotionProgressBarProgress, {
+      key: `progress-bar__${uuid}`,
+      initial: {
+        width: '0%'
+      },
+      animate: {
+        width: `${internalPercentage}%`
+      },
+      exit: {
+        width: '0%'
+      },
+      transition: {
+        type: 'tween'
+      }
+    }), /*#__PURE__*/React.createElement(StyledProgressBarBackground, null));
+  }, [internalPercentage, percentage, shouldHideProgress, uuid]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledProgressBar, null, progressBar, label && /*#__PURE__*/React.createElement(StyledProgressBarLabel, null, label)), [progressBar, label]);
+};
+ProgressBar.displayName = 'ProgressBar';
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

package/lib/esm/components/progress-bar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":["React","useEffect","useMemo","useState","useUuid","StyledMotionProgressBarProgress","StyledProgressBar","StyledProgressBarBackground","StyledProgressBarLabel","StyledProgressBarProgressWrapper","ProgressBar","_ref","percentage","label","shouldHideProgress","internalPercentage","setInternalPercentage","uuid","progressBar","createElement","key","initial","width","left","animate","exit","transition","type","repeat","Infinity","repeatDelay","duration","displayName"],"sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport {\n    StyledMotionProgressBarProgress,\n    StyledProgressBar,\n    StyledProgressBarBackground,\n    StyledProgressBarLabel,\n    StyledProgressBarProgressWrapper,\n} from './ProgressBar.styles';\n\nexport type ProgressBarProps = {\n    /**\n     * The label that should be displayed under the progressbar.\n     */\n    label?: string;\n    /**\n     * The percentage of the progress. Number between 0 and 100.\n     */\n    percentage?: number;\n    /**\n     * Whether the progress should be hide and just display the label.\n     */\n    shouldHideProgress?: boolean;\n};\n\nconst ProgressBar: FC<ProgressBarProps> = ({ percentage, label, shouldHideProgress = false }) => {\n    const [internalPercentage, setInternalPercentage] = useState(0);\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (typeof percentage !== 'number') {\n            return;\n        }\n\n        if (percentage >= 0 && percentage <= 100) {\n            setInternalPercentage(percentage);\n        }\n    }, [percentage]);\n\n    const progressBar = useMemo(() => {\n        if (shouldHideProgress) {\n            return null;\n        }\n\n        if (typeof percentage !== 'number') {\n            return (\n                <StyledProgressBarProgressWrapper>\n                    <StyledMotionProgressBarProgress\n                        key={`progress-bar-loop__${uuid}`}\n                        initial={{ width: '200px', left: '-200px' }}\n                        animate={{ width: '200px', left: '100%' }}\n                        exit={{ width: '200px', left: '100%' }}\n                        transition={{\n                            type: 'tween',\n                            repeat: Infinity,\n                            repeatDelay: 0,\n                            duration: 1,\n                        }}\n                    />\n                    <StyledProgressBarBackground />\n                </StyledProgressBarProgressWrapper>\n            );\n        }\n\n        return (\n            <StyledProgressBarProgressWrapper>\n                <StyledMotionProgressBarProgress\n                    key={`progress-bar__${uuid}`}\n                    initial={{ width: '0%' }}\n                    animate={{ width: `${internalPercentage}%` }}\n                    exit={{ width: '0%' }}\n                    transition={{ type: 'tween' }}\n                />\n                <StyledProgressBarBackground />\n            </StyledProgressBarProgressWrapper>\n        );\n    }, [internalPercentage, percentage, shouldHideProgress, uuid]);\n\n    return useMemo(\n        () => (\n            <StyledProgressBar>\n                {progressBar}\n                {label && <StyledProgressBarLabel>{label}</StyledProgressBarLabel>}\n            </StyledProgressBar>\n        ),\n        [progressBar, label],\n    );\n};\n\nProgressBar.displayName = 'ProgressBar';\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SACIC,+BAA+B,EAC/BC,iBAAiB,EACjBC,2BAA2B,EAC3BC,sBAAsB,EACtBC,gCAAgC,QAC7B,sBAAsB;AAiB7B,MAAMC,WAAiC,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,UAAU;IAAEC,KAAK;IAAEC,kBAAkB,GAAG;EAAM,CAAC,GAAAH,IAAA;EACxF,MAAM,CAACI,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGb,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAMc,IAAI,GAAGb,OAAO,CAAC,CAAC;EAEtBH,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOW,UAAU,KAAK,QAAQ,EAAE;MAChC;IACJ;IAEA,IAAIA,UAAU,IAAI,CAAC,IAAIA,UAAU,IAAI,GAAG,EAAE;MACtCI,qBAAqB,CAACJ,UAAU,CAAC;IACrC;EACJ,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMM,WAAW,GAAGhB,OAAO,CAAC,MAAM;IAC9B,IAAIY,kBAAkB,EAAE;MACpB,OAAO,IAAI;IACf;IAEA,IAAI,OAAOF,UAAU,KAAK,QAAQ,EAAE;MAChC,oBACIZ,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;QAC5Be,GAAG,EAAE,sBAAsBH,IAAI,EAAG;QAClCI,OAAO,EAAE;UAAEC,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAS,CAAE;QAC5CC,OAAO,EAAE;UAAEF,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QAC1CE,IAAI,EAAE;UAAEH,KAAK,EAAE,OAAO;UAAEC,IAAI,EAAE;QAAO,CAAE;QACvCG,UAAU,EAAE;UACRC,IAAI,EAAE,OAAO;UACbC,MAAM,EAAEC,QAAQ;UAChBC,WAAW,EAAE,CAAC;UACdC,QAAQ,EAAE;QACd;MAAE,CACL,CAAC,eACF/B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;IAE3C;IAEA,oBACIP,KAAA,CAAAmB,aAAA,CAACV,gCAAgC,qBAC7BT,KAAA,CAAAmB,aAAA,CAACd,+BAA+B;MAC5Be,GAAG,EAAE,iBAAiBH,IAAI,EAAG;MAC7BI,OAAO,EAAE;QAAEC,KAAK,EAAE;MAAK,CAAE;MACzBE,OAAO,EAAE;QAAEF,KAAK,EAAE,GAAGP,kBAAkB;MAAI,CAAE;MAC7CU,IAAI,EAAE;QAAEH,KAAK,EAAE;MAAK,CAAE;MACtBI,UAAU,EAAE;QAAEC,IAAI,EAAE;MAAQ;IAAE,CACjC,CAAC,eACF3B,KAAA,CAAAmB,aAAA,CAACZ,2BAA2B,MAAE,CACA,CAAC;EAE3C,CAAC,EAAE,CAACQ,kBAAkB,EAAEH,UAAU,EAAEE,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE9D,OAAOf,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACb,iBAAiB,QACbY,WAAW,EACXL,KAAK,iBAAIb,KAAA,CAAAmB,aAAA,CAACX,sBAAsB,QAAEK,KAA8B,CAClD,CACtB,EACD,CAACK,WAAW,EAAEL,KAAK,CACvB,CAAC;AACL,CAAC;AAEDH,WAAW,CAACsB,WAAW,GAAG,aAAa;AAEvC,eAAetB,WAAW","ignoreList":[]}

package/lib/esm/components/progress-bar/ProgressBar.styles.js

@@ -0,0 +1,46 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledProgressBar = styled.div`
+    position: relative;
+`;
+export const StyledProgressBarBackground = styled.div`
+    height: 10px;
+    width: 100%;
+    border-radius: 2px;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['104'];
+}};
+`;
+export const StyledProgressBarProgressWrapper = styled.div`
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 10px;
+    border-radius: 2px;
+`;
+export const StyledMotionProgressBarProgress = styled(motion.div)`
+    height: 10px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.headline;
+}};
+`;
+export const StyledProgressBarLabel = styled.div`
+    font-size: 85%;
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.headline;
+}};
+`;
+//# sourceMappingURL=ProgressBar.styles.js.map

package/lib/esm/components/progress-bar/ProgressBar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.styles.js","names":["motion","styled","StyledProgressBar","div","StyledProgressBarBackground","_ref","theme","StyledProgressBarProgressWrapper","StyledMotionProgressBarProgress","_ref2","headline","StyledProgressBarLabel","_ref3"],"sources":["../../../../src/components/progress-bar/ProgressBar.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledProgressBar = styled.div`\n    position: relative;\n`;\n\ntype StyledProgressBarBackgroundProps = WithTheme<unknown>;\nexport const StyledProgressBarBackground = styled.div<StyledProgressBarBackgroundProps>`\n    height: 10px;\n    width: 100%;\n    border-radius: 2px;\n    background-color: ${({ theme }: StyledProgressBarBackgroundProps) => theme['104']};\n`;\n\nexport const StyledProgressBarProgressWrapper = styled.div`\n    overflow: hidden;\n    position: relative;\n    width: 100%;\n    height: 10px;\n    border-radius: 2px;\n`;\n\ntype StyledProgressBarProgressProps = WithTheme<unknown>;\nexport const StyledMotionProgressBarProgress = styled(motion.div)<StyledProgressBarProgressProps>`\n    height: 10px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 2;\n    background-color: ${({ theme }: StyledProgressBarProgressProps) => theme.headline};\n`;\n\ntype StyledProgressBarLabelProps = WithTheme<unknown>;\n\nexport const StyledProgressBarLabel = styled.div<StyledProgressBarLabelProps>`\n    font-size: 85%;\n    color: ${({ theme }: StyledProgressBarLabelProps) => theme.headline};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAG;AAC3C;AACA,CAAC;AAGD,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAqC;AACvF;AACA;AACA;AACA,wBAAwBE,IAAA;EAAA,IAAC;IAAEC;EAAwC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACrF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGN,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA;AACA;AACA,CAAC;AAGD,OAAO,MAAMK,+BAA+B,GAAGP,MAAM,CAACD,MAAM,CAACG,GAAG,CAAiC;AACjG;AACA;AACA;AACA;AACA;AACA,wBAAwBM,KAAA;EAAA,IAAC;IAAEH;EAAsC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,QAAQ;AAAA;AACrF,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACE,GAAgC;AAC7E;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEN;EAAmC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACI,QAAQ;AAAA;AACvE,CAAC","ignoreList":[]}