@fixefy/fixefy-ui-components 0.0.5 → 0.0.6

package/dist-es/FxNotes/styles/notes.styles.jsx

@@ -0,0 +1,116 @@
+import Popover from '@mui/material/Popover';
+import { styled } from '@mui/material/styles';
+import { Avatar as _Avatar } from '@mui/material';
+import '@fixefy/fxutils.page_context';
+export const CommentsContainer = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: 16,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+}));
+export const CommentsWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%',
+}));
+export const CommentsScrollWrapper = styled('div')(({ theme }) => ({
+    maxHeight: 170,
+    overflow: 'auto',
+    width: '100%',
+}));
+export const UserCommentWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    marginTop: 16,
+    '&:first-of-type': {
+        marginTop: 0,
+    },
+}));
+export const CommentWrapper = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 16,
+}));
+export const CommentInput = styled('input')(({ theme }) => ({
+    background: theme.palette.common.white,
+    border: '1px solid #F0F0F0',
+    borderRadius: '4px',
+    height: 36,
+    padding: '0 16px',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+    width: '100%',
+    '&::focus-visible': {
+        outline: 'unset',
+    },
+}));
+export const StyledAvatar = styled(_Avatar)(({ theme }) => ({
+    width: 32,
+    height: 32,
+    border: `2px solid ${theme.palette.common.white}`,
+    marginRight: '8px',
+    fontFamily: 'Open Sans',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+}));
+export const UserComment = styled('div')(({ theme }) => ({
+    background: theme.palette.greyscale.contrastText,
+    border: '1px solid #F0F0F0',
+    borderRadius: '4px',
+    padding: '8px 16px',
+    minWidth: 300,
+    display: 'flex',
+    alignItems: 'flex-start',
+    flexDirection: 'column',
+    justifyContent: 'center',
+}));
+export const CommentUserTitle = styled('div')(({ theme }) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+}));
+export const CommentDate = styled('div')(({ theme }) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.15px',
+    color: '#898989',
+}));
+export const CommentDesc = styled('div')(({ theme }) => ({
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: '0.15px',
+    color: '#172326',
+}));
+export const StyledPopover = styled(Popover)(({ theme }) => ({
+    position: 'absolute',
+    right: 12,
+    width: 80,
+    height: 16,
+    background: '#F7F7F7',
+    borderRadius: 4,
+    fontFamily: 'Open Sans',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 11,
+    lineHeight: '16px',
+    letterSpacing: '0.1px',
+    color: theme.palette.primary.light,
+}));

package/dist-es/FxNumberField/FxNumberField.jsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import { useStyles } from './styles/number_field.styles';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+export function FxNumberField({ placeholder, defaultValue, label, hint, onChange }) {
+    const _classes = useStyles();
+    const [value, setValue] = useState(defaultValue || 0);
+    useEffect(() => {
+        onChange && onChange(value);
+    }, [value]);
+    return (<div className={_classes.container}>
+      {label && <span className={_classes.label}>{label}</span>}
+      <div className={_classes.inputWrapper}>
+        <input type="number" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)}/>
+        <div className={_classes.inputActions}>
+          <button className={_classes.inputActionsPlus} onClick={() => setValue(value + 1)}>
+            <KeyboardArrowRightIcon />
+          </button>
+          <button className={_classes.inputActionsMinus} onClick={() => setValue(value - 1)}>
+            <KeyboardArrowRightIcon />
+          </button>
+        </div>
+      </div>
+      {hint && <span className={_classes.hint}>{hint}</span>}
+    </div>);
+}

package/dist-es/FxNumberField/index.js

@@ -0,0 +1 @@
+export { FxNumberField as Numberfield } from './FxNumberField';

package/dist-es/FxNumberField/styles/number_field.styles.js

@@ -0,0 +1,84 @@
+import { makeStyles } from '@mui/styles';
+export const useStyles = makeStyles(() => ({
+    container: {},
+    label: {
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: 0.1,
+        color: '#505050',
+    },
+    hint: {
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        display: 'flex',
+        alignItems: 'center',
+        letterSpacing: 0.1,
+        color: '#8A8A8A',
+    },
+    inputWrapper: {
+        background: '#FFFFFF',
+        border: '1px solid #EEEEEE',
+        borderRadius: 5,
+        height: 40,
+        display: 'flex',
+        width: 'fit-content',
+        ['& input']: {
+            border: 'none',
+            paddingLeft: 10,
+            borderRadius: 5,
+            ['&:focus-visible']: {
+                outline: 'none',
+            },
+            ['&::-webkit-inner-spin-button']: {
+                '-webkit-appearance': 'none',
+            },
+            ['&::-webkit-outer-spin-button']: {
+                '-webkit-appearance': 'none',
+            },
+        },
+    },
+    inputActions: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    inputActionsPlus: {
+        cursor: 'pointer',
+        background: '#FFFFFF',
+        height: '50%',
+        padding: 0,
+        width: 36,
+        border: 'none',
+        borderLeft: '1px solid #EEEEEE',
+        borderBottom: '1px solid #EEEEEE',
+        borderRadius: '0 5px 0 0',
+        color: '#568793',
+        ['& svg']: {
+            transform: 'rotate(270deg)',
+            width: 20,
+            height: 20,
+        },
+    },
+    inputActionsMinus: {
+        cursor: 'pointer',
+        background: '#FFFFFF',
+        height: '50%',
+        padding: 0,
+        width: 36,
+        border: 'none',
+        borderLeft: '1px solid #EEEEEE',
+        borderRadius: '0 0 5px 0',
+        color: '#568793',
+        ['& svg']: {
+            transform: 'rotate(90deg)',
+            width: 20,
+            height: 20,
+        },
+    },
+}));

package/dist-es/FxProgressCircle/FxProgressCircle.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Container, Label, Slider, SliderCircle, SliderBar } from './styles/progress_circle.styles';
+export function ProgressCircle({ radius = 70, border = 70, value, hasLabel = true, max = 100, color, type = 'progress' }) {
+    const _value = value ? value / max : 0;
+    const p = 2 * Math.PI * (radius - border / 2);
+    const strokeWidth = border;
+    const strokeDashoffset = p * (1 - _value);
+    const strokeDasharray = p;
+    const label = type === 'progress' ? `${value}/${max}` : `${value.toFixed()}%`;
+    return (<Container>
+      {hasLabel && type === 'progress' && <Label>{label}</Label>}
+      <Slider viewBox={`0 0 ${radius * 2} ${radius * 2}`}>
+        <SliderCircle style={{ strokeWidth }} r={radius - border / 2} cx={radius} cy={radius} color={color}/>
+
+        <SliderBar style={{
+            strokeWidth,
+            strokeDashoffset,
+            strokeDasharray,
+        }} r={radius - border / 2} cx={radius} cy={radius} color={color}/>
+      </Slider>
+      {hasLabel && type === 'percentage' && <Label sx={{ ml: 1 }}>{label}</Label>}
+    </Container>);
+}

package/dist-es/FxProgressCircle/index.js

@@ -0,0 +1 @@
+export { ProgressCircle } from './FxProgressCircle';

package/dist-es/FxProgressCircle/styles/progress_circle.styles.jsx

@@ -0,0 +1,28 @@
+import { styled } from "@mui/material/styles";
+export const Container = styled("div")(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+}));
+export const Label = styled("span")(({ theme }) => ({
+    ...theme.typography.body1,
+    color: theme.palette.typography.title,
+    marginRight: 8,
+}));
+export const Slider = styled("svg")(({ theme }) => ({
+    display: "block",
+    width: 22,
+    height: 22,
+    transform: "rotate(-90deg)",
+}));
+export const SliderCircle = styled("circle")(({ theme, color }) => ({
+    fill: "transparent",
+    stroke: color ?? theme.palette.green2scale.main,
+    opacity: 0.1,
+}));
+export const SliderBar = styled("circle")(({ theme, color }) => ({
+    fill: "transparent",
+    stroke: color ?? theme.palette.green2scale.main,
+    strokeDashoffset: 0,
+    strokeDasharray: 0,
+}));

package/dist-es/FxProgressCounter/ProgressCounter.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { imageLoader } from '@fixefy/fxutils.images';
+import { Container, ProgressContainer, MainBar, BackgroundBar } from './styles/progress_counter.styles';
+import Image from 'next/image';
+export function FxProgressCounter({ values, structure, filter, ...rest }) {
+    const initialValues = {
+        count: values?.count ?? 0,
+        current: values?.current ?? 0,
+    };
+    const normalizeNumber = (number) => {
+        return (number / initialValues.count) * 100;
+    };
+    return (<Container>
+      
+      <Box position={'relative'} textAlign={'center'} justifyContent={'center'} mt={1.2}>
+        <Image alt={'approve'} width={16} height={16} loader={() => imageLoader({
+            root: 'https://cdn-dev.fixefy.me/',
+            src: 'invoices/approve-small-white.svg',
+        })} src={'invoices/approve-small-white.svg'} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
+
+        <Box mt={0.5}>
+          <Typography fontSize={19} fontWeight={600}>
+            {initialValues.current}/{initialValues.count}
+          </Typography>
+        </Box>
+
+        <Typography fontSize={11} sx={{ opacity: 0.6 }}>
+          Charges
+        </Typography>
+      </Box>
+
+      <ProgressContainer>
+        <MainBar variant="determinate" value={normalizeNumber(initialValues.current)} color={'inherit'} {...rest}/>
+        <BackgroundBar variant="determinate" value={initialValues.count > 100 ? 100 : initialValues.count} color={'inherit'} {...rest}/>
+      </ProgressContainer>
+    </Container>);
+}

package/dist-es/FxProgressCounter/index.js

@@ -0,0 +1 @@
+export { FxProgressCounter } from './ProgressCounter';

package/dist-es/FxProgressCounter/styles/progress_counter.styles.js

@@ -0,0 +1,33 @@
+import { styled } from '@mui/material/styles';
+import { Box, LinearProgress } from '@mui/material';
+export const BaseProgress = styled(LinearProgress)(({ theme }) => ({
+    borderRadius: '8px',
+    width: '70%',
+    position: 'absolute',
+    zIndex: 2,
+    height: 3,
+}));
+export const MainBar = styled(BaseProgress)(({ theme }) => ({
+    opacity: 1,
+}));
+export const BackgroundBar = styled(BaseProgress)(({ theme }) => ({
+    opacity: 0.2,
+}));
+export const ProgressContainer = styled(Box)(({ theme }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    width: '100%',
+    margin: '8px 0',
+    position: 'relative',
+    justifyContent: 'center',
+}));
+export const Container = styled(Box)(({ theme }) => ({
+    width: 104,
+    height: 104,
+    minWidth: 104,
+    maxWidth: 104,
+    borderRadius: 8,
+    position: 'relative',
+    color: theme.palette.common.white,
+    backgroundColor: theme.palette.score.excellent,
+}));

package/dist-es/FxShowMore/FxShowMore.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { ShowMoreWrapper, ShowMoreBtn, ShowMoreIcon, StyledPopover, StyledDivider, StyledLabel } from './styles/show_more.styles';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+export function ShowMore({ items, label, children, title }) {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+    const id = open ? 'simple-popover' : undefined;
+    return (<ShowMoreWrapper>
+      {children}
+
+      <ShowMoreBtn onClick={handleClick}>
+        <ShowMoreIcon isOpen={open}>
+          <KeyboardArrowDownIcon />
+        </ShowMoreIcon>
+        {title ? title : 'SHOW MORE'}
+      </ShowMoreBtn>
+
+      <StyledPopover id={id} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'center',
+        }} transformOrigin={{
+            vertical: 'top',
+            horizontal: 'center',
+        }}>
+        <StyledLabel>
+          {label} ({items.length})
+        </StyledLabel>
+        <StyledDivider />
+        {items?.map((item, index) => (<div key={index}>
+            <Typography variant="body1">{item}</Typography>
+            {index + 1 !== items.length && <StyledDivider />}
+          </div>))}
+      </StyledPopover>
+    </ShowMoreWrapper>);
+}

package/dist-es/FxShowMore/index.js

@@ -0,0 +1 @@
+export { ShowMore } from './FxShowMore';

package/dist-es/FxShowMore/styles/show_more.styles.js

@@ -0,0 +1,53 @@
+import { styled } from '@mui/material/styles';
+import { Box, Popover, Divider, Typography, Button } from '@mui/material';
+export const ShowMoreWrapper = styled(Box)(({ theme }) => ({
+    borderRadius: '8px',
+}));
+export const ShowMoreBtn = styled(Button)(({ theme }) => ({
+    ...theme.typography.button,
+    fontWeight: 600,
+    fontSize: 12,
+    textTransform: 'uppercase',
+    color: theme.palette.primary[800],
+    padding: 0,
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+}));
+export const ShowMoreIcon = styled(Box)(({ theme, isOpen }) => ({
+    width: 16,
+    height: 16,
+    color: theme.palette.primary[800],
+    borderRadius: '50%',
+    border: '1px solid',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 8,
+    ['& svg']: {
+        width: 14,
+        height: 14,
+        color: theme.palette.primary[800],
+        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        transition: 'all 0.5s',
+    },
+}));
+export const StyledPopover = styled(Popover)(({ theme }) => ({
+    ['.MuiPaper-root']: {
+        background: theme.palette.common.white,
+        boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.3)',
+        borderRadius: 8,
+        padding: 24,
+        marginTop: 8,
+        minWidth: 226,
+        maxWidth: 328,
+    },
+}));
+export const StyledDivider = styled(Divider)(({ theme }) => ({
+    marginTop: 8,
+    marginBottom: 8,
+}));
+export const StyledLabel = styled(Typography)(({ theme }) => ({
+    ...theme.typography.overLineCaption,
+    color: '#8B9092',
+}));

package/dist-es/FxSlider/FxSlider.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Slider as _Slider } from '@mui/material';
+export function Slider(props) {
+    return <_Slider {...props}/>;
+}

package/dist-es/FxSlider/index.js

@@ -0,0 +1 @@
+export { Slider } from './FxSlider';

package/dist-es/Score/Score.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import { gql } from 'graphql-tag';
+import { useLazyQuery } from '@apollo/client';
+import { useStyles } from './styles/score.styles';
+import { getScoreColor, titleCase } from '@fixefy/fixefy-ui-utils';
+import { Box, CircularProgress, Skeleton, Typography } from '@mui/material';
+export const Score = ({ value, structure, filter, variant = 'box', hasLabel = true, title: propsTitle = 'score', Sizes: propsSizes = {}, ...rest }) => {
+    const Sizes = {
+        box: {
+            boxWidth: 104,
+            progressWidth: 68,
+        },
+        circle: { boxWidth: 40, progressWidth: 36 },
+        ...propsSizes,
+    };
+    const { extended, title } = structure || {};
+    const { gql_operation, object_path: objectPath, title_path: titlePath, filter: structureFilter } = extended || {};
+    const gqlOperation = gql_operation ?? 'query GET_SCORE($where: Json) { score: chargesAvg( where: $where data: { fields: ["score"], fragment: "{ score }" } ) }';
+    let _filter = structureFilter;
+    if (filter) {
+        _filter = {
+            ..._filter,
+            ...filter,
+        };
+    }
+    const [fetchData, { data, error, loading }] = useLazyQuery(gql(gqlOperation));
+    useEffect(() => {
+        if (!value && structure) {
+            fetchData({
+                variables: {
+                    where: { ..._filter },
+                },
+            });
+        }
+    }, []);
+    const ScoreValue = data ? data[objectPath] * 100 : value;
+    const _classes = useStyles({
+        scoreColor: getScoreColor(ScoreValue || 0),
+        variant,
+    });
+    return loading ? (<Box className={_classes.container}>
+      <Skeleton animation="wave" variant="circular" width={68} height={68}/>
+    </Box>) : (<Box className={_classes.container} sx={{
+            width: Sizes[variant].boxWidth,
+            height: Sizes[variant].boxWidth,
+            minWidth: Sizes[variant].boxWidth,
+            maxWidth: Sizes[variant].boxWidth,
+            borderRadius: variant === 'box' ? '8px' : '50%',
+        }}>
+      <CircularProgress size={Sizes[variant].progressWidth} variant="determinate" value={ScoreValue} color="inherit" thickness={2} className={_classes.mainCircle} {...rest}/>
+      <CircularProgress size={Sizes[variant].progressWidth} variant="determinate" value={100} color="inherit" thickness={2} className={_classes.backgroundCircle} {...rest}/>
+      <Box className={_classes.content}>
+        <Typography variant={variant === 'box' ? 'h5' : 'table'} className={_classes.scoreNumber}>{`${Math.round(Number(ScoreValue)) ?? 0}%`}</Typography>
+        {hasLabel && <Typography className={_classes.scoreText}>{titleCase(title ?? propsTitle)}</Typography>}
+      </Box>
+    </Box>);
+};

package/dist-es/Score/index.js

@@ -0,0 +1 @@
+export { Score } from './Score';

package/dist-es/Score/styles/score.styles.js

@@ -0,0 +1,35 @@
+import { makeStyles } from '@mui/styles';
+export const useStyles = makeStyles((theme) => ({
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'relative',
+        color: theme.palette.common.white,
+        backgroundColor: (props) => theme.palette.score[props.scoreColor],
+    },
+    content: {
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+    },
+    scoreNumber: {
+        color: theme.palette.common.white,
+    },
+    scoreText: {
+        ...theme.typography.table,
+        fontWeight: 400,
+        color: theme.palette.common.white,
+        opacity: 0.6,
+    },
+    mainCircle: {
+        position: 'absolute',
+        zIndex: 2,
+    },
+    backgroundCircle: {
+        position: 'absolute',
+        opacity: 0.2,
+    },
+}));

package/dist-es/StatisticsBar/StatisticsBar.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react';
+import { gql } from 'graphql-tag';
+import { useLazyQuery } from '@apollo/client';
+import { Box, Skeleton } from '@mui/material';
+import { titleCase } from '@fixefy/fixefy-ui-utils';
+import { getCurrency } from '@fixefy/fixefy-ui-utils';
+import { useStyles } from './styles/statistics.styles';
+export function StatisticsBar({ value, type = 'currency', label, structure, collapsed, filter }) {
+    const _classes = useStyles();
+    const { extended, input_type, title } = structure || {};
+    const { gql_operation, object_path, filter: structurefilter, variables } = extended || {};
+    const gqlOperation = gql_operation ?? 'query GET_SCORE($where: Json) { score: chargesAvg( where: $where data: { fields: ["score"], fragment: "{ score }" } ) }';
+    let _filter = structurefilter;
+    if (filter) {
+        _filter = {
+            ..._filter,
+            ...filter,
+        };
+    }
+    const [fetchData, { data, error, loading }] = useLazyQuery(gql(gqlOperation));
+    const convertValue = (value) => {
+        let newValue = '';
+        let sign = '';
+        if (value < 1000) {
+            newValue = value;
+        }
+        else if (value >= 1000 && value < 1000000) {
+            newValue = (value / 1000).toFixed(2);
+            sign = 'K';
+        }
+        else {
+            newValue = (value / 1000000).toFixed(2);
+            sign = 'M';
+        }
+        return (new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: getCurrency(null)?.code.toUpperCase() || 'USD',
+        }).format(Number(newValue)) + sign);
+    };
+    const checkIsCollapsed = () => {
+        let collapsedFromStructureIsDefined = false;
+        if (variables && variables.collapsed !== undefined && variables.collapsed !== null) {
+            collapsedFromStructureIsDefined = true;
+        }
+        if (collapsedFromStructureIsDefined) {
+            return variables.collapsed;
+        }
+        else {
+            return collapsed;
+        }
+    };
+    const getValue = (value) => {
+        const statisticsType = input_type?.value || type;
+        switch (statisticsType) {
+            case 'percentage': {
+                return new Intl.NumberFormat('en-US', {
+                    style: 'percent',
+                }).format(Number(value));
+            }
+            case 'currency': {
+                if (checkIsCollapsed()) {
+                    return convertValue(value);
+                }
+                else {
+                    return new Intl.NumberFormat('en-US', {
+                        style: 'currency',
+                        currency: getCurrency(null)?.code.toUpperCase() || 'USD',
+                    }).format(Number(value));
+                }
+            }
+        }
+    };
+    useEffect(() => {
+        if (!value && structure) {
+            fetchData({
+                variables: {
+                    where: { ..._filter },
+                },
+            });
+        }
+    }, []);
+    const statisticsTitle = label ? label : title;
+    const statisticsValue = data && data[object_path] != null ? getValue(data[object_path]) : getValue(value);
+    return loading ? (<Box sx={{ width: 100 }}>
+      <Skeleton animation="wave" width={100} height={30}/>
+      <Skeleton animation="wave" width={100} height={20}/>
+    </Box>) : (<div className={_classes.container}>
+      <span className={variables?.contrast ? _classes.contrastValue : _classes.value}>{statisticsValue}</span>
+      <span className={variables?.contrast ? _classes.contrastLabel : _classes.label}>{titleCase(statisticsTitle)}</span>
+    </div>);
+}

package/dist-es/StatisticsBar/index.js

@@ -0,0 +1 @@
+export { StatisticsBar } from './StatisticsBar';