@hipay/hipay-material-ui 3.11.1 → 3.12.0

package/src/HiTable/HiTableRow.js

@@ -0,0 +1,116 @@
+// @inheritedComponent TableRow
+import React from 'react';
+import PropTypes from 'prop-types';
+import keycode from 'keycode';
+import classNames from 'classnames';
+import withStyles from '@mui/styles/withStyles';
+import TableRow from '@mui/material/TableRow';
+import HiCellBuilder from './HiCellBuilder';
+import * as cst from './constants';
+
+export const styles = theme => ({
+    row: {
+        '&:last-child': {
+            borderBottom: 'solid 1px #E4E7E8',
+        },
+        '&:hover, &:focus': {
+            backgroundColor: `${theme.palette.action.hover} !important`,
+        },
+    },
+    clickableRow: {
+        cursor: 'pointer',
+    },
+    cell: {
+        border: 'none',
+        padding: '0px 13px',
+        minHeight: '32px',
+        maxHeight: '40px',
+        fontWeight: theme.typography.fontWeightRegular,
+        lineHeight: 'unset',
+        ...theme.typography.b3,
+    },
+});
+
+class HiTableRow extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Surcharge les classes du composant
+         */
+        classes: PropTypes.object,
+        /**
+         * En-tête des colonnes et leurs paramètres
+         */
+        columns: PropTypes.object.isRequired,
+        /**
+         * Densité d'affichage (joue sur la hauteur des lignes)
+         */
+        dense: PropTypes.bool,
+        /**
+         * Id de la ligne
+         */
+        key: PropTypes.string,
+        /**
+         * Locale pour afficher les nombres et montants
+         */
+        locale: PropTypes.string,
+        /**
+         * Action au clic sur une ligne
+         */
+        onClick: PropTypes.func,
+        /**
+         * Données de la ligne
+         */
+        rowdata: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    handleClick(event, rowdata) {
+        if (this.props.onClick) {
+            this.props.onClick(event, rowdata);
+        }
+    }
+
+    render() {
+        const { classes, columns, dense, key, locale, rowdata } = this.props;
+
+        return (
+            <TableRow
+                className={classNames(classes.row, { [classes.clickableRow]: this.props.onClick })}
+                hover
+                onClick={event => this.handleClick(event, rowdata)}
+                onKeyDown={(event) => {
+                    if (keycode(event) === 'space' || keycode(event) === 'enter') {
+                        event.preventDefault();
+                        this.handleClick(event, rowdata);
+                    }
+                }}
+                key={key}
+                style={{
+                    height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT,
+                }}
+                tabIndex={0}
+                data-id={rowdata.rowId}
+            >
+                {
+                    Object.keys(columns).map(column => {
+                        return (
+                            <HiCellBuilder
+                                key={columns[column].colId}
+                                className={classes.cell}
+                                column={columns[column]}
+                                data={rowdata}
+                                locale={locale}
+                            />
+                        );
+                    }, this)
+                }
+            </TableRow>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiTableRow' })(HiTableRow);

package/src/HiTable/constants.js

@@ -0,0 +1,200 @@
+/**
+ * Infinite scroll variables
+ */
+export const MAX_ROWS = 50;
+export const NB_ROWS_BACK_TO_TOP = 10;
+
+
+/**
+ * Cell height (px)
+ */
+export const CELL_HEIGHT = 40;
+export const CELL_HEIGHT_DENSE = 32;
+export const CELL_HEADER_HEIGHT = 48;
+export const CELL_HEADER_HEIGHT_DENSE = 40;
+
+/**
+ * Cell types
+ * @type {string}
+ */
+export const TYPE_ACCOUNT = 'account';
+export const TYPE_ACCOUNT_NUMBER = 'account_number';
+export const TYPE_AMOUNT = 'amount';
+export const TYPE_CUSTOMER_ACCOUNT_NUMBER = 'customer_account_number';
+export const TYPE_ADDRESS = 'address';
+export const TYPE_CHECKBOX = 'checkbox';
+export const TYPE_DATE = 'date';
+export const TYPE_ICON = 'icon';
+export const TYPE_IMAGE = 'image';
+export const TYPE_MONTH = 'month';
+export const TYPE_NUMERIC = 'numeric';
+export const TYPE_RATE = 'rate';
+export const TYPE_SENTINEL = 'sentinel';
+export const TYPE_SCORE = 'score';
+export const TYPE_STATUS = 'status';
+export const TYPE_COUNTRY = 'country';
+export const TYPE_TEXT = 'text';
+export const TYPE_THIRD_PARTY_SECURITY = 'third_party_security';
+export const TYPE_PIN_TO_ACTION = 'pin_to_action';
+export const TYPE_HIDDEN_CONTENT = 'hidden_content';
+
+/**
+ * Cell size [L] / [M] / [S]
+ */
+export const VIEWS = {
+    LARGE: 'l',
+    MEDIUM: 'm',
+    SMALL: 's',
+};
+
+/**
+ * Trendchip evolution
+ */
+export const EVOLUTION_UP = 'up';
+export const EVOLUTION_DOWN = 'down';
+export const NO_EVOLUTION = 'equal';
+
+/**
+ * Ellipsis
+ */
+export const ELLIPSIS_AFTER_FIRST_WORD = 'after-first-word';
+export const ELLIPSIS_LEFT = 'left';
+export const ELLIPSIS_MIDDLE = 'middle';
+export const ELLIPSIS_NAME = 'name';
+export const ELLIPSIS_RIGHT = 'right';
+
+/**
+ * Fraud Result
+ */
+export const FRAUD_RESULT_ACCEPTED = 'ACCEPTED';
+export const FRAUD_RESULT_BLOCKED = 'BLOCKED';
+export const FRAUD_RESULT_CHALLENGED = 'CHALLENGED';
+export const FRAUD_RESULT_PENDING = 'PENDING';
+export const FRAUD_RESULT_FORCE_AUTHENTICATE = 'FORCE_AUTHENTICATE';
+export const FRAUD_RESULT_ASK_AUTHENTICATE = 'ASK_AUTHENTICATE';
+
+/**
+ * Cell default width for each views
+ * @type {{}}
+ */
+export const DEFAULT_WIDTHS = {
+    [TYPE_ACCOUNT]: {
+        [VIEWS.LARGE]: 160,
+        [VIEWS.MEDIUM]: 120,
+        [VIEWS.SMALL]: 80,
+    },
+    [TYPE_ACCOUNT_NUMBER]: {
+        [VIEWS.LARGE]: 100,
+        [VIEWS.MEDIUM]: 80,
+        [VIEWS.SMALL]: 60,
+    },
+    [TYPE_ADDRESS]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 80,
+    },
+    [TYPE_CHECKBOX]: {
+        [VIEWS.LARGE]: 40,
+        [VIEWS.MEDIUM]: 40,
+        [VIEWS.SMALL]: 40,
+    },
+    [TYPE_COUNTRY]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 80,
+        [VIEWS.SMALL]: 40,
+    },
+    [TYPE_DATE]: {
+        [VIEWS.LARGE]: 220,
+        [VIEWS.MEDIUM]: 140,
+        [VIEWS.SMALL]: 120,
+    },
+    [TYPE_ICON]: {
+        [VIEWS.LARGE]: 140,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 60,
+    },
+    [TYPE_IMAGE]: {
+        [VIEWS.LARGE]: 140,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 60,
+    },
+    [TYPE_NUMERIC]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 80,
+    },
+    [TYPE_RATE]: {
+        [VIEWS.LARGE]: 100,
+        [VIEWS.MEDIUM]: 90,
+        [VIEWS.SMALL]: 80,
+    },
+    [TYPE_SENTINEL]: {
+        [VIEWS.LARGE]: 64,
+        [VIEWS.MEDIUM]: 64,
+        [VIEWS.SMALL]: 64,
+    },
+    [TYPE_SCORE]: {
+        [VIEWS.LARGE]: 80,
+        [VIEWS.MEDIUM]: 80,
+        [VIEWS.SMALL]: 80,
+    },
+    [TYPE_STATUS]: {
+        [VIEWS.LARGE]: 120,
+        [VIEWS.MEDIUM]: 100,
+        [VIEWS.SMALL]: 80,
+    },
+    [TYPE_TEXT]: {
+        [VIEWS.LARGE]: 200,
+        [VIEWS.MEDIUM]: 120,
+        [VIEWS.SMALL]: 80,
+    },
+    [TYPE_THIRD_PARTY_SECURITY]: {
+        [VIEWS.LARGE]: 40,
+        [VIEWS.MEDIUM]: 40,
+        [VIEWS.SMALL]: 40,
+    },
+};
+/**
+ * Cell default width for each views
+ * @type {{}}
+ */
+export const DEFAULT_VIEWS = {
+    [TYPE_ACCOUNT]: VIEWS.LARGE,
+    [TYPE_ACCOUNT_NUMBER]: VIEWS.LARGE,
+    [TYPE_AMOUNT]: VIEWS.LARGE,
+    [TYPE_ADDRESS]: VIEWS.LARGE,
+    [TYPE_CHECKBOX]: VIEWS.LARGE,
+    [TYPE_COUNTRY]: VIEWS.LARGE,
+    [TYPE_DATE]: VIEWS.LARGE,
+    [TYPE_ICON]: VIEWS.LARGE,
+    [TYPE_IMAGE]: VIEWS.LARGE,
+    [TYPE_NUMERIC]: VIEWS.LARGE,
+    [TYPE_RATE]: VIEWS.LARGE,
+    [TYPE_SENTINEL]: VIEWS.LARGE,
+    [TYPE_SCORE]: VIEWS.LARGE,
+    [TYPE_STATUS]: VIEWS.LARGE,
+    [TYPE_TEXT]: VIEWS.LARGE,
+    [TYPE_THIRD_PARTY_SECURITY]: VIEWS.LARGE,
+};
+
+/**
+ * Cell default side padding (one side) for each views
+ * @type {{}}
+ */
+export const DEFAULT_PADDING = {
+    [VIEWS.LARGE]: 8,
+    [VIEWS.MEDIUM]: 8,
+    [VIEWS.SMALL]: 8,
+};
+
+/**
+ * Cell types which are align right by default
+ * @type {*[]}
+ */
+export const ALIGN_RIGHT_TYPES = [
+    TYPE_NUMERIC,
+    TYPE_AMOUNT,
+    TYPE_RATE,
+    TYPE_SENTINEL,
+    TYPE_SCORE,
+];

package/src/HiTable/index.js

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

package/src/hi-svg-icons/HiAccount.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiAccount = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <path
+                    d="M14,5.52h8.19V13.7l-.19.23-8.6,8.51-.51.47-.56-.47L5.23,15.37l-.46-.55.46-.51L13.74,5.7ZM14.62,7,6.81,14.82l6.05,6,7.81-7.81V7ZM17.9,8.7a.79.79,0,1,1-.21.54A.73.73,0,0,1,17.9,8.7Z"
+                    fill={color}
+                />
+            </svg>
+
+        </Icon>
+    );
+});
+
+HiAccount.muiName = 'SvgIcon';
+
+export default HiAccount;

package/src/hi-svg-icons/HiActivity.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiActivity = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 22.75 20.75">
+                <circle cx="9" cy="11.05" r="9" opacity={0.16}  fill={color}/>
+                <g>
+                    <path
+                        // eslint-disable-next-line max-len
+                        d="M7.33,1.41A7.75,7.75,0,0,0,5.64,3.94,7.91,7.91,0,0,0,5,7.05a7.91,7.91,0,0,0,2.3,5.65L5.92,14.11A10.06,10.06,0,0,1,3.79,11,9.73,9.73,0,0,1,3,7.05a9.72,9.72,0,0,1,.77-3.89A10.06,10.06,0,0,1,5.92,0ZM14,11.06v4h1a1,1,0,0,1,1,1h7v2H16a1,1,0,0,1-1,1H11a1,1,0,0,1-1-1H3V16h7a1,1,0,0,1,1-1h1v-4ZM10.19,4.22A3.84,3.84,0,0,0,9.06,7.05a3.84,3.84,0,0,0,1.13,2.84L8.78,11.3A6.36,6.36,0,0,1,7.47,9.38,5.84,5.84,0,0,1,7,7.05a6,6,0,0,1,.47-2.34,5.62,5.62,0,0,1,1.31-1.9Zm4.22,1.4A2,2,0,0,1,15,7a2,2,0,0,1-.56,1.43,2,2,0,0,1-2.82,0A2,2,0,0,1,11,7a2,2,0,0,1,3.38-1.41Zm4.12-.91A6,6,0,0,1,19,7.05a5.84,5.84,0,0,1-.47,2.33,6.36,6.36,0,0,1-1.31,1.92L15.81,9.89a3.84,3.84,0,0,0,1.13-2.84,3.84,3.84,0,0,0-1.13-2.83l1.41-1.41A5.62,5.62,0,0,1,18.53,4.71Zm3.68-1.55A9.72,9.72,0,0,1,23,7.05a9.73,9.73,0,0,1-.77,3.9,10.06,10.06,0,0,1-2.13,3.16L18.67,12.7A7.91,7.91,0,0,0,21,7.05a7.91,7.91,0,0,0-.61-3.11,7.75,7.75,0,0,0-1.69-2.53L20.08,0A10.06,10.06,0,0,1,22.21,3.16Z"
+                        fill={color}
+                    />
+                </g>
+            </svg>
+        </Icon>
+    );
+});
+
+HiActivity.muiName = 'SvgIcon';
+
+export default HiActivity;

package/src/hi-svg-icons/HiAll.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiAll = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 36 39">
+                <g transform="translate(1714 3832)">
+                    <circle cx={-1700.1} cy={-3807.1} r={13.9} opacity={0.16} fill={color} />
+                    <path
+                        // eslint-disable-next-line max-len
+                        d="M-1697.7-3823.2c2.4 0 4.4.9 5.9 2.5 1.6 1.6 2.4 3.6 2.4 6 0 1-.2 2-.5 3-.3.9-.8 1.8-1.5 2.5l.4.4h1l6.4 6.4-1.9 1.9-6.4-6.4v-1l-.4-.4c-.7.6-1.6 1.1-2.5 1.5-.9.3-1.9.5-3 .5-2.4 0-4.4-.8-6-2.4-1.6-1.6-2.4-3.6-2.5-5.9 0-2.4.9-4.4 2.5-6 1.7-1.8 3.7-2.6 6.1-2.6zm0 2.6c-1.7 0-3 .6-4.1 1.7s-1.6 2.5-1.6 4.1c0 1.7.5 3 1.6 4.1s2.5 1.6 4.1 1.6c1.7 0 3-.5 4.1-1.6s1.6-2.5 1.6-4.1c0-1.7-.5-3-1.6-4.1s-2.5-1.7-4.1-1.7z"
+                        fill={color}
+                    />
+                    <path fill="none" d="M-1714-3832h36v39h-36z" />
+                </g>
+            </svg>
+        </Icon>
+    );
+});
+
+HiAll.muiName = 'SvgIcon';
+
+export default HiAll;

package/src/hi-svg-icons/HiBilling.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiBilling = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M13.42,4.05a2.05,2.05,0,0,1,2,1.5h5.53V12.3h1.5v12H11.92V22.8h-6V5.55h5.53A2.07,2.07,0,0,1,13.42,4.05Zm-6,3V21.3h4.5v-9h7.5V7.05h-1.5v3h-9v-3ZM14,5.76a.75.75,0,0,0-1.29.54v.75H10.42v1.5h6V7.05H14.17V6.3A.73.73,0,0,0,14,5.76Zm-.54,8v9h7.5v-9Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiBilling.muiName = 'SvgIcon';
+
+export default HiBilling;

package/src/hi-svg-icons/HiBriefcaseRescue.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from '@mui/material/styles';
+
+/**
+ * @ignore - internal component.
+ */
+const HiBriefcaseRescue = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 540 540">
+                <path
+                    // eslint-disable-next-line max-len
+                    d="M540 108H378V27a27 27 0 0 0-27-27H189a27 27 0 0 0-27 27v81H54a54.06 54.06 0 0 0-54 54v270a54.06 54.06 0 0 0 54 54h432a54.06 54.06 0 0 0 54-54V162a54.06 54.06 0 0 0-54-54zM216 54h108v54H216zm162 270h-81v81h-54v-81h-81v-54h81v-81h54v81h81z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiBriefcaseRescue.muiName = 'SvgIcon';
+
+export default HiBriefcaseRescue;

package/src/hi-svg-icons/HiBusiness.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiBusiness = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <path
+                    d="M13.28,4.66h7.78v7.78l-.18.28L12.63,21l-.57.47L11.5,21,4.75,14.22l-.47-.56.47-.56L13,4.85Zm.61,1.5-7.5,7.5,5.67,5.67,7.5-7.5V6.16Zm7.92.75h2.25v8.25l-.18.23L16,23.22l-.51.47-.56-.47-1.41-1.5,1-1,.94.94,7.12-7.13V8.41h-.75Zm-5,1a.76.76,0,0,1,.54-.21.75.75,0,1,1,0,1.5A.76.76,0,0,1,16.77,9a.8.8,0,0,1,0-1.08Z"
+                    fill={color}
+                />
+            </svg>
+
+        </Icon>
+    );
+});
+
+HiBusiness.muiName = 'SvgIcon';
+
+export default HiBusiness;

package/src/hi-svg-icons/HiCatalog.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiCatalog = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M5.64,6.67H7.33A1.41,1.41,0,0,1,8.24,7a1.28,1.28,0,0,1,.5.82l2,7.87h9.38l1.78-6.75h1.59l-2,7.13a1.31,1.31,0,0,1-.5.82,1.46,1.46,0,0,1-.91.3H10.7a1.48,1.48,0,0,1-.91-.3,1.25,1.25,0,0,1-.49-.82l-2-7.88H5.64a.75.75,0,1,1,0-1.5ZM10.8,17.83a2.26,2.26,0,0,1,3.19,0A2.26,2.26,0,0,1,10.8,21a2.26,2.26,0,0,1,0-3.19Zm2.34,1.59a.66.66,0,0,0-.75-.75.75.75,0,0,0,0,1.5A.66.66,0,0,0,13.14,19.42Zm1.5-12.75h1.5v3.75h2.25l-3,3-3-3h2.25Zm2.91,11.16a2.26,2.26,0,0,1,3.19,0A2.26,2.26,0,0,1,17.55,21a2.26,2.26,0,0,1,0-3.19Zm2.34,1.59a.75.75,0,1,0-.75.75A.66.66,0,0,0,19.89,19.42Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiCatalog.muiName = 'SvgIcon';
+
+export default HiCatalog;

package/src/hi-svg-icons/HiCustomer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiCustomer = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+                <path
+                    d="M7.47,5.22a5.06,5.06,0,0,1,3.7-1.55,5.07,5.07,0,0,1,3.71,1.55,5.05,5.05,0,0,1,1.54,3.7,5.17,5.17,0,0,1-.63,2.49,5.05,5.05,0,0,1-1.71,1.87,11.2,11.2,0,0,1,1.08.52,6,6,0,0,1,3.51-1.13,6,6,0,0,1,6,6,6,6,0,0,1-6,6,6,6,0,0,1-6-6A5.84,5.84,0,0,1,14,14.92a5.62,5.62,0,0,0-2.82-.75,5.79,5.79,0,0,0-4.24,1.76,5.79,5.79,0,0,0-1.76,4.24H3.67A7.24,7.24,0,0,1,4.94,16a7.63,7.63,0,0,1,3.33-2.74,5.05,5.05,0,0,1-1.71-1.87,5.18,5.18,0,0,1,.91-6.19Zm6.35,1a3.74,3.74,0,0,0-5.3,0,3.64,3.64,0,0,0-1.1,2.65,3.62,3.62,0,0,0,1.1,2.65,3.6,3.6,0,0,0,2.65,1.1,3.59,3.59,0,0,0,2.65-1.1,3.59,3.59,0,0,0,1.1-2.65A3.6,3.6,0,0,0,13.82,6.27Zm8,9.22a4.5,4.5,0,0,0-6.37,0,4.5,4.5,0,0,0,0,6.37,4.53,4.53,0,0,0,6.37,0,4.53,4.53,0,0,0,0-6.37Zm-3.94.18h1.5v2.25h2.25v1.5H19.42v2.25h-1.5V19.42H15.67v-1.5h2.25Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiCustomer.muiName = 'SvgIcon';
+
+export default HiCustomer;

package/src/hi-svg-icons/HiDownload.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+const HiDownload = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 500 500">
+                <path fill={color} d="M250 0C111.94 0 0 111.94 0 250s111.92 250 250 250 250-111.92 250-250S388.06 0 250 0zm-44.18 210.14V114.8h88.37v95.34h58.68L250 321.14l-102.87-111zM352.87 385.2H147.13v-32h205.74z" />
+            </svg>
+        </Icon>
+    );
+});
+
+HiDownload.muiName = 'SvgIcon';
+
+export default HiDownload;

package/src/hi-svg-icons/HiFinance.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiFinance = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <path
+                    d="M14.17,4.42a9.19,9.19,0,0,1,6.75,2.77l-1,1.08a7.76,7.76,0,0,0-5.72-2.35A7.94,7.94,0,0,0,8.34,8.34a7.94,7.94,0,0,0-2.42,5.83A8,8,0,0,0,8.34,20a7.93,7.93,0,0,0,5.83,2.41A8,8,0,0,0,20,20a8,8,0,0,0,2.41-5.84,7.48,7.48,0,0,0-.23-1.87l1.22-1.22a8.78,8.78,0,0,1,.51,3.09,9.36,9.36,0,0,1-2.86,6.89,9.36,9.36,0,0,1-6.89,2.86,9.39,9.39,0,0,1-6.89-2.86,9.4,9.4,0,0,1-2.86-6.89A9.43,9.43,0,0,1,7.28,7.28,9.43,9.43,0,0,1,14.17,4.42Zm8.44,3.19,1.13,1.13-9,9-.57.46-.56-.46L9.86,14,11,12.86l3.18,3.24Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiFinance.muiName = 'SvgIcon';
+
+export default HiFinance;

package/src/hi-svg-icons/HiFinanceMenu.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiFinanceMenu = pure(props => {
+    const theme = useTheme();
+    const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+    return (
+        <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+            <svg viewBox="0 0 28.35 28.35">
+                <path
+                    d="M14.17,4.42a9.19,9.19,0,0,1,6.75,2.77l-1,1.08a7.76,7.76,0,0,0-5.72-2.35A7.94,7.94,0,0,0,8.34,8.34a7.94,7.94,0,0,0-2.42,5.83A8,8,0,0,0,8.34,20a7.93,7.93,0,0,0,5.83,2.41A8,8,0,0,0,20,20a8,8,0,0,0,2.41-5.84,7.48,7.48,0,0,0-.23-1.87l1.22-1.22a8.78,8.78,0,0,1,.51,3.09,9.36,9.36,0,0,1-2.86,6.89,9.36,9.36,0,0,1-6.89,2.86,9.39,9.39,0,0,1-6.89-2.86,9.4,9.4,0,0,1-2.86-6.89A9.43,9.43,0,0,1,7.28,7.28,9.43,9.43,0,0,1,14.17,4.42Zm8.44,3.19,1.13,1.13-9,9-.57.46-.56-.46L9.86,14,11,12.86l3.18,3.24Z"
+                    fill={color}
+                />
+            </svg>
+        </Icon>
+    );
+});
+
+HiFinanceMenu.muiName = 'SvgIcon';
+
+export default HiFinanceMenu;

package/src/hi-svg-icons/HiHostedPaymentPage.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import Icon from '@mui/material/Icon';
+import {useTheme} from "@mui/material/styles";
+
+/**
+ * @ignore - internal component.
+ */
+const HiHostedPaymentPage = pure(props => {
+  const theme = useTheme();
+  const { color = props.color || theme.palette.neutral.main, style, ...other } = props;
+  return (
+    <Icon style={{...style, fontSize: (props.size || 24)}} {...other}>
+      <svg viewBox="0 0 28.35 28.35">
+          <circle cx="11.83" cy="16.66" r="9" fill={color} opacity={0.16}/>
+          <path
+            d="M6.45,6.66H19.84a2.22,2.22,0,0,1,2.23,2.23v.74h.74a2.22,2.22,0,0,1,2.24,2.24v8.92A2.22,2.22,0,0,1,22.81,23H9.42a2.14,2.14,0,0,1-1.58-.65,2.16,2.16,0,0,1-.65-1.58v-.74H6.45a2.16,2.16,0,0,1-1.58-.65,2.14,2.14,0,0,1-.65-1.58V8.89a2.12,2.12,0,0,1,.65-1.58A2.16,2.16,0,0,1,6.45,6.66Zm0,1.49a.66.66,0,0,0-.75.74v8.93a.66.66,0,0,0,.75.74H19.84a.66.66,0,0,0,.74-.74v-6.7H6.45V9.63H20.58V8.89a.65.65,0,0,0-.74-.74ZM22.07,14.1v3.72a2.22,2.22,0,0,1-2.23,2.23H8.68v.74a.66.66,0,0,0,.74.75H22.81a.66.66,0,0,0,.75-.75V14.1Zm0-3v1.49h1.49v-.74a.66.66,0,0,0-.75-.75Z"
+            fill={color}
+        />
+      </svg>
+    </Icon>
+  );
+});
+
+HiHostedPaymentPage.muiName = 'SvgIcon';
+
+export default HiHostedPaymentPage;