empower-container 0.1.3 → 0.1.6

package/dist/cjs/MenuBar.js

@@ -28,7 +28,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable jsx-a11y/anchor-is-valid */
 var react_1 = require("react");
 require("../scss/style.scss");
-require("../scss/library/menubar.scss");
 // Imports
 var Asset_1 = require("./assets/Asset");
 var Constant_1 = require("./constants/Constant");
@@ -60,15 +59,16 @@ var MenuBar = function (_a) {
     var _s = (0, react_1.useState)(undoButton && undoButton.show ? true : false), undoShow = _s[0], setUndoShow = _s[1];
     var _t = (0, react_1.useState)(false), doneTimer = _t[0], setDoneTimer = _t[1];
     (0, react_1.useEffect)(function () {
+        var filteredMonthList = [];
         if (dropdown && dropdown.minMonth) {
-            var filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
+            filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
             if (filteredMonthList.length > 0) {
                 minMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMinMonthIdx(minMonthIdx);
             }
         }
         if (dropdown && dropdown.maxMonth) {
-            var filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
+            filteredMonthList = __spreadArray([], Constant_1.MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
             if (filteredMonthList.length > 0) {
                 maxMonthIdx = Constant_1.MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMaxMonthIdx(maxMonthIdx);
@@ -330,6 +330,11 @@ var MenuBar = function (_a) {
     var dateMonthlyPickerHandler = function (e, action, data) {
         if (data === void 0) { data = ''; }
         var _a = __assign({}, dropdown), maxYear = _a.maxYear, minYear = _a.minYear;
+        var newDateValue = null;
+        var standardDate = null;
+        var selectedMonthDate = null;
+        var monthIdx = null;
+        var fullYear = null;
         if (action === 'next') {
             if (!maxYear || (maxYear && parseInt(maxYear) >= calendarYear + 1)) {
                 calendarYear += 1;
@@ -343,15 +348,14 @@ var MenuBar = function (_a) {
             }
         }
         else if (action === 'month-selection') {
-            var newDateValue = (0, DatetimeFormatter_1.default)(data + ' ' + calendarYear, 'month-year');
+            newDateValue = (0, DatetimeFormatter_1.default)(data + ' ' + calendarYear, 'month-year');
             actionRequestHandler(e, 'dropdown', newDateValue);
         }
         else if (action === 'next-month') {
-            var standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
-            var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-            var monthIdx = selectedMonthDate.getMonth();
-            var fullYear = selectedMonthDate.getFullYear();
+            standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx + 1 < 12) {
                 monthIdx = monthIdx + 1;
             }
@@ -360,16 +364,15 @@ var MenuBar = function (_a) {
                 fullYear = fullYear + 1;
             }
             if ((!maxYear && !maxMonthIdx) || fullYear < parseInt(maxYear) || (fullYear === parseInt(maxYear) && monthIdx <= parseInt(maxMonthIdx))) {
-                var newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
+                newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
                 actionRequestHandler(e, 'dropdown', newDateValue, false);
             }
         }
         else if (action === 'prev-month') {
-            var standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
-            var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-            var monthIdx = selectedMonthDate.getMonth();
-            var fullYear = selectedMonthDate.getFullYear();
+            standardDate = (0, DatetimeFormatter_1.default)(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx - 1 >= 0) {
                 monthIdx = monthIdx - 1;
             }
@@ -378,8 +381,8 @@ var MenuBar = function (_a) {
                 fullYear = fullYear - 1;
             }
             if ((!minYear && !minMonthIdx) || fullYear > parseInt(minYear) || (fullYear === parseInt(minYear) && monthIdx >= parseInt(minMonthIdx))) {
-                var newDateValue = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
-                actionRequestHandler(e, 'dropdown', newDateValue, false);
+                var newDateValue_1 = (0, DatetimeFormatter_1.default)(Constant_1.MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
+                actionRequestHandler(e, 'dropdown', newDateValue_1, false);
             }
         }
     };
@@ -451,7 +454,7 @@ var MenuBar = function (_a) {
                                             // Title Information Configuration
                                             config && config.titleDescription ? ((0, jsx_runtime_1.jsx)("p", { children: config.titleDescription })) : null] })), 
                                     // Information Configuration
-                                    config && config.nativePopover === undefined && config.showInfo && config.showInfo.constructor === Boolean ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({ href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: (0, jsx_runtime_1.jsx)("i", { className: "belt-icon" }) })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: (0, jsx_runtime_1.jsx)(Information_1.default, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) : null, 
+                                    config && config.showInfo.constructor === Boolean && config.showInfo === true ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-belt-info" }, { children: [(0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-info-icon" }, { children: Asset_1.SVG_INFORMATION })) })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: (0, jsx_runtime_1.jsx)(Information_1.default, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) })) : null, 
                                     // Additional title on the modal
                                     config && config.addedTitle ? ((0, jsx_runtime_1.jsx)("p", { children: config.addedTitle })) : null] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("a", __assign({ className: "belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), (0, jsx_runtime_1.jsx)("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), (0, jsx_runtime_1.jsx)(Select_1.Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "popover em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
                                                         return (0, jsx_runtime_1.jsx)("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);

package/dist/cjs/Modal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import '../scss/style.scss';
 interface IModalProps {
     id?: string;
     show: boolean;

package/dist/cjs/Modal.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_dom_1 = __importDefault(require("react-dom"));
 var MenuBar_1 = __importDefault(require("./MenuBar"));
+require("../scss/style.scss");
 var Modal = function (_a) {
     var id = _a.id, show = _a.show, hideMenuBar = _a.hideMenuBar, config = _a.config, getActions = _a.getActions, children = _a.children, button = _a.button, dropdown = _a.dropdown, search = _a.search, pagination = _a.pagination, pivot = _a.pivot, check = _a.check, toggle = _a.toggle, undoButton = _a.undoButton, mainButton = _a.mainButton, buttonFooter = _a.buttonFooter, info = _a.info, customClass = _a.customClass;
     var sendActions = function (actions, data) {
@@ -26,7 +27,6 @@ var Modal = function (_a) {
         if (addedParam === void 0) { addedParam = null; }
         return getActions ? getActions(action, data, addedParam) : false;
     };
-    console.log(hideMenuBar, 'hideMenuBar');
-    return (show ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", __assign({ className: "e-modal" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "e-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? ((0, jsx_runtime_1.jsx)(MenuBar_1.default, __assign({ config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "card-content" }, { children: children })) }))) : (0, jsx_runtime_1.jsx)("div", __assign({ className: "card-content" }, { children: children })) })) })) })), document.getElementById('root')) : null);
+    return (show ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-modal " + customClass }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? ((0, jsx_runtime_1.jsx)(MenuBar_1.default, __assign({ config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card-content" }, { children: children })) }))) : (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-card-content card-content" }, { children: children })) })) })) })), document.getElementById('root')) : null);
 };
 exports.default = Modal;

package/dist/cjs/assets/Asset.d.ts

@@ -12,3 +12,4 @@ export declare const SVG_ARROWLEFT: JSX.Element;
 export declare const SVG_ARROWDOWN: JSX.Element;
 export declare const SVG_REQUEST: JSX.Element;
 export declare const SVG_ADD: JSX.Element;
+export declare const SVG_INFORMATION: JSX.Element;

package/dist/cjs/assets/Asset.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
+exports.SVG_INFORMATION = exports.SVG_ADD = exports.SVG_REQUEST = exports.SVG_ARROWDOWN = exports.SVG_ARROWLEFT = exports.SVG_ARROWRIGHT = exports.SVG_UNDO = exports.SVG_SUBMIT = exports.SVG_CLOSE_GRAY = exports.SVG_CHECK_NEUTRAL = exports.SVG_CHECK_INACTIVE = exports.SVG_CHECK_ACTIVE = exports.SVG_CHECK = exports.SVG_BACK = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 exports.SVG_BACK = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.69612 4.29289C8.08664 4.68342 8.08664 5.31658 7.69612 5.70711L3.40323 10L7.69612 14.2929C8.08664 14.6834 8.08664 15.3166 7.69612 15.7071C7.3056 16.0976 6.67243 16.0976 6.28191 15.7071L1.28191 10.7071C0.891382 10.3166 0.891382 9.68342 1.28191 9.29289L6.28191 4.29289C6.67243 3.90237 7.3056 3.90237 7.69612 4.29289Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.989014 10C0.989014 9.44772 1.43673 9 1.98901 9H17.989C18.5413 9 18.989 9.44772 18.989 10C18.989 10.5523 18.5413 11 17.989 11H1.98901C1.43673 11 0.989014 10.5523 0.989014 10Z", fill: "#5C7FF3" })] }));
 exports.SVG_CHECK = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.6823 4.26895C18.0861 4.64578 18.1079 5.27857 17.7311 5.68232L8.39773 15.6823C8.2086 15.885 7.94385 16 7.66667 16C7.38949 16 7.12474 15.885 6.93562 15.6823L2.26895 10.6823C1.89211 10.2786 1.91393 9.64578 2.31769 9.26895C2.72144 8.89211 3.35423 8.91393 3.73106 9.31769L7.66667 13.5344L16.2689 4.31769C16.6458 3.91393 17.2786 3.89211 17.6823 4.26895Z", fill: "#393F5A" }) }));
@@ -26,3 +26,4 @@ exports.SVG_ARROWLEFT = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "20", he
 exports.SVG_ARROWDOWN = (0, jsx_runtime_1.jsx)("svg", __assign({ width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L6.70711 6.70711C6.31658 7.09763 5.68342 7.09763 5.29289 6.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", fill: "#9FA5B7" }) }));
 exports.SVG_REQUEST = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 14C12 14.5523 11.5523 15 11 15L5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13L11 13C11.5523 13 12 13.4477 12 14Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 4H18V18H2V4H6L6 2H2C0.895431 2 0 2.89543 0 4V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V4C20 2.89543 19.1046 2 18 2H14V4Z", fill: "#393F5A" })] }));
 exports.SVG_ADD = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }), (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" })] }));
+exports.SVG_INFORMATION = (0, jsx_runtime_1.jsxs)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "1", y: "1", width: "18", height: "18", rx: "9", stroke: "#9FA5B7", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 9V14", stroke: "#9FA5B7", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "6", r: "1", fill: "#9FA5B7" })] }));

package/dist/cjs/inputs/Input.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../../scss/style.scss';
-import '../../scss/library/input.scss';
 interface IProps {
     config: {
         id: string | keyof Object;

package/dist/cjs/inputs/Input.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 require("../../scss/style.scss");
-require("../../scss/library/input.scss");
 var sanitizeValue = function (txt, props) {
     var pattern = null;
     var newTxt = txt;

package/dist/cjs/inputs/InputSelectionHandler.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const InputSelectionHandler: (props: any) => JSX.Element | null;
+declare const InputSelectionHandler: (props: any) => JSX.Element;
 export default InputSelectionHandler;

package/dist/cjs/inputs/Select.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../../scss/style.scss';
-import '../../scss/library/select.scss';
 interface IPropsPopover {
     id: String;
     className: String;

package/dist/cjs/inputs/Select.js

@@ -24,7 +24,6 @@ exports.Popover = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 require("../../scss/style.scss");
-require("../../scss/library/select.scss");
 // Imports
 var Asset_1 = require("../assets/Asset");
 var Popover = function (_a) {
@@ -199,9 +198,10 @@ var Dropdown = function (_a) {
     * @param {*} values - selected values of multi-select
     */
     function filterOptions(search, values) {
+        var selectedOptionsVariable = null;
         if (type === 'multi-select') {
             if (optionsArray && optionsArray.constructor === Array) {
-                var selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (options && options.constructor === Array && options.length > 0) {
                     optionsArray = options.filter(function (item) {
                         return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
@@ -214,7 +214,7 @@ var Dropdown = function (_a) {
             }
             else if (optionsArray && optionsArray.constructor === Object) {
                 var optionsArrayCopy_1 = {};
-                var selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (selectedOptionsVariable.length > 0) {
                     selectedOptionsVariable = selectedOptionsVariable.filter(function (item) {
                         return item.label.toLowerCase().search(search.toLowerCase()) > -1;

package/dist/esm/DatetimeFormatter.js

@@ -131,6 +131,8 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         newFormat = dayName + ", " + dayDate + " " + monthName + " " + year;
                         break;
                     case "momentsAgo":
+                        var diff = 0;
+                        var diffMinute = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -139,28 +141,28 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                             else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    var diff = todayTS - dateTS;
+                                    diff = todayTS - dateTS;
                                     if (diff === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    var diffHour = diff / 3600;
-                                    diffHour = ~~diffHour;
-                                    newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
+                                    var diffHour_1 = diff / 3600;
+                                    diffHour_1 = ~~diffHour_1;
+                                    newFormat = diffHour_1 === 1 ? "An hour ago" : diffHour_1 + " hours ago";
                                 }
                                 else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        var diff = todayTS - dateTS;
+                                        diff = todayTS - dateTS;
                                         if (diff === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        var diffMinute = diff / 60;
+                                        diffMinute = diff / 60;
                                         diffMinute = ~~diffMinute;
                                         newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
                                     }
                                     else {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0 || diff <= 10) {
+                                        var diff_1 = todayTS - dateTS;
+                                        if (diff_1 === 0 || diff_1 <= 10) {
                                             newFormat = "Few seconds ago";
                                         }
                                         else {
@@ -175,6 +177,7 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         }
                         break;
                     case "momentsAgoConvo":
+                        var diffHour = 0;
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
@@ -183,28 +186,28 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                             else {
                                 //check if hour has been passed
                                 if (todayTS >= dateTS + 3600) {
-                                    var diff = todayTS - dateTS;
-                                    if (diff === 0) {
+                                    var diff_2 = todayTS - dateTS;
+                                    if (diff_2 === 0) {
                                         newFormat = "An hour ago";
                                     }
-                                    var diffHour = diff / 3600;
+                                    diffHour = diff_2 / 3600;
                                     diffHour = ~~diffHour;
                                     newFormat = diffHour === 1 ? "An hour ago" : diffHour + " hours ago";
                                 }
                                 else {
                                     //check if a minute has been passed
                                     if (todayTS >= dateTS + 60) {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0) {
+                                        var diff_3 = todayTS - dateTS;
+                                        if (diff_3 === 0) {
                                             newFormat = "A minute ago";
                                         }
-                                        var diffMinute = diff / 60;
-                                        diffMinute = ~~diffMinute;
-                                        newFormat = diffMinute === 1 ? "A minute ago" : diffMinute + " minutes ago";
+                                        var diffMinute_1 = diff_3 / 60;
+                                        diffMinute_1 = ~~diffMinute_1;
+                                        newFormat = diffMinute_1 === 1 ? "A minute ago" : diffMinute_1 + " minutes ago";
                                     }
                                     else {
-                                        var diff = todayTS - dateTS;
-                                        if (diff === 0 || diff <= 10) {
+                                        var diff_4 = todayTS - dateTS;
+                                        if (diff_4 === 0 || diff_4 <= 10) {
                                             newFormat = "Few moments ago";
                                         }
                                         else {
@@ -223,11 +226,11 @@ var datetimeFormatter = function (timestamp, format, todayServer, type, getServe
                         if (todayTS >= dateTS) {
                             //check if 24hours has been passed
                             if (todayTS >= (dateTS + 86400)) {
-                                var diff = todayTS - dateTS;
-                                if (diff === 0) {
+                                var diff_5 = todayTS - dateTS;
+                                if (diff_5 === 0) {
                                     newFormat = "1 day";
                                 }
-                                var diffDay = diff / 86400;
+                                var diffDay = diff_5 / 86400;
                                 diffDay = ~~diffDay;
                                 newFormat = diffDay === 1 ? "1 day" : diffDay + " days";
                             }

package/dist/esm/Information.js

@@ -11,11 +11,12 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-// @ts-ignore
-import renderHtml from 'react-render-html';
 var Information = function (_a) {
     var items = _a.items, listRow = _a.listRow, desc = _a.desc, title = _a.title, hide = _a.hide;
     var _b = useState(null), rowAnchorEl = _b[0], setRowAnchorEl = _b[1];
+    var renderHtml = function (html) {
+        return _jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+    };
     var showRowDetails = function (e, idx) {
         e && e.preventDefault();
         if (rowAnchorEl === idx) {
@@ -27,7 +28,7 @@ var Information = function (_a) {
         setRowAnchorEl(rowAnchorEl);
     };
     var View = function () {
-        return _jsx(React.Fragment, { children: _jsx("div", __assign({ className: "popover popover-i" }, { children: typeof desc != 'undefined' && desc ? (_jsxs("div", __assign({ className: "popover-i-content" }, { children: [_jsxs("div", __assign({ className: "popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "popover-i-close", onClick: hide })] })), _jsx("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : (_jsxs("div", __assign({ className: "popover-i-content" }, { children: [_jsxs("div", __assign({ className: "popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [_jsx("div", { children: _jsx("h6", { children: item }) }), rowAnchorEl === key ? (_jsx("img", { src: "/images/icons/icon-arrowup-gray.svg", alt: "" })) : (_jsx("img", { src: "/images/icons/icon-arrowdown-gray.svg", alt: "" }))] })), rowAnchorEl === key ? (_jsx("div", __assign({ className: "popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
+        return _jsx(React.Fragment, { children: _jsx("div", __assign({ className: "em-popover-i" }, { children: typeof desc != 'undefined' && desc ? (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), _jsx("div", { children: typeof items != 'undefined' && items ? renderHtml(items) : '' })] }))) : (_jsxs("div", __assign({ className: "em-popover-i-content" }, { children: [_jsxs("div", __assign({ className: "em-popover-i-title" }, { children: [_jsx("h6", { children: title }), _jsx("div", { className: "em-popover-i-close", onClick: hide })] })), listRow ? (listRow.length >= 1 ? (listRow.map(function (item, key) { return (_jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: "em-popover-i-category", onClick: function (event) { return showRowDetails(event, key); } }, { children: [_jsx("div", { children: _jsx("h6", { children: item }) }), rowAnchorEl === key ? (_jsx("img", { src: "/images/icons/icon-arrowup-gray.svg", alt: "" })) : (_jsx("img", { src: "/images/icons/icon-arrowdown-gray.svg", alt: "" }))] })), rowAnchorEl === key ? (_jsx("div", __assign({ className: "em-popover-i-details" }, { children: item === 'COMPANY POLICY' ? (typeof items != 'undefined' && typeof items.companyPolicy != 'undefined' && items.companyPolicy ? renderHtml(items.companyPolicy) : '') :
                                         (item === 'SYSTEM POLICY' ? (typeof items != 'undefined' && typeof items.systemPolicy != 'undefined' && items.systemPolicy ? renderHtml(items.systemPolicy) : '') :
                                             (typeof items != 'undefined' && typeof items.instruction != 'undefined' && items.instruction ? renderHtml(items.instruction) : '')) }))) : null] }, key)); })) : null) : null] }))) })) });
     };

package/dist/esm/MenuBar.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../scss/style.scss';
-import '../scss/library/menubar.scss';
 interface IMenuBarProps {
     config?: any;
     info?: any;

package/dist/esm/MenuBar.js

@@ -23,9 +23,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useState, Fragment, useEffect } from "react";
 import '../scss/style.scss';
-import '../scss/library/menubar.scss';
 // Imports
-import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN } from './assets/Asset';
+import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN, SVG_INFORMATION } from './assets/Asset';
 import { CHECKBOX, MONTH_LIST, INFO_LOADER, PAGE_OPTION } from "./constants/Constant";
 import Information from './Information';
 import Input from './inputs/InputSelectionHandler';
@@ -55,15 +54,16 @@ var MenuBar = function (_a) {
     var _s = useState(undoButton && undoButton.show ? true : false), undoShow = _s[0], setUndoShow = _s[1];
     var _t = useState(false), doneTimer = _t[0], setDoneTimer = _t[1];
     useEffect(function () {
+        var filteredMonthList = [];
         if (dropdown && dropdown.minMonth) {
-            var filteredMonthList = __spreadArray([], MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
+            filteredMonthList = __spreadArray([], MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.minMonth.toLowerCase()); });
             if (filteredMonthList.length > 0) {
                 minMonthIdx = MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMinMonthIdx(minMonthIdx);
             }
         }
         if (dropdown && dropdown.maxMonth) {
-            var filteredMonthList = __spreadArray([], MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
+            filteredMonthList = __spreadArray([], MONTH_LIST, true).filter(function (item) { return (item.value.toLowerCase() === dropdown.maxMonth.toLowerCase()); });
             if (filteredMonthList.length > 0) {
                 maxMonthIdx = MONTH_LIST.indexOf(filteredMonthList[0]);
                 setMaxMonthIdx(maxMonthIdx);
@@ -325,6 +325,11 @@ var MenuBar = function (_a) {
     var dateMonthlyPickerHandler = function (e, action, data) {
         if (data === void 0) { data = ''; }
         var _a = __assign({}, dropdown), maxYear = _a.maxYear, minYear = _a.minYear;
+        var newDateValue = null;
+        var standardDate = null;
+        var selectedMonthDate = null;
+        var monthIdx = null;
+        var fullYear = null;
         if (action === 'next') {
             if (!maxYear || (maxYear && parseInt(maxYear) >= calendarYear + 1)) {
                 calendarYear += 1;
@@ -338,15 +343,14 @@ var MenuBar = function (_a) {
             }
         }
         else if (action === 'month-selection') {
-            var newDateValue = datetimeFormatter(data + ' ' + calendarYear, 'month-year');
+            newDateValue = datetimeFormatter(data + ' ' + calendarYear, 'month-year');
             actionRequestHandler(e, 'dropdown', newDateValue);
         }
         else if (action === 'next-month') {
-            var standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
-            var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-            var monthIdx = selectedMonthDate.getMonth();
-            var fullYear = selectedMonthDate.getFullYear();
+            standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx + 1 < 12) {
                 monthIdx = monthIdx + 1;
             }
@@ -355,16 +359,15 @@ var MenuBar = function (_a) {
                 fullYear = fullYear + 1;
             }
             if ((!maxYear && !maxMonthIdx) || fullYear < parseInt(maxYear) || (fullYear === parseInt(maxYear) && monthIdx <= parseInt(maxMonthIdx))) {
-                var newDateValue = datetimeFormatter(MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
+                newDateValue = datetimeFormatter(MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
                 actionRequestHandler(e, 'dropdown', newDateValue, false);
             }
         }
         else if (action === 'prev-month') {
-            var standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
-            var selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
-            // selectedMonthDate = new Date(selectedMonthDate);
-            var monthIdx = selectedMonthDate.getMonth();
-            var fullYear = selectedMonthDate.getFullYear();
+            standardDate = datetimeFormatter(dropdown.selection.startDate, 'date-standard');
+            selectedMonthDate = new Date(new Date(standardDate).toLocaleString('en-US', { timeZone: 'Asia/Manila' })); //making the date picked as the default gmt so that the new date wont adjust by timezone;
+            monthIdx = selectedMonthDate.getMonth();
+            fullYear = selectedMonthDate.getFullYear();
             if (monthIdx - 1 >= 0) {
                 monthIdx = monthIdx - 1;
             }
@@ -373,8 +376,8 @@ var MenuBar = function (_a) {
                 fullYear = fullYear - 1;
             }
             if ((!minYear && !minMonthIdx) || fullYear > parseInt(minYear) || (fullYear === parseInt(minYear) && monthIdx >= parseInt(minMonthIdx))) {
-                var newDateValue = datetimeFormatter(MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
-                actionRequestHandler(e, 'dropdown', newDateValue, false);
+                var newDateValue_1 = datetimeFormatter(MONTH_LIST[monthIdx].value + ' ' + fullYear, 'month-year');
+                actionRequestHandler(e, 'dropdown', newDateValue_1, false);
             }
         }
     };
@@ -446,7 +449,7 @@ var MenuBar = function (_a) {
                                             // Title Information Configuration
                                             config && config.titleDescription ? (_jsx("p", { children: config.titleDescription })) : null] })), 
                                     // Information Configuration
-                                    config && config.nativePopover === undefined && config.showInfo && config.showInfo.constructor === Boolean ? (_jsxs(Fragment, { children: [_jsx("a", __assign({ href: "#", className: "belt-info", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: _jsx("i", { className: "belt-icon" }) })), _jsx(Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: _jsx(Information, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) : null, 
+                                    config && config.showInfo.constructor === Boolean && config.showInfo === true ? (_jsx(Fragment, { children: _jsxs("div", __assign({ className: "em-belt-info" }, { children: [_jsx("a", __assign({ href: "#", onClick: function (event) { return popoverRequestHandler(event, 'info'); }, "data-testid": "menubar-information" }, { children: _jsx("div", __assign({ className: "em-info-icon" }, { children: SVG_INFORMATION })) })), _jsx(Popover, __assign({ id: "InfoPopOver", open: Boolean(infoPopover), className: Boolean(dropdownPopover) ? 'open-popover' : '', onClick: function (event) { return popoverRequestHandler(event, 'info'); } }, { children: _jsx(Information, { items: info && info.infoDetails ? info.infoDetails : info, listRow: info && info.listRow ? info.listRow : [], desc: info && info.listRow && info.listRow.length > 0 ? false : true, title: config && config.title ? config.title.toUpperCase() : null, hide: function (event) { return popoverRequestHandler(event, 'info', true); } }) }))] })) })) : null, 
                                     // Additional title on the modal
                                     config && config.addedTitle ? (_jsx("p", { children: config.addedTitle })) : null] })), _jsxs("div", __assign({ className: "em-beltleft-cta" }, { children: [mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (_jsxs(Fragment, { children: [_jsxs("a", __assign({ className: "belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } }, { children: [_jsx("div", __assign({ className: "belt-icon" }, { children: mainButton.icon ? mainButton.icon : '' })), _jsx("span", { children: mainButton.label ? mainButton.label : 'File a Request' })] })), _jsx(Popover, __assign({ id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' }, { children: _jsx("div", __assign({ className: "popover em-popover-list" }, { children: mainButton.actions.map(function (btn, idx) {
                                                         return _jsx("a", __assign({ href: "#", onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, { children: btn.label }), idx);

package/dist/esm/Modal.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import '../scss/style.scss';
 interface IModalProps {
     id?: string;
     show: boolean;

package/dist/esm/Modal.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import ReactDOM from "react-dom";
 import MenuBar from "./MenuBar";
+import '../scss/style.scss';
 var Modal = function (_a) {
     var id = _a.id, show = _a.show, hideMenuBar = _a.hideMenuBar, config = _a.config, getActions = _a.getActions, children = _a.children, button = _a.button, dropdown = _a.dropdown, search = _a.search, pagination = _a.pagination, pivot = _a.pivot, check = _a.check, toggle = _a.toggle, undoButton = _a.undoButton, mainButton = _a.mainButton, buttonFooter = _a.buttonFooter, info = _a.info, customClass = _a.customClass;
     var sendActions = function (actions, data) {
@@ -21,7 +22,6 @@ var Modal = function (_a) {
         if (addedParam === void 0) { addedParam = null; }
         return getActions ? getActions(action, data, addedParam) : false;
     };
-    console.log(hideMenuBar, 'hideMenuBar');
-    return (show ? ReactDOM.createPortal(_jsx("div", __assign({ className: "e-modal" }, { children: _jsx("div", __assign({ className: "e-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: _jsx("div", __assign({ className: "card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? (_jsx(MenuBar, __assign({ config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: _jsx("div", __assign({ className: "card-content" }, { children: children })) }))) : _jsx("div", __assign({ className: "card-content" }, { children: children })) })) })) })), document.getElementById('root')) : null);
+    return (show ? ReactDOM.createPortal(_jsx("div", __assign({ className: "em-modal " + customClass }, { children: _jsx("div", __assign({ className: "em-modal-container", "data-testid": id ? id : 'default-modal-test' }, { children: _jsx("div", __assign({ className: "em-card card-modal modal-".concat(config.modalSize ? config.modalSize : 'md') }, { children: !hideMenuBar ? (_jsx(MenuBar, __assign({ config: config, button: button, pagination: pagination, pivot: pivot, dropdown: dropdown, search: search, toggle: toggle, undoButton: undoButton, buttonFooter: buttonFooter, check: check, info: info, getActions: function (actions, data) { return sendActions(actions, data); } }, { children: _jsx("div", __assign({ className: "em-card-content" }, { children: children })) }))) : _jsx("div", __assign({ className: "em-card-content card-content" }, { children: children })) })) })) })), document.getElementById('root')) : null);
 };
 export default Modal;

package/dist/esm/assets/Asset.d.ts

@@ -12,3 +12,4 @@ export declare const SVG_ARROWLEFT: JSX.Element;
 export declare const SVG_ARROWDOWN: JSX.Element;
 export declare const SVG_REQUEST: JSX.Element;
 export declare const SVG_ADD: JSX.Element;
+export declare const SVG_INFORMATION: JSX.Element;

package/dist/esm/assets/Asset.js

@@ -23,3 +23,4 @@ export var SVG_ARROWLEFT = _jsx("svg", __assign({ width: "20", height: "20", vie
 export var SVG_ARROWDOWN = _jsx("svg", __assign({ width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6 4.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683417 12.0976 1.31658 11.7071 1.70711L6.70711 6.70711C6.31658 7.09763 5.68342 7.09763 5.29289 6.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", fill: "#9FA5B7" }) }));
 export var SVG_REQUEST = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2L6 4L14 4L14 2L6 2ZM4 4C4 5.10457 4.89543 6 6 6L14 6C15.1046 6 16 5.10457 16 4L16 2C16 0.895431 15.1046 -8.55899e-09 14 3.97233e-08L6 3.89414e-07C4.89543 4.37697e-07 4 0.895431 4 2L4 4Z", fill: "#393F5A" }), _jsx("path", { d: "M16 10C16 10.5523 15.5523 11 15 11L5 11C4.44771 11 4 10.5523 4 10C4 9.44772 4.44772 9 5 9L15 9C15.5523 9 16 9.44771 16 10Z", fill: "#393F5A" }), _jsx("path", { d: "M12 14C12 14.5523 11.5523 15 11 15L5 15C4.44772 15 4 14.5523 4 14C4 13.4477 4.44772 13 5 13L11 13C11.5523 13 12 13.4477 12 14Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 4H18V18H2V4H6L6 2H2C0.895431 2 0 2.89543 0 4V18C0 19.1046 0.895431 20 2 20H18C19.1046 20 20 19.1046 20 18V4C20 2.89543 19.1046 2 18 2H14V4Z", fill: "#393F5A" })] }));
 export var SVG_ADD = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 2C10.5523 2 11 2.44772 11 3V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V3C9 2.44772 9.44772 2 10 2Z", fill: "#393F5A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 10C2 9.44772 2.44772 9 3 9L17 9C17.5523 9 18 9.44772 18 10C18 10.5523 17.5523 11 17 11L3 11C2.44772 11 2 10.5523 2 10Z", fill: "#393F5A" })] }));
+export var SVG_INFORMATION = _jsxs("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: "9", stroke: "#9FA5B7", strokeWidth: "2" }), _jsx("path", { d: "M10 9V14", stroke: "#9FA5B7", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "1", fill: "#9FA5B7" })] }));

package/dist/esm/inputs/Input.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../../scss/style.scss';
-import '../../scss/library/input.scss';
 interface IProps {
     config: {
         id: string | keyof Object;

package/dist/esm/inputs/Input.js

@@ -12,7 +12,6 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import '../../scss/style.scss';
-import '../../scss/library/input.scss';
 var sanitizeValue = function (txt, props) {
     var pattern = null;
     var newTxt = txt;

package/dist/esm/inputs/Select.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import '../../scss/style.scss';
-import '../../scss/library/select.scss';
 interface IPropsPopover {
     id: String;
     className: String;

package/dist/esm/inputs/Select.js

@@ -21,7 +21,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, Fragment } from "react";
 import '../../scss/style.scss';
-import '../../scss/library/select.scss';
 // Imports
 import { SVG_CLOSE_GRAY, SVG_ARROWDOWN } from '../assets/Asset';
 export var Popover = function (_a) {
@@ -195,9 +194,10 @@ var Dropdown = function (_a) {
     * @param {*} values - selected values of multi-select
     */
     function filterOptions(search, values) {
+        var selectedOptionsVariable = null;
         if (type === 'multi-select') {
             if (optionsArray && optionsArray.constructor === Array) {
-                var selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (options && options.constructor === Array && options.length > 0) {
                     optionsArray = options.filter(function (item) {
                         return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
@@ -210,7 +210,7 @@ var Dropdown = function (_a) {
             }
             else if (optionsArray && optionsArray.constructor === Object) {
                 var optionsArrayCopy_1 = {};
-                var selectedOptionsVariable = selectedOptions(values);
+                selectedOptionsVariable = selectedOptions(values);
                 if (selectedOptionsVariable.length > 0) {
                     selectedOptionsVariable = selectedOptionsVariable.filter(function (item) {
                         return item.label.toLowerCase().search(search.toLowerCase()) > -1;