@fixefy/fixefy-ui-components 0.0.8 → 0.0.10

package/dist-cjs/FxTextField/FxTextField.jsx

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxTextField = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
-const material_1 = require("@mui/material");
-const ErrorRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/ErrorRounded"));
-const FxTextField = ({ autoFocus, droppedItem, defaultValue = '', onChange, structure, endAdornment, startAdornment, required, helperText, error = false, errorText, disabled }) => {
-    const [value, setValue] = (0, react_1.useState)(defaultValue);
-    const { input_type, extended: { placeholder, title_path }, title, } = structure;
-    (0, react_1.useEffect)(() => {
-        if (droppedItem) {
-            const { item, type } = droppedItem;
-            setValue(item[title_path]);
-        }
-    }, [droppedItem]);
-    const _onChange = (e) => {
-        onChange && onChange(e);
-        setValue(e.target.value);
-    };
-    return (<material_1.FormControl variant="standard" error={error}>
-      {title && (<material_1.InputLabel shrink htmlFor={title} sx={(theme) => (Object.assign(Object.assign(Object.assign({ color: theme.palette.greyscale.light, '&.Mui-focused': {
-                    color: theme.palette.greyscale.light,
-                } }, (disabled && { opacity: '0.3' })), { '&.Mui-error': { color: theme.palette.greyscale.light } }), (required && {
-                '&:before': {
-                    content: "'*'",
-                    color: theme.palette.redscale.main,
-                    display: 'inline-block',
-                    marginRight: '5px',
-                },
-            })))}>
-          {(0, fixefy_ui_utils_1.titleCase)(title)}
-        </material_1.InputLabel>)}
-      <material_1.InputBase endAdornment={endAdornment} startAdornment={startAdornment} id={title} autoFocus={autoFocus ? autoFocus : false} placeholder={(0, fixefy_ui_utils_1.titleCase)(placeholder)} onChange={_onChange} type={input_type && input_type.value} value={value} error={error}/>
-      {error && errorText ? (<material_1.FormHelperText sx={(theme) => ({
-                '&.Mui-error': {
-                    color: theme.palette.redscale.main,
-                },
-                display: 'grid',
-                gridAutoFlow: 'column',
-                alignItems: 'center',
-                justifyContent: 'left',
-                columnGap: theme.spacing(0.6),
-                fontSize: '11px',
-            })}>
-          <ErrorRounded_1.default sx={(theme) => ({
-                color: theme.palette.redscale.main,
-                width: 10,
-                height: 10,
-            })}/>
-          {(0, fixefy_ui_utils_1.titleCase)(errorText)}
-        </material_1.FormHelperText>) : (<material_1.FormHelperText sx={(theme) => ({
-                color: theme.palette.greyscale.light,
-                fontSize: '11px',
-            })}>
-          {helperText}
-        </material_1.FormHelperText>)}
-    </material_1.FormControl>);
-};
-exports.FxTextField = FxTextField;
-exports.default = exports.FxTextField;

package/dist-cjs/FxTextField/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxTextField = void 0;
-var FxTextField_1 = require("./FxTextField");
-Object.defineProperty(exports, "FxTextField", { enumerable: true, get: function () { return FxTextField_1.FxTextField; } });

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-cjs/FxTodo/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxTodo = void 0;
-var FxTodo_1 = require("./FxTodo");
-Object.defineProperty(exports, "FxTodo", { enumerable: true, get: function () { return FxTodo_1.FxTodo; } });

package/dist-cjs/FxTodo/styles/todo.styles.jsx

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TodoCardFooterDueDate = exports.TodoCardFooter = exports.TodoCardContentButton = exports.TodoCardContent = exports.TodoCardTag = exports.TodoCardPriority = exports.TodoCardHeader = exports.TodoCard = void 0;
-const styles_1 = require("@mui/material/styles");
-const FxButton_1 = require("../../FxButton");
-exports.TodoCard = (0, styles_1.styled)('div')(({ theme }) => ({
-    background: theme.palette.common.white,
-    borderRadius: 8,
-    padding: 16,
-    marginBottom: 4,
-}));
-exports.TodoCardHeader = (0, styles_1.styled)('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-}));
-exports.TodoCardPriority = (0, styles_1.styled)('div')(({ theme, priority }) => (Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center' }, theme.typography.table), { color: theme.palette.priority[priority], ['& img']: {
-        marginRight: 4,
-    } })));
-exports.TodoCardTag = (0, styles_1.styled)('div')(({ theme }) => (Object.assign(Object.assign({}, theme.typography.table), { color: theme.palette.common.white, width: 42, height: 18, background: '#6FCF97', borderRadius: 50, display: 'flex', alignItems: 'center', justifyContent: 'center' })));
-exports.TodoCardContent = (0, styles_1.styled)('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    flexDirection: 'column',
-    marginBottom: 16,
-    ['& p']: {
-        fontStyle: 'normal',
-        fontSize: 14,
-        letterSpacing: '0.15px',
-        color: theme.palette.typography.title,
-        fontWeight: 700,
-        lineHeight: '16px',
-        margin: 0,
-    },
-    ['& span']: {
-        fontStyle: 'normal',
-        fontSize: 14,
-        letterSpacing: '0.15px',
-        color: theme.palette.typography.title,
-        fontWeight: 400,
-        lineHeight: '20px',
-        marginBottom: 16,
-    },
-}));
-exports.TodoCardContentButton = (0, styles_1.styled)(FxButton_1.FxButton)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.button), { color: '#568793', fontSize: 12, maxHeight: 32, minHeight: 32, paddingLeft: 12, paddingRight: 12 })));
-exports.TodoCardFooter = (0, styles_1.styled)('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    flexDirection: 'row',
-}));
-exports.TodoCardFooterDueDate = (0, styles_1.styled)('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'flex-start',
-    flexDirection: 'column',
-    ['& p']: {
-        fontWeight: 'normal',
-        fontStyle: 'normal',
-        fontSize: 11,
-        lineHeight: '16px',
-        letterSpacing: '0.1px',
-        color: theme.palette.typography.title,
-        margin: 0,
-    },
-    ['& span']: {
-        fontWeight: 'normal',
-        fontStyle: 'normal',
-        fontSize: 14,
-        lineHeight: '24px',
-        letterSpacing: '0.15px',
-        color: theme.palette.statistics.label,
-    },
-}));

package/dist-cjs/FxWizard/FxWizard.jsx

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FxWizard = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const material_1 = require("@mui/material");
-const web_1 = require("@react-spring/web");
-const wizard_styles_1 = require("./styles/wizard.styles");
-const Animations = {
-    rightToLeft: {
-        from: {
-            opacity: 0,
-            position: 'absolute',
-            transform: 'translate3d(20%,0,0)',
-            width: '100%',
-        },
-        enter: {
-            opacity: 1,
-            transform: 'translate3d(0%,0,0)',
-        },
-        leave: {
-            opacity: 0,
-            transform: 'translate3d(-10%,0,0)',
-        },
-    },
-    leftToRight: {
-        from: { opacity: 0, position: 'absolute', width: '100%' },
-        enter: {
-            opacity: 1,
-            transform: 'translate3d(0%,0,0)',
-        },
-        leave: {
-            opacity: 0,
-            transform: 'translate3d(20%,0,0)',
-        },
-    },
-};
-function FxWizard(_a) {
-    var { open, content = [], currentPage = 0, reverse = false, onCancel, title, actions, icon, componentStyles, divider = true } = _a, rest = tslib_1.__rest(_a, ["open", "content", "currentPage", "reverse", "onCancel", "title", "actions", "icon", "componentStyles", "divider"]);
-    const transitions = (0, web_1.useTransition)(content[currentPage], Object.assign(Object.assign({}, Animations[reverse ? 'leftToRight' : 'rightToLeft']), { keys: null }));
-    return (<wizard_styles_1.StyledModal {...rest} title={title} actions={actions} icon={icon} isOpen={Boolean(open)} isIconTitleInline onClose={(e) => onCancel(e, '')}>
-      {divider && <material_1.Divider sx={{ mb: '32px', mt: '16px' }}/>}
-      <wizard_styles_1.StyledContent style={Object.assign({}, componentStyles)}>
-        {transitions((style, item) => (<web_1.animated.div style={style}>{item}</web_1.animated.div>))}
-      </wizard_styles_1.StyledContent>
-      {divider && <material_1.Divider sx={{ mb: '8px', mt: '32px' }}/>}
-    </wizard_styles_1.StyledModal>);
-}
-exports.FxWizard = FxWizard;

package/dist-cjs/FxWizard/WizardContext.jsx

@@ -1,86 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WizardContextProvider = exports.WizardContext = void 0;
-const tslib_1 = require("tslib");
-const FxWizard_1 = require("./FxWizard");
-const react_1 = tslib_1.__importStar(require("react"));
-exports.WizardContext = (0, react_1.createContext)({});
-const WizardContextProvider = ({ children }) => {
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [content, setContent] = (0, react_1.useState)([]);
-    const [reverse, setReverse] = (0, react_1.useState)(false);
-    const [options, setOptions] = (0, react_1.useState)({});
-    const [modalProps, _setModalProps] = (0, react_1.useState)({
-        shouldCloseOnBackdropClick: true,
-        shouldCloseOnEscapeKeyDown: true,
-    });
-    const [componentStyles, setComponentStyles] = (0, react_1.useState)({
-        width: '100%',
-        height: 500,
-        contain: 'content',
-        overflow: 'scroll',
-    });
-    const onCancel = (event, reason) => {
-        switch (reason) {
-            case 'escapeKeyDown': {
-                if (modalProps.shouldCloseOnEscapeKeyDown) {
-                    return setOpen(false);
-                }
-                else {
-                    return;
-                }
-            }
-            case 'backdropClick': {
-                if (modalProps.shouldCloseOnBackdropClick) {
-                    return setOpen(false);
-                }
-                else {
-                    return;
-                }
-            }
-            default: {
-            }
-        }
-    };
-    const onOpen = () => {
-        setOpen(true);
-    };
-    const nextPage = () => {
-        console.log('nextPage');
-    };
-    const prevPage = () => {
-        console.log('prevPage');
-    };
-    const setModalProps = (newState) => {
-        _setModalProps((prevState) => (Object.assign(Object.assign({}, prevState), newState)));
-    };
-    const setPage = (page, option) => {
-        if (option) {
-            setOptions(Object.assign(Object.assign({}, options), option));
-        }
-        setCurrentPage((prevCurrentPage) => {
-            setReverse(page < prevCurrentPage);
-            return page;
-        });
-    };
-    const _state = {
-        currentPage,
-        nextPage,
-        prevPage,
-        onOpen,
-        open,
-        setOpen,
-        setContent,
-        setPage,
-        options,
-        setModalProps,
-        setComponentStyles,
-        setOptions,
-    };
-    return (<exports.WizardContext.Provider value={_state}>
-      {children}
-      <FxWizard_1.FxWizard {...modalProps} componentStyles={componentStyles} currentPage={currentPage} reverse={reverse} open={open} onCancel={onCancel} content={content}/>
-    </exports.WizardContext.Provider>);
-};
-exports.WizardContextProvider = WizardContextProvider;

package/dist-cjs/FxWizard/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WizardContextProvider = exports.WizardContext = exports.FxWizard = void 0;
-var FxWizard_1 = require("./FxWizard");
-Object.defineProperty(exports, "FxWizard", { enumerable: true, get: function () { return FxWizard_1.FxWizard; } });
-var WizardContext_1 = require("./WizardContext");
-Object.defineProperty(exports, "WizardContext", { enumerable: true, get: function () { return WizardContext_1.WizardContext; } });
-Object.defineProperty(exports, "WizardContextProvider", { enumerable: true, get: function () { return WizardContext_1.WizardContextProvider; } });

package/dist-cjs/FxWizard/styles/wizard.styles.jsx

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModal = exports.StyledContent = void 0;
-const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const FxModal_1 = require("../../FxModal");
-exports.StyledContent = (0, styles_1.styled)(material_1.Box) ``;
-exports.StyledModal = (0, styles_1.styled)(FxModal_1.FxModal)(({ theme }) => ({
-    '& #customized-dialog-title': Object.assign(Object.assign({}, theme.typography.h5), { color: theme.palette.typography.title, padding: 0 }),
-    '& .MuiDialog-paper': {
-        maxWidth: '74% !important',
-        position: 'relative',
-    },
-    '& .MuiDialogContent-root': {
-        position: 'relative',
-    },
-}));

package/dist-cjs/index.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WizardContextProvider = exports.WizardContext = exports.FxWizard = exports.FxTodo = exports.FxTextField = exports.FxTag = exports.FxStatusBar = exports.FxStatisticsBar = exports.FxSlider = exports.FxShowMore = exports.FxScore = exports.FxProgressCounter = exports.FxProgressCircle = exports.FxNumberField = exports.FxNotes = exports.FxModal = exports.FxIcon = exports.FxChip = exports.FxButton = exports.FxAvatar = exports.FxAsyncDropdown = exports.FxAggregationsBar = exports.FxActionsTray = void 0;
-var FxActionsTray_1 = require("./FxActionsTray");
-Object.defineProperty(exports, "FxActionsTray", { enumerable: true, get: function () { return FxActionsTray_1.FxActionsTray; } });
-var FxAggregationsBar_1 = require("./FxAggregationsBar");
-Object.defineProperty(exports, "FxAggregationsBar", { enumerable: true, get: function () { return FxAggregationsBar_1.FxAggregationsBar; } });
-var FxAsyncDropdown_1 = require("./FxAsyncDropdown");
-Object.defineProperty(exports, "FxAsyncDropdown", { enumerable: true, get: function () { return FxAsyncDropdown_1.FxAsyncDropdown; } });
-var FxAvatar_1 = require("./FxAvatar");
-Object.defineProperty(exports, "FxAvatar", { enumerable: true, get: function () { return FxAvatar_1.FxAvatar; } });
-var FxButton_1 = require("./FxButton");
-Object.defineProperty(exports, "FxButton", { enumerable: true, get: function () { return FxButton_1.FxButton; } });
-var FxChip_1 = require("./FxChip");
-Object.defineProperty(exports, "FxChip", { enumerable: true, get: function () { return FxChip_1.FxChip; } });
-var FxIcon_1 = require("./FxIcon");
-Object.defineProperty(exports, "FxIcon", { enumerable: true, get: function () { return FxIcon_1.FxIcon; } });
-var FxModal_1 = require("./FxModal");
-Object.defineProperty(exports, "FxModal", { enumerable: true, get: function () { return FxModal_1.FxModal; } });
-var FxNotes_1 = require("./FxNotes");
-Object.defineProperty(exports, "FxNotes", { enumerable: true, get: function () { return FxNotes_1.FxNotes; } });
-var FxNumberField_1 = require("./FxNumberField");
-Object.defineProperty(exports, "FxNumberField", { enumerable: true, get: function () { return FxNumberField_1.FxNumberField; } });
-var FxProgressCircle_1 = require("./FxProgressCircle");
-Object.defineProperty(exports, "FxProgressCircle", { enumerable: true, get: function () { return FxProgressCircle_1.FxProgressCircle; } });
-var FxProgressCounter_1 = require("./FxProgressCounter");
-Object.defineProperty(exports, "FxProgressCounter", { enumerable: true, get: function () { return FxProgressCounter_1.FxProgressCounter; } });
-var FxScore_1 = require("./FxScore");
-Object.defineProperty(exports, "FxScore", { enumerable: true, get: function () { return FxScore_1.FxScore; } });
-var FxShowMore_1 = require("./FxShowMore");
-Object.defineProperty(exports, "FxShowMore", { enumerable: true, get: function () { return FxShowMore_1.FxShowMore; } });
-var FxSlider_1 = require("./FxSlider");
-Object.defineProperty(exports, "FxSlider", { enumerable: true, get: function () { return FxSlider_1.FxSlider; } });
-var FxStatisticsBar_1 = require("./FxStatisticsBar");
-Object.defineProperty(exports, "FxStatisticsBar", { enumerable: true, get: function () { return FxStatisticsBar_1.FxStatisticsBar; } });
-var FxStatusBar_1 = require("./FxStatusBar");
-Object.defineProperty(exports, "FxStatusBar", { enumerable: true, get: function () { return FxStatusBar_1.FxStatusBar; } });
-var FxTag_1 = require("./FxTag");
-Object.defineProperty(exports, "FxTag", { enumerable: true, get: function () { return FxTag_1.FxTag; } });
-var FxTextField_1 = require("./FxTextField");
-Object.defineProperty(exports, "FxTextField", { enumerable: true, get: function () { return FxTextField_1.FxTextField; } });
-var FxTodo_1 = require("./FxTodo");
-Object.defineProperty(exports, "FxTodo", { enumerable: true, get: function () { return FxTodo_1.FxTodo; } });
-var FxWizard_1 = require("./FxWizard");
-Object.defineProperty(exports, "FxWizard", { enumerable: true, get: function () { return FxWizard_1.FxWizard; } });
-Object.defineProperty(exports, "WizardContext", { enumerable: true, get: function () { return FxWizard_1.WizardContext; } });
-Object.defineProperty(exports, "WizardContextProvider", { enumerable: true, get: function () { return FxWizard_1.WizardContextProvider; } });

package/dist-cjs/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}

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/FxActionsTray/index.js

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

package/dist-es/FxActionsTray/styles/actions_tray.styles.jsx

@@ -1,76 +0,0 @@
-import { FxButton } from '../../FxButton';
-import { Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-const filterWhite = 'invert(99%) sepia(74%) saturate(0%) hue-rotate(253deg) brightness(108%) contrast(100%)';
-const filterPrimary = 'invert(46%) sepia(48%) saturate(297%) hue-rotate(145deg) brightness(97%) contrast(90%)';
-export const Container = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    background: theme.palette.common.white,
-    border: '1px solid #C6DDE2',
-    boxShadow: '0px 0px 10px rgba(86, 135, 147, 0.2)',
-    borderRadius: 8,
-    padding: '16px 24px',
-    height: 38,
-    width: 'fit-content',
-    margin: 4,
-}));
-export const ChargesCount = styled(Typography)(({ theme }) => ({
-    ...theme.typography.table,
-    color: theme.palette.typography.title,
-    fontWeight: 700,
-    marginRight: 4,
-}));
-export const ChargesTitle = styled(Typography)(({ theme }) => ({
-    ...theme.typography.table,
-    color: theme.palette.typography.title,
-}));
-export const Close = styled(Typography)(({ theme }) => ({
-    ...theme.typography.body1,
-    color: theme.palette.primary['500'],
-    textTransform: 'uppercase',
-    fontWeight: 600,
-    letterSpacing: '0.5px',
-    cursor: 'pointer',
-}));
-export const TitleWrapper = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-}));
-export const Divider = styled('div')(({ theme }) => ({
-    width: 1,
-    height: '100%',
-    background: theme.palette.greyscale.contrastText,
-    marginRight: 24,
-    marginLeft: 24,
-}));
-export const ActionBtn = styled(FxButton)(({ theme, type }) => ({
-    height: 40,
-    maxHeight: 40,
-    borderRadius: 100,
-    padding: '8px 16px',
-    color: type ? theme.palette.common.white : theme.palette.primary['500'],
-    borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
-    background: type ? theme.palette.score[type] : theme.palette.common.white,
-    marginRight: 8,
-    ['& img']: {
-        filter: type ? 'none' : filterPrimary,
-    },
-    ['&:hover']: {
-        background: type ? theme.palette.score[type] : theme.palette.common.white,
-        color: type ? theme.palette.common.white : theme.palette.primary['500'],
-        borderColor: type ? theme.palette.score[type] : theme.palette.primary['500'],
-    },
-}));
-export const ActionTitle = styled('span')(({ theme }) => ({
-    ...theme.typography.body1,
-    color: 'inherit',
-    textTransform: 'uppercase',
-    fontWeight: 600,
-    letterSpacing: '0.5px',
-    cursor: 'pointer',
-    marginLeft: 4,
-    marginTop: 2,
-}));