@dilicorp/ui 0.2.2 → 0.2.4-0.1

package/dist/components/form-builder/components/input.js

@@ -1,22 +1,11 @@
-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 React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 import classNames from 'classnames';
 import { InputCurrency } from './input-currency';
 import { InputMask } from './input-mask';
 import { InputPrefixSuffix } from './input-prefix-suffix';
 export default function Input(props) {
-    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix } = props, elements = __rest(props, ["name", "id", "type", "tabIndex", "actions", "mask", "multiple", "currency", "className", "prefix", "suffix"]);
+    const { name, id = name, type = 'text', tabIndex = 0, actions, mask, multiple = false, currency, className, prefix, suffix, fastField = true, ...elements } = props;
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -34,12 +23,18 @@ export default function Input(props) {
     const handleChange = (event) => {
         if (elements.onChange) {
             elements.onChange({
-                currentTarget: Object.assign(Object.assign({}, event.currentTarget), { name })
+                currentTarget: {
+                    ...event.currentTarget,
+                    name
+                }
             });
         }
         if (elements.onBlur) {
             elements.onBlur({
-                currentTarget: Object.assign(Object.assign({}, event.currentTarget), { name })
+                currentTarget: {
+                    ...event.currentTarget,
+                    name
+                }
             });
         }
         if (actions.setFieldValue) {
@@ -57,15 +52,30 @@ export default function Input(props) {
     };
     const curValue = actions.values[name];
     const classes = classNames(className, 'form-control');
-    const attrs = Object.assign(Object.assign({}, validOptions), { value: curValue, className: classes, name,
-        id, 'data-testid': id, type: type === 'number' ? 'text' : type, tabIndex, autoComplete: 'none', onChange: handleChange });
+    const attrsInput = {
+        ...validOptions,
+        value: curValue,
+        className: classes,
+        name,
+        id,
+        'data-testid': id,
+        type: type === 'number' ? 'text' : type,
+        tabIndex,
+        autoComplete: 'none',
+        onChange: handleChange
+    };
+    const attrs = {
+        ...attrsInput,
+        fastField
+    };
     if (currency)
-        return React.createElement(InputCurrency, Object.assign({}, { name, attrs, currency, handleChange }));
+        return React.createElement(InputCurrency, { ...{ name, attrs, currency, handleChange } });
     if (mask)
-        return React.createElement(InputMask, Object.assign({}, { name, attrs, mask }));
+        return React.createElement(InputMask, { ...{ name, attrs, mask } });
     if (prefix || suffix)
-        return React.createElement(InputPrefixSuffix, Object.assign({}, { attrs, suffix, prefix }));
-    return (React.createElement(FastField, Object.assign({}, attrs, { as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
+        return React.createElement(InputPrefixSuffix, { ...{ attrs, suffix, prefix } });
+    const Tag = fastField ? FastField : Field;
+    return (React.createElement(Tag, { ...attrsInput, as: multiple ? 'textarea' : 'input', readOnly: true, onFocus: (event) => {
             event.currentTarget.readOnly = false;
-        } })));
+        } }));
 }

package/dist/components/form-builder/components/password.js

@@ -1,18 +1,7 @@
-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 React from 'react';
 import { Field } from 'formik';
 export default function Password(props) {
-    const { name, id = name, tabIndex = 0, actions, labelButton = 'show' } = props, elements = __rest(props, ["name", "id", "tabIndex", "actions", "labelButton"]);
+    const { name, id = name, tabIndex = 0, actions, labelButton = 'show', ...elements } = props;
     const validOptions = {
         alt: elements.alt,
         autoComplete: elements.autoComplete,
@@ -42,5 +31,5 @@ export default function Password(props) {
     };
     return (React.createElement("div", { className: "position-relative" },
         React.createElement("div", { role: "button", className: `form-password-button${visible ? ' visible' : ''}`, onClick: handleVisible }, labelButton),
-        React.createElement(Field, Object.assign({}, validOptions, { type: visible ? 'text' : 'password', className: "form-control", name: name, id: id, "data-testid": id, tabIndex: tabIndex, onChange: handleChange, readOnly: true, autoComplete: "off", onFocus: handleFocus }))));
+        React.createElement(Field, { ...validOptions, type: visible ? 'text' : 'password', className: "form-control", name: name, id: id, "data-testid": id, tabIndex: tabIndex, onChange: handleChange, readOnly: true, autoComplete: "off", onFocus: handleFocus })));
 }

package/dist/components/form-builder/components/radio.d.ts

@@ -9,6 +9,7 @@ declare type Props = React.InputHTMLAttributes<HTMLInputElement> & {
     actions: FormikProps<any>;
     value?: string;
     options: Option[];
+    fastField?: boolean;
 };
 export default function Radio(props: Props): JSX.Element[] | null;
 export {};

package/dist/components/form-builder/components/radio.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FastField } from 'formik';
+import { FastField, Field } from 'formik';
 export default function Radio(props) {
-    const { name, actions, value, options, id = name, tabIndex = 0, disabled } = props;
+    const { name, actions, value, options, id = name, tabIndex = 0, disabled, fastField = true } = props;
     if (!options.length)
         return null;
     const curValue = actions.values[name] || value;
@@ -18,7 +18,8 @@ export default function Radio(props) {
             actions.setFieldValue(name, event.currentTarget.value);
         }
     };
+    const Tag = fastField ? FastField : Field;
     return options.map((option, index) => (React.createElement("div", { className: "form-check", key: `${name}-${index}` },
-        React.createElement(FastField, Object.assign({ value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}` }, isChecked(option), { disabled }, { type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange })),
+        React.createElement(Tag, { value: option.value, name: name, id: `${id}-${index}`, "data-testid": `${id}-${index}`, ...isChecked(option), ...{ disabled }, type: "radio", tabIndex: tabIndex, className: "form-check-input", onChange: handleChange }),
         React.createElement("label", { className: "form-check-label", htmlFor: `${id}-${index}` }, option.label))));
 }

package/dist/components/form-builder/components/select.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FormikProps } from 'formik';
 declare type Option = {
     label: string | number;
@@ -17,6 +17,7 @@ declare type Props = {
     isSearchable?: boolean;
     isMulti?: boolean;
     onChange?: any;
+    selectRef?: React.MutableRefObject<any>;
 };
 export default function Select(props: Props): JSX.Element;
 export {};

package/dist/components/form-builder/components/select.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
 export default function Select(props) {
-    const { actions, options = [], name, id = name, value = null, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, onChange } = props;
+    const { actions, options = [], name, id = name, value = null, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, selectRef, onChange } = props;
     const [currValue, setValue] = useState(value);
     useEffect(() => {
         if (value !== currValue) {
@@ -21,5 +21,5 @@ export default function Select(props) {
         actions.setFieldValue(name, JSON.stringify(newValue));
         setValue(newValue);
     }, []);
-    return (React.createElement(ReactSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: options, name: name, id: id, "data-testid": id, defaultValue: currValue, value: currValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, onChange: handleChange }));
+    return (React.createElement(ReactSelect, { ref: selectRef, placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", options: options, name: name, id: id, "data-testid": id, defaultValue: currValue, value: currValue, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, onChange: handleChange }));
 }

package/dist/components/form-builder/form-builder-element.js

@@ -1,19 +1,8 @@
-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 React from 'react';
 import { FormBuilderComponentsList } from './form-builder-components-list';
 import { FormGroup } from './_partials/form-group';
 export const FormBuilderElement = (props) => {
-    const { component, value, actions } = props, elements = __rest(props, ["component", "value", "actions"]);
+    const { component, value, actions, ...elements } = props;
     const Component = (component && typeof component === 'object')
         ? component
         : (component != null
@@ -22,5 +11,5 @@ export const FormBuilderElement = (props) => {
     if (!Component)
         return null;
     return (React.createElement(FormGroup, { name: props.name, title: props.title, validations: props.validations },
-        React.createElement(Component, Object.assign({}, elements, { value: value || '', actions: actions }))));
+        React.createElement(Component, { ...elements, value: value || '', actions: actions })));
 };

package/dist/components/form-builder/form-builder.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { FormBuilderGroup } from './form-builder.types';
 export declare type FormBuilderProps = {
     data: FormBuilderGroup[];
     onSubmit: any;
     className?: string;
 };
-export declare const FormBuilder: React.FC<FormBuilderProps>;
+export declare const FormBuilder: (props: FormBuilderProps) => JSX.Element;
 //# sourceMappingURL=form-builder.d.ts.map

package/dist/components/form-builder/form-builder.js

@@ -1,14 +1,3 @@
-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 React from 'react';
 import { Form, Formik } from 'formik';
 import { Row, Col, Typography } from '../../';
@@ -16,16 +5,17 @@ import { FormBuilderElement } from './form-builder-element';
 import { FormBuilderHelper } from './utils/form-builder-helper';
 export const FormBuilder = (props) => {
     const { data, onSubmit, className } = props;
-    const options = Object.assign(Object.assign({ enableReinitialize: true }, FormBuilderHelper.init(data).build()), { onSubmit });
+    const options = {
+        enableReinitialize: true,
+        ...FormBuilderHelper.init(data).build(),
+        onSubmit
+    };
     return (React.createElement("div", { className: "w-100" },
-        React.createElement(Formik, Object.assign({}, options), (actions) => (React.createElement(Form, { className: `form-builder${className ? ' ' + className : ''}` }, data.map(({ name, customComponent: Component, items, classes }, index) => (React.createElement("div", { key: index, className: `so-form-group${(classes === null || classes === void 0 ? void 0 : classes.soFormGroup) ? ' ' + (classes === null || classes === void 0 ? void 0 : classes.soFormGroup) : ''}` },
+        React.createElement(Formik, { ...options }, (actions) => (React.createElement(Form, { className: `form-builder${className ? ' ' + className : ''}` }, data.map(({ name, customComponent: Component, items, classes }, index) => (React.createElement("div", { key: index, className: `so-form-group${(classes === null || classes === void 0 ? void 0 : classes.soFormGroup) ? ' ' + (classes === null || classes === void 0 ? void 0 : classes.soFormGroup) : ''}` },
             name && React.createElement(Typography, { tag: "h2", variant: "h5" }, name),
             Boolean(Component) && Component,
             React.createElement(Row, null, items
                 .filter(item => item === null || item === void 0 ? void 0 : item.component)
-                .map((_a) => {
-                var { column, columnClassName } = _a, item = __rest(_a, ["column", "columnClassName"]);
-                return (React.createElement(Col, { key: item.name, size: column !== null && column !== void 0 ? column : 12, className: columnClassName },
-                    React.createElement(FormBuilderElement, Object.assign({}, item, { actions: actions }))));
-            }))))))))));
+                .map(({ column, columnClassName, ...item }) => (React.createElement(Col, { key: item.name, size: column !== null && column !== void 0 ? column : 12, className: columnClassName },
+                React.createElement(FormBuilderElement, { ...item, actions: actions })))))))))))));
 };

package/dist/components/form-builder/form-builder.types.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import React, { InputHTMLAttributes, ReactNode } from 'react';
 import { DropzoneOptions } from 'react-dropzone';
 import { FormBuildItemInput } from './components/input';
 import { SupportedDateFormat, SupportedLanguages } from '../../atoms/input-datepicker';
@@ -50,6 +50,7 @@ interface FormBuilderItemSelect extends Omit<FormBuilderBasicsItem, 'value'> {
     isClearable?: boolean;
     isSearchable?: boolean;
     isMulti?: boolean;
+    selectRef?: React.MutableRefObject<any>;
 }
 interface FormBuilderItemDatePicker extends FormBuilderBasicsItem {
     component?: 'datepicker';

package/dist/components/layout/authenticated-layout/authenticated-layout.d.ts

@@ -6,6 +6,10 @@ declare type Props = {
     menuItems: SideNavigationBarItemProps[];
     navItems?: React.ReactNode[];
     dropdown: DropdownProps;
+    logout?: {
+        href: string;
+        label: string;
+    };
 };
 export declare const AuthenticatedLayout: React.FC<Props>;
 export {};

package/dist/components/layout/authenticated-layout/authenticated-layout.js

@@ -2,7 +2,10 @@ import React from 'react';
 import { SideNavigationBar } from '../../side-navigation-bar/side-navigation-bar';
 import { Navbar } from '../../navbar/navbar';
 import { PluxeeLogo } from '../pluxee-logo/pluxee-logo';
-export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown }) => {
+export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown, logout = {
+    label: 'logout',
+    href: '/logout'
+} }) => {
     return (React.createElement("div", { className: "hv-md-100" },
         React.createElement("header", { className: "main-header" },
             React.createElement("div", { className: "logo-container" },
@@ -17,11 +20,8 @@ export const AuthenticatedLayout = ({ children, menuItems, navItems, dropdown })
             React.createElement("div", { className: "nav-container" },
                 React.createElement(Navbar, { showUserIcon: false, dropdown: dropdown, items: navItems }))),
         React.createElement("main", { className: "d-flex" },
-            React.createElement("div", null,
-                React.createElement(SideNavigationBar, { active: false, items: menuItems, logout: {
-                        label: 'logout',
-                        href: '/logout'
-                    } })),
+            React.createElement("div", { style: { minHeight: '100%' } },
+                React.createElement(SideNavigationBar, { active: false, items: menuItems, logout: logout })),
             React.createElement("div", { className: "w-100 overflow-y-auto" }, children))));
 };
 AuthenticatedLayout.displayName = 'AuthenticatedLayout';

package/dist/components/layout/layout.d.ts

@@ -5,6 +5,10 @@ export declare const Layout: {
         menuItems: import("../side-navigation-bar/side-navigation-bar-item").SideNavigationBarItemProps[];
         navItems?: import("react").ReactNode[] | undefined;
         dropdown: import("../..").DropdownProps;
+        logout?: {
+            href: string;
+            label: string;
+        } | undefined;
     }>;
     Content: {
         ({ children }: {

package/dist/components/layout/pluxee-logo/pluxee-logo-card.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type PluxeeLogoCardProps = {
+    width?: number;
+    height?: number;
+};
+export declare const PluxeeLogoCard: ({ width, height }: PluxeeLogoCardProps) => JSX.Element;
+export {};
+//# sourceMappingURL=pluxee-logo-card.d.ts.map

package/dist/components/layout/pluxee-logo/pluxee-logo-card.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export const PluxeeLogoCard = ({ width = 172, height = 48 }) => {
+    return (React.createElement("svg", { width: width, height: height, viewBox: "0 0 172 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { clipPath: "url(#clip0_17957_81019)" },
+            React.createElement("path", { d: "M157.187 16.4385C161.107 16.4385 162.689 19.1251 162.689 20.9716H151.686C151.686 19.1032 153.285 16.4385 157.187 16.4385ZM161.803 29.2628C161.071 30.6645 159.394 31.6128 157.228 31.6128C153.138 31.6128 151.521 28.7401 151.477 26.1813H171.795C171.852 25.821 172.001 24.7979 172.001 23.9999C172.001 14.9633 165.688 9.86133 157.156 9.86133C148.162 9.86133 141.872 14.9633 141.872 23.9999C141.872 33.1034 148.161 38.1387 157.209 38.1387C166.105 38.1387 170.285 33.3133 171.401 29.2628H161.803Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M15.624 30.0179C11.9753 30.0179 9.38446 27.442 9.38446 24.022C9.38446 20.7614 11.8177 18.0262 15.624 18.0262C19.431 18.0262 21.8628 20.7773 21.8628 24.022C21.8628 27.3177 19.3978 30.0179 15.624 30.0179ZM18.3541 10.1328C14.351 10.1328 10.9168 11.8721 9.14561 13.9163L9.13974 10.6659H0V47.9994H9.42205V34.6326C11.6321 36.9761 14.7101 37.8662 17.8223 37.8662C27.1561 37.8662 31.4857 30.9182 31.4857 23.9992C31.4857 15.4604 25.9245 10.1328 18.3541 10.1328Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M44.0499 0H34.5894V37.3333H44.0499V0Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M66.8777 10.666V24.5329C66.8777 26.6348 66.584 27.656 65.7098 28.6748C64.865 29.6593 63.5398 30.1235 62.0706 30.1235C60.6024 30.1235 59.2749 29.6593 58.4297 28.6748C57.5556 27.656 57.2635 26.6348 57.2635 24.5329V10.666H47.8384L47.8396 25.3569C47.8396 29.487 48.4808 32.1826 50.4937 34.4736C52.6229 36.8967 55.8749 37.8602 59.0589 37.8602C62.7884 37.8602 65.3717 36.4799 67.1572 34.4477L67.1632 37.3328H76.3028V10.666H66.8777Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M107.03 10.666H100.589L93.4917 17.7815L86.394 10.666H79.9536V17.0092L87.1784 23.9994L79.9538 30.9897V37.3329H86.3942L93.4917 30.2175L100.589 37.3329H107.03V30.9897L99.8051 23.9994L107.03 17.0092V10.666Z", fill: "#221C46" }),
+            React.createElement("path", { d: "M124.436 16.4385C128.355 16.4385 129.937 19.1251 129.937 20.9716H118.934C118.934 19.1032 120.534 16.4385 124.436 16.4385ZM129.051 29.2628C128.319 30.6645 126.642 31.6128 124.476 31.6128C120.386 31.6128 118.769 28.7401 118.726 26.1813H139.043C139.1 25.821 139.25 24.7979 139.25 23.9999C139.25 14.9633 132.937 9.86133 124.404 9.86133C115.41 9.86133 109.12 14.9633 109.12 23.9999C109.12 33.1034 115.41 38.1387 124.457 38.1387C133.354 38.1387 137.533 33.3133 138.649 29.2628H129.051Z", fill: "#221C46" })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: "clip0_17957_81019" },
+                React.createElement("rect", { width: "172", height: "48", fill: "white" })))));
+};

package/dist/components/layout/pluxee-logo/pluxee-logo-inverted.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const PluxeeLogoInverted: () => JSX.Element;
+//# sourceMappingURL=pluxee-logo-inverted.d.ts.map

package/dist/components/layout/pluxee-logo/pluxee-logo-inverted.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export const PluxeeLogoInverted = () => {
+    return (React.createElement("svg", { width: "172", height: "72", viewBox: "0 0 172 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("g", { clipPath: "url(#clip0_17957_81026)" },
+            React.createElement("g", { clipPath: "url(#clip1_17957_81026)" },
+                React.createElement("path", { d: "M52.2036 54.9415L49.9298 55.0883L49.2108 58.7621C48.3422 58.731 48.067 58.7033 47.0454 58.7033C43.8462 58.7033 41.0529 60.0546 40.315 63.2238C39.6511 66.0819 41.2662 68.2989 44.7904 68.2989C48.3147 68.2989 49.9711 66.4067 50.5352 63.7474L52.2036 54.9415ZM48.8359 60.3069L48.0877 64.0584C47.7591 65.5808 46.8458 66.5951 44.9831 66.5951C42.8434 66.5951 42.281 65.2628 42.7488 63.3879C43.4127 60.7268 45.573 59.9354 48.8359 60.3069ZM27.5371 60.4676C24.2038 60.1635 21.3348 60.44 21.2884 61.577C21.2161 63.2843 26.7838 61.7947 26.6771 64.9362C26.5206 69.5517 18.7789 68.489 16.8628 67.9032L17.2102 66.5329C20.5126 67.0599 23.9974 67.1031 24.073 65.2732C24.1556 63.3274 18.5639 65.0762 18.6946 61.926C18.7926 59.5811 22.286 58.3145 28.005 59.1595L27.5354 60.4676H27.5371ZM34.5994 58.8105C31.2833 58.8105 28.619 60.7372 27.9637 63.6074C27.3066 66.4793 29.092 68.406 32.4064 68.406C35.7209 68.406 38.3869 66.4793 39.0422 63.6074C39.6992 60.7372 37.9139 58.8105 34.5994 58.8105ZM36.5276 63.6074C36.046 65.5341 34.5255 66.7437 32.7143 66.7437C30.9032 66.7437 29.9692 65.6412 30.4766 63.6074C30.9582 61.6807 32.4976 60.3881 34.307 60.3881C36.1165 60.3881 37.0092 61.6807 36.5276 63.6074ZM72.9073 68.3577H70.0246C68.277 66.7074 64.9334 62.9127 62.472 58.8986H64.5876C66.9251 62.1386 72.9073 68.3577 72.9073 68.3577ZM75.9276 49.5708L77.2537 46.7939L77.6321 49.6175L80.336 48.6671L78.4457 51.1019L80.4942 52.6968L77.7594 52.9093L77.608 55.8452L76.0876 53.6748L73.8516 55.745L74.6892 52.8281L72.0524 52.4687L74.6187 50.9999L73.566 48.4874L75.9259 49.5708H75.9276ZM79.5895 58.7638C76.2217 58.7638 73.5144 60.7216 72.8488 63.6385C72.1814 66.5554 73.996 68.5132 77.3621 68.5132C80.7281 68.5132 83.4371 66.5554 84.1028 63.6385C84.7701 60.7234 82.9572 58.7638 79.5895 58.7638ZM81.5486 63.6385C81.0601 65.5946 79.5155 66.8232 77.6768 66.8232C75.8382 66.8232 74.8887 65.7035 75.4047 63.6385C75.8932 61.6824 77.4567 60.3674 79.2936 60.3674C81.1306 60.3674 82.0388 61.6807 81.5503 63.6385H81.5486ZM61.987 61.221C61.987 59.8231 60.8776 58.7966 58.3612 58.7966C54.2797 58.7966 51.6274 61.4578 51.6274 64.7531C51.6274 66.882 53.3853 68.6497 56.5982 68.6497C58.8102 68.6497 60.2894 67.5541 60.2894 67.5541C57.4737 67.8565 54.0148 67.5541 54.0148 64.5267C54.0148 64.4057 54.0217 64.2865 54.0303 64.1673C57.8728 64.9691 61.987 63.9996 61.987 61.2227V61.221ZM58.1342 60.2205C59.1765 60.2205 59.7441 60.6007 59.7441 61.3264C59.7441 63.2549 56.0031 63.127 54.3536 62.7883C54.9333 61.3454 56.2439 60.2188 58.1342 60.2188V60.2205Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M60.2876 67.5496C65.7314 64.5118 70.4597 59.8445 73.8137 55.8096C71.4022 63.392 65.599 67.4718 60.2876 67.5496Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M124.435 16.7684C128.355 16.7684 129.936 19.509 129.936 21.3925H118.933C118.933 19.4866 120.533 16.7684 124.434 16.7684M129.048 29.8494C128.316 31.2784 126.639 32.2461 124.473 32.2461C120.383 32.2461 118.766 29.3154 118.723 26.7061H139.041C139.098 26.3381 139.248 25.2944 139.248 24.4805C139.248 15.2633 132.936 10.0586 124.403 10.0586C115.409 10.0586 109.119 15.2633 109.119 24.4805C109.119 33.6976 115.409 38.9024 124.456 38.9024C133.503 38.9024 137.531 33.981 138.648 29.8494H129.05H129.048Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M157.187 16.7684C161.107 16.7684 162.688 19.509 162.688 21.3925H151.685C151.685 19.4866 153.285 16.7684 157.186 16.7684M161.8 29.8494C161.068 31.2784 159.391 32.2461 157.225 32.2461C153.135 32.2461 151.518 29.3154 151.475 26.7061H171.792C171.849 26.3381 171.998 25.2944 171.998 24.4805C171.998 15.2633 165.686 10.0586 157.153 10.0586C148.159 10.0586 141.869 15.2633 141.869 24.4805C141.869 33.6976 148.159 38.9024 157.206 38.9024C166.254 38.9024 170.282 33.981 171.398 29.8494H161.8Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M107.029 10.8809H100.589L93.4908 18.1385L86.394 10.8809H79.9526V17.3505L87.1784 24.4819L79.9544 31.6117V38.0813H86.394L93.4908 30.8237L100.589 38.0813H107.029V31.6117L99.8049 24.4819L107.029 17.3505V10.8809Z", fill: "#FF7375" }),
+                React.createElement("path", { d: "M44.0494 0H34.5894V38.0817H44.0494V0Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M66.8768 10.8818V25.0272C66.8768 27.1717 66.5827 28.2137 65.7089 29.2522C64.8644 30.2562 63.5383 30.7296 62.0694 30.7296C60.6005 30.7296 59.2744 30.2562 58.4282 29.2522C57.5544 28.2137 57.262 27.1717 57.262 25.0272V10.8818H47.8364V25.8671C47.8364 30.0799 48.478 32.8292 50.4921 35.1671C52.6215 37.6382 55.874 38.6214 59.0577 38.6214C62.7867 38.6214 65.3701 37.2131 67.1555 35.1412L67.1606 38.084H76.3007V10.8818H66.8751H66.8768Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M15.6228 30.6207C11.9746 30.6207 9.38432 27.9924 9.38432 24.5053C9.38432 21.0182 11.8164 18.3899 15.6228 18.3899C19.4291 18.3899 21.8612 21.1962 21.8612 24.5053C21.8612 27.8144 19.3964 30.6207 15.6228 30.6207ZM18.3524 10.3374C14.35 10.3374 10.9151 12.1121 9.14352 14.1961L9.13836 10.88H0V48.9617H9.42216V35.326C11.6324 37.7159 14.7094 38.6248 17.8226 38.6248C27.1571 38.6248 31.4863 31.5365 31.4863 24.4794C31.4863 15.7685 25.9256 10.334 18.3541 10.334", fill: "#221C46" }),
+                React.createElement("path", { d: "M0.145996 65.4138V63.869C0.145996 60.7811 2.6486 58.8232 5.31116 58.8232H7.95652V68.6452H6.41884V66.8135L5.72224 67.5134C5.00672 68.2132 4.18456 68.7886 2.93412 68.7886C1.39644 68.7886 0.145996 67.8019 0.145996 65.4121V65.4138ZM6.41884 65.2704V60.2246H5.31116C3.20244 60.2246 1.68368 61.6261 1.68368 63.869V65.4138C1.68368 66.9587 2.38028 67.3889 3.20244 67.3889C4.18628 67.3889 5.31116 66.4005 5.865 65.8441L6.41884 65.2687V65.2704Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M92.4741 64.4339V62.7647C92.4741 60.0172 94.5656 58.5449 96.6572 58.5449C97.7648 58.5449 98.8914 58.9043 99.4453 59.2448V61.7763H98.0504V60.2315C97.7648 60.088 97.1921 59.9446 96.6572 59.9446C95.264 59.9446 94.0118 60.717 94.0118 62.763V64.4322C94.0118 66.2639 94.9767 67.2506 96.6572 67.2506C97.7648 67.2506 98.6764 66.8912 99.177 66.6216H99.3025V68.023C98.7487 68.2926 97.7648 68.652 96.6572 68.652C94.1374 68.652 92.4741 67.2523 92.4741 64.4322V64.4339Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M101.339 63.4645C101.339 60.52 102.732 58.5449 105.592 58.5449C108.596 58.5449 109.846 60.52 109.846 63.4645C109.846 66.6786 108.453 68.6537 105.592 68.6537C102.589 68.6537 101.339 66.6786 101.339 63.4645ZM108.31 63.4645C108.31 61.2924 107.684 59.9446 105.594 59.9446C103.504 59.9446 102.878 61.2907 102.878 63.4645C102.878 65.6384 103.504 67.254 105.594 67.254C107.684 67.254 108.31 65.6384 108.31 63.4645Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M112.511 58.6864H114.048V60.5181L114.745 59.8182C115.441 59.1184 116.282 58.543 117.533 58.543C118.783 58.543 119.678 59.0821 120.036 60.5181H120.178L120.894 59.8182C121.609 59.1357 122.413 58.543 123.682 58.543C125.22 58.543 126.327 59.3862 126.327 61.9195V68.5101H124.79V61.9195C124.79 60.3746 124.093 59.9444 123.252 59.9444C122.287 59.9444 121.303 60.9328 120.749 61.4892L120.177 62.0646V68.5101H118.658V61.9195C118.658 60.3746 117.942 59.9444 117.12 59.9444C116.136 59.9444 115.154 60.9328 114.6 61.4892L114.046 62.0646V68.5101H112.509V58.6881L112.511 58.6864Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M129.614 58.6864H131.152V60.5181L131.849 59.8182C132.564 59.0994 133.386 58.543 134.637 58.543C136.174 58.543 137.425 59.5297 137.425 61.9195V63.4643C137.425 66.5522 134.922 68.5101 132.26 68.5101H131.152V71.8866H129.614V58.6881V58.6864ZM131.152 62.0629V67.1087H132.26C134.351 67.1087 135.887 65.709 135.887 63.4643V61.9195C135.887 60.3746 135.19 59.9444 134.349 59.9444C133.384 59.9444 132.258 60.9328 131.704 61.4892L131.15 62.0646L131.152 62.0629Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M139.533 65.2771V63.7323C139.533 60.6443 142.036 58.6865 144.698 58.6865H147.344V68.5085H145.806V66.6768L145.109 67.3766C144.394 68.0765 143.572 68.6519 142.321 68.6519C140.784 68.6519 139.533 67.6652 139.533 65.2754V65.2771ZM145.806 65.1337V60.0879H144.698C142.59 60.0879 141.071 61.4893 141.071 63.7323V65.2771C141.071 66.8219 141.767 67.2522 142.59 67.2522C143.573 67.2522 144.698 66.2638 145.252 65.7074L145.806 65.132V65.1337Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M150.705 58.6864H152.242V60.5181L152.939 59.8182C153.635 59.1184 154.477 58.543 155.727 58.543C157.265 58.543 158.372 59.3862 158.372 61.9195V68.5101H156.835V61.9195C156.835 60.3746 156.138 59.9444 155.316 59.9444C154.332 59.9444 153.35 60.9328 152.796 61.4892L152.242 62.0646V68.5101H150.705V58.6881V58.6864Z", fill: "#221C46" }),
+                React.createElement("path", { d: "M162.286 70.4665H163.966C166.611 70.4665 167.738 69.3537 167.738 67.109V66.5526L167.595 66.6252C167.005 66.912 165.915 67.3786 164.522 67.3786C162.984 67.3786 161.591 66.4092 161.591 63.8777V58.6885H163.128V63.8777C163.128 65.4225 163.825 65.9789 164.934 65.9789C166.044 65.9789 167.169 65.5659 167.74 65.2791V58.6885H169.277V66.9656C169.277 70.3421 167.312 71.8852 163.97 71.8852H162.289V70.4665H162.286Z", fill: "#221C46" }))),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: "clip0_17957_81026" },
+                React.createElement("rect", { width: "172", height: "72", fill: "white" })),
+            React.createElement("clipPath", { id: "clip1_17957_81026" },
+                React.createElement("rect", { width: "172", height: "71.8848", fill: "white" })))));
+};

package/dist/components/multi-step/multi-step.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type RenderFooterProps = {
+    prevStep: () => void;
+    nextStep: () => void;
+};
+export declare type StepSchema = {
+    id: number;
+    header: string | React.ReactNode;
+    content: ({ prevStep, nextStep }: RenderFooterProps) => JSX.Element;
+};
+declare type MultiStepProps = {
+    steps: StepSchema[];
+    headerNavigationIsDisabled?: boolean;
+};
+export declare const MultiStep: ({ steps, headerNavigationIsDisabled }: MultiStepProps) => JSX.Element;
+export {};
+//# sourceMappingURL=multi-step.d.ts.map

package/dist/components/multi-step/multi-step.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useMemo, useState } from 'react';
+export const MultiStep = ({ steps, headerNavigationIsDisabled }) => {
+    const [currentStep, setCurrentStep] = useState(1);
+    const handleNextStep = useCallback(() => {
+        setCurrentStep(prevValue => prevValue + 1);
+    }, [currentStep]);
+    const handlePrevStep = useCallback(() => {
+        setCurrentStep(prevValue => prevValue - 1);
+    }, []);
+    const handleGoToStep = useCallback((step) => {
+        setCurrentStep(step);
+    }, []);
+    const isFirstStep = useMemo(() => {
+        return currentStep === 1;
+    }, [currentStep]);
+    const isLastStep = useMemo(() => {
+        return currentStep === steps.length;
+    }, [currentStep]);
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "header" }, steps.map(step => {
+            return (React.createElement(React.Fragment, { key: step.id },
+                step.id > 1
+                    ? (React.createElement("div", { className: `smart-line ${step.id > currentStep ? 'smart-line-next' : 'smart-line-concluded'}` }))
+                    : null,
+                React.createElement("div", { className: `header-item
+                  ${currentStep === step.id ? 'current-item' : null} 
+                  ${currentStep > step.id ? 'complete-item' : null}
+                  ${!headerNavigationIsDisabled ? 'clickable' : null}
+                `, onClick: () => {
+                        if (!headerNavigationIsDisabled) {
+                            handleGoToStep(step.id);
+                        }
+                    } }, typeof step.header === 'string'
+                    ? React.createElement("span", null, step.header)
+                    : step.header)));
+        })),
+        React.createElement("div", { className: "multi-step-content" }, steps[currentStep - 1].content({
+            prevStep: isFirstStep ? () => { } : handlePrevStep,
+            nextStep: isLastStep ? () => { } : handleNextStep
+        }))));
+};

package/dist/components/navbar/navbar.js

@@ -4,15 +4,18 @@ import { Icon } from '../../atoms/icon';
 import { Image } from '../../atoms/image';
 export const Navbar = (props) => {
     const { image, dropdown, showUserIcon = true, items } = props;
-    const dropdownWithNavItems = Object.assign(Object.assign({}, dropdown), { items: [...(items || []).map(item => ({ separator: true, element: React.createElement("div", { className: "nav-item-mobile" }, item) })), ...dropdown.items] });
+    const dropdownWithNavItems = {
+        ...dropdown,
+        items: [...(items || []).map(item => ({ separator: true, element: React.createElement("div", { className: "nav-item-mobile" }, item) })), ...dropdown.items]
+    };
     return (React.createElement("div", { className: "navbar" },
         React.createElement("div", { className: "navbar-profile" }, items === null || items === void 0 ? void 0 :
             items.map((item, index) => React.createElement("div", { key: `nav-bar-item-${index}`, className: "mx-2 d-flex align-items-center justify-content-center" }, item)),
             image
-                ? React.createElement(Image, Object.assign({}, image, { circle: true, width: "38px", height: "38px", objectFit: "cover", className: "me-2" }))
+                ? React.createElement(Image, { ...image, circle: true, width: "38px", height: "38px", objectFit: "cover", className: "me-2" })
                 : (showUserIcon &&
                     React.createElement("div", { className: "image-profile circle me-2" },
                         React.createElement(Icon, { icon: "faUserAlt" })))),
         React.createElement("div", { className: "dropdown-seaction" },
-            React.createElement(Dropdown, Object.assign({}, dropdownWithNavItems)))));
+            React.createElement(Dropdown, { ...dropdownWithNavItems }))));
 };

package/dist/components/page-create/page-create.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormBuilderGroup } from '../form-builder/form-builder.types';
 import { DropdownItemProps } from '../../molecules/dropdown/dropdown-item';
-import { ModalProps } from '../modal/modal';
+import { ModalProps } from '../../molecules/modal/modal';
 import { FormikHelpers } from 'formik';
 declare type ExtraButtons = {
     label: string;

package/dist/components/page-create/page-create.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Modal } from '../modal/modal';
+import { Modal } from '../../molecules/modal/modal';
 import { Button, Col, Dropdown, FormBuilder, Icon, Link, Row, Typography } from '../../';
 export const PageCreate = (props) => {
     const { title, extraButtons = [], cancelButton, onSubmit, data, modal } = props;
     return (React.createElement(React.Fragment, null,
         React.createElement(Row, { className: "page-title-container mb-3" },
-            React.createElement(Col, null,
+            React.createElement(Col, { className: "d-flex align-items-center" },
                 React.createElement(Typography, { variant: "h4", tag: "h1" }, title)),
             React.createElement(Col, { className: "ms-auto" },
                 React.createElement("div", { className: "extra-buttons-container" },

package/dist/components/page-list/column-management-components/modal-config.js

@@ -8,7 +8,8 @@ export const ModalConfig = ({ title, description = '', items, defaultConfig, can
     const [columns, setColumns] = React.useState(items);
     const handleCheckColumn = React.useCallback(id => {
         setColumns(prev => prev.map(curr => curr.id === id
-            ? Object.assign(Object.assign({}, curr), { show: !curr.show }) : curr));
+            ? { ...curr, show: !curr.show }
+            : curr));
     }, []);
     const columnsVisible = Array.from(columns.filter(item => item.show));
     const columnsOrdered = [...columns];

package/dist/components/page-list/filter-components/button-filter-clear.js

@@ -13,7 +13,7 @@ export const ButtonFilterClear = (props) => {
         const whiteList = ['tab'];
         const elements = objectHelper.destruct(search, ...whiteList);
         navigate({
-            search: uriHelper.stringify(Object.assign(Object.assign({}, elements), { page: 1 }))
+            search: uriHelper.stringify({ ...elements, page: 1 })
         });
     }, [search, navigate]);
     return (React.createElement(Button, { color: color, className: classes, onClick: handleClick, outline: outline },

package/dist/components/page-list/filter-components/filter-form.js

@@ -13,14 +13,14 @@ export const FilterForm = (props) => {
             for (let i = 0; i < count; i++) {
                 // @ts-ignore
                 if (whiteList.includes((fields[i]).localName) && fields[i].name) {
-                    Object.assign(elements, {
+                    Object.assign(elements || {}, {
                         // @ts-ignore
                         [fields[i].name]: fields[i].value
                     });
                 }
             }
             navigate({
-                search: uriHelper.stringify(Object.assign(Object.assign({}, elements), { page: 1 }))
+                search: uriHelper.stringify({ ...elements, page: 1 })
             });
         } }, children));
 };

package/dist/components/page-list/filters/filter-async-select-group/filter-async-select.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ActionMeta, OnChangeValue } from 'react-select';
+import { columns } from '../../../../atoms/col';
+declare type Option = {
+    label: string | number;
+    value: string | number;
+};
+declare type FilterAsyncSelectProps = {
+    label?: string;
+    message?: string;
+    name?: string;
+    placeholder: string;
+    defaultOptions?: Option[];
+    id?: string;
+    labelName?: string;
+    value?: Option;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    cacheOptions?: boolean;
+    size?: columns;
+    loadOptions?: (newValue: string) => void;
+    onChange?: (newValue: OnChangeValue<any, any>, actionMeta: ActionMeta<any>) => void;
+};
+export declare const FilterAsyncSelect: React.FC<FilterAsyncSelectProps>;
+export {};
+//# sourceMappingURL=filter-async-select.d.ts.map

package/dist/components/page-list/filters/filter-async-select-group/filter-async-select.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import AsyncSelect from 'react-select/async';
+export const FilterAsyncSelect = (props) => {
+    const { label, message, defaultOptions = [], name = '', id = name, value = undefined, placeholder, isDisabled = false, isLoading = false, isClearable = false, isSearchable = true, isMulti = false, cacheOptions = false, loadOptions, onChange } = props;
+    const handleChange = React.useCallback((event, action) => {
+        if (onChange) {
+            onChange({
+                target: {
+                    name,
+                    value: event
+                },
+                currentTarget: {
+                    name,
+                    value: JSON.stringify(event)
+                }
+            }, action);
+        }
+    }, []);
+    const finalDefaultOptions = value
+        ? [
+            value
+        ]
+        : defaultOptions;
+    return (React.createElement("div", { className: "form-group label-margin" },
+        Boolean(label) && React.createElement("label", { className: "form-label new-label", htmlFor: name }, label),
+        React.createElement(AsyncSelect, { placeholder: placeholder, className: "form-builder-select", classNamePrefix: "form-builder", defaultOptions: finalDefaultOptions, name: name, id: id, defaultValue: value, value: value, isDisabled: isDisabled, isLoading: isLoading, isClearable: isClearable, isSearchable: isSearchable, isMulti: isMulti, cacheOptions: cacheOptions, loadOptions: loadOptions, onChange: handleChange }),
+        Boolean(message) && React.createElement("label", { className: "form-label new-message", htmlFor: name }, message)));
+};