@bonlineza/luxity-lib 2.9.1 → 2.10.0

package/LuxityGraphQLMultiselector.js

@@ -1,12 +1,11 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady')) :
-  typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady'], factory) :
-  (global = global || self, global.LuxityGraphQLMultiselector = factory(global.React, global.function, global.styled, global.EllipsisLoader, global.PageReady));
-}(this, (function (React, functions, styled, EllipsisLoader, PageReady) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@bonlineza/b-lib/functions'), require('styled-components'), require('@bonlineza/b-lib/PageReady')) :
+  typeof define === 'function' && define.amd ? define(['react', '@bonlineza/b-lib/functions', 'styled-components', '@bonlineza/b-lib/PageReady'], factory) :
+  (global = global || self, global.LuxityGraphQLMultiselector = factory(global.React, global.function, global.styled, global.PageReady));
+}(this, (function (React, functions, styled, PageReady) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
-  EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
   PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
 
   function _classCallCheck(instance, Constructor) {
@@ -236,6 +235,57 @@
     return message.replace(':error_code', error.status || 'Network Down');
   };
 
+  var LuxityArrowLeft = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
+    })));
+  });
+
+  var LuxityArrowRight = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
+    })));
+  });
+
+  var _templateObject, _templateObject2, _templateObject3;
+  var LoaderContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 20px auto;\n"])));
+  var LeftImageContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-left infinite 3s;\n  background-color: white;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(50%);\n    }\n    100% {\n      transform: translateX(150%);\n    }\n  }\n"])));
+  var RightImageContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-right infinite 3s;\n\n  @keyframes slide-right {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(-50%);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-150%);\n      opacity: 0;\n    }\n  }\n"])));
+
+  function LuxityLoader(_ref) {
+    var width = _ref.width,
+        height = _ref.height;
+    return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
+      width: width,
+      height: height
+    })), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
+      width: width,
+      height: height
+    })));
+  }
+
   var LuxityPageReadyContext = /*#__PURE__*/React__default.createContext({
     data: null
   });
@@ -311,7 +361,10 @@
           customErrorMessage: customErrorMessage,
           customErrorHandler: customErrorHandler,
           renderCustomLoader: function renderCustomLoader() {
-            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
+            return /*#__PURE__*/React__default.createElement(LuxityLoader, {
+              height: "40px",
+              width: "95%"
+            });
           },
           errorMessageInterpreter: interpretErrorMessage
         }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
@@ -338,9 +391,9 @@
     }
   };
 
-  var _templateObject, _templateObject2;
-  var disabledButtonStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
-  var baseButtonStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"])));
+  var _templateObject$1, _templateObject2$1;
+  var disabledButtonStyle = styled.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n  opacity: 0.4;\n"])));
+  var baseButtonStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"])));
 
   var theme = {
     breakpoints: ['40em', '52em', '64em'],
@@ -374,8 +427,8 @@
 
   var _excluded = ["children"];
 
-  var _templateObject$1;
-  var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: transparent;\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  &:disabled {\n    ", ";\n    color: ", ";\n  }\n"])), baseButtonStyle, function (props) {
+  var _templateObject$2;
+  var Button = styled__default.button(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", ";\n  background-color: transparent;\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  &:disabled {\n    ", ";\n    color: ", ";\n  }\n"])), baseButtonStyle, function (props) {
     return props.theme.colors.base;
   }, function (props) {
     return props.theme.colors.primary;
@@ -397,8 +450,8 @@
 
   var _excluded$1 = ["children"];
 
-  var _templateObject$2;
-  var Button$1 = styled__default(TextButton$1)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$3;
+  var Button$1 = styled__default(TextButton$1)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
@@ -428,15 +481,15 @@
     lg: '1200px'
   };
 
-  var _templateObject$3, _templateObject2$1;
+  var _templateObject$4, _templateObject2$2;
   var ALL_ITEM = {
     id: 'ALL',
     name: 'ALL'
   };
   var multiSelectorItemMaxHeight = '3rem';
   var multiSelectorItemAnimationDuration = '300ms';
-  var multiselectorItemFadeIn = styled.keyframes(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
-  var StyledMultiselector = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  var multiselectorItemFadeIn = styled.keyframes(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
+  var StyledMultiselector = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.colors.ntrlMin;
@@ -664,6 +717,7 @@
       width: "15",
       height: "15",
       viewBox: "0 0 15 15",
+      overflow: "visible",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), /*#__PURE__*/React__default.createElement("path", {
@@ -672,11 +726,11 @@
     }));
   });
 
-  var _templateObject$4, _templateObject2$2;
-  var Title = styled__default.h1(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
+  var _templateObject$5, _templateObject2$3;
+  var Title = styled__default.h1(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"])), function (props) {
     return props.theme.fontSizes[2];
   });
-  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"])), function (props) {
     return props.theme.marginPaddings[1];
   }, function (props) {
     return props.theme.colors.primary;
@@ -695,7 +749,7 @@
     }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement("div", null, children));
   };
 
-  var _templateObject$5;
+  var _templateObject$6;
 
   var Title$1 = function Title(_ref) {
     var baseClass = _ref.baseClass,
@@ -716,7 +770,7 @@
     })));
   };
 
-  var StyledTitle = styled__default(Title$1)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"])), function (props) {
+  var StyledTitle = styled__default(Title$1)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.fontSizes[2];

package/LuxityLoader.js

@@ -0,0 +1,75 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
+  (global = global || self, global.LuxityLoader = factory(global.React, global.styled));
+}(this, (function (React, styled) { 'use strict';
+
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  var LuxityArrowLeft = (function (props) {
+    return /*#__PURE__*/React.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
+    })));
+  });
+
+  var LuxityArrowRight = (function (props) {
+    return /*#__PURE__*/React.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
+    })));
+  });
+
+  var _templateObject, _templateObject2, _templateObject3;
+  var LoaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 20px auto;\n"])));
+  var LeftImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-left infinite 3s;\n  background-color: white;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(50%);\n    }\n    100% {\n      transform: translateX(150%);\n    }\n  }\n"])));
+  var RightImageContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-right infinite 3s;\n\n  @keyframes slide-right {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(-50%);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-150%);\n      opacity: 0;\n    }\n  }\n"])));
+
+  function LuxityLoader(_ref) {
+    var width = _ref.width,
+        height = _ref.height;
+    return /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(LeftImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowRight, {
+      width: width,
+      height: height
+    })), /*#__PURE__*/React.createElement(RightImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowLeft, {
+      width: width,
+      height: height
+    })));
+  }
+
+  return LuxityLoader;
+
+})));

package/LuxityPageReady.js

@@ -1,12 +1,12 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady'], factory) :
-  (global = global || self, factory(global.LuxityPageReady = {}, global.React, global.EllipsisLoader, global.PageReady));
-}(this, (function (exports, React, EllipsisLoader, PageReady) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@bonlineza/b-lib/PageReady'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@bonlineza/b-lib/PageReady', 'styled-components'], factory) :
+  (global = global || self, factory(global.LuxityPageReady = {}, global.React, global.PageReady, global.styled));
+}(this, (function (exports, React, PageReady, styled) { 'use strict';
 
   React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
-  EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
   PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -131,12 +131,75 @@
     };
   }
 
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
   var interpretErrorMessage = function interpretErrorMessage(error) {
     var customMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Failed: :error_code';
     var message = customMessage || 'Network Error';
     return message.replace(':error_code', error.status || 'Network Down');
   };
 
+  var LuxityArrowLeft = (function (props) {
+    return /*#__PURE__*/React.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
+    })));
+  });
+
+  var LuxityArrowRight = (function (props) {
+    return /*#__PURE__*/React.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
+    })));
+  });
+
+  var _templateObject, _templateObject2, _templateObject3;
+  var LoaderContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 20px auto;\n"])));
+  var LeftImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-left infinite 3s;\n  background-color: white;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(50%);\n    }\n    100% {\n      transform: translateX(150%);\n    }\n  }\n"])));
+  var RightImageContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-right infinite 3s;\n\n  @keyframes slide-right {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(-50%);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-150%);\n      opacity: 0;\n    }\n  }\n"])));
+
+  function LuxityLoader(_ref) {
+    var width = _ref.width,
+        height = _ref.height;
+    return /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(LeftImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowRight, {
+      width: width,
+      height: height
+    })), /*#__PURE__*/React.createElement(RightImageContainer, null, /*#__PURE__*/React.createElement(LuxityArrowLeft, {
+      width: width,
+      height: height
+    })));
+  }
+
   var LuxityPageReadyContext = /*#__PURE__*/React.createContext({
     data: null
   });
@@ -212,7 +275,10 @@
           customErrorMessage: customErrorMessage,
           customErrorHandler: customErrorHandler,
           renderCustomLoader: function renderCustomLoader() {
-            return /*#__PURE__*/React.createElement(EllipsisLoader, null);
+            return /*#__PURE__*/React.createElement(LuxityLoader, {
+              height: "40px",
+              width: "95%"
+            });
           },
           errorMessageInterpreter: interpretErrorMessage
         }, /*#__PURE__*/React.createElement(LuxityPageReadyContext.Provider, {

package/NotificationDropDown.js

@@ -1,15 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/EllipsisLoader'), require('styled-components'), require('@bonlineza/b-lib/PageReady'), require('react-notify-toast')) :
-  typeof define === 'function' && define.amd ? define(['react', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/EllipsisLoader', 'styled-components', '@bonlineza/b-lib/PageReady', 'react-notify-toast'], factory) :
-  (global = global || self, global.NotificationDropDown = factory(global.React, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.EllipsisLoader, global.styled, global.PageReady, global['react-notify-toast']));
-}(this, (function (React, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, EllipsisLoader, styled, PageReady, Notifications) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('styled-components'), require('@bonlineza/b-lib/PageReady'), require('react-notify-toast')) :
+  typeof define === 'function' && define.amd ? define(['react', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', 'styled-components', '@bonlineza/b-lib/PageReady', 'react-notify-toast'], factory) :
+  (global = global || self, global.NotificationDropDown = factory(global.React, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.styled, global.PageReady, global['react-notify-toast']));
+}(this, (function (React, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, styled, PageReady, Notifications) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   stylisRuleSheet = stylisRuleSheet && Object.prototype.hasOwnProperty.call(stylisRuleSheet, 'default') ? stylisRuleSheet['default'] : stylisRuleSheet;
   PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
   raf = raf && Object.prototype.hasOwnProperty.call(raf, 'default') ? raf['default'] : raf;
   AutosizeInput = AutosizeInput && Object.prototype.hasOwnProperty.call(AutosizeInput, 'default') ? AutosizeInput['default'] : AutosizeInput;
-  EllipsisLoader = EllipsisLoader && Object.prototype.hasOwnProperty.call(EllipsisLoader, 'default') ? EllipsisLoader['default'] : EllipsisLoader;
   var styled__default = 'default' in styled ? styled['default'] : styled;
   PageReady = PageReady && Object.prototype.hasOwnProperty.call(PageReady, 'default') ? PageReady['default'] : PageReady;
   var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
@@ -6752,8 +6751,59 @@
 
   var index$1 = manageState(Select);
 
-  var _templateObject;
-  var NotifyContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var LuxityArrowLeft = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M808 2628 c-139 -205 -377 -557 -530 -781 l-277 -409 48 -71 c363\n-539 905 -1335 915 -1345 9 -9 90 -12 362 -10 l351 3 -350 515 c-192 283 -409\n603 -482 711 l-134 197 386 568 c212 313 450 665 529 782 l145 212 -355 0\n-355 0 -253 -372z"
+    })));
+  });
+
+  var LuxityArrowRight = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.width || '100%',
+      height: props.height || '100%',
+      viewBox: "0 0 177.000000 300.000000",
+      preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/React__default.createElement("g", {
+      transform: "translate(0.000000,300.000000) scale(0.100000,-0.100000)",
+      fill: "#000000",
+      stroke: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M106 2973 c9 -16 226 -336 481 -711 255 -376 465 -687 466 -691 1 -4\n-233 -355 -520 -779 -288 -424 -523 -773 -523 -776 0 -3 159 -6 353 -5 l352 0\n525 776 c289 427 524 780 522 785 -1 5 -219 328 -484 719 l-481 709 -355 0\n-354 0 18 -27z"
+    })));
+  });
+
+  var _templateObject, _templateObject2, _templateObject3;
+  var LoaderContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 20px auto;\n"])));
+  var LeftImageContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-left infinite 3s;\n  background-color: white;\n\n  @keyframes slide-left {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(50%);\n    }\n    100% {\n      transform: translateX(150%);\n    }\n  }\n"])));
+  var RightImageContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  animation: slide-right infinite 3s;\n\n  @keyframes slide-right {\n    0% {\n      transform: translateX(0);\n    }\n    40% {\n      transform: translateX(-50%);\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(-150%);\n      opacity: 0;\n    }\n  }\n"])));
+
+  function LuxityLoader(_ref) {
+    var width = _ref.width,
+        height = _ref.height;
+    return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement(LeftImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowRight, {
+      width: width,
+      height: height
+    })), /*#__PURE__*/React__default.createElement(RightImageContainer, null, /*#__PURE__*/React__default.createElement(LuxityArrowLeft, {
+      width: width,
+      height: height
+    })));
+  }
+
+  var _templateObject$1;
+  var NotifyContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.base;
@@ -6848,7 +6898,10 @@
           customErrorMessage: customErrorMessage,
           customErrorHandler: customErrorHandler,
           renderCustomLoader: function renderCustomLoader() {
-            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
+            return /*#__PURE__*/React__default.createElement(LuxityLoader, {
+              height: "40px",
+              width: "95%"
+            });
           },
           errorMessageInterpreter: interpretErrorMessage
         }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
@@ -7008,7 +7061,10 @@
           }
         }, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
-        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
+        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(LuxityLoader, {
+          height: "20px",
+          width: "95%"
+        }) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {

package/README.md

@@ -26,6 +26,7 @@
 - Tooltip
 - CheckBoxButton
 - GenderSelector
+- LuxityLoader
 
 ## Elements (simple Styled Components)
 - Buttons
@@ -73,6 +74,8 @@
 - PointerDown
 - Search
 - Shoes
+- LuxityArrowLeft
+- LuxityArrowRight
 
 ## Commands
 - `yarn` - install npm dependencies