intelicoreact 1.6.7 → 1.6.8

package/dist/Atomic/Layout/MainMenu/MainMenu.js

@@ -0,0 +1,224 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = require("react");
+const _reactfeather = /*#__PURE__*/ _interop_require_wildcard(require("react-feather"));
+const _reactrouterdom = require("react-router-dom");
+const _Langs = /*#__PURE__*/ _interop_require_default(require("../../../Langs"));
+const _Accordion = /*#__PURE__*/ _interop_require_default(require("../../UI/Accordion/Accordion"));
+require("./MainMenu.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function MainMenu(props) {
+    const { items, className } = props;
+    const txt = _Langs.default[globalThis.lng];
+    const [isOpen, setIsOpen] = (0, _react.useState)(true);
+    const [isMenuHovered, setIsMenuHovered] = (0, _react.useState)(false);
+    const [isMenuIconHovered, setIsMenuIconHovered] = (0, _react.useState)(false);
+    const chapterClass = (0, _classnames.default)('main-menu--items-box-chapter', {
+        'main-menu--items-box-chapter-hidden': !isOpen && !isMenuHovered
+    });
+    const accordionClass = (0, _classnames.default)('main-menu--accordion', {
+        'main-menu--accordion-hidden': !isOpen && !isMenuHovered
+    });
+    const itemsBoxClass = (0, _classnames.default)('main-menu--items-box', {
+        'main-menu--items-box-closed': !isOpen && !isMenuHovered
+    });
+    const mainMenuClass = (0, _classnames.default)('main-menu', className, {
+        'main-menu--closed': !isOpen && !isMenuHovered
+    });
+    const onMenuHover = ()=>{
+        if (!isOpen) {
+            setIsMenuHovered(!isMenuHovered);
+            items.mainMenu.forEach((item)=>{
+                item.isOpen = false;
+            });
+            items.partners.forEach((item)=>{
+                item.isOpen = false;
+            });
+            items.other.forEach((item)=>{
+                item.isOpen = false;
+            });
+        }
+    };
+    const onCloseMenu = ()=>{
+        setIsOpen(!isOpen);
+        items.mainMenu.forEach((item)=>{
+            item.isOpen = false;
+        });
+        items.partners.forEach((item)=>{
+            item.isOpen = false;
+        });
+        items.other.forEach((item)=>{
+            item.isOpen = false;
+        });
+    };
+    const changeMenuIcon = ()=>{
+        if (isOpen && !isMenuIconHovered) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Menu, {});
+        if (isOpen && isMenuIconHovered) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronLeft, {});
+        if (!isOpen && isMenuHovered) return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronRight, {});
+        if (!isOpen) return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: "main-menu--logo-close"
+        });
+        return null;
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: mainMenuClass,
+        onMouseEnter: ()=>onMenuHover(),
+        onMouseLeave: ()=>setIsMenuHovered(false),
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)('main-menu--header', {
+                    'main-menu--header-closed': !isOpen && !isMenuHovered
+                }),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)('main-menu--logo', {
+                            'main-menu--logo-none': !isOpen && !isMenuHovered
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "main-menu--header-btn",
+                        onClick: ()=>onCloseMenu(),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: "j5",
+                            onMouseEnter: ()=>setIsMenuIconHovered(true),
+                            onMouseLeave: ()=>setIsMenuIconHovered(false),
+                            children: changeMenuIcon()
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: itemsBoxClass,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)('main-menu--items-box-main'),
+                        children: items.main.map((item, index)=>{
+                            const Icon = _reactfeather[item.icon];
+                            return item.link ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.NavLink, {
+                                to: item.link,
+                                className: (0, _classnames.default)('main-menu--items-box-title'),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    className: "main-menu--item",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                            className: "df",
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
+                                                className: (0, _classnames.default)('mr5', item.className)
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                            className: (0, _classnames.default)({
+                                                hidden: !isOpen && !isMenuHovered
+                                            }),
+                                            children: (item === null || item === void 0 ? void 0 : item.title) || 'Link'
+                                        })
+                                    ]
+                                })
+                            }, index) : /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                className: (0, _classnames.default)('main-menu--items-box-title', {
+                                    hidden: !isOpen && !isMenuHovered
+                                }),
+                                children: txt === null || txt === void 0 ? void 0 : txt.titles[item === null || item === void 0 ? void 0 : item.title]
+                            }, index);
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: chapterClass,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            children: "Main menu"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Accordion.default, {
+                        className: accordionClass,
+                        items: items.mainMenu,
+                        onClick: ()=>{}
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: chapterClass,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            children: "Partners"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Accordion.default, {
+                        isOpen: isOpen,
+                        isMenuHovered: isMenuHovered,
+                        className: accordionClass,
+                        items: items.partners,
+                        onClick: ()=>{}
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: chapterClass,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            children: "Other"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Accordion.default, {
+                        className: accordionClass,
+                        isOpen: isOpen,
+                        isMenuHovered: isMenuHovered,
+                        items: items.other,
+                        onClick: ()=>{}
+                    })
+                ]
+            })
+        ]
+    });
+}
+const _default = MainMenu;
+
+//# sourceMappingURL=MainMenu.js.map

package/dist/Atomic/Layout/MainMenu/MainMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/Layout/MainMenu/MainMenu.jsx"],"sourcesContent":["import cn from 'classnames';\n\nimport { useState } from 'react';\nimport * as Icons from 'react-feather';\nimport { NavLink } from 'react-router-dom';\n\nimport Langs from '../../../Langs';\nimport Accordion from '../../UI/Accordion/Accordion';\n\nimport './MainMenu.scss';\n\nfunction MainMenu(props) {\n  const { items, className } = props;\n  const txt = Langs[globalThis.lng];\n  const [isOpen, setIsOpen] = useState(true);\n  const [isMenuHovered, setIsMenuHovered] = useState(false);\n  const [isMenuIconHovered, setIsMenuIconHovered] = useState(false);\n\n  const chapterClass = cn('main-menu--items-box-chapter', {\n    'main-menu--items-box-chapter-hidden': !isOpen && !isMenuHovered,\n  });\n  const accordionClass = cn('main-menu--accordion', {\n    'main-menu--accordion-hidden': !isOpen && !isMenuHovered,\n  });\n  const itemsBoxClass = cn('main-menu--items-box', {\n    'main-menu--items-box-closed': !isOpen && !isMenuHovered,\n  });\n  const mainMenuClass = cn('main-menu', className, {\n    'main-menu--closed': !isOpen && !isMenuHovered,\n  });\n\n  const onMenuHover = () => {\n    if (!isOpen) {\n      setIsMenuHovered(!isMenuHovered);\n      items.mainMenu.forEach((item) => {\n        item.isOpen = false;\n      });\n      items.partners.forEach((item) => {\n        item.isOpen = false;\n      });\n      items.other.forEach((item) => {\n        item.isOpen = false;\n      });\n    }\n  };\n\n  const onCloseMenu = () => {\n    setIsOpen(!isOpen);\n    items.mainMenu.forEach((item) => {\n      item.isOpen = false;\n    });\n    items.partners.forEach((item) => {\n      item.isOpen = false;\n    });\n    items.other.forEach((item) => {\n      item.isOpen = false;\n    });\n  };\n\n  const changeMenuIcon = () => {\n    if (isOpen && !isMenuIconHovered) return <Icons.Menu />;\n    if (isOpen && isMenuIconHovered) return <Icons.ChevronLeft />;\n    if (!isOpen && isMenuHovered) return <Icons.ChevronRight />;\n    if (!isOpen) return <div className=\"main-menu--logo-close\" />;\n    return null;\n  };\n\n  return (\n    <div\n      className={mainMenuClass}\n      onMouseEnter={() => onMenuHover()}\n      onMouseLeave={() => setIsMenuHovered(false)}\n    >\n      <div\n        className={cn('main-menu--header', {\n          'main-menu--header-closed': !isOpen && !isMenuHovered,\n        })}\n      >\n        <div\n          className={cn('main-menu--logo', {\n            'main-menu--logo-none': !isOpen && !isMenuHovered,\n          })}\n        />\n        <div className=\"main-menu--header-btn\" onClick={() => onCloseMenu()}>\n          <div\n            className=\"j5\"\n            onMouseEnter={() => setIsMenuIconHovered(true)}\n            onMouseLeave={() => setIsMenuIconHovered(false)}\n          >\n            {changeMenuIcon()}\n          </div>\n        </div>\n      </div>\n\n      <div className={itemsBoxClass}>\n        <div className={cn('main-menu--items-box-main')}>\n          {items.main.map((item, index) => {\n            const Icon = Icons[item.icon];\n            return item.link\n              ? (\n                  <NavLink\n                    to={item.link}\n                    key={index}\n                    className={cn('main-menu--items-box-title')}\n                  >\n                    <div className=\"main-menu--item\">\n                      <div className=\"df\">\n                        <Icon className={cn('mr5', item.className)} />\n                      </div>\n                      <span className={cn({ hidden: !isOpen && !isMenuHovered })}>\n                        {item?.title || 'Link'}\n                      </span>\n                    </div>\n                  </NavLink>\n                )\n              : (\n                  <span\n                    key={index}\n                    className={cn('main-menu--items-box-title', {\n                      hidden: !isOpen && !isMenuHovered,\n                    })}\n                  >\n                    {txt?.titles[item?.title]}\n                  </span>\n                );\n          })}\n        </div>\n\n        <div className={chapterClass}>\n          <span>Main menu</span>\n        </div>\n        <Accordion\n          className={accordionClass}\n          items={items.mainMenu}\n          onClick={() => {}}\n        />\n\n        <div className={chapterClass}>\n          <span>Partners</span>\n        </div>\n        <Accordion\n          isOpen={isOpen}\n          isMenuHovered={isMenuHovered}\n          className={accordionClass}\n          items={items.partners}\n          onClick={() => {}}\n        />\n\n        <div className={chapterClass}>\n          <span>Other</span>\n        </div>\n        <Accordion\n          className={accordionClass}\n          isOpen={isOpen}\n          isMenuHovered={isMenuHovered}\n          items={items.other}\n          onClick={() => {}}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport default MainMenu;\n"],"names":["MainMenu","props","items","className","txt","Langs","globalThis","lng","isOpen","setIsOpen","useState","isMenuHovered","setIsMenuHovered","isMenuIconHovered","setIsMenuIconHovered","chapterClass","cn","accordionClass","itemsBoxClass","mainMenuClass","onMenuHover","mainMenu","forEach","item","partners","other","onCloseMenu","changeMenuIcon","Icons","Menu","ChevronLeft","ChevronRight","div","onMouseEnter","onMouseLeave","onClick","main","map","index","Icon","icon","link","NavLink","to","span","hidden","title","titles","Accordion"],"mappings":"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"}

package/dist/Atomic/Layout/MainMenu/MainMenu.stories.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MainMenuTemplate: function() {
+        return MainMenuTemplate;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _MainMenu = /*#__PURE__*/ _interop_require_default(require("./MainMenu"));
+require("../../../../../scss/main.scss");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+global.lng = 'en';
+const _default = {
+    title: 'Layout/MainMenu',
+    component: _MainMenu.default,
+    argTypes: {
+        items: {
+            description: 'object'
+        },
+        className: {
+            description: 'string. optional'
+        }
+    }
+};
+const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_MainMenu.default, _object_spread({}, args));
+const MainMenuTemplate = Template.bind({});
+MainMenuTemplate.args = {
+    items: {
+        main: [
+            {
+                title: 'Dashboard',
+                icon: 'Airplay',
+                className: 'color--green-haze main-menu__icon'
+            },
+            {
+                title: 'Consumers',
+                icon: 'User',
+                className: 'color--primary main-menu__icon'
+            }
+        ],
+        mainMenu: [
+            {
+                title: 'Ticket Desk',
+                icon: 'Tag',
+                className: 'color--froly',
+                children: []
+            },
+            {
+                title: 'Accounting',
+                icon: 'DollarSign',
+                className: 'color--sea-buckthorn',
+                children: []
+            },
+            {
+                title: 'Users',
+                icon: 'Users',
+                className: 'color--gray-gull',
+                children: []
+            },
+            {
+                title: 'Settings',
+                icon: 'Sliders',
+                className: 'color--primary'
+            }
+        ],
+        partners: [
+            {
+                title: 'Merchants',
+                icon: 'ShoppingBag',
+                className: 'color--froly'
+            },
+            {
+                title: 'Lenders',
+                icon: 'Briefcase',
+                className: 'color--green-haze'
+            },
+            {
+                title: 'Lender Ping Tree',
+                icon: 'Shuffle',
+                className: 'color--primary'
+            }
+        ],
+        other: [
+            {
+                title: 'Reports',
+                icon: 'PieChart',
+                className: 'color--gray-gull'
+            },
+            {
+                title: 'Tools',
+                icon: 'Tool',
+                className: 'color--sea-buckthorn'
+            }
+        ]
+    },
+    className: ''
+};
+
+//# sourceMappingURL=MainMenu.stories.js.map

package/dist/Atomic/Layout/MainMenu/MainMenu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/Layout/MainMenu/MainMenu.stories.js"],"sourcesContent":["import React from 'react';\n\nimport MainMenu from './MainMenu';\n\nimport '../../../../../scss/main.scss';\n\nglobal.lng = 'en';\n\nexport default {\n  title: 'Layout/MainMenu',\n  component: MainMenu,\n  argTypes: {\n    items: {description: 'object'},\n    className: {description: 'string. optional'},\n  },\n};\n\nconst Template = args => <MainMenu {...args} />;\n\nexport const MainMenuTemplate = Template.bind({});\n\nMainMenuTemplate.args = {\n  items: {\n    main: [\n      {\n        title: 'Dashboard',\n        icon: 'Airplay',\n        className: 'color--green-haze main-menu__icon',\n        // link: '/'\n      },\n      {\n        title: 'Consumers',\n        icon: 'User',\n        className: 'color--primary main-menu__icon',\n        // link: '/consumers/'\n      },\n    ],\n    mainMenu: [\n      {\n        title: 'Ticket Desk',\n        icon: 'Tag',\n        className: 'color--froly',\n        children: [],\n      },\n      {\n        title: 'Accounting',\n        icon: 'DollarSign',\n        className: 'color--sea-buckthorn',\n        children: [],\n      },\n      {\n        title: 'Users',\n        icon: 'Users',\n        className: 'color--gray-gull',\n        children: [],\n      },\n      {\n        title: 'Settings',\n        icon: 'Sliders',\n        className: 'color--primary',\n      },\n    ],\n    partners: [\n      {\n        title: 'Merchants',\n        icon: 'ShoppingBag',\n        className: 'color--froly',\n        // link: '/merchants/'\n      },\n      {\n        title: 'Lenders',\n        icon: 'Briefcase',\n        className: 'color--green-haze',\n        // link: '/lenders/'\n      },\n      {\n        title: 'Lender Ping Tree',\n        icon: 'Shuffle',\n        className: 'color--primary',\n        // link: '/ping-tree/'\n      },\n    ],\n    other: [\n      {\n        title: 'Reports',\n        icon: 'PieChart',\n        className: 'color--gray-gull',\n        // link: '/reports/'\n      },\n      {\n        title: 'Tools',\n        icon: 'Tool',\n        className: 'color--sea-buckthorn',\n      },\n    ],\n  },\n  className: '',\n};\n"],"names":["MainMenuTemplate","global","lng","title","component","MainMenu","argTypes","items","description","className","Template","args","bind","main","icon","mainMenu","children","partners","other"],"mappings":";;;;;;;;;;;IAmBaA,gBAAgB;eAAhBA;;IAXb,OAOE;eAPF;;;;8DARkB;iEAEG;QAEd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEPC,OAAOC,GAAG,GAAG;MAEb,WAAe;IACbC,OAAO;IACPC,WAAWC,iBAAQ;IACnBC,UAAU;QACRC,OAAO;YAACC,aAAa;QAAQ;QAC7BC,WAAW;YAACD,aAAa;QAAkB;IAC7C;AACF;AAEA,MAAME,WAAWC,CAAAA,qBAAQ,qBAACN,iBAAQ,qBAAKM;AAEhC,MAAMX,mBAAmBU,SAASE,IAAI,CAAC,CAAC;AAE/CZ,iBAAiBW,IAAI,GAAG;IACtBJ,OAAO;QACLM,MAAM;YACJ;gBACEV,OAAO;gBACPW,MAAM;gBACNL,WAAW;YAEb;YACA;gBACEN,OAAO;gBACPW,MAAM;gBACNL,WAAW;YAEb;SACD;QACDM,UAAU;YACR;gBACEZ,OAAO;gBACPW,MAAM;gBACNL,WAAW;gBACXO,UAAU,EAAE;YACd;YACA;gBACEb,OAAO;gBACPW,MAAM;gBACNL,WAAW;gBACXO,UAAU,EAAE;YACd;YACA;gBACEb,OAAO;gBACPW,MAAM;gBACNL,WAAW;gBACXO,UAAU,EAAE;YACd;YACA;gBACEb,OAAO;gBACPW,MAAM;gBACNL,WAAW;YACb;SACD;QACDQ,UAAU;YACR;gBACEd,OAAO;gBACPW,MAAM;gBACNL,WAAW;YAEb;YACA;gBACEN,OAAO;gBACPW,MAAM;gBACNL,WAAW;YAEb;YACA;gBACEN,OAAO;gBACPW,MAAM;gBACNL,WAAW;YAEb;SACD;QACDS,OAAO;YACL;gBACEf,OAAO;gBACPW,MAAM;gBACNL,WAAW;YAEb;YACA;gBACEN,OAAO;gBACPW,MAAM;gBACNL,WAAW;YACb;SACD;IACH;IACAA,WAAW;AACb"}

package/dist/Atomic/Layout/Spinner/Spinner.interface.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=Spinner.interface.js.map

package/dist/Atomic/Layout/Spinner/Spinner.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/Layout/Spinner/Spinner.interface.ts"],"names":[],"mappings":""}

package/dist/Atomic/Layout/Spinner/Spinner.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+require("./Spinner.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CN = 'loader-box';
+const Spinner = ({ size = null, className, testId = CN })=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        role: "status",
+        "aria-live": "polite",
+        "aria-busy": "true",
+        "data-testid": testId,
+        className: (0, _classnames.default)(CN, {
+            j5: size !== 'small',
+            j8: size === 'small'
+        }, className),
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            className: (0, _classnames.default)('lds-ring', {
+                [`lds-ring_${size}`]: size
+            }),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {}),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {})
+            ]
+        })
+    });
+};
+const _default = Spinner;
+
+//# sourceMappingURL=Spinner.js.map

package/dist/Atomic/Layout/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/Layout/Spinner/Spinner.tsx"],"sourcesContent":["import type { ISpinnerProps } from './Spinner.interface';\nimport cn from 'classnames';\n\nimport React from 'react';\n\nimport './Spinner.scss';\n\nconst CN = 'loader-box';\n\nconst Spinner: React.FC<ISpinnerProps> = ({ size = null, className, testId = CN }) => {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy=\"true\"\n      data-testid={testId}\n      className={cn(\n        CN,\n        {\n          j5: size !== 'small',\n          j8: size === 'small',\n        },\n        className,\n      )}\n    >\n      <div className={cn('lds-ring', { [`lds-ring_${size}`]: size })}>\n        <div />\n        <div />\n        <div />\n        <div />\n      </div>\n    </div>\n  );\n};\n\nexport default Spinner;\n"],"names":["CN","Spinner","size","className","testId","div","role","aria-live","aria-busy","data-testid","cn","j5","j8"],"mappings":";;;;+BAmCA;;;eAAA;;;;mEAlCe;8DAEG;QAEX;;;;;;AAEP,MAAMA,KAAK;AAEX,MAAMC,UAAmC,CAAC,EAAEC,OAAO,IAAI,EAAEC,SAAS,EAAEC,SAASJ,EAAE,EAAE;IAC/E,qBACE,qBAACK;QACCC,MAAK;QACLC,aAAU;QACVC,aAAU;QACVC,eAAaL;QACbD,WAAWO,IAAAA,mBAAE,EACXV,IACA;YACEW,IAAIT,SAAS;YACbU,IAAIV,SAAS;QACf,GACAC;kBAGF,cAAA,sBAACE;YAAIF,WAAWO,IAAAA,mBAAE,EAAC,YAAY;gBAAE,CAAC,CAAC,SAAS,EAAER,MAAM,CAAC,EAAEA;YAAK;;8BAC1D,qBAACG;8BACD,qBAACA;8BACD,qBAACA;8BACD,qBAACA;;;;AAIT;MAEA,WAAeJ"}

package/dist/Atomic/Layout/Spinner/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const _default = _Spinner.default;
+
+//# sourceMappingURL=index.js.map

package/dist/Atomic/Layout/Spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/Layout/Spinner/index.ts"],"sourcesContent":["import Spinner from './Spinner';\n\nexport default Spinner;\nexport type { ISpinnerProps } from './Spinner.interface';\n"],"names":["Spinner"],"mappings":";;;;+BAEA;;;eAAA;;;gEAFoB;;;;;;MAEpB,WAAeA,gBAAO"}

package/dist/Atomic/UI/Accordion/Accordion.interface.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=Accordion.interface.js.map

package/dist/Atomic/UI/Accordion/Accordion.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/UI/Accordion/Accordion.interface.ts"],"names":[],"mappings":""}

package/dist/Atomic/UI/Accordion/Accordion.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactfeather = /*#__PURE__*/ _interop_require_wildcard(require("react-feather"));
+const _reactrouterdom = require("react-router-dom");
+const _utils = require("../../../Functions/utils");
+const _AccordionItem = /*#__PURE__*/ _interop_require_default(require("./AccordionItem"));
+require("./Accordion.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const CN = 'accordion';
+const Accordion = ({ items, className, itemClassName, isMenuHovered, isOpen, testId = CN })=>{
+    const [data, setData] = (0, _react.useState)(items);
+    const onChange = (0, _utils.handleObjectChange)(setData, ()=>setData([
+            ...data
+        ]));
+    const handleArrayChange = (e, index, prop)=>{
+        // @ts-ignore
+        data[index][prop] = e;
+        onChange(data);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        className: (0, _classnames.default)(CN, className),
+        "data-testid": testId,
+        role: "list",
+        "aria-label": "Accordion list",
+        children: items === null || items === void 0 ? void 0 : items.map((item, index)=>{
+            const Icon = _reactfeather[item.icon];
+            return item.link ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reactrouterdom.NavLink, {
+                "data-testid": `${testId}-link-${index}`,
+                to: item.link,
+                className: (0, _classnames.default)('main-menu--item main-menu--items-box-title'),
+                children: [
+                    (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
+                        className: (0, _classnames.default)('mr5', item === null || item === void 0 ? void 0 : item.className)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: (0, _classnames.default)({
+                            hidden: !isOpen && !isMenuHovered
+                        }),
+                        children: (item === null || item === void 0 ? void 0 : item.title) || 'Link'
+                    })
+                ]
+            }, index) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_AccordionItem.default, {
+                testId: `${testId}-item-${index}`,
+                className: itemClassName,
+                item: item,
+                isOpen: !!item.isOpen,
+                onClick: (value)=>handleArrayChange(value, index, 'isOpen')
+            }, index);
+        })
+    });
+};
+const _default = Accordion;
+
+//# sourceMappingURL=Accordion.js.map

package/dist/Atomic/UI/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/Atomic/UI/Accordion/Accordion.tsx"],"sourcesContent":["import type { IAccordionProps } from './Accordion.interface';\nimport cn from 'classnames';\nimport React, { useState } from 'react';\nimport * as Icons from 'react-feather';\n\nimport { NavLink } from 'react-router-dom';\n\nimport { handleObjectChange } from '../../../Functions/utils';\nimport AccordionItem from './AccordionItem';\n\nimport './Accordion.scss';\n\nconst CN = 'accordion';\n\nconst Accordion: React.FC<IAccordionProps> = ({\n  items,\n  className,\n  itemClassName,\n  isMenuHovered,\n  isOpen,\n  testId = CN,\n}) => {\n  const [data, setData] = useState(items);\n\n  const onChange = handleObjectChange(setData, () => setData([...data]));\n\n  const handleArrayChange = (e: boolean, index: number, prop: keyof (typeof data)[0]): void => {\n    // @ts-ignore\n    data[index][prop] = e;\n    onChange(data);\n  };\n\n  return (\n    <div className={cn(CN, className)} data-testid={testId} role=\"list\" aria-label=\"Accordion list\">\n      {items?.map((item, index) => {\n        const Icon = Icons[item.icon as keyof typeof Icons];\n        return item.link\n          ? (\n              <NavLink\n                data-testid={`${testId}-link-${index}`}\n                key={index}\n                to={item.link}\n                className={cn('main-menu--item main-menu--items-box-title')}\n              >\n                {item?.icon && <Icon className={cn('mr5', item?.className)} />}\n                <span className={cn({ hidden: !isOpen && !isMenuHovered })}>{item?.title || 'Link'}</span>\n              </NavLink>\n            )\n          : (\n              <AccordionItem\n                testId={`${testId}-item-${index}`}\n                key={index}\n                className={itemClassName}\n                item={item}\n                isOpen={!!item.isOpen}\n                onClick={value => handleArrayChange(value, index, 'isOpen')}\n              />\n            );\n      })}\n    </div>\n  );\n};\n\nexport default Accordion;\n"],"names":["CN","Accordion","items","className","itemClassName","isMenuHovered","isOpen","testId","data","setData","useState","onChange","handleObjectChange","handleArrayChange","e","index","prop","div","cn","data-testid","role","aria-label","map","item","Icon","Icons","icon","link","NavLink","to","span","hidden","title","AccordionItem","onClick","value"],"mappings":";;;;+BA+DA;;;eAAA;;;;mEA9De;+DACiB;sEACT;gCAEC;uBAEW;sEACT;QAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEP,MAAMA,KAAK;AAEX,MAAMC,YAAuC,CAAC,EAC5CC,KAAK,EACLC,SAAS,EACTC,aAAa,EACbC,aAAa,EACbC,MAAM,EACNC,SAASP,EAAE,EACZ;IACC,MAAM,CAACQ,MAAMC,QAAQ,GAAGC,IAAAA,eAAQ,EAACR;IAEjC,MAAMS,WAAWC,IAAAA,yBAAkB,EAACH,SAAS,IAAMA,QAAQ;eAAID;SAAK;IAEpE,MAAMK,oBAAoB,CAACC,GAAYC,OAAeC;QACpD,aAAa;QACbR,IAAI,CAACO,MAAM,CAACC,KAAK,GAAGF;QACpBH,SAASH;IACX;IAEA,qBACE,qBAACS;QAAId,WAAWe,IAAAA,mBAAE,EAAClB,IAAIG;QAAYgB,eAAaZ;QAAQa,MAAK;QAAOC,cAAW;kBAC5EnB,kBAAAA,4BAAAA,MAAOoB,GAAG,CAAC,CAACC,MAAMR;YACjB,MAAMS,OAAOC,aAAK,CAACF,KAAKG,IAAI,CAAuB;YACnD,OAAOH,KAAKI,IAAI,iBAEV,sBAACC,uBAAO;gBACNT,eAAa,GAAGZ,OAAO,MAAM,EAAEQ,OAAO;gBAEtCc,IAAIN,KAAKI,IAAI;gBACbxB,WAAWe,IAAAA,mBAAE,EAAC;;oBAEbK,CAAAA,iBAAAA,2BAAAA,KAAMG,IAAI,mBAAI,qBAACF;wBAAKrB,WAAWe,IAAAA,mBAAE,EAAC,OAAOK,iBAAAA,2BAAAA,KAAMpB,SAAS;;kCACzD,qBAAC2B;wBAAK3B,WAAWe,IAAAA,mBAAE,EAAC;4BAAEa,QAAQ,CAACzB,UAAU,CAACD;wBAAc;kCAAKkB,CAAAA,iBAAAA,2BAAAA,KAAMS,KAAK,KAAI;;;eALvEjB,uBASP,qBAACkB,sBAAa;gBACZ1B,QAAQ,GAAGA,OAAO,MAAM,EAAEQ,OAAO;gBAEjCZ,WAAWC;gBACXmB,MAAMA;gBACNjB,QAAQ,CAAC,CAACiB,KAAKjB,MAAM;gBACrB4B,SAASC,CAAAA,QAAStB,kBAAkBsB,OAAOpB,OAAO;eAJ7CA;QAOf;;AAGN;MAEA,WAAed"}