@bonlineza/luxity-lib 2.11.0 → 2.13.0

package/NotificationDropDown.js

@@ -1,14 +1,15 @@
 (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('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';
+  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';
 
   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;
@@ -6751,59 +6752,8 @@
 
   var index$1 = manageState(Select);
 
-  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) {
+  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) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.base;
@@ -6898,10 +6848,7 @@
           customErrorMessage: customErrorMessage,
           customErrorHandler: customErrorHandler,
           renderCustomLoader: function renderCustomLoader() {
-            return /*#__PURE__*/React__default.createElement(LuxityLoader, {
-              height: "40px",
-              width: "95%"
-            });
+            return /*#__PURE__*/React__default.createElement(EllipsisLoader, null);
           },
           errorMessageInterpreter: interpretErrorMessage
         }, /*#__PURE__*/React__default.createElement(LuxityPageReadyContext.Provider, {
@@ -6968,6 +6915,40 @@
       ntrlMinTen: '#e6e6e6',
       gray: '#efefef',
       darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 
@@ -7061,10 +7042,7 @@
           }
         }, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
-        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(LuxityLoader, {
-          height: "20px",
-          width: "95%"
-        }) : /*#__PURE__*/React__default.createElement(index$1, {
+        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {

package/OutlinePrimaryButton.js

@@ -93,6 +93,40 @@
       ntrlMinTen: '#e6e6e6',
       gray: '#efefef',
       darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/PriceRangeSelector.js

@@ -148,6 +148,40 @@
       ntrlMinTen: '#e6e6e6',
       gray: '#efefef',
       darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/PrimaryButton.js

@@ -89,6 +89,40 @@
       ntrlMinTen: '#e6e6e6',
       gray: '#efefef',
       darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/README.md

@@ -26,11 +26,12 @@
 - Tooltip
 - CheckBoxButton
 - GenderSelector
-- LuxityLoader
 - GraphQLDropdownSelector
 - LuxityGraphQLDropdownSelector
 - MaterialSelector
 - ModelSelector
+- RareStepHeader
+- RareStepFooter
 
 ## Elements (simple Styled Components)
 - Buttons

package/RadioButtons.js

@@ -238,6 +238,40 @@
       ntrlMinTen: '#e6e6e6',
       gray: '#efefef',
       darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/RangeSlider.js

@@ -148,6 +148,40 @@
       ntrlMinTen: '#e6e6e6',
       gray: '#efefef',
       darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 

package/RareStepFooter.js

@@ -78,6 +78,15 @@
       h5: '16px',
       h6: '14px',
       footerTitle: '18px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
     }
   };
 
@@ -91,8 +100,8 @@
     });
   });
 
-  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-  var FooterWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    font-weight: ", ";\n    padding: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
+  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+  var FooterWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n    font-weight: ", ";\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMax;
   }, function (props) {
     return props.theme.rareStepFontWeights.bold;
@@ -101,11 +110,16 @@
   }, function (props) {
     return props.theme.rareStepFontSize.h5;
   });
-  var FooterLinksWrapper = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 70%;\n  }\n"])));
-  var FooterLinksContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding-right: ", ";\n  }\n"])), function (props) {
+  var PageContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
+    return props.theme.rareStepPageSizes.container;
+  });
+  var FooterLinksWrapper = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 70%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   });
-  var FooterTitleLink = styled__default.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n   {\n    text-transform: uppercase;\n    color: ", ";\n    margin-bottom: ", ";\n    cursor: pointer;\n    font-weight: ", ";\n    font-size: ", ";\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  var FooterLinksContainer = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding-right: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[4];
+  });
+  var FooterTitleLink = styled__default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n   {\n    text-transform: uppercase;\n    color: ", ";\n    margin-bottom: ", ";\n    cursor: pointer;\n    font-weight: ", ";\n    font-size: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.marginPaddings[1];
@@ -116,7 +130,7 @@
   }, function (props) {
     return props.theme.rareStepColors.ntrlMin;
   });
-  var FooterLink = styled__default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    cursor: pointer;\n    margin-bottom: ", ";\n    font-weight: ", ";\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  var FooterLink = styled__default.a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    cursor: pointer;\n    margin-bottom: ", ";\n    font-weight: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.space[2];
@@ -125,24 +139,46 @@
   }, function (props) {
     return props.theme.rareStepColors.ntrlMin;
   });
-  var FooterImage = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    height: 100%;\n    max-height: 300px;\n    object-fit: cover;\n  }\n"])));
-  var FooterImageWrapper = styled__default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    flex-basis: 30%;\n  }\n"])));
-  var FooterLogo = styled__default.img(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n   {\n    width: 120px;\n    height: 50px;\n    margin-top: ", ";\n  }\n"])), function (props) {
+  var FooterImage = styled__default.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    width: 100%;\n    height: 100%;\n    max-height: 300px;\n    object-fit: cover;\n  }\n"])));
+  var FooterImageWrapper = styled__default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n   {\n    flex-basis: 30%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[4];
+  });
+  var FooterLogo = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n   {\n    width: 120px;\n    height: 50px;\n    margin-top: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[5];
   });
-  var SocialIconWrapper = styled__default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
-  var SocialIcon = styled__default.img(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-right: ", ";\n  }\n"])), function (props) {
+  var SocialIconWrapper = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n  }\n"])));
+  var SocialIcon = styled__default.img(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    margin-right: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[0];
   });
+  var FooterCopyrightContainer = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    padding: ", " 0;\n    border-top: 1px solid ", ";\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  });
+  var FooterCopyrightText = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n  }\n"])), function (props) {
+    return props.theme.rareStepColors.ntrlMin;
+  }, function (props) {
+    return props.theme.rareStepFontWeights.normal;
+  });
+  var FooterPayments = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n  }\n"])));
+  var FooterPaymentImage = styled__default.img(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n   {\n    width: 100px;\n    height: 30px;\n  }\n"])));
 
-  function RareStepFooter(_ref) {
+  var FooterCopyright = function FooterCopyright(_ref) {
+    var payment_image = _ref.payment_image;
+    return /*#__PURE__*/React__default.createElement(FooterCopyrightContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(FooterCopyrightText, null, "\xA9".concat(new Date().getFullYear(), " \u2022 Rare Step \u2022 Website Developed by B Online")), /*#__PURE__*/React__default.createElement(FooterPayments, null, /*#__PURE__*/React__default.createElement(FooterPaymentImage, {
+      src: payment_image
+    }))));
+  };
+
+  var RareStepFooter = function RareStepFooter(_ref) {
     var footer_image_url = _ref.footer_image_url,
         footer_logo_image_url = _ref.footer_logo_image_url,
         facebook_url = _ref.facebook_url,
         facebook_icon_url = _ref.facebook_icon_url,
         instagram_url = _ref.instagram_url,
-        instagram_image_url = _ref.instagram_image_url;
-    return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, null, /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
+        instagram_image_url = _ref.instagram_image_url,
+        payment_image = _ref.payment_image;
+    return /*#__PURE__*/React__default.createElement(FooterWrapper, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(FooterLinksWrapper, null, /*#__PURE__*/React__default.createElement(FooterLinksContainer, null, /*#__PURE__*/React__default.createElement(FooterTitleLink, {
       href: "/contact-us"
     }, "Contact"), /*#__PURE__*/React__default.createElement(FooterLink, {
       href: "/contact-us"
@@ -184,8 +220,10 @@
       href: "/privacy"
     }, "Privacy Policy"))), /*#__PURE__*/React__default.createElement(FooterImageWrapper, null, /*#__PURE__*/React__default.createElement(FooterImage, {
       src: footer_image_url
-    })));
-  }
+    }))), /*#__PURE__*/React__default.createElement(FooterCopyright, {
+      payment_image: payment_image
+    }));
+  };
 
   var index = themed(RareStepFooter);