@fixefy/fixefy-ui-components 0.0.9 → 0.0.13

package/dist-cjs/FxProgressCounter/ProgressCounter.jsx

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxProgressCounter = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const material_1 = require("@mui/material");
-const fxutils_images_1 = require("@fixefy/fxutils.images");
-const progress_counter_styles_1 = require("./styles/progress_counter.styles");
-const image_1 = tslib_1.__importDefault(require("next/image"));
-function FxProgressCounter(_a) {
-    var _b, _c;
-    var { values, structure, filter } = _a, rest = tslib_1.__rest(_a, ["values", "structure", "filter"]);
-    const initialValues = {
-        count: (_b = values === null || values === void 0 ? void 0 : values.count) !== null && _b !== void 0 ? _b : 0,
-        current: (_c = values === null || values === void 0 ? void 0 : values.current) !== null && _c !== void 0 ? _c : 0,
-    };
-    const normalizeNumber = (number) => {
-        return (number / initialValues.count) * 100;
-    };
-    return (<progress_counter_styles_1.Container>
-      
-      <material_1.Box position={'relative'} textAlign={'center'} justifyContent={'center'} mt={1.2}>
-        <image_1.default alt={'approve'} width={16} height={16} loader={() => (0, fxutils_images_1.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)}/>
-
-        <material_1.Box mt={0.5}>
-          <material_1.Typography fontSize={19} fontWeight={600}>
-            {initialValues.current}/{initialValues.count}
-          </material_1.Typography>
-        </material_1.Box>
-
-        <material_1.Typography fontSize={11} sx={{ opacity: 0.6 }}>
-          Charges
-        </material_1.Typography>
-      </material_1.Box>
-
-      <progress_counter_styles_1.ProgressContainer>
-        <progress_counter_styles_1.MainBar variant="determinate" value={normalizeNumber(initialValues.current)} color={'inherit'} {...rest}/>
-        <progress_counter_styles_1.BackgroundBar variant="determinate" value={initialValues.count > 100 ? 100 : initialValues.count} color={'inherit'} {...rest}/>
-      </progress_counter_styles_1.ProgressContainer>
-    </progress_counter_styles_1.Container>);
-}
-exports.FxProgressCounter = FxProgressCounter;

package/dist-cjs/FxShowMore/FxShowMore.jsx

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxShowMore = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const material_1 = require("@mui/material");
-const show_more_styles_1 = require("./styles/show_more.styles");
-const KeyboardArrowDown_1 = tslib_1.__importDefault(require("@mui/icons-material/KeyboardArrowDown"));
-function FxShowMore({ items, label, children, title }) {
-    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const open = Boolean(anchorEl);
-    const id = open ? 'simple-popover' : undefined;
-    return (<show_more_styles_1.ShowMoreWrapper>
-      {children}
-
-      <show_more_styles_1.ShowMoreBtn onClick={handleClick}>
-        <show_more_styles_1.ShowMoreIcon isOpen={open}>
-          <KeyboardArrowDown_1.default />
-        </show_more_styles_1.ShowMoreIcon>
-        {title ? title : 'SHOW MORE'}
-      </show_more_styles_1.ShowMoreBtn>
-
-      <show_more_styles_1.StyledPopover id={id} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'center',
-        }} transformOrigin={{
-            vertical: 'top',
-            horizontal: 'center',
-        }}>
-        <show_more_styles_1.StyledLabel>
-          {label} ({items.length})
-        </show_more_styles_1.StyledLabel>
-        <show_more_styles_1.StyledDivider />
-        {items === null || items === void 0 ? void 0 : items.map((item, index) => (<div key={index}>
-            <material_1.Typography variant="body1">{item}</material_1.Typography>
-            {index + 1 !== items.length && <show_more_styles_1.StyledDivider />}
-          </div>))}
-      </show_more_styles_1.StyledPopover>
-    </show_more_styles_1.ShowMoreWrapper>);
-}
-exports.FxShowMore = FxShowMore;

package/dist-cjs/FxTag/FxTag.jsx

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxTag = void 0;
-const material_1 = require("@mui/material");
-const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils/");
-const tag_styles_1 = require("./styles/tag.styles");
-const FxTag = ({ name, count = 0 }) => (<material_1.Box display="flex" alignItems="center" justifyContent="center" sx={{ maxWidth: 'fit-content', mb: 1 }}>
-    <tag_styles_1.StyledTag name={name}>
-      <tag_styles_1.StyledLabel>{(0, fixefy_ui_utils_1.titleCase)(name)}</tag_styles_1.StyledLabel>
-    </tag_styles_1.StyledTag>
-    <tag_styles_1.StyledCount name={name}>{count}</tag_styles_1.StyledCount>
-  </material_1.Box>);
-exports.FxTag = FxTag;

package/dist-cjs/FxTodo/FxTodo.jsx

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxTodo = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const image_1 = tslib_1.__importDefault(require("next/image"));
-const FxAvatar_1 = require("../FxAvatar");
-const material_1 = require("@mui/material");
-const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
-const todo_styles_1 = require("./styles/todo.styles");
-function FxTodo({ todo }) {
-    return (<todo_styles_1.TodoCard>
-      <todo_styles_1.TodoCardHeader>
-        <todo_styles_1.TodoCardPriority priority={todo.priority}>
-          <image_1.default alt={todo.title} width={16} height={16} loader={() => (0, fixefy_ui_utils_1.imageLoader)({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'invoices/severity_low.svg',
-        })} src={`invoices/severity_${todo.priority}.svg`} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-
-          {(0, fixefy_ui_utils_1.titleCase)(todo.priority)}
-        </todo_styles_1.TodoCardPriority>
-        {todo.isNew && <todo_styles_1.TodoCardTag>New</todo_styles_1.TodoCardTag>}
-      </todo_styles_1.TodoCardHeader>
-      <todo_styles_1.TodoCardContent>
-        <p>{(0, fixefy_ui_utils_1.titleCase)(todo.title)}</p>
-        <span>{(0, fixefy_ui_utils_1.titleCase)(todo.description)}</span>
-        {todo.actionTitle && (<todo_styles_1.TodoCardContentButton size="small" onClick={todo.action ? todo.action : () => { }}>
-            {todo.actionTitle}
-          </todo_styles_1.TodoCardContentButton>)}
-      </todo_styles_1.TodoCardContent>
-      <material_1.Divider sx={{ mb: '16px' }}/>
-      <todo_styles_1.TodoCardFooter>
-        <todo_styles_1.TodoCardFooterDueDate>
-          <span>Due Date</span>
-          <p>
-            {(0, fixefy_ui_utils_1.normalizeTimestamp)(todo.created_date, {
-            dateOnly: true,
-            format: 'dd.mm.yyyy',
-        })}
-          </p>
-        </todo_styles_1.TodoCardFooterDueDate>
-        <FxAvatar_1.FxAvatar max={4} isEditable={todo.isUserEditable} users={todo.users}/>
-      </todo_styles_1.TodoCardFooter>
-    </todo_styles_1.TodoCard>);
-}
-exports.FxTodo = FxTodo;

package/dist-es/FxActionsTray/FxActionsTray.jsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-import { Slide } from '@mui/material';
-import { imageLoader } from '@fixefy/fixefy-ui-utils';
-import { ActionBtn, ActionTitle, ChargesCount, ChargesTitle, Close, Container, Divider, TitleWrapper } from './styles/actions_tray.styles';
-export function FxActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
-    const renderActions = () => {
-        switch (type) {
-            case 'approved':
-                return <ApprovedActions onChallenge={onChallenge}/>;
-            case 'challenge':
-                return <ChallengeActions onChallenge={onChallenge} onApprove={onApprove}/>;
-            case 'pending':
-                return <PendingActions onApprove={onApprove} onChallenge={onChallenge}/>;
-            case 'no_pricing':
-                return <NoPricingActions onApprove={onApprove} onChallenge={onChallenge}/>;
-            default:
-                return <ApprovedActions onChallenge={onChallenge}/>;
-        }
-    };
-    return (<div>
-      <Slide direction={direction} in={show} mountOnEnter unmountOnExit timeout={400} container={container}>
-        <Container>
-          <TitleWrapper>
-            <ChargesCount>{chargesCount}</ChargesCount>
-            <ChargesTitle>charges selected</ChargesTitle>
-          </TitleWrapper>
-          <Divider />
-          <div>
-            {renderActions()}
-            
-          </div>
-          <Divider />
-          <div onClick={onClose}>
-            <Close>close</Close>
-          </div>
-        </Container>
-      </Slide>
-    </div>);
-}
-const ChallengeActions = ({ onChallenge, onApprove }) => {
-    return (<>
-      <ActionBtn onClick={onChallenge} type="low">
-        <Image alt="challenge" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/challenge.svg',
-        })} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>challenge</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image alt="approve" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/approve.svg',
-        })} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>approve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image alt="ignore and approve" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/ignore_and_approve.svg',
-        })} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>ignore & approve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image alt="change exception" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/change_exception.svg',
-        })} src={'actions/change_exception.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>Change exeption</ActionTitle>
-      </ActionBtn>
-    </>);
-};
-const PendingActions = ({ onApprove, onChallenge }) => {
-    return (<>
-      <ActionBtn onClick={onApprove} type="excellent">
-        <Image alt="approve" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/approve.svg',
-        })} src={'actions/approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>approve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onChallenge}>
-        <Image alt="challenge" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/challenge.svg',
-        })} src={'actions/challenge.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>challenge</ActionTitle>
-      </ActionBtn>
-
-      <ActionBtn onClick={onChallenge}>
-        <Image alt="dive in" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/dive_in.svg',
-        })} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>dive in</ActionTitle>
-      </ActionBtn>
-    </>);
-};
-const NoPricingActions = ({ onApprove, onChallenge }) => {
-    return (<>
-      <ActionBtn onClick={onChallenge}>
-        <Image alt="dive in" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/dive_in.svg',
-        })} src={'actions/dive_in.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>dive in</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image alt="solve" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/solve.svg',
-        })} src={'actions/solve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>solve</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onApprove}>
-        <Image alt="ignore and approve" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/ignore_and_approve.svg',
-        })} src={'actions/ignore_and_approve.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>ignore & approve</ActionTitle>
-      </ActionBtn>
-    </>);
-};
-const ApprovedActions = ({ onChallenge }) => {
-    return (<>
-      <ActionBtn onClick={onChallenge}>
-        <Image alt="dive in" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actionsCards/check_exceptions.svg',
-        })} src={'actionsCards/check_exceptions.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>dive in</ActionTitle>
-      </ActionBtn>
-      <ActionBtn onClick={onChallenge}>
-        <Image alt="challenge" loader={() => imageLoader({
-            root: 'https://cdn-dev.fixefy.me/',
-            src: 'actions/undo.svg',
-        })} src={'actions/undo.svg'} width={20} height={20} onLoad={() => console.log('loaded')} onError={(e) => console.log('error:', e)}/>
-        <ActionTitle>undo</ActionTitle>
-      </ActionBtn>
-    </>);
-};

package/dist-es/FxAggregationsBar/helpers/structureReader.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Box, Stack, Divider } from '@mui/material';
-import { FxScore } from '../../FxScore';
-import { FxStatisticsBar } from '../../FxStatisticsBar';
-import { FxProgressCounter } from '../../FxProgressCounter';
-export const structureReader = (structure, filter, collapsed, initialValues) => {
-    const { extended, type } = structure;
-    switch (type) {
-        case 'aggregations_primary_container':
-            return structure.children.map((child, index) => child.input_type?.value === 'percentage' ? (<FxScore structure={child} key={index} filter={filter} value={initialValues?.score}/>) : child.input_type?.value === 'progress' ? (<FxProgressCounter structure={child} filter={filter} key={index} values={initialValues}/>) : (<Box sx={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    width: 'fit-content',
-                    padding: 2,
-                    borderRadius: 2,
-                    backgroundColor: extended?.variables?.bg || '#FFFFFF',
-                }}>
-            <FxStatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>
-          </Box>));
-        case 'aggregations_secondary_container':
-            return (<Stack direction="row" divider={<Divider orientation="vertical" flexItem/>} spacing={2} sx={{
-                    backgroundColor: extended?.variables?.bg || '#FFFFFF',
-                    borderRadius: '8px',
-                    padding: '24px 16px',
-                }}>
-          {structure.children.map((child, index) => {
-                    return <FxStatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>;
-                })}
-        </Stack>);
-    }
-};

package/dist-es/FxAvatar/FxAvatar.jsx

@@ -1,32 +0,0 @@
-import React, { useState } from 'react';
-import { titleCase } from '@fixefy/fixefy-ui-utils';
-import { stringToColor } from './helpers/stringToColor';
-import { AvatarWrapper, StyledAvatar, StyledMoreAvatar, AvatarGroup, EditIcon, FxTooltip } from './styles/avatar.styles';
-export function FxAvatar({ users, max = 5, isEditable = false, onEdit }) {
-    const [backgroundcolors, setBackgroundColors] = useState({});
-    const avatars = users.length > max ? users.slice(0, max - 1) : users;
-    const isMoreThanMax = users.length > max;
-    return (<AvatarWrapper>
-      <AvatarGroup>
-        {avatars.map((user, index) => {
-            const userName = user.first_name + ' ' + user.last_name;
-            return (<FxTooltip key={index} title={titleCase(userName)}>
-              <StyledAvatar sx={{
-                    backgroundColor: backgroundcolors[userName]
-                        ? backgroundcolors[userName]
-                        : stringToColor(userName, (color) => {
-                            setBackgroundColors({
-                                ...backgroundcolors,
-                                [userName]: color,
-                            });
-                        }),
-                }} src={user.image_url} alt={userName}>
-                {titleCase(userName.slice(0, 1))}
-              </StyledAvatar>
-            </FxTooltip>);
-        })}
-        {isMoreThanMax && <StyledMoreAvatar>{`+${users.length - max + 1}`}</StyledMoreAvatar>}
-      </AvatarGroup>
-      {isEditable && <EditIcon onClick={onEdit && onEdit}/>}
-    </AvatarWrapper>);
-}

package/dist-es/FxIcon/content/dynamic_icon.jsx

@@ -1,2 +0,0 @@
-import React from 'react';
-export const DynamicIcon = ({ icon: IconComponent, sx }) => (IconComponent ? <IconComponent sx={sx}/> : null);

package/dist-es/FxIcon/content/lazy_icon.jsx

@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-import { Avatar, Typography } from '@mui/material';
-import { imageLoader, toInitials } from '@fixefy/fixefy-ui-utils';
-import Image from 'next/image';
-const iconsModule = [];
-export const LazyIcon = ({ icon, root, sx, width, height }) => {
-    const [isError, setError] = useState(false);
-    const handleError = (isError) => setError(isError);
-    if (isError) {
-        return (<Avatar>
-        <Typography fontSize={29} fontWeight={600}>
-          {toInitials(icon)}
-        </Typography>
-      </Avatar>);
-    }
-    return <Image alt={icon} width={width} height={height} loader={(obj) => imageLoader({ ...obj, root })} src={icon} onLoad={() => handleError(false)} onError={() => handleError(true)}/>;
-};

package/dist-es/FxModal/FxModal.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Box, DialogContent } from '@mui/material';
-import { FxDialog, DialogActionsStyled, StyledDialogTitle, StyledInlineDialogTitle } from './styles/modal.style';
-const FxDialogTitle = (props) => {
-    const { children, ...other } = props;
-    return <StyledDialogTitle {...other}>{children}</StyledDialogTitle>;
-};
-const FxInlineDialogTitle = (props) => {
-    const { children, ...other } = props;
-    return <StyledInlineDialogTitle {...other}>{children}</StyledInlineDialogTitle>;
-};
-const IconTitle = ({ icon, title, inline }) => {
-    const renderObject = inline ? (<Box sx={{ display: 'flex', alignItems: 'center' }}>
-      {icon}
-      <FxInlineDialogTitle id="customized-dialog-title">{title}</FxInlineDialogTitle>
-    </Box>) : (<>
-      {icon && icon}
-      {title && <FxDialogTitle id="customized-dialog-title">{title}</FxDialogTitle>}
-    </>);
-    return renderObject;
-};
-export const FxModal = ({ isOpen = false, isIconTitleInline = false, icon, onClose, children, title, actions, ...rest }) => {
-    return (<div>
-      <FxDialog {...rest} fullWidth onClose={onClose} aria-labelledby="customized-dialog-title" open={isOpen}>
-        <IconTitle icon={icon} title={title} inline={isIconTitleInline}/>
-        <DialogContent>{children}</DialogContent>
-        {actions && <DialogActionsStyled>{actions}</DialogActionsStyled>}
-      </FxDialog>
-    </div>);
-};

package/dist-es/FxNotes/FxNotes.jsx

@@ -1,102 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { StyledAvatar, CommentWrapper, CommentInput, CommentsWrapper, UserComment, CommentUserTitle, CommentDate, CommentDesc, CommentsContainer, UserCommentWrapper, CommentsScrollWrapper } from './styles/notes.styles';
-import { ME } from './operations/queries';
-import { useQuery } from '@apollo/client';
-import { stringToColor } from './helpers/stringToColor';
-import { normalizeTimestamp, titleCase } from '@fixefy/fixefy-ui-utils';
-export const FxNotes = ({ notes, onChange, sendOnEnter = true, onSend }) => {
-    const [comment, setComment] = useState('');
-    const [backgroundcolors, setBackgroundColors] = useState({});
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const inputRef = useRef();
-    const { data, loading } = useQuery(ME);
-    const { me } = data;
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const handleEnterKeyPressed = () => {
-        setComment((prevState) => {
-            if (prevState) {
-                onSend &&
-                    onSend({
-                        created_at: new Date().getTime(),
-                        created_by: me.username,
-                        text: prevState,
-                    });
-            }
-            return '';
-        });
-    };
-    useEffect(() => {
-        onChange && onChange(comment);
-    }, [comment]);
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.addEventListener('keyup', (event) => {
-                if (event.keyCode === 13) {
-                    event.preventDefault();
-                    handleEnterKeyPressed();
-                }
-            });
-        }
-        return inputRef && inputRef.current && inputRef.current.removeEventListener('keyup', handleEnterKeyPressed);
-    }, []);
-    const open = Boolean(anchorEl);
-    const id = open ? 'simple-popover' : undefined;
-    return (<CommentsContainer>
-      
-      <CommentWrapper>
-        <StyledAvatar sx={{
-            backgroundColor: backgroundcolors[me.username]
-                ? backgroundcolors[me.username]
-                : stringToColor(me.username, (color) => {
-                    setBackgroundColors({
-                        ...backgroundcolors,
-                        [me.username]: color,
-                    });
-                }),
-        }} src={me && me.image_url}>
-          {me && titleCase(me.username.slice(0, 1))}
-        </StyledAvatar>
-        <CommentInput type="text" value={comment} ref={inputRef} onChange={(e) => {
-            setComment(e.currentTarget.value);
-        }}/>
-        
-      </CommentWrapper>
-      {notes && notes.length ? (<CommentsWrapper>
-          <CommentsScrollWrapper>
-            {notes
-                .slice()
-                .reverse()
-                .map((comment, index) => {
-                return (<UserCommentWrapper key={index}>
-                    <StyledAvatar sx={{
-                        backgroundColor: backgroundcolors[comment.created_by]
-                            ? backgroundcolors[comment.created_by]
-                            : stringToColor(comment.created_by, (color) => {
-                                setBackgroundColors({
-                                    ...backgroundcolors,
-                                    [comment.created_by]: color,
-                                });
-                            }),
-                    }}>
-                      {titleCase(comment.created_by.slice(0, 1))}
-                    </StyledAvatar>
-                    <UserComment>
-                      <CommentUserTitle>{comment.created_by}</CommentUserTitle>
-                      <CommentDate>
-                        {normalizeTimestamp(comment.created_at, {
-                        dateOnly: true,
-                    })}
-                      </CommentDate>
-                      <CommentDesc>{comment.text}</CommentDesc>
-                    </UserComment>
-                  </UserCommentWrapper>);
-            })}
-          </CommentsScrollWrapper>
-        </CommentsWrapper>) : null}
-    </CommentsContainer>);
-};

package/dist-es/FxNumberField/FxNumberField.jsx

@@ -1,25 +0,0 @@
-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/FxProgressCircle/FxProgressCircle.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Container, Label, Slider, SliderCircle, SliderBar } from './styles/progress_circle.styles';
-export function FxProgressCircle({ 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/FxProgressCounter/ProgressCounter.jsx

@@ -1,38 +0,0 @@
-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/FxShowMore/FxShowMore.jsx

@@ -1,42 +0,0 @@
-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 FxShowMore({ 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>);
-}