frst-components 0.36.9 → 0.38.0

package/dist/esm/src/components/LXP/modalNewFeatures/ModalNewFeatures.style.js

@@ -0,0 +1,204 @@
+import styled from 'styled-components';
+
+const ModalNewFeaturesContainer = styled.div `
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000075;
+  top: 0;
+  left: 0;
+`;
+const ModalNewFeaturesContent = styled.div `
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  height: 560px;
+  width: 963px;
+  display: flex;
+`;
+const AssideNewFeatures = styled.aside `
+  box-sizing: border-box;
+  width: 250px;
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+  > .list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 60px;
+    position: relative;
+    left: 13px;
+  }
+`;
+const divExit = styled.div `
+
+
+width: 963px;
+position: absolute;
+cursor: pointer;
+display: flex;
+z-index: 3000;
+`;
+const TextExit = styled.h2 `
+
+width: 30px;
+height: 20px;
+right: 0px;
+position: absolute;
+color: #000;
+font-family: "PT Sans";
+font-size: 16px;
+font-style: normal;
+font-weight: 400;
+line-height: 110%; 
+top: 10px;
+
+`;
+const Text = styled.p `
+  font-family: PT Sans;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 110%;
+  color: #222;
+  text-align: left;
+  width: 100%;
+  /* max-width: 83ch; */
+  max-height: 69px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.title {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 130%;
+    letter-spacing: 0.24px;
+  }
+
+  &.subtitle {
+    max-height: 24px;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+  }
+
+  &.topic {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 110%;
+  }
+`;
+const ListTopics = styled.ul `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  gap: 16px;
+  overflow-y: auto;
+  height: 308px;
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 90%;
+    display: flex;
+    box-sizing: border-box;
+    margin-right: 5px !important;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #D1D1D1;
+    height: 30%;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background:#646464;
+    height: 60%;
+    border-radius: 5px;
+    margin: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #646464;
+    height: 30%;
+  }
+`;
+const Topic = styled.li `
+  list-style: none;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 110%;
+  border-left: 1px solid transparent;
+  padding-left: 8px;
+  cursor: pointer;
+
+  &.active {
+    font-weight: 700;
+    border-left: 1px solid #000;
+  }
+`;
+const MidiaContent = styled.div `
+  width: 100%;
+  height: 100%;
+  padding: 8px !important;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 8px;
+  background: #fff;
+  border-radius: 8px;
+`;
+const Midia = styled.div `
+  width: 100%;
+  height: 380px;
+  background: rgba(191, 186, 186, 0.2);
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-direction: row-reverse;
+
+  > .close {
+    width: 30px;
+    padding: 8px;
+    cursor: pointer;
+    position: absolute;
+  }
+
+  > .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0px !important;
+
+    > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+`;
+const ContentDescription = styled.div `
+  display: flex;
+  height: 139px;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+`;
+
+export { AssideNewFeatures, ContentDescription, ListTopics, Midia, MidiaContent, ModalNewFeaturesContainer, ModalNewFeaturesContent, Text, TextExit, Topic, divExit };

package/dist/esm/src/components/LXP/modalNewFeatures/index.js

@@ -0,0 +1,41 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import Button from '../../buttons/index.js';
+import { useState, useEffect } from 'react';
+import ReactPlayer from 'react-player';
+import { ModalNewFeaturesContainer, ModalNewFeaturesContent, divExit, TextExit, AssideNewFeatures, Text, ListTopics, Topic, MidiaContent, Midia, ContentDescription } from './ModalNewFeatures.style.js';
+
+const modalNewFeatures = ({ title = 'Novidades', open, onClose, onFinish, steps, Exit = 'X', onCurrentStep }) => {
+    const [numberCurrentStep, setNumberCurrentStep] = useState(0);
+    const [currentTopic, setCurrentTopic] = useState(steps[numberCurrentStep]);
+    const isLastStep = currentTopic === steps[steps.length - 1];
+    const labelButton = isLastStep ? 'Entendi' : 'Próximo';
+    const variantButton = isLastStep ? 'primary' : 'secondary';
+    useEffect(() => {
+        setCurrentTopic(steps[numberCurrentStep]);
+    }, [steps]);
+    useEffect(() => {
+        onCurrentStep && onCurrentStep(currentTopic);
+    }, [currentTopic]);
+    const handleClickButtonNext = () => {
+        if (isLastStep) {
+            onFinish && onFinish();
+        }
+        else {
+            setCurrentTopic(steps[numberCurrentStep + 1]);
+            setNumberCurrentStep((prev) => prev + 1);
+        }
+    };
+    const handleClickTopic = (id) => {
+        const [topic] = steps.filter((item, i) => i === id);
+        setCurrentTopic(topic);
+        setNumberCurrentStep(id);
+    };
+    return (jsx(Fragment, { children: open && (jsx(ModalNewFeaturesContainer, { id: "container-modal", onClick: (e) => {
+                const target = e.target;
+                target.id === 'container-modal' && onClose();
+            }, children: jsxs(ModalNewFeaturesContent, { children: [jsx(divExit, { children: jsx(TextExit, { id: 'exit', onClick: onClose, children: Exit }) }), jsxs(AssideNewFeatures, { children: [jsxs("div", { className: "list", children: [jsx(Text, { id: "modal-title", className: "title", children: title }), jsx(ListTopics, { children: steps.map((topic, i) => {
+                                            return (jsx(Topic, { id: `step${i + 1}`, className: currentTopic.topicName === topic.topicName ? 'active' : '', onClick: () => handleClickTopic(i), children: topic.topicName }, i));
+                                        }) })] }), jsx(Button, { id: isLastStep ? 'button-finish' : 'button-nextStep', label: labelButton, variant: variantButton, handleClick: handleClickButtonNext, style: { padding: '8px 32px', height: 'fit-content' } })] }), jsxs(MidiaContent, { children: [jsx(Midia, { id: "midia-container", children: jsx("div", { className: "content", children: currentTopic.typeMidia !== 'video' ? (jsx("img", { style: currentTopic.styleImage, src: currentTopic.midia, alt: currentTopic.title })) : (jsx(ReactPlayer, { url: 'currentTopic.midia', controls: true, playing: true, style: { width: '100%', height: '100%' } })) }) }), jsxs(ContentDescription, { children: [jsx(Text, { id: "step-title", className: "subtitle", children: currentTopic.title }), jsx(Text, { id: "step-description", children: currentTopic.description })] })] })] }) })) }));
+};
+
+export { modalNewFeatures as default };

package/dist/esm/src/components/LXP/participantThumbnails/index.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { CardThumbnails, DescriptionThumbnails } from './participantThumbnails.js';
+import { FRSTTheme } from '../../../theme/index.js';
+import { useState } from 'react';
+
+function ParticipantThumbnails({ imgThumbnails, titleThumbnail, descpThumbnail, handleFunctionThumbnail, author }) {
+    const [seeMore, setSeeMore] = useState(true);
+    const defaultImg = 'https://lxp-cdn.frstfalconi.cloud/contentThumbnail_empty.jpg';
+    const textLarge = descpThumbnail.length >= 100;
+    return (jsxs(CardThumbnails, { theme: FRSTTheme, onClick: () => {
+            !textLarge && handleFunctionThumbnail();
+        }, style: !textLarge ? { cursor: 'pointer' } : { cursor: 'auto' }, children: [jsx("img", { src: imgThumbnails ? imgThumbnails : defaultImg, alt: titleThumbnail, onClick: () => {
+                    textLarge && handleFunctionThumbnail();
+                } }), jsx("p", { className: "title", style: textLarge ? { cursor: 'pointer' } : { cursor: 'auto' }, onClick: () => {
+                    textLarge && handleFunctionThumbnail();
+                }, children: titleThumbnail }), author && (jsxs("p", { className: "author", children: ["com ", jsx("span", { children: author })] })), jsxs(DescriptionThumbnails, { theme: FRSTTheme, onClick: () => textLarge && setSeeMore((prev) => !prev), children: [jsx("p", { className: textLarge && seeMore ? 'descriptionThumb short' : 'descriptionThumb', children: descpThumbnail }), textLarge && jsx("small", { children: seeMore ? 'Ver mais' : 'Ver menos' })] })] }));
+}
+
+export { ParticipantThumbnails as default };

package/dist/esm/src/components/LXP/participantThumbnails/participantThumbnails.js

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+const CardThumbnails = styled.div `
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme }) => theme.fonts.neutralsGrey1};
+  width: 230px;
+  gap: 8px;
+  font-family: 'PT Sans';
+  font-style: normal;
+
+  :hover {
+    > .title {
+      color: ${({ theme }) => theme.colors.primary1};
+    }
+    > img {
+      border: 2px solid ${({ theme }) => theme.colors.primary1};
+    }
+    .descriptionThumb {
+      color: ${({ theme }) => theme.colors.shadeBlack};
+    }
+  }
+
+  .title {
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 18px;
+    line-height: 23px;
+    word-break: break-word;
+    white-space: normal;
+    transition: all 0.3s;
+  }
+  > img {
+    width: 220px;
+    height: 140px;
+    border-radius: 8px;
+    object-fit: cover;
+    object-position: top;
+    border: 2px solid transparent;
+    transition: all 0.3s;
+    cursor: pointer;
+  }
+
+  .author {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: #000000;
+
+    > span {
+      font-weight: 700;
+      text-transform: capitalize;
+    }
+  }
+`;
+const DescriptionThumbnails = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  width: 100%;
+
+  p {
+    color: ${({ theme }) => theme.colors.black};
+    font-weight: ${({ theme }) => theme.fonts.textMessageComponentsBodySmall.fontWeight};
+    font-size: 13px;
+    line-height: 18px;
+    font-family: 'PT Sans';
+    font-family: ${({ theme }) => theme.fonts.textMessageComponentsBodySmall.fontFamily};
+    color: ${({ theme }) => theme.colors.neutralsGrey2};
+    width: 100%;
+    transition: all 0.3s;
+    white-space: normal;
+
+    &.short {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  > small {
+    cursor: pointer;
+    transition: all 0.3s;
+
+    :hover {
+      transform: scale(1.05);
+    }
+  }
+`;
+
+export { CardThumbnails, DescriptionThumbnails };

package/dist/esm/src/components/LXP/participantThumbnailsList/index.js

@@ -0,0 +1,35 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import ScrollContainer from '../../scroll-container/index.js';
+import { useState, useEffect } from 'react';
+import ParticipantThumbnails from '../participantThumbnails/index.js';
+
+function handleThumbnails(listThumbnails, isVisibleControlsButtons, colorBackground) {
+    const [refesh, setRefesh] = useState(0);
+    useEffect(() => {
+        setRefesh((prev) => prev + 1);
+    }, [listThumbnails]);
+    return (jsx(Fragment, { children: jsx(ScrollContainer, { colorBackground: colorBackground, refreshResize: refesh, stepMove: 600, isVisibleControlsButtons: isVisibleControlsButtons, sizeArrowButton: 40, marginsArrowButton: 1, horizontalMarginInternScroll: '0', marginTopArrrowButton: '0rem', widthProtectClick: 50, className: 'scrollThumbnail', children: listThumbnails.map((item, index) => {
+                return (jsx(ParticipantThumbnails, { imgThumbnails: item.imgThumbnails, titleThumbnail: item.titleThumbnail, descpThumbnail: item.descpThumbnail, handleFunctionThumbnail: item.handleFunctionThumbnail }, index));
+            }) }) }));
+}
+function ParticipantThumbnailsList({ listThumbnails, colorBackground }) {
+    const [width, setWidth] = useState(typeof window !== 'undefined' && window.innerWidth);
+    function handleWindowSizeChange() {
+        setWidth(typeof window !== 'undefined' && window.innerWidth);
+    }
+    useEffect(() => {
+        typeof window !== 'undefined' && window.addEventListener('resize', handleWindowSizeChange);
+        return () => {
+            typeof window !== 'undefined' && window.removeEventListener('resize', handleWindowSizeChange);
+        };
+    }, []);
+    if (width <= 834) {
+        return handleThumbnails(listThumbnails, false, colorBackground);
+    }
+    else {
+        return handleThumbnails(listThumbnails, true, colorBackground);
+    }
+}
+
+export { ParticipantThumbnailsList as default };

package/dist/esm/src/components/LXP/popOver/index.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { useState, useEffect } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { PopOver as PopOver$1, RectangleUpLeft, RectangleUpRight, RectangleLowRight, RectangleLowLeft, RectangleLowCenter, RectangleLeft, RectangleRight } from './popOverStyle.js';
+import Popover from '@material-ui/core/Popover';
+
+const ArrowPopover = () => {
+    return (jsxs("svg", { width: "17", height: "12", viewBox: "0 0 17 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M8.5 1L1 11.5H8.5H16L8.5 1Z", fill: "white", stroke: "#BDBDBD" }), jsx("path", { d: "M1.21997 12L2.33 10.5H14.67L15.75 12H1.21997Z", fill: "white" })] }));
+};
+function PopOverItem(props) {
+    return (jsxs("div", { style: {
+            width: '100%',
+            padding: 8,
+            margin: 0,
+            fontSize: 16,
+            borderBottom: props.noBorder ? 'none' : '1px solid #EBEBEB',
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 8,
+            fontFamily: 'PT Sans',
+            cursor: 'pointer',
+            color: props.color ? props.color : '#000000',
+            fontWeight: props.isFontBold ? '700' : 'normal'
+        }, onClick: props.onClick, children: [props.icon, props.label] }));
+}
+function PopOver({ variant, children, element, onClosePopover, anchorOrigin, transformOrigin }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    useState('');
+    const [AnchorHorizontal, setAnchorHorizontal] = useState(anchorOrigin ? anchorOrigin : { vertical: 'bottom', horizontal: 'right' });
+    const [TransformVertical, setTransformVertical] = useState(transformOrigin ? transformOrigin : { vertical: 'top', horizontal: 'right' });
+    useState('');
+    useEffect(() => {
+        setAnchorEl(element);
+    }, [element]);
+    const handleClose = () => {
+        setAnchorEl(null);
+        onClosePopover();
+    };
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: AnchorHorizontal, transformOrigin: TransformVertical, PaperProps: {
+                style: {
+                    backgroundColor: "transparent",
+                    boxShadow: "none",
+                    borderRadius: 8,
+                }
+            }, style: {
+                borderRadius: 8
+            }, children: jsx("div", { style: { marginTop: variant.search('up') === -1 ? 0 : 12, marginBottom: variant.search('low') === -1 ? 0 : 20 }, children: jsxs(PopOver$1, { children: [variant === 'upLeft' ?
+                            jsx(RectangleUpLeft, { variant: variant = 'upLeft' })
+                            : variant === 'upRight' ?
+                                jsx(RectangleUpRight, { variant: variant = 'upRight', children: jsx(ArrowPopover, {}) })
+                                : variant === 'lowRight' ?
+                                    jsx(RectangleLowRight, { variant: variant = 'lowRight' })
+                                    : variant === 'lowLeft' ?
+                                        jsx(RectangleLowLeft, { variant: variant = 'lowLeft' })
+                                        : variant === 'lowCenter' ?
+                                            jsx(RectangleLowCenter, { variant: variant = 'lowCenter' })
+                                            : variant === 'sideLeft' ?
+                                                jsx(RectangleLeft, { variant: variant = 'sideLeft' })
+                                                : variant === 'sideRight' ?
+                                                    jsx(RectangleRight, { variant: variant = 'sideRight' })
+                                                    : null, jsx("div", { style: { zIndex: 9 }, children: children })] }) }) }) }));
+}
+
+export { PopOverItem, PopOver as default };

package/dist/esm/src/components/LXP/popOver/popOverStyle.js

@@ -0,0 +1,130 @@
+import styled from 'styled-components';
+
+const RectangleUpLeft = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: -7px 0 32px 27px;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-bottom: none;
+    border-right: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+
+    ${({ variant }) => (variant)}
+`;
+const RectangleUpRight = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: -15px 16px 0 27px;}
+`;
+const RectangleLowRight = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 27px 32px -7px 0px;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-left: none;   
+    border-top: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleLowLeft = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 27px 0 -7px 32px;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-left: none;   
+    border-top: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleLowCenter = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 27px 0 -7px calc(50% - 7px);
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-left: none;   
+    border-top: none;
+    transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleLeft = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 39px 0px 32px -7px;
+    left: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-right: none;
+    border-bottom: none;
+    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
+    
+    ${({ variant }) => (variant)}
+`;
+const RectangleRight = styled.div `
+    width: 13.64px;
+    height: 13.64px;
+    position: absolute;
+    margin: 39px -7px 13px 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    border-left: none;   
+    border-top: none;
+    transform: matrix(0.91, -0.51, 0.91, 0.61, 0, 0);    
+    
+    ${({ variant }) => (variant)}
+`;
+const PopOver = styled.div `
+    z-index: 999;
+    width: 100%;
+    min-height: 31px;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    box-shadow: 0px 18px 20px -15px #222222;
+    position: relative;
+    padding: 8px;
+`;
+styled.div `
+    width: 100%;
+    min-height: 67px;
+    border-radius: 8px;
+    border: 1px solid ${({ theme }) => theme.colors.neutralsGrey4};
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    box-shadow: 0px 18px 40px -15px #d3d3d3;
+    position: relative;
+    margin: 0% 0% 0% 0%;
+    padding: 8px;    
+`;
+
+export { PopOver, RectangleLeft, RectangleLowCenter, RectangleLowLeft, RectangleLowRight, RectangleRight, RectangleUpLeft, RectangleUpRight };

package/dist/esm/src/components/LXP/popOverLXP-antigo/index.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { PopOver, RectangleUpLeft, RectangleUpRight, RectangleLowRight, RectangleLowLeft, PopOverLeftRight, RectangleLeft, RectangleRight } from './popOverLXPStyles.js';
+
+function PopOverLXP({ variant, children }) {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: variant === 'upLeft' ?
+            jsxs(PopOver, { children: [jsx(RectangleUpLeft, { variant: variant = 'upLeft' }), children] })
+            : variant === 'upRight' ?
+                jsxs(PopOver, { children: [jsx(RectangleUpRight, { variant: variant = 'upRight' }), children] })
+                : variant === 'lowRight' ?
+                    jsxs(PopOver, { children: [jsx(RectangleLowRight, { variant: variant = 'lowRight' }), children] })
+                    : variant === 'lowLeft' ?
+                        jsxs(PopOver, { children: [jsx(RectangleLowLeft, { variant: variant = 'lowLeft' }), children] })
+                        : variant === 'sideLeft' ?
+                            jsxs(PopOverLeftRight, { children: [jsx(RectangleLeft, { variant: variant = 'sideLeft' }), children] })
+                            : variant === 'sideRight' ?
+                                jsxs(PopOverLeftRight, { children: [jsx(RectangleRight, { variant: variant = 'sideRight' }), children] })
+                                : null }));
+}
+
+export { PopOverLXP as default };