frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/DS/toast/toast.styles.js

@@ -0,0 +1,68 @@
+import styled, { keyframes } from 'styled-components';
+
+const fadeInRight = keyframes `
+  0% {
+    opacity: 0;
+    transform: translateX(50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+keyframes `
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+`;
+const ToastWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-radius: 8px;
+  border: 0.5px solid  ${({ theme }) => theme.colors.neutralsGrey5};
+  box-shadow: 2px 4px 8px #3D3B3B33;
+  background-color: #F9FAFB;
+  margin: 10px;
+  color: ${({ theme }) => theme.colors.shadeBlack};
+  width: 411px;
+  min-height:54px;
+  max-height: auto;
+  position: fixed;
+  top: 100px;
+  right: 40px;
+  z-index: 10000;
+  animation: ${fadeInRight} 0.5s ease-in-out;
+`;
+const Icon = styled.span `
+  margin-right: 10px;
+  margin-top:4px
+`;
+const CloseButton = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #000;
+  opacity: 0.7;
+  margin-left:auto;
+  margin-bottom: auto;
+  margin-top: 8px
+`;
+const Text = styled.p `
+  display: flex;
+  align-items: center;
+  font-family: PT Sans;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 18px;
+  letter-spacing: 0em;
+  text-align: left;
+  margin-right: 16px;
+`;
+
+export { CloseButton, Icon, Text, ToastWrapper };

package/dist/esm/src/components/DS/toast-v2/index.js

@@ -0,0 +1,76 @@
+import { jsx } from 'react/jsx-runtime';
+import { toast } from 'react-toastify';
+import { StyledContainer } from './toast-v2.styles.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ErrorInCicleIcon, CloseIcon } from '../../../shared/icons.js';
+import { CircledCheck } from '../../../../public/customIcons/CircledCheck.js';
+import { WarningIcon } from '../../../../public/customIcons/WarningIcon.js';
+
+const showToastV2 = ({ type = 'success', message, showBySeconds = 5, styles, startICon, isHiddenCloseicon, handleClick }) => {
+    let iconComponent = startICon;
+    switch (type) {
+        case 'error':
+            iconComponent = jsx(ErrorInCicleIcon, { fill: "#C00F00", width: "22", height: "22" });
+            break;
+        case 'success':
+            iconComponent = jsx(CircledCheck, { width: "22", height: "22" });
+            break;
+        case 'warning':
+            iconComponent = jsx(WarningIcon, { width: "22", height: "22" });
+            break;
+        default:
+            iconComponent = undefined;
+    }
+    const CustomCloseButton = ({ closeToast }) => (jsx("span", { onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            closeToast(e);
+        }, style: {
+            display: 'flex',
+            marginTop: 'auto',
+            marginBottom: 'auto',
+            marginRight: '20px',
+            marginLeft: '4px',
+            cursor: 'pointer'
+        }, children: jsx(CloseIcon, { width: "14", height: "14" }) }));
+    const toastOptions = {
+        position: 'top-right',
+        autoClose: showBySeconds * 1000,
+        closeButton: isHiddenCloseicon ? false : CustomCloseButton,
+        icon: startICon ? startICon : iconComponent,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        onClick: (e) => {
+            e?.preventDefault();
+            e?.stopPropagation();
+            handleClick ? handleClick() : null;
+        },
+        style: styles
+    };
+    switch (type) {
+        case 'info':
+            toast.info(message, toastOptions);
+            break;
+        case 'success':
+            toast.success(message, toastOptions);
+            break;
+        case 'error':
+            toast.error(message, toastOptions);
+            break;
+        case 'warning':
+            toast.warn(message, toastOptions);
+            break;
+        default:
+            toast(message, toastOptions);
+            break;
+    }
+};
+const ToastV2 = () => {
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsx(StyledContainer, {}) }));
+};
+
+export { ToastV2, showToastV2 };

package/dist/esm/src/components/DS/toast-v2/toast-v2.styles.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+
+const StyledContainer = styled(ToastContainer) `
+  .Toastify__toast {
+    border-radius: 8px !important;
+    min-height: 54px !important;
+  }
+  .Toastify__toast-body {
+    color: #000 !important;
+    font-family: Pt Sans;
+    font-weight: 400;
+    line-height: 18.12px;
+    font-size: 14px;
+  }
+`;
+
+export { StyledContainer };

package/dist/esm/src/components/DS/tooltip/index.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { TooltipWrapper, TooltipGhost, TooltipTip } from './styles.js';
+import ReactDOM from 'react-dom';
+
+function Tooltip({ content, direction, children, trigger = 'hover', delay = 400, style, className, width, height, onShow, onHide, setIsActive, wrapperWidth }) {
+    let shpwTimeout;
+    let hideTimeout;
+    const [active, setActive] = useState(false);
+    const [renderHeight, setRenderHeight] = useState('51px');
+    const ref = useRef(null);
+    useEffect(() => {
+        setIsActive && setIsActive(active);
+        if (!ref.current || !active)
+            return;
+        if (height)
+            setRenderHeight(height);
+        if (renderHeight === '51px')
+            setRenderHeight(ref.current.clientHeight + 'px');
+    }, [active]);
+    const showTip = () => {
+        const timeoutDelay = trigger === 'click' ? 0 : delay;
+        shpwTimeout = setTimeout(() => {
+            setActive(true);
+            if (onShow)
+                onShow({ active: true });
+        }, timeoutDelay);
+    };
+    const hideTip = () => {
+        clearInterval(shpwTimeout);
+        clearInterval(hideTimeout);
+        hideTimeout = setTimeout(() => {
+            ref.current = null;
+            setRenderHeight('51px');
+            setActive(false);
+            if (onHide)
+                onHide({ active: false });
+        }, 1000);
+    };
+    return (jsxs(TooltipWrapper, { onMouseEnter: trigger === 'hover' ? showTip : undefined, onMouseLeave: hideTip, onClick: trigger === 'click' ? showTip : undefined, width: wrapperWidth, children: [children, active && (jsx(TooltipGhost, { direction: direction || 'top', className: className, width: width || '100px', height: height ? height : renderHeight || '100px', ref: ref, children: jsx(TooltipTip, { direction: direction || 'top', style: style, width: width || '100px', height: height ? height : renderHeight || '100px', children: content }) }))] }));
+}
+const TooltipV2 = ({ children, content, direction = 'bottom', style }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [tooltipStyle, setTooltipStyle] = useState({});
+    const triggerRef = useRef(null);
+    const showTooltip = () => setIsVisible(true);
+    const hideTooltip = () => setIsVisible(false);
+    useEffect(() => {
+        if (isVisible && triggerRef.current) {
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            const positionStyles = {
+                bottom: {
+                    top: triggerRect.bottom + window.scrollY + 8,
+                    left: triggerRect.left + window.scrollX + triggerRect.width / 2,
+                    transform: 'translateX(-50%)'
+                },
+                top: {
+                    top: triggerRect.top + window.scrollY - 8,
+                    left: triggerRect.left + window.scrollX + triggerRect.width / 2,
+                    transform: 'translateX(-50%) translateY(-100%)'
+                },
+                left: {
+                    top: triggerRect.top + window.scrollY + triggerRect.height / 2,
+                    left: triggerRect.left + window.scrollX - 8,
+                    transform: 'translateX(-100%) translateY(-50%)'
+                },
+                right: {
+                    top: triggerRect.top + window.scrollY + triggerRect.height / 2,
+                    left: triggerRect.right + window.scrollX + 8,
+                    transform: 'translateY(-50%)'
+                }
+            };
+            setTooltipStyle({
+                position: 'absolute',
+                ...positionStyles[direction],
+                ...style
+            });
+        }
+    }, [isVisible, direction, style]);
+    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, style: {
+                    display: 'inline-block'
+                }, children: children }), isVisible &&
+                ReactDOM.createPortal(jsx("div", { style: {
+                        zIndex: 9999,
+                        background: '#fff',
+                        border: '1px solid #ccc',
+                        padding: '8px',
+                        borderRadius: '4px',
+                        fontFamily: 'PT Sans',
+                        fontSize: '14px',
+                        lineHeight: '18px',
+                        fontWeight: '400',
+                        color: '#757575',
+                        ...tooltipStyle
+                    }, children: content }), document.body)] }));
+};
+
+export { TooltipV2, Tooltip as default };

package/dist/esm/src/components/DS/tooltip/styles.js

@@ -0,0 +1,146 @@
+import styled from 'styled-components';
+
+const TooltipWrapper = styled.div `
+  display: inline-flex;
+  position: relative;
+  ${({ width }) => width && `width: ${width};`}
+`;
+const TooltipTip = styled.div `
+  background: #FFF;
+  border-radius: 4px;
+  border: 1px solid #BDBDBD;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: #757575;
+  box-shadow: 0px 25px 18px -20px rgba(34, 34, 34, 0.2);
+  padding: 6px;
+  position: relative;
+
+  ${({ width }) => width && `width: ${width};`}
+  ${({ height }) => height && `height: ${height};`}
+
+  &::after {
+    content: " ";
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: 5px;
+    margin-left: calc(5px * -1);
+  }
+
+  &::before {
+    content: " ";
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: 6px;
+    margin-left: calc(6px * -1);
+  }
+
+  ${({ direction }) => {
+    switch (direction) {
+        case 'top':
+            return `
+          &::before,
+          &::after {
+            top: 100%;
+            border-top-color: #BDBDBD
+          }
+
+          &::after {
+            border-top-color: #FFFFFF;
+          }
+        `;
+        case 'right':
+            return `
+          &::before,
+          &::after {
+            left: calc(6px * -1);
+            top: 50%;
+            transform: translateX(0) translateY(-50%);
+            border-right-color: #BDBDBD;
+          }
+
+          &::after {
+            border-right-color: #FFFFFF;
+          }
+        `;
+        case 'bottom':
+            return `
+          &::before,
+          &::after {
+            bottom: 100%;
+            border-bottom-color: #BDBDBD;
+          }
+
+          &::after {
+            border-bottom-color: #FFFFFF;
+          }
+        `;
+        case 'left':
+            return `
+          &::before,
+          &::after {
+            left: auto;
+            right: calc(6px * -2);
+            top: 50%;
+            transform: translateX(0) translateY(-50%);
+            border-left-color: #BDBDBD;
+          }
+
+          &::after {
+            border-left-color: #FFFFFF;
+          }
+        `;
+        default:
+            return '';
+    }
+}}
+
+`;
+const TooltipGhost = styled.div `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+
+
+  ${({ direction, height }) => {
+    switch (direction) {
+        case 'top':
+            return `
+          top: calc(${height} * -1);
+        `;
+        case 'right':
+            return `
+          left: calc(100% + 5px);
+          top: 50%;
+          transform: translateX(0) translateY(-50%);
+        `;
+        case 'bottom':
+            return `
+          bottom: calc(${height} * -1);
+        `;
+        case 'left':
+            return `
+          left: auto;
+          right: calc(100% + 5px);
+          top: 50%;
+          transform: translateX(0) translateY(-50%);
+        `;
+        default:
+            return '';
+    }
+}}
+`;
+
+export { TooltipGhost, TooltipTip, TooltipWrapper };

package/dist/esm/src/components/EBR/buttons-group/index.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { ButtonGroupWrapper } from './styles.js';
+
+function ButtonGroup({ children, active }) {
+    const ButtonGroupProps = {
+        type: 'group',
+        variant: 'primary'
+    };
+    return (jsx(ButtonGroupWrapper, { className: "buttons-group", children: React__default.Children.map(children, (child) => React__default.cloneElement(child, {
+            ...ButtonGroupProps,
+            active: child.props.value === active,
+            length: children.length
+        })) }));
+}
+
+export { ButtonGroup as default };

package/dist/esm/src/components/EBR/buttons-group/styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const ButtonGroupWrapper = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export { ButtonGroupWrapper };

package/dist/esm/src/components/EBR/group-statistics/groupStatisticsStyles.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+styled.img `
+    width: ${props => props.size || '120px'};
+    height: ${props => props.size || '120px'};
+    border-radius: 50%;
+    object-fit: cover;
+
+    ${({ disabled }) => disabled === true && `
+        filter: grayscale(100%);
+    `}
+`;
+const CardWrapper = styled.div `
+    width: 100%;
+    min-height: 154px;
+    padding: 24px;
+
+    background-color: ${({ theme }) => theme.colors.shadeWhite};
+    border: 1px solid #BDBDBD;
+    border-radius: 8px;
+    padding: 20px;
+    ${({ hasShadow }) => hasShadow && 'box-shadow: 0px 18px 40px -15px #D3D3D3'};
+`;
+const FeaturedNumber = styled.p `
+    font-family: 'Work Sans' ;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 48px;
+    line-height: 56px;
+    color: #222222;
+`;
+const DescriptionStatistics = styled.span `
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 23px;
+    color: #FF4D0D;
+`;
+const ItemStatistics = styled.div `
+
+    grid-area: ${({ index, isNamedGrid }) => isNamedGrid && index} !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-itens: flex-start;
+    min-height: 106px;
+    max-width: 272px;
+    padding: 0px 24px 0px 24px;
+    margin-top: ${({ twoRows }) => twoRows ? '24px' : '0px'};
+    ${({ hasDivider, theme }) => hasDivider ?
+    'border-left: 1px solid ' + theme.colors.borderPrimary :
+    'border-left: 1px solid ' + theme.colors.shadeWhite}
+`;
+
+export { CardWrapper, DescriptionStatistics, FeaturedNumber, ItemStatistics };

package/dist/esm/src/components/EBR/group-statistics/index.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '../../../shared/global.css.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { CardWrapper, ItemStatistics, FeaturedNumber, DescriptionStatistics } from './groupStatisticsStyles.js';
+
+function TotalizerCard({ objectStatistics, loading, hasShadow, styles }) {
+    const [windowSize, setWindowSize] = useState([0, 0]);
+    useEffect(() => {
+        function updateSize() {
+            setWindowSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    const renderObjectStatistics = (isNamed) => {
+        const calcHasDivider = (myIndex) => {
+            if (myIndex == 0)
+                return false;
+            switch (objectStatistics.length) {
+                case 6:
+                case 7:
+                case 8:
+                    if (myIndex == 4)
+                        return false;
+            }
+            return true;
+        };
+        return objectStatistics.map((item, index) => {
+            return jsxs(ItemStatistics, { hasDivider: calcHasDivider(index), twoRows: objectStatistics.length > 5 && index > 3, isNamedGrid: isNamed, index: 'card-' + (index + 1).toString(), children: [jsx(FeaturedNumber, { children: item.featuredNumber }), jsx(DescriptionStatistics, { children: item.description })] }, index);
+        });
+    };
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: loading ? jsx(CardWrapper, { hasShadow: hasShadow, className: 'shimmer', style: { ...styles } }) :
+            jsx(CardWrapper, { hasShadow: hasShadow, style: { ...styles }, children: (objectStatistics && objectStatistics.length > 0 && objectStatistics.length <= 5) ?
+                    jsx("div", { style: {
+                            display: 'grid',
+                            gridTemplateAreas: objectStatistics.length == 5 ? `'card-1 card-2 card-3 card-4 card-5'` : `'card-1 card-2 card-3 card-4'`
+                        }, children: renderObjectStatistics(true) })
+                    :
+                        (objectStatistics && objectStatistics.length > 0 && objectStatistics.length <= 6) ?
+                            jsx("div", { style: {
+                                    display: 'grid',
+                                    gridTemplateAreas: `'card-1 card-2 card-3 card-4''. card-5 card-6 .'`
+                                }, children: renderObjectStatistics(true) })
+                            :
+                                (objectStatistics && objectStatistics.length > 0 && objectStatistics.length <= 7) ?
+                                    jsx("div", { style: {
+                                            display: 'grid',
+                                            gridTemplateAreas: `'card-1 card-1 card-2 card-2 card-3 card-3 card-4 card-4''. card-5 card-5 card-6 card-6 card-7 card-7 .'`
+                                        }, children: renderObjectStatistics(true) })
+                                    :
+                                        (objectStatistics && objectStatistics.length > 0 && objectStatistics.length > 7) &&
+                                            jsx("div", { style: {
+                                                    display: 'grid',
+                                                    gridTemplateColumns: '1fr 1fr 1fr 1fr',
+                                                }, children: renderObjectStatistics(false) }) }) }));
+}
+
+export { TotalizerCard as default };

package/dist/esm/src/components/EBR/objective-step/index.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { WrapperCard, WrapperTopic, WrapperDescription } from './objectiveStepStyles.js';
+
+function ObjectiveStep({ description, number }) {
+    return (jsxs(WrapperCard, { children: [jsx(WrapperTopic, { children: number }), jsx(WrapperDescription, { children: description })] }));
+}
+
+export { ObjectiveStep as default };

package/dist/esm/src/components/EBR/objective-step/objectiveStepStyles.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const WrapperCard = styled.div `
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    background-color: #FFF;
+    border-radius: 8px;
+    border: 1px solid #BDBDBD;
+    overflow: hidden;
+`;
+const WrapperTopic = styled.div `
+    min-width: 49px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: #FF4D0D;
+    color: #FFF;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    border-right: 1px solid #BDBDBD;
+
+`;
+const WrapperDescription = styled.div `
+    padding: 16px;
+    color: #222222;
+    font-family: 'Work Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+`;
+
+export { WrapperCard, WrapperDescription, WrapperTopic };

package/dist/esm/src/components/EBR/rating/index.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { StarRating, StarRatingRondedTips } from '../../../shared/icons.js';
+import { WrapperStars, Raiting } from './ratingStyles.js';
+import { Box } from '@mui/material';
+
+function Rating({ variant = 'primary', rating, isVisibleNumberRating, qtdStars, marginStars, handleRating, sizeStars, orientation, disabled, removeEvaluation, evaluationType, isUserLoggedChallenge, valueRatingOwner }) {
+    const [hoverRaiting, setHoverRaiting] = useState(-1);
+    const renderStars = () => {
+        const groupStars = [];
+        const handleClick = (value) => {
+            if (!disabled) {
+                handleRating(value);
+            }
+        };
+        const getStatusActive = (id) => {
+            if (id < hoverRaiting)
+                return true;
+            else if (hoverRaiting !== -1)
+                return false;
+            else if (id < rating)
+                return true;
+            return false;
+        };
+        for (let i = 0; i < qtdStars; i++) {
+            groupStars.push(jsx(StarRatingComponent, { variant: variant, isEmpty: rating <= 0, id: i + 1, active: getStatusActive(i), setOnHover: setHoverRaiting, handleClick: handleClick, sizeStars: sizeStars, marginStars: marginStars, disabled: disabled, removeEvaluation: () => removeEvaluation(evaluationType) }, i));
+        }
+        return groupStars;
+    };
+    return (jsx(Box, { children: jsxs(WrapperStars, { orientation: orientation, children: [renderStars(), isUserLoggedChallenge && jsx("span", { style: { marginLeft: '6px' }, children: valueRatingOwner }), isVisibleNumberRating && jsx(Raiting, { children: rating.toFixed(1) })] }) }));
+}
+function StarRatingComponent({ id, variant, isEmpty, active, handleClick, sizeStars, marginStars, setOnHover, disabled, removeEvaluation }) {
+    const [actionArea, setActionArea] = useState(false);
+    const clickTimeout = useRef(null);
+    const getColorStarPrimary = () => (active ? '#FFC200' : '#757575');
+    const getColorStarSecondary = () => {
+        if (isEmpty && !active)
+            return '#BDBDBD';
+        return active ? '#FDD836' : '#BDBDBD';
+    };
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (actionArea)
+                setOnHover(id);
+            else
+                setOnHover(-1);
+        }, 150);
+        return () => clearTimeout(timer);
+    }, [actionArea, id, setOnHover]);
+    const onClickHandler = () => {
+        if (disabled)
+            return;
+        if (clickTimeout.current !== null)
+            return;
+        clickTimeout.current = setTimeout(() => {
+            handleClick(id);
+            clickTimeout.current = null;
+        }, 250);
+    };
+    const onDoubleClickHandler = () => {
+        if (disabled)
+            return;
+        if (clickTimeout.current) {
+            clearTimeout(clickTimeout.current);
+            clickTimeout.current = null;
+        }
+        removeEvaluation();
+        handleClick(0);
+    };
+    return (jsx("div", { onMouseOver: () => !disabled && setActionArea(true), onMouseOut: () => !disabled && setActionArea(false), onClick: onClickHandler, onDoubleClick: onDoubleClickHandler, style: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: marginStars || '3.5px'
+        }, children: variant === 'primary' ? (jsx(StarRating, { width: sizeStars || 30, height: sizeStars || 29, fill: getColorStarPrimary(), fillOpacity: disabled ? '0.6' : '1' })) : (jsx(StarRatingRondedTips, { width: sizeStars || 30, height: sizeStars || 28, stroke: isEmpty && !active ? '#BDBDBD' : 'transparent', strokeWidth: isEmpty && !active ? '1' : '0', fill: getColorStarSecondary(), fillOpacity: disabled ? '0.6' : '1' })) }));
+}
+
+export { Rating as default };