@fixefy/fixefy-ui-components 0.0.7 → 0.0.9

package/dist-cjs/{ActionsTray/ActionsTray.jsx → FxActionsTray/FxActionsTray.jsx}

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionsTray = void 0;
+exports.FxActionsTray = 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 material_1 = require("@mui/material");
 const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
 const actions_tray_styles_1 = require("./styles/actions_tray.styles");
-function ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
+function FxActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
     const renderActions = () => {
         switch (type) {
             case 'approved':
@@ -42,7 +42,7 @@ function ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, cha
       </material_1.Slide>
     </div>);
 }
-exports.ActionsTray = ActionsTray;
+exports.FxActionsTray = FxActionsTray;
 const ChallengeActions = ({ onChallenge, onApprove }) => {
     return (<>
       <actions_tray_styles_1.ActionBtn onClick={onChallenge} type="low">

package/dist-cjs/FxActionsTray/index.js

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

package/dist-cjs/{AggregationsBar/Aggregations.jsx → FxAggregationsBar/FxAggregations.jsx}

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AggregationsBar = void 0;
+exports.FxAggregationsBar = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Stack_1 = tslib_1.__importDefault(require("@mui/material/Stack"));
 const structureReader_1 = require("./helpers/structureReader");
-const AggregationsBar = (props) => {
+const FxAggregationsBar = (props) => {
     const { structure, minWidth, mb, filter, initialValues } = props;
     const { children, extended } = structure;
     const { variables } = extended;
@@ -24,4 +24,4 @@ const AggregationsBar = (props) => {
         })}
     </Stack_1.default>);
 };
-exports.AggregationsBar = AggregationsBar;
+exports.FxAggregationsBar = FxAggregationsBar;

package/dist-cjs/{AggregationsBar → FxAggregationsBar}/helpers/structureReader.jsx

@@ -4,8 +4,8 @@ exports.structureReader = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
-const Score_1 = require("../../Score");
-const StatisticsBar_1 = require("../../StatisticsBar");
+const FxScore_1 = require("../../FxScore");
+const FxStatisticsBar_1 = require("../../FxStatisticsBar");
 const FxProgressCounter_1 = require("../../FxProgressCounter");
 const structureReader = (structure, filter, collapsed, initialValues) => {
     var _a;
@@ -14,7 +14,7 @@ const structureReader = (structure, filter, collapsed, initialValues) => {
         case 'aggregations_primary_container':
             return structure.children.map((child, index) => {
                 var _a, _b, _c;
-                return ((_a = child.input_type) === null || _a === void 0 ? void 0 : _a.value) === 'percentage' ? (<Score_1.Score structure={child} key={index} filter={filter} value={initialValues === null || initialValues === void 0 ? void 0 : initialValues.score}/>) : ((_b = child.input_type) === null || _b === void 0 ? void 0 : _b.value) === 'progress' ? (<FxProgressCounter_1.FxProgressCounter structure={child} filter={filter} key={index} values={initialValues}/>) : (<material_1.Box sx={{
+                return ((_a = child.input_type) === null || _a === void 0 ? void 0 : _a.value) === 'percentage' ? (<FxScore_1.FxScore structure={child} key={index} filter={filter} value={initialValues === null || initialValues === void 0 ? void 0 : initialValues.score}/>) : ((_b = child.input_type) === null || _b === void 0 ? void 0 : _b.value) === 'progress' ? (<FxProgressCounter_1.FxProgressCounter structure={child} filter={filter} key={index} values={initialValues}/>) : (<material_1.Box sx={{
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',
@@ -23,7 +23,7 @@ const structureReader = (structure, filter, collapsed, initialValues) => {
                         borderRadius: 2,
                         backgroundColor: ((_c = extended === null || extended === void 0 ? void 0 : extended.variables) === null || _c === void 0 ? void 0 : _c.bg) || '#FFFFFF',
                     }}>
-            <StatisticsBar_1.StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>
+            <FxStatisticsBar_1.FxStatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>
           </material_1.Box>);
             });
         case 'aggregations_secondary_container':
@@ -33,7 +33,7 @@ const structureReader = (structure, filter, collapsed, initialValues) => {
                     padding: '24px 16px',
                 }}>
           {structure.children.map((child, index) => {
-                    return <StatisticsBar_1.StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>;
+                    return <FxStatisticsBar_1.FxStatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>;
                 })}
         </material_1.Stack>);
     }

package/dist-cjs/FxAggregationsBar/index.js

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

package/dist-cjs/{AsyncDropdown/AsyncDropdown.jsx → FxAsyncDropdown/FxAsyncDropdown.jsx}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AsyncDropdown = void 0;
+exports.FxAsyncDropdown = void 0;
 const tslib_1 = require("tslib");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
 const icons_material_1 = require("@mui/icons-material");
@@ -12,7 +12,7 @@ const material_1 = require("@mui/material");
 const dropdown_styles_1 = require("./styles/dropdown.styles");
 const icon = <icons_material_1.CheckBoxOutlineBlank fontSize="small"/>;
 const checkedIcon = <icons_material_1.CheckBox fontSize="small"/>;
-exports.AsyncDropdown = react_1.default.forwardRef((props, parentRef) => {
+exports.FxAsyncDropdown = react_1.default.forwardRef((props, parentRef) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const ref = (0, react_1.useRef)(null);
     const theme = (0, material_1.useTheme)();

package/dist-cjs/FxAsyncDropdown/index.js

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

package/dist-cjs/FxIcon/index.js

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

package/dist-cjs/FxNumberField/index.js

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

package/dist-cjs/FxProgressCircle/FxProgressCircle.jsx

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressCircle = void 0;
+exports.FxProgressCircle = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const progress_circle_styles_1 = require("./styles/progress_circle.styles");
-function ProgressCircle({ radius = 70, border = 70, value, hasLabel = true, max = 100, color, type = 'progress' }) {
+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;
@@ -25,4 +25,4 @@ function ProgressCircle({ radius = 70, border = 70, value, hasLabel = true, max
       {hasLabel && type === 'percentage' && <progress_circle_styles_1.Label sx={{ ml: 1 }}>{label}</progress_circle_styles_1.Label>}
     </progress_circle_styles_1.Container>);
 }
-exports.ProgressCircle = ProgressCircle;
+exports.FxProgressCircle = FxProgressCircle;

package/dist-cjs/FxProgressCircle/index.js

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

package/dist-cjs/{Score/Score.jsx → FxScore/FxScore.jsx}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Score = void 0;
+exports.FxScore = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const graphql_tag_1 = require("graphql-tag");
@@ -8,7 +8,7 @@ const client_1 = require("@apollo/client");
 const score_styles_1 = require("./styles/score.styles");
 const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
 const material_1 = require("@mui/material");
-const Score = (_a) => {
+const FxScore = (_a) => {
     var _b;
     var { value, structure, filter, variant = 'box', hasLabel = true, title: propsTitle = 'score', Sizes: propsSizes = {} } = _a, rest = tslib_1.__rest(_a, ["value", "structure", "filter", "variant", "hasLabel", "title", "Sizes"]);
     const Sizes = Object.assign({ box: {
@@ -54,4 +54,4 @@ const Score = (_a) => {
       </material_1.Box>
     </material_1.Box>);
 };
-exports.Score = Score;
+exports.FxScore = FxScore;

package/dist-cjs/FxScore/index.js

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

package/dist-cjs/FxShowMore/FxShowMore.jsx

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShowMore = void 0;
+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 ShowMore({ items, label, children, title }) {
+function FxShowMore({ items, label, children, title }) {
     const [anchorEl, setAnchorEl] = react_1.default.useState(null);
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
@@ -44,4 +44,4 @@ function ShowMore({ items, label, children, title }) {
       </show_more_styles_1.StyledPopover>
     </show_more_styles_1.ShowMoreWrapper>);
 }
-exports.ShowMore = ShowMore;
+exports.FxShowMore = FxShowMore;

package/dist-cjs/FxShowMore/index.js

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

package/dist-cjs/FxSlider/FxSlider.jsx

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = void 0;
+exports.FxSlider = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
-function Slider(props) {
+function FxSlider(props) {
     return <material_1.Slider {...props}/>;
 }
-exports.Slider = Slider;
+exports.FxSlider = FxSlider;

package/dist-cjs/FxSlider/index.js

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

package/dist-cjs/{StatisticsBar/StatisticsBar.jsx → FxStatisticsBar/FxStatisticsBar.jsx}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatisticsBar = void 0;
+exports.FxStatisticsBar = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const graphql_tag_1 = require("graphql-tag");
@@ -9,7 +9,7 @@ const material_1 = require("@mui/material");
 const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
 const fixefy_ui_utils_2 = require("@fixefy/fixefy-ui-utils");
 const statistics_styles_1 = require("./styles/statistics.styles");
-function StatisticsBar({ value, type = 'currency', label, structure, collapsed, filter }) {
+function FxStatisticsBar({ value, type = 'currency', label, structure, collapsed, filter }) {
     const _classes = (0, statistics_styles_1.useStyles)();
     const { extended, input_type, title } = structure || {};
     const { gql_operation, object_path, filter: structurefilter, variables } = extended || {};
@@ -92,4 +92,4 @@ function StatisticsBar({ value, type = 'currency', label, structure, collapsed,
       <span className={(variables === null || variables === void 0 ? void 0 : variables.contrast) ? _classes.contrastLabel : _classes.label}>{(0, fixefy_ui_utils_1.titleCase)(statisticsTitle)}</span>
     </div>);
 }
-exports.StatisticsBar = StatisticsBar;
+exports.FxStatisticsBar = FxStatisticsBar;

package/dist-cjs/FxStatisticsBar/index.js

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

package/dist-cjs/FxStatusBar/FxStatusBar.jsx

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusBar = void 0;
+exports.FxStatusBar = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const material_1 = require("@mui/material");
@@ -8,7 +8,7 @@ const FxChip_1 = require("../FxChip");
 const constants_1 = require("./helpers/constants");
 const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
 const statusBar_styles_1 = require("./styles/statusBar.styles");
-const StatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant = 'filled' }) => {
+const FxStatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, chipsVariant = 'filled' }) => {
     const [selectedStatus, setSelectedStatus] = (0, react_1.useState)([]);
     const [searchValue, setSearchValue] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
@@ -61,4 +61,4 @@ const StatusBar = ({ onChangeStatus, onSearch, defaultStatus, title, options, ch
       </material_1.Stack>
     </statusBar_styles_1.StatusBarCard>);
 };
-exports.StatusBar = StatusBar;
+exports.FxStatusBar = FxStatusBar;

package/dist-cjs/FxStatusBar/index.js

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

package/dist-cjs/FxStyledComponents/index.jsx

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bars = exports.DataWrapper = exports.ShowMoreContainer = exports.ShowMore = exports.Text = exports.Link = exports.PageTitle = exports.Value = exports.BoldValue = exports.Label = exports.PageHeader = exports.Card = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const fixefy_ui_utils_1 = require("@fixefy/fixefy-ui-utils");
+const material_1 = require("@mui/material");
+exports.Card = (0, styles_1.styled)(material_1.Paper)(({ theme }) => ({
+    borderRadius: 8,
+    padding: 16,
+    overflow: 'hidden',
+    position: 'relative',
+}));
+exports.PageHeader = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    backgroundColor: '#E2EEF1',
+    width: '100%',
+    height: 220,
+    padding: 32,
+}));
+exports.Label = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.overLineCaption), { color: theme.palette.statistics.label })));
+exports.BoldValue = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.subtitle2), { fontWeight: 700, lineHeight: '16px', color: theme.palette.typography.title })));
+exports.Value = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { fontFamily: theme.typography.fontFamily, lineHeight: '20px', color: theme.palette.typography.title })));
+exports.PageTitle = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.h4), { color: theme.palette.common.black })));
+exports.Link = (0, styles_1.styled)(material_1.Link)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { lineHeight: '20px', fontStyle: 'italic', color: theme.palette.primary[500], cursor: 'pointer', textDecoration: 'none' })));
+exports.Text = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: theme.palette.typography.title, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' })));
+exports.ShowMore = (0, styles_1.styled)(material_1.Typography)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.body1), { color: theme.palette.primary['500'], fontWeight: 600, fontSize: '12px', letterSpacing: '0.5px', lineHeight: '24px', cursor: 'pointer' })));
+exports.ShowMoreContainer = (0, styles_1.styled)(material_1.Grid)(({ theme }) => ({
+    backgroundColor: theme.palette.common.white,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    cursor: 'pointer',
+}));
+const DataWrapper = ({ values = [], title, icon, columns = 4, cardStyle = {}, wrapperStyle = {} }) => {
+    const normalizedValues = values.length % columns !== 0 ? [...values, ...new Array(columns - (values.length % columns))] : values;
+    const last4Items = normalizedValues.splice(-columns);
+    const containerColumns = columns === 5 ? 10 : 12;
+    return (<material_1.Box sx={Object.assign({}, wrapperStyle)}>
+      {(title || icon) && (<material_1.Box display="flex" alignItems="center" sx={{ ml: 2, mb: 1 }}>
+          {icon && icon}
+          {title && <exports.BoldValue sx={{ ml: 1 }}>{(0, fixefy_ui_utils_1.titleCase)(title)}</exports.BoldValue>}
+        </material_1.Box>)}
+      <exports.Card elevation={0} sx={Object.assign({ padding: 0, border: `1px solid #F0F0F0` }, cardStyle)}>
+        <material_1.Grid container columns={containerColumns}>
+          {normalizedValues.map((value, index) => {
+            return (<material_1.Grid sx={{
+                    minHeight: 74,
+                    padding: 2,
+                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
+                    borderBottom: value && `1px solid #F0F0F0`,
+                    display: 'flex',
+                    alignItems: 'center',
+                }} item key={index} xs={containerColumns / columns}>
+                {value && react_1.default.cloneElement(value)}
+              </material_1.Grid>);
+        })}
+          {last4Items.map((value, index) => {
+            return (<material_1.Grid sx={{
+                    minHeight: 74,
+                    padding: 2,
+                    borderRight: value && (index + 1) % columns !== 0 && `1px solid #F0F0F0`,
+                    display: 'flex',
+                    alignItems: 'center',
+                }} item key={index} xs={containerColumns / columns}>
+                {value && react_1.default.cloneElement(value)}
+              </material_1.Grid>);
+        })}
+        </material_1.Grid>
+      </exports.Card>
+    </material_1.Box>);
+};
+exports.DataWrapper = DataWrapper;
+const Bars = ({ fields }) => {
+    const max = (0, react_1.useMemo)(() => {
+        return fields.reduce((total, acc) => {
+            return acc.value > total ? acc.value : total;
+        }, 0);
+    }, [fields]);
+    const calculateTheValue = (value) => {
+        const calculatedValue = (value * 24) / max;
+        if (calculatedValue > 0 && calculatedValue < 2) {
+            return 2;
+        }
+        if (calculatedValue < 1) {
+            return 1;
+        }
+        return calculatedValue;
+    };
+    return (<div style={{ display: 'flex', alignItems: 'flex-end' }}>
+      {fields.map((field, index) => {
+            return (<div key={index} style={{
+                    width: 8,
+                    borderRadius: '0.75px',
+                    height: calculateTheValue(field.value),
+                    backgroundColor: field.color,
+                    marginRight: 2,
+                }}/>);
+        })}
+    </div>);
+};
+exports.Bars = Bars;

package/dist-cjs/{Tag/Tag.jsx → FxTag/FxTag.jsx}

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
+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 Tag = ({ name, count = 0 }) => (<material_1.Box display="flex" alignItems="center" justifyContent="center" sx={{ maxWidth: 'fit-content', mb: 1 }}>
+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.Tag = Tag;
+exports.FxTag = FxTag;

package/dist-cjs/FxTag/index.js

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

package/dist-cjs/FxWizard/FxWizard.jsx

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Wizard = void 0;
+exports.FxWizard = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const material_1 = require("@mui/material");
@@ -35,7 +35,7 @@ const Animations = {
         },
     },
 };
-function Wizard(_a) {
+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, '')}>
@@ -46,4 +46,4 @@ function Wizard(_a) {
       {divider && <material_1.Divider sx={{ mb: '8px', mt: '32px' }}/>}
     </wizard_styles_1.StyledModal>);
 }
-exports.Wizard = Wizard;
+exports.FxWizard = FxWizard;

package/dist-cjs/FxWizard/WizardContext.jsx

@@ -80,7 +80,7 @@ const WizardContextProvider = ({ children }) => {
     };
     return (<exports.WizardContext.Provider value={_state}>
       {children}
-      <FxWizard_1.Wizard {...modalProps} componentStyles={componentStyles} currentPage={currentPage} reverse={reverse} open={open} onCancel={onCancel} content={content}/>
+      <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 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WizardContextProvider = exports.WizardContext = exports.Wizard = void 0;
+exports.WizardContextProvider = exports.WizardContext = exports.FxWizard = void 0;
 var FxWizard_1 = require("./FxWizard");
-Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return FxWizard_1.Wizard; } });
+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/index.js

@@ -1,19 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = exports.FxProgressCounter = exports.FxModal = exports.FxChip = exports.FxButton = exports.FxAvatar = exports.AsyncDropdown = exports.AggregationsBar = void 0;
-var AggregationsBar_1 = require("./AggregationsBar");
-Object.defineProperty(exports, "AggregationsBar", { enumerable: true, get: function () { return AggregationsBar_1.AggregationsBar; } });
-var AsyncDropdown_1 = require("./AsyncDropdown");
-Object.defineProperty(exports, "AsyncDropdown", { enumerable: true, get: function () { return AsyncDropdown_1.AsyncDropdown; } });
+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;
+const tslib_1 = require("tslib");
+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 Tag_1 = require("./Tag/");
-Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
+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; } });
+tslib_1.__exportStar(require("./FxStyledComponents"), exports);

package/dist-es/{ActionsTray/ActionsTray.jsx → FxActionsTray/FxActionsTray.jsx}

@@ -3,7 +3,7 @@ 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 ActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
+export function FxActionsTray({ type, onApprove, onChallenge, onClick, show, onClose, chargesCount, container, direction = 'up' }) {
     const renderActions = () => {
         switch (type) {
             case 'approved':

package/dist-es/FxActionsTray/index.js

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

package/dist-es/{AggregationsBar/Aggregations.jsx → FxAggregationsBar/FxAggregations.jsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import Stack from '@mui/material/Stack';
 import { structureReader } from './helpers/structureReader';
-export const AggregationsBar = (props) => {
+export const FxAggregationsBar = (props) => {
     const { structure, minWidth, mb, filter, initialValues } = props;
     const { children, extended } = structure;
     const { variables } = extended;

package/dist-es/{AggregationsBar → FxAggregationsBar}/helpers/structureReader.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Box, Stack, Divider } from '@mui/material';
-import { Score } from '../../Score';
-import { StatisticsBar } from '../../StatisticsBar';
+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' ? (<Score 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={{
+            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',
@@ -16,7 +16,7 @@ export const structureReader = (structure, filter, collapsed, initialValues) =>
                     borderRadius: 2,
                     backgroundColor: extended?.variables?.bg || '#FFFFFF',
                 }}>
-            <StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>
+            <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={{
@@ -25,7 +25,7 @@ export const structureReader = (structure, filter, collapsed, initialValues) =>
                     padding: '24px 16px',
                 }}>
           {structure.children.map((child, index) => {
-                    return <StatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>;
+                    return <FxStatisticsBar structure={child} key={index} filter={filter} collapsed={collapsed} value={initialValues ? initialValues[child.extended.object_path] : null}/>;
                 })}
         </Stack>);
     }

package/dist-es/FxAggregationsBar/index.js

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