@producteca/producteca-ui-kit 1.20.0 → 1.21.1-beta.0

package/dist/components/inputs/searcher/searcher.js

@@ -0,0 +1,112 @@
+import _slicedToArray from "babel-runtime/helpers/slicedToArray";
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Select from 'react-select';
+import { ClearComponent, Option, SingleValue } from '../selectField/selectField';
+import clsx from 'clsx';
+import styles from '../selectField/selectField.module.scss';
+import CustomIcon from '../../icons/customIcon/customIcon';
+import { SearchRounded } from '@mui/icons-material';
+import locale from '../../../locales';
+import _ from 'lodash';
+import Spinner from '../../loaders/spinner/spinner';
+var SearchComponent = function SearchComponent() {
+    return _jsx("div", { className: styles['producteca-select-field__search-icon'], children: _jsx(CustomIcon, { children: _jsx(SearchRounded, {}) }) });
+};
+export var Searcher = function Searcher(props) {
+    var name = props.name,
+        label = props.label,
+        _props$placeholder = props.placeholder,
+        placeholder = _props$placeholder === undefined ? locale('selectPlaceholder') : _props$placeholder,
+        _props$noOptionsMessa = props.noOptionsMessage,
+        _noOptionsMessage = _props$noOptionsMessa === undefined ? locale('noFoundOptions') : _props$noOptionsMessa,
+        options = props.options,
+        _props$size = props.size,
+        size = _props$size === undefined ? 'md' : _props$size,
+        _props$isSearchable = props.isSearchable,
+        isSearchable = _props$isSearchable === undefined ? true : _props$isSearchable,
+        _props$isClearable = props.isClearable,
+        isClearable = _props$isClearable === undefined ? true : _props$isClearable,
+        _props$clearOnSelect = props.clearOnSelect,
+        clearOnSelect = _props$clearOnSelect === undefined ? false : _props$clearOnSelect,
+        required = props.required,
+        disabled = props.disabled,
+        rightModifier = props.rightModifier,
+        isOptionDisabled = props.isOptionDisabled,
+        onChange = props.onChange,
+        onInputChange = props.onInputChange,
+        input = props.input,
+        _props$isLoading = props.isLoading,
+        isLoading = _props$isLoading === undefined ? false : _props$isLoading,
+        otherProps = __rest(props, ["name", "label", "placeholder", "noOptionsMessage", "options", "size", "isSearchable", "isClearable", "clearOnSelect", "required", "disabled", "rightModifier", "isOptionDisabled", "onChange", "onInputChange", "input", "isLoading"]);
+
+    var _useState = useState(null),
+        _useState2 = _slicedToArray(_useState, 2),
+        optionSelected = _useState2[0],
+        setOptionSelected = _useState2[1];
+
+    useEffect(function () {
+        setIsMenuOpen(!_.isEmpty(options) || isLoading);
+    }, [options, isLoading]);
+
+    var _useState3 = useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        isMenuOpen = _useState4[0],
+        setIsMenuOpen = _useState4[1];
+
+    var handleInputChange = function handleInputChange(value) {
+        var fakeEvent = {
+            target: {
+                name: name,
+                value: value
+            }
+        };
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(fakeEvent);
+        setIsMenuOpen(!_.isEmpty(options) || isLoading);
+    };
+    var handleSelect = function handleSelect(selected) {
+        var fakeEvent = {
+            target: {
+                name: name,
+                value: selected === null || selected === void 0 ? void 0 : selected.value
+            }
+        };
+        setOptionSelected(selected);
+        if (input) {
+            input.onChange(selected === null || selected === void 0 ? void 0 : selected.value);
+        } else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(fakeEvent);
+        }
+        if (clearOnSelect && selected) {
+            setOptionSelected(null);
+        }
+        setIsMenuOpen(false);
+    };
+    var handleBlur = function handleBlur() {
+        if (input) {
+            input.onBlur();
+        }
+        setIsMenuOpen(false);
+    };
+    return _jsxs("div", { className: styles['producteca-select-field-container'], children: [label && _jsx("label", { htmlFor: name, children: label }), _jsxs("div", { className: clsx(styles[size], styles['producteca-select-field-body'], styles[isSearchable ? 'producteca-select-field--is-searchable' : ''], styles[isClearable ? 'producteca-select-field--is-clearable' : ''], styles[rightModifier ? 'producteca-select-field--with-modifier' : '']), children: [_jsxs("div", { className: styles['searcher-body'], children: [isSearchable && _jsx(SearchComponent, {}), _jsx(Select, Object.assign({}, otherProps, { name: name, placeholder: placeholder, classNamePrefix: "producteca-select-field", isDisabled: disabled, isClearable: isClearable, isOptionDisabled: isOptionDisabled, isSearchable: isSearchable, noOptionsMessage: function noOptionsMessage() {
+                        return isLoading ? _jsx(Spinner, { size: 'sm' }) : _noOptionsMessage;
+                    }, onInputChange: handleInputChange, onChange: handleSelect, onBlur: handleBlur, value: optionSelected, options: options, components: { Option: Option, SingleValue: SingleValue }, menuPortalTarget: document.body, menuIsOpen: isMenuOpen, onMenuOpen: function onMenuOpen() {
+                        return setIsMenuOpen(!_.isEmpty(options) || isLoading);
+                    }, onMenuClose: function onMenuClose() {
+                        return setIsMenuOpen(false);
+                    } })), _jsx(ClearComponent, { isClearable: isClearable, handleChange: function handleChange() {
+                        setOptionSelected(null);
+                        if (input) {
+                            input.onChange(null);
+                        }
+                    } })] }), !!rightModifier && rightModifier] })] });
+};

package/dist/components/inputs/selectField/selectField.js

@@ -0,0 +1,183 @@
+import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Select, { components } from 'react-select';
+import _ from 'lodash';
+import locale from '../../../locales';
+import styles from './selectField.module.scss';
+import clsx from 'clsx';
+import { ClearRounded, SearchRounded } from '@mui/icons-material';
+import CustomIcon from '../../icons/customIcon/customIcon';
+import { useReduxFormField } from '../../../hooks/useReduxFormField';
+export var Option = function Option(props) {
+    var _useState = useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        showTooltip = _useState2[0],
+        setShowTooltip = _useState2[1];
+
+    var _useState3 = useState({ top: 0, left: 0 }),
+        _useState4 = _slicedToArray(_useState3, 2),
+        tooltipPosition = _useState4[0],
+        setTooltipPosition = _useState4[1];
+
+    var optionRef = useRef(null);
+    var showDisabledTooltip = props.isDisabled && !!props.data.tooltipMessage;
+    var updateTooltipPosition = useCallback(function () {
+        if (optionRef.current && showTooltip) {
+            var rect = optionRef.current.getBoundingClientRect();
+            setTooltipPosition({
+                top: rect.top,
+                left: rect.right + 5
+            });
+        }
+    }, [showTooltip]);
+    useEffect(function () {
+        if (optionRef.current) {
+            var hasOverflow = optionRef.current.scrollWidth > optionRef.current.offsetWidth;
+            setShowTooltip(showDisabledTooltip || hasOverflow);
+        }
+    }, [props.label, showDisabledTooltip]);
+    useEffect(function () {
+        if (showTooltip) {
+            updateTooltipPosition();
+            window.addEventListener('scroll', updateTooltipPosition, true);
+            return function () {
+                return window.removeEventListener('scroll', updateTooltipPosition, true);
+            };
+        }
+    }, [showTooltip, updateTooltipPosition]);
+    return _jsx("div", { className: styles[showTooltip ? 'option-with-tooltip' : ''], "data-tooltip": showDisabledTooltip ? props.data.tooltipMessage : props.label, style: showTooltip ? {
+            '--tooltip-top': tooltipPosition.top + 'px',
+            '--tooltip-left': tooltipPosition.left + 'px'
+        } : undefined, children: _jsx(components.Option, Object.assign({}, props, { children: _jsxs("div", { className: clsx(styles[props.isDisabled ? 'disabled' : ''], styles[props.isMulti ? 'producteca-select-field__input-multiple' : '']), children: [props.isMulti && _jsx("input", { type: "checkbox", checked: props.isSelected, onChange: _.identity }), _jsx("label", { ref: optionRef, children: props.label })] }) })) });
+};
+var MultiValue = function MultiValue(props) {
+    return _jsx(components.MultiValue, Object.assign({}, props, { children: _jsx("span", { children: props.data.label }) }));
+};
+export var SingleValue = function SingleValue(props) {
+    return _jsx(components.SingleValue, Object.assign({}, props, { children: _jsx("span", { children: props.data.label }) }));
+};
+export var SearchComponent = function SearchComponent() {
+    return _jsx("div", { className: styles['producteca-select-field__search-icon'], children: _jsx(CustomIcon, { children: _jsx(SearchRounded, {}) }) });
+};
+var MultipleTextComponent = function MultipleTextComponent(_ref) {
+    var _ref$optionSelected = _ref.optionSelected,
+        optionSelected = _ref$optionSelected === undefined ? null : _ref$optionSelected;
+
+    var isArrayWithSome = optionSelected && _.isArray(optionSelected) && optionSelected.length > 0;
+    var text = optionSelected && _.isArray(optionSelected) && optionSelected.length === 1 ? locale('selected') : locale('selectedPlural');
+    return isArrayWithSome ? _jsx("div", { className: styles['producteca-select-field__is-multiple'], children: _jsxs("span", { children: [optionSelected.length, " ", text] }) }) : null;
+};
+var ValidationComponent = function ValidationComponent() {
+    return _jsx("div", { className: styles['producteca-select-field--is-required'], children: locale('selectRequiredText') });
+};
+export var ClearComponent = function ClearComponent(_ref2) {
+    var optionSelected = _ref2.optionSelected,
+        isClearable = _ref2.isClearable,
+        handleChange = _ref2.handleChange;
+
+    var isArrayWithSome = optionSelected && _.isArray(optionSelected) && optionSelected.length > 0;
+    var hasSelectedValue = !_.isArray(optionSelected) && optionSelected && 'value' in optionSelected && optionSelected.value;
+    return isClearable && (isArrayWithSome || hasSelectedValue) ? _jsx("a", { className: styles['producteca-select-field__is-clearable'], onClick: function onClick() {
+            return handleChange(null);
+        }, children: _jsx(CustomIcon, { children: _jsx(ClearRounded, {}) }) }) : null;
+};
+export var SelectField = function SelectField(props) {
+    var _a;
+
+    var name = props.name,
+        label = props.label,
+        _props$placeholder = props.placeholder,
+        placeholder = _props$placeholder === undefined ? locale('selectPlaceholder') : _props$placeholder,
+        _props$noOptionsMessa = props.noOptionsMessage,
+        _noOptionsMessage = _props$noOptionsMessa === undefined ? locale('noFoundOptions') : _props$noOptionsMessa,
+        options = props.options,
+        _props$size = props.size,
+        size = _props$size === undefined ? 'md' : _props$size,
+        _props$hideSelectedOp = props.hideSelectedOptions,
+        hideSelectedOptions = _props$hideSelectedOp === undefined ? true : _props$hideSelectedOp,
+        _props$isMultiple = props.isMultiple,
+        isMultiple = _props$isMultiple === undefined ? false : _props$isMultiple,
+        _props$isSearchable = props.isSearchable,
+        isSearchable = _props$isSearchable === undefined ? true : _props$isSearchable,
+        _props$isClearable = props.isClearable,
+        isClearable = _props$isClearable === undefined ? true : _props$isClearable,
+        required = props.required,
+        disabled = props.disabled,
+        rightModifier = props.rightModifier,
+        isOptionDisabled = props.isOptionDisabled,
+        _onChange = props.onChange,
+        defaultValue = props.defaultValue,
+        input = props.input,
+        propsOnBlur = props.onBlur;
+
+    var value = (_a = input === null || input === void 0 ? void 0 : input.value) !== null && _a !== void 0 ? _a : props.value;
+    var defaultOption = _.filter(options, function (_ref3) {
+        var optionValue = _ref3.value;
+        return _.includes(value, optionValue);
+    });
+
+    var _useState5 = useState(defaultOption || null),
+        _useState6 = _slicedToArray(_useState5, 2),
+        optionSelected = _useState6[0],
+        setOptionSelected = _useState6[1];
+
+    var _useState7 = useState(false),
+        _useState8 = _slicedToArray(_useState7, 2),
+        touched = _useState8[0],
+        setTouched = _useState8[1];
+
+    var _useReduxFormField = useReduxFormField({
+        input: input,
+        onChange: function onChange(selected) {
+            var selectedValue = isMultiple ? _.map(selected, function (opt) {
+                return opt.value;
+            }) : selected === null || selected === void 0 ? void 0 : selected.value;
+            if (!input) {
+                var fakeEvent = {
+                    target: {
+                        name: name,
+                        value: selectedValue
+                    }
+                };
+                _onChange === null || _onChange === void 0 ? void 0 : _onChange(fakeEvent);
+            }
+            return selectedValue;
+        },
+        onBlur: propsOnBlur,
+        transformValue: function transformValue(selected) {
+            var selectedValue = isMultiple ? _.map(selected, function (opt) {
+                return opt.value;
+            }) : selected === null || selected === void 0 ? void 0 : selected.value;
+            return selectedValue;
+        }
+    }),
+        fieldHandleChange = _useReduxFormField.handleChange,
+        handleBlur = _useReduxFormField.handleBlur;
+
+    var handleChange = function handleChange(selected) {
+        fieldHandleChange(selected);
+        setOptionSelected(selected);
+        setTouched(true);
+    };
+    useEffect(function () {
+        if (defaultValue && options.length > 0) {
+            var val = _.isArray(defaultValue) ? defaultValue : [defaultValue];
+            var matchingOptions = _.filter(options, function (_ref4) {
+                var value = _ref4.value;
+                return _.includes(val, value);
+            });
+            setOptionSelected(isMultiple ? matchingOptions : matchingOptions[0] || null);
+        }
+    }, [defaultValue, options]);
+    var _isValid = function _isValid() {
+        return !required || !touched || !_.isEmpty(optionSelected);
+    };
+    var optionComponent = isMultiple ? { Option: Option, MultiValue: MultiValue } : { Option: Option, SingleValue: SingleValue };
+    return _jsxs("div", { className: styles['producteca-select-field-container'], "data-testid": "producteca-select-field-container", children: [label && _jsx("label", { htmlFor: name, children: label }), _jsxs("div", { className: clsx(styles[size], styles['producteca-select-field-body'], styles[!_isValid() ? 'producteca-select-field--on-error' : ''], styles[isSearchable && !isMultiple ? 'producteca-select-field--is-searchable' : ''], styles[isClearable ? 'producteca-select-field--is-clearable' : ''], styles[rightModifier ? 'producteca-select-field--with-modifier' : '']), children: [_jsxs("div", { className: styles['body'], children: [isMultiple && _jsx(MultipleTextComponent, { optionSelected: optionSelected }), isSearchable && !isMultiple && _jsx(SearchComponent, {}), _jsx(Select, Object.assign({}, props, { name: name, classNamePrefix: "producteca-select-field", placeholder: placeholder, isDisabled: disabled, isMulti: isMultiple, closeMenuOnSelect: !isMultiple, hideSelectedOptions: hideSelectedOptions && !isMultiple, isClearable: isClearable, isOptionDisabled: isOptionDisabled, isSearchable: isSearchable && !isMultiple, noOptionsMessage: function noOptionsMessage() {
+                        return _noOptionsMessage;
+                    },
+                    //@ts-ignore Because onChange receives a parameter (newValue) that is internal to react-select
+                    onChange: handleChange, onBlur: handleBlur, value: optionSelected, options: options, components: optionComponent, menuPortalTarget: document.body })), _jsx(ClearComponent, { optionSelected: optionSelected, isClearable: isClearable, handleChange: handleChange })] }), !!rightModifier && rightModifier] }), !_isValid() && _jsx(ValidationComponent, {})] });
+};
+export default SelectField;

package/dist/components/inputs/switchInput/index.js

@@ -0,0 +1,2 @@
+import { SwitchInput, SwitchInputGroup } from './switchInput';
+export { SwitchInput, SwitchInput as Switch, SwitchInputGroup, SwitchInputGroup as SwitchGroup };

package/dist/components/inputs/switchInput/switchInput.js

@@ -0,0 +1,77 @@
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styles from './switchInput.module.scss';
+import _ from 'lodash';
+import { useReduxFormField } from '../../../hooks/useReduxFormField';
+export var SwitchInputGroup = function SwitchInputGroup(_a) {
+    var title = _a.title,
+        name = _a.name,
+        items = _a.items,
+        onChange = _a.onChange,
+        _a$size = _a.size,
+        size = _a$size === undefined ? 'sm' : _a$size,
+        input = _a.input,
+        props = __rest(_a, ["title", "name", "items", "onChange", "size", "input"]);
+
+    var _useReduxFormField = useReduxFormField({
+        input: input,
+        onChange: onChange,
+        transformValue: function transformValue(event) {
+            var _event$target = event.target,
+                checked = _event$target.checked,
+                inputName = _event$target.name;
+
+            if (input) {
+                var newValue = Object.assign({}, input.value);
+                newValue[inputName] = checked;
+                return newValue;
+            }
+            return event;
+        }
+    }),
+        handleChange = _useReduxFormField.handleChange,
+        handleBlur = _useReduxFormField.handleBlur;
+
+    return _jsxs("div", { className: styles['switch-input-container'], "data-testid": "switch-input-container", children: [title && _jsxs("label", { className: styles['title'], "data-testid": "switch-title", children: [' ', title, ' '] }), _jsx("div", { className: styles['switch-input-items'] + " " + styles[size], "data-testid": "switch-input-items", children: _.map(items, function (_a) {
+                var id = _a.id,
+                    itemName = _a.name,
+                    label = _a.label,
+                    disabled = _a.disabled,
+                    checked = _a.checked,
+                    value = _a.value,
+                    itemProps = __rest(_a, ["id", "name", "label", "disabled", "checked", "value"]);
+
+                var inputId = id || itemName || name;
+                return _jsxs("label", { htmlFor: inputId, className: "" + (disabled ? styles['disabled'] : ''), "data-testid": "switch-label-" + inputId, children: [_jsxs("div", { className: styles['switch-wrapper'], children: [_jsx("input", Object.assign({}, props, itemProps, { id: inputId, type: "checkbox", name: itemName || name, checked: input && itemName ? _.get(input.value, itemName) : checked, disabled: disabled, onChange: handleChange, onBlur: handleBlur, className: styles['switch-input'], "data-testid": "switch-input-" + inputId })), _jsx("span", { className: styles['switch-slider'] })] }), _jsxs("span", { className: styles['switch-label'], children: [" ", label, " "] })] }, inputId);
+            }) })] });
+};
+export var SwitchInput = function SwitchInput(_a) {
+    var name = _a.name,
+        checked = _a.checked,
+        onChange = _a.onChange,
+        label = _a.label,
+        title = _a.title,
+        _a$disabled = _a.disabled,
+        disabled = _a$disabled === undefined ? false : _a$disabled,
+        _a$size2 = _a.size,
+        size = _a$size2 === undefined ? 'sm' : _a$size2,
+        input = _a.input,
+        props = __rest(_a, ["name", "checked", "onChange", "label", "title", "disabled", "size", "input"]);
+
+    var item = {
+        id: name + "-single",
+        label: label,
+        checked: checked,
+        disabled: disabled
+    };
+    return _jsx(SwitchInputGroup, Object.assign({}, props, { name: name, items: [item], onChange: onChange, title: title, size: size, input: input }));
+};
+export default SwitchInput;

package/dist/components/loaders/index.js

@@ -0,0 +1,2 @@
+export * from './spinner/spinner';
+export * from './progressbar/progressbar';

package/dist/components/loaders/progressbar/progressbar.js

@@ -0,0 +1,37 @@
+import _slicedToArray from 'babel-runtime/helpers/slicedToArray';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LinearProgress } from '@mui/material';
+import styles from './progressbar.module.scss';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+export var Progressbar = function Progressbar(_ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === undefined ? 'lg' : _ref$size,
+        _ref$progress = _ref.progress,
+        initialProgress = _ref$progress === undefined ? 0 : _ref$progress,
+        _ref$variant = _ref.variant,
+        variant = _ref$variant === undefined ? 'determinate' : _ref$variant;
+
+    var _useState = useState(initialProgress),
+        _useState2 = _slicedToArray(_useState, 2),
+        progress = _useState2[0],
+        setProgress = _useState2[1];
+
+    useEffect(function () {
+        if (variant === 'buffer') {
+            var timer = setInterval(function () {
+                setProgress(function (oldProgress) {
+                    var newProgress = Math.min(100, oldProgress + Math.sqrt(100 - oldProgress) * 0.5);
+                    return Math.round(newProgress);
+                });
+            }, 100);
+            return function () {
+                clearInterval(timer);
+            };
+        } else {
+            setProgress(initialProgress);
+        }
+    }, [variant, initialProgress]);
+    return _jsx(LinearProgress, { variant: variant == 'buffer' ? 'determinate' : variant, value: progress, className: clsx(styles['progressbar'], styles[size]), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress });
+};
+export default Progressbar;

package/dist/components/loaders/spinner/spinner.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress } from '@mui/material';
+import styles from './spinner.module.scss';
+export var Spinner = function Spinner(_ref) {
+    var _ref$size = _ref.size,
+        size = _ref$size === undefined ? 'lg' : _ref$size;
+    return _jsx(CircularProgress, { size: _size(size), className: styles.loader });
+};
+var _size = function _size(size) {
+    return {
+        sm: 18,
+        lg: 60
+    }[size];
+};
+export default Spinner;

package/dist/components/menuAction/index.js

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

package/dist/components/menuAction/menuAction.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "babel-runtime/helpers/slicedToArray";
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import { Grow } from '@mui/material';
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { map } from "lodash";
+import { getColor } from '../../styles/colors';
+import { CustomIcon } from '../icons';
+import { menuPaperStyles, menuItemStyles } from './menuActionCustomStyles';
+var DEFAULT_ITEM_HEIGHT = 48;
+export var MenuAction = function MenuAction(_a) {
+    var items = _a.items,
+        _a$id = _a.id,
+        id = _a$id === undefined ? 'menu-action-button' : _a$id,
+        _a$maxItemsVisible = _a.maxItemsVisible,
+        maxItemsVisible = _a$maxItemsVisible === undefined ? 6 : _a$maxItemsVisible,
+        icon = _a.icon,
+        otherProps = __rest(_a, ["items", "id", "maxItemsVisible", "icon"]);
+
+    var _useState = useState(null),
+        _useState2 = _slicedToArray(_useState, 2),
+        anchorEl = _useState2[0],
+        setAnchorEl = _useState2[1];
+
+    var open = Boolean(anchorEl);
+    var handleClick = function handleClick(event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function handleClose() {
+        setAnchorEl(null);
+    };
+    var paperStyle = useMemo(function () {
+        return {
+            maxHeight: DEFAULT_ITEM_HEIGHT * maxItemsVisible
+        };
+    }, [maxItemsVisible]);
+    return _jsxs("div", { children: [_jsx(IconButton, { id: id, "aria-controls": open ? id + "-menu" : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": "true", onClick: handleClick, children: icon !== null && icon !== void 0 ? icon : _jsx(CustomIcon, { color: getColor("grey", "900"), children: _jsx(MoreVertIcon, {}) }) }), _jsx(Menu, Object.assign({ id: id + "-menu", anchorEl: anchorEl, open: open, onClose: handleClose, slotProps: {
+                paper: { style: paperStyle },
+                list: { 'aria-labelledby': id },
+                transition: Grow
+            }, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right'
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right'
+            }, sx: menuPaperStyles }, otherProps, { children: map(items, function (item, index) {
+                return _jsx(MenuItem, Object.assign({ sx: menuItemStyles }, item, { onClick: function onClick() {
+                        var _a;
+                        handleClose();
+                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                    }, children: item.label }), index);
+            }) }))] });
+};
+export default MenuAction;

package/dist/components/menuAction/menuActionCustomStyles.js

@@ -0,0 +1,13 @@
+import { getColor } from '../../styles/colors';
+export var menuPaperStyles = {
+    '& .MuiPopover-paper': {
+        boxShadow: '0px 5px 5px -3px rgb(205 205 205 / 20%), 0px 8px 14px 1px rgb(165 165 165 / 14%), 0px 3px 14px 2px rgb(219 219 219 / 6%)'
+    }
+};
+export var menuItemStyles = {
+    fontFamily: 'Poppins, Open Sans, Helvetica, Arial, sans-serif',
+    fontSize: '12px',
+    color: getColor('grey', '900'),
+    '&.Mui-selected': { backgroundColor: '#F2F4F7' },
+    '&.Mui-disabled': { opacity: 0.5 }
+};

package/dist/components/modals/index.js

@@ -0,0 +1 @@
+export * from './warningModal/warningModal';

package/dist/components/modals/warningModal/index.js

@@ -0,0 +1 @@
+export { WarningModal } from "./warningModal";

package/dist/components/modals/warningModal/warningModal.js

@@ -0,0 +1,41 @@
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './warningModal.module.scss';
+import { CheckboxInput } from '../../inputs/checkboxInput/checkboxInput';
+import { CustomIcon } from '../../icons';
+import AutoStoriesIcon from '@mui/icons-material/AutoStories';
+import ErrorIcon from '@mui/icons-material/Error';
+import locale from '../../../locales';
+import { ActionBar } from '../../patterns/actionBar/actionBar';
+import { getColor } from "../../../styles/colors";
+var DefaultIcon = _jsx(CustomIcon, { size: "32", color: getColor("secondary", "500"), children: _jsx(ErrorIcon, {}) });
+export var WarningModal = function WarningModal(_a) {
+    var icon = _a.icon,
+        _a$title = _a.title,
+        title = _a$title === undefined ? locale('warningModal.warning') : _a$title,
+        description = _a.description,
+        _a$confirmLabel = _a.confirmLabel,
+        confirmLabel = _a$confirmLabel === undefined ? locale('continue') : _a$confirmLabel,
+        _a$cancelLabel = _a.cancelLabel,
+        cancelLabel = _a$cancelLabel === undefined ? locale('cancel') : _a$cancelLabel,
+        onSave = _a.onSave,
+        onCancel = _a.onCancel,
+        _a$dontShowAgainLabel = _a.dontShowAgainLabel,
+        dontShowAgainLabel = _a$dontShowAgainLabel === undefined ? locale('warningModal.dontShowAgain') : _a$dontShowAgainLabel,
+        onChangeDontShowAgain = _a.onChangeDontShowAgain,
+        onClickGuide = _a.onClickGuide,
+        props = __rest(_a, ["icon", "title", "description", "confirmLabel", "cancelLabel", "onSave", "onCancel", "dontShowAgainLabel", "onChangeDontShowAgain", "onClickGuide"]);
+
+    return _jsx("div", Object.assign({ className: styles['overlay'], role: "dialog", "aria-modal": "true" }, props, { children: _jsxs("div", { className: styles['modal'], children: [_jsxs("div", { className: styles['body'], children: [onClickGuide && _jsx("div", { className: styles['help-container'], children: _jsx(CustomIcon, { "aria-label": locale('guide'), color: getColor("primary", "500"), onClick: function onClick() {
+                            return onClickGuide === null || onClickGuide === void 0 ? void 0 : onClickGuide(new MouseEvent('click'));
+                        }, children: _jsx(AutoStoriesIcon, {}) }) }), _jsxs("div", { className: styles['header-icon'], children: [!!icon ? icon : DefaultIcon, _jsx("div", { className: styles['title'], children: title })] }), _jsxs("div", { className: styles['content'], children: [_jsxs("span", { children: [" ", description, " "] }), onChangeDontShowAgain && _jsx(CheckboxInput, { name: "dont-show-again", label: dontShowAgainLabel, onChange: onChangeDontShowAgain })] })] }), _jsx(ActionBar, { variant: "modal", cancelProps: { onCancel: onCancel, label: cancelLabel }, saveProps: { onSave: onSave, label: confirmLabel, variant: 'primary', size: 'md' } })] }) }));
+};
+export default WarningModal;

package/dist/components/patterns/actionBar/actionBar.js

@@ -0,0 +1,38 @@
+var __rest = this && this.__rest || function (s, e) {
+    var t = {};
+    for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+    }if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+    }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './actionBar.module.scss';
+import { Button } from '../../button/button';
+import locale from '../../../locales';
+import clsx from 'clsx';
+export var ActionBar = function ActionBar(_ref) {
+    var _ref$variant = _ref.variant,
+        variant = _ref$variant === undefined ? "page" : _ref$variant,
+        saveProps = _ref.saveProps,
+        cancelProps = _ref.cancelProps,
+        previousProps = _ref.previousProps;
+
+    var _ref2 = cancelProps || {},
+        onCancel = _ref2.onCancel,
+        _ref2$label = _ref2.label,
+        cancelText = _ref2$label === undefined ? locale('cancel') : _ref2$label;
+
+    var _a = previousProps || {},
+        onPrevious = _a.onPrevious,
+        _a$label = _a.label,
+        previousText = _a$label === undefined ? locale('previous') : _a$label,
+        previousOtherProps = __rest(_a, ["onPrevious", "label"]);var _b = saveProps || {},
+        onSave = _b.onSave,
+        _b$label = _b.label,
+        saveText = _b$label === undefined ? locale('save') : _b$label,
+        saveOtherProps = __rest(_b, ["onSave", "label"]);
+    return _jsxs("div", { className: clsx(styles['action-bar'], styles[variant]), children: [!!onCancel && _jsx(Button, { size: "md", variant: "link", label: cancelText, onClick: onCancel }), !!onPrevious && _jsx(Button, Object.assign({ outline: true, label: previousText, onClick: onPrevious }, previousOtherProps)), !!onSave && _jsx(Button, Object.assign({ label: saveText, onClick: onSave }, saveOtherProps))] });
+};
+export default ActionBar;