ordering-ui-external 2.4.6 → 2.5.0

package/_modules/themes/five/src/components/UserFormDetails/styles.js

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SwitchWrapper = exports.SkeletonForm = exports.PromotionsWrapper = exports.NotificationsGroupSwitchWrapper = exports.LanguageSelectorWrapper = exports.InputPhoneNumberWrapper = exports.InputGroup = exports.FormInput = exports.Divider = exports.ActionsForm = void 0;
+exports.TextLinkWrapper = exports.SwitchWrapper = exports.SkeletonForm = exports.PromotionsWrapper = exports.NotificationsGroupSwitchWrapper = exports.LanguageSelectorWrapper = exports.InputPhoneNumberWrapper = exports.InputGroup = exports.FormInput = exports.Divider = exports.ActionsForm = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(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 = {}; 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -44,4 +44,8 @@ var NotificationsGroupSwitchWrapper = _styledComponents.default.div(_templateObj
 });
 exports.NotificationsGroupSwitchWrapper = NotificationsGroupSwitchWrapper;
 var SwitchWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
-exports.SwitchWrapper = SwitchWrapper;
+exports.SwitchWrapper = SwitchWrapper;
+var TextLinkWrapper = _styledComponents.default.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n  span {\n    font-size: 14px;\n    text-align: center;\n    cursor: pointer;\n    color: ", ";\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+});
+exports.TextLinkWrapper = TextLinkWrapper;

package/_modules/themes/five/src/components/UserPopover/index.js

@@ -13,6 +13,7 @@ var _style = require("../../../../../components/Dropdown/style");
 var _FaUserAlt = _interopRequireDefault(require("@meronex/icons/fa/FaUserAlt"));
 var _utils = require("../../../../../utils");
 var _AiOutlineMenu = _interopRequireDefault(require("@meronex/icons/ai/AiOutlineMenu"));
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(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 = {}; 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; }
@@ -28,24 +29,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var optionsDefault = [{
-  name: 'search',
-  pathname: '/explore',
-  displayName: 'My home',
-  key: 'my_home'
-}, {
-  name: 'business_search',
-  pathname: '/business_search',
-  displayName: 'Browse & Search',
-  key: 'browse_search'
-}, {
-  name: 'orders',
-  pathname: '/profile/orders',
-  displayName: 'orders',
-  key: 'orders'
-}];
 var UserPopover = function UserPopover(props) {
-  var _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _configs$advanced_off, _configs$advanced_off2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _props$beforeElements, _props$beforeComponen, _sessionState$user, _sessionState$user2, _props$afterComponent, _props$afterElements;
+  var _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _configs$advanced_off, _configs$advanced_off2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _theme$bar_menu, _theme$bar_menu$compo, _theme$bar_menu$compo2, _theme$bar_menu2, _theme$bar_menu2$comp, _theme$bar_menu2$comp2, _theme$bar_menu3, _theme$bar_menu3$comp, _theme$bar_menu3$comp2, _theme$bar_menu4, _theme$bar_menu4$comp, _theme$bar_menu4$comp2, _theme$bar_menu5, _theme$bar_menu5$comp, _theme$bar_menu5$comp2, _theme$bar_menu6, _theme$bar_menu6$comp, _theme$bar_menu6$comp2, _theme$bar_menu7, _theme$bar_menu7$comp, _theme$bar_menu7$comp2, _theme$bar_menu8, _theme$bar_menu8$comp, _theme$bar_menu8$comp2, _theme$bar_menu9, _theme$bar_menu9$comp, _theme$bar_menu9$comp2, _props$beforeElements, _props$beforeComponen, _sessionState$user, _sessionState$user2, _props$afterComponent, _props$afterElements;
   var open = props.open,
     isHome = props.isHome,
     optionsList = props.optionsList,
@@ -70,6 +55,7 @@ var UserPopover = function UserPopover(props) {
   var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
     _useOrder2 = _slicedToArray(_useOrder, 1),
     orderStatus = _useOrder2[0];
+  var theme = (0, _styledComponents.useTheme)();
   var referenceElement = (0, _react.useRef)();
   var popperElement = (0, _react.useRef)();
   var arrowElement = (0, _react.useRef)();
@@ -77,48 +63,76 @@ var UserPopover = function UserPopover(props) {
   var isPromotionsEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$advanced_off = configs.advanced_offers_module) === null || _configs$advanced_off === void 0 ? void 0 : _configs$advanced_off.value) === '1' || (configs === null || configs === void 0 ? void 0 : (_configs$advanced_off2 = configs.advanced_offers_module) === null || _configs$advanced_off2 === void 0 ? void 0 : _configs$advanced_off2.value) === true;
   var isAddressListNewPage = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.profile) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.address_list) === null || _orderingTheme$theme$3 === void 0 ? void 0 : (_orderingTheme$theme$4 = _orderingTheme$theme$3.components) === null || _orderingTheme$theme$4 === void 0 ? void 0 : (_orderingTheme$theme$5 = _orderingTheme$theme$4.layout) === null || _orderingTheme$theme$5 === void 0 ? void 0 : _orderingTheme$theme$5.position) === 'new_page';
   var isChew = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme2 = orderingTheme.theme) === null || _orderingTheme$theme2 === void 0 ? void 0 : (_orderingTheme$theme3 = _orderingTheme$theme2.header) === null || _orderingTheme$theme3 === void 0 ? void 0 : (_orderingTheme$theme4 = _orderingTheme$theme3.components) === null || _orderingTheme$theme4 === void 0 ? void 0 : (_orderingTheme$theme5 = _orderingTheme$theme4.layout) === null || _orderingTheme$theme5 === void 0 ? void 0 : (_orderingTheme$theme6 = _orderingTheme$theme5.type) === null || _orderingTheme$theme6 === void 0 ? void 0 : _orderingTheme$theme6.toLowerCase()) === 'chew';
+  var hideBrowse = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu = theme.bar_menu) === null || _theme$bar_menu === void 0 ? void 0 : (_theme$bar_menu$compo = _theme$bar_menu.components) === null || _theme$bar_menu$compo === void 0 ? void 0 : (_theme$bar_menu$compo2 = _theme$bar_menu$compo.browse) === null || _theme$bar_menu$compo2 === void 0 ? void 0 : _theme$bar_menu$compo2.hidden;
+  var hideOrders = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu2 = theme.bar_menu) === null || _theme$bar_menu2 === void 0 ? void 0 : (_theme$bar_menu2$comp = _theme$bar_menu2.components) === null || _theme$bar_menu2$comp === void 0 ? void 0 : (_theme$bar_menu2$comp2 = _theme$bar_menu2$comp.orders) === null || _theme$bar_menu2$comp2 === void 0 ? void 0 : _theme$bar_menu2$comp2.hidden;
+  var hideProfile = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu3 = theme.bar_menu) === null || _theme$bar_menu3 === void 0 ? void 0 : (_theme$bar_menu3$comp = _theme$bar_menu3.components) === null || _theme$bar_menu3$comp === void 0 ? void 0 : (_theme$bar_menu3$comp2 = _theme$bar_menu3$comp.profile) === null || _theme$bar_menu3$comp2 === void 0 ? void 0 : _theme$bar_menu3$comp2.hidden;
+  var hideWallet = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu4 = theme.bar_menu) === null || _theme$bar_menu4 === void 0 ? void 0 : (_theme$bar_menu4$comp = _theme$bar_menu4.components) === null || _theme$bar_menu4$comp === void 0 ? void 0 : (_theme$bar_menu4$comp2 = _theme$bar_menu4$comp.wallet) === null || _theme$bar_menu4$comp2 === void 0 ? void 0 : _theme$bar_menu4$comp2.hidden;
+  var hideMessages = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu5 = theme.bar_menu) === null || _theme$bar_menu5 === void 0 ? void 0 : (_theme$bar_menu5$comp = _theme$bar_menu5.components) === null || _theme$bar_menu5$comp === void 0 ? void 0 : (_theme$bar_menu5$comp2 = _theme$bar_menu5$comp.messages) === null || _theme$bar_menu5$comp2 === void 0 ? void 0 : _theme$bar_menu5$comp2.hidden;
+  var hideHelp = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu6 = theme.bar_menu) === null || _theme$bar_menu6 === void 0 ? void 0 : (_theme$bar_menu6$comp = _theme$bar_menu6.components) === null || _theme$bar_menu6$comp === void 0 ? void 0 : (_theme$bar_menu6$comp2 = _theme$bar_menu6$comp.help) === null || _theme$bar_menu6$comp2 === void 0 ? void 0 : _theme$bar_menu6$comp2.hidden;
+  var hideFavorites = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu7 = theme.bar_menu) === null || _theme$bar_menu7 === void 0 ? void 0 : (_theme$bar_menu7$comp = _theme$bar_menu7.components) === null || _theme$bar_menu7$comp === void 0 ? void 0 : (_theme$bar_menu7$comp2 = _theme$bar_menu7$comp.favortes) === null || _theme$bar_menu7$comp2 === void 0 ? void 0 : _theme$bar_menu7$comp2.hidden;
+  var hideSession = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu8 = theme.bar_menu) === null || _theme$bar_menu8 === void 0 ? void 0 : (_theme$bar_menu8$comp = _theme$bar_menu8.components) === null || _theme$bar_menu8$comp === void 0 ? void 0 : (_theme$bar_menu8$comp2 = _theme$bar_menu8$comp.sessions) === null || _theme$bar_menu8$comp2 === void 0 ? void 0 : _theme$bar_menu8$comp2.hidden;
+  var hidePromotions = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu9 = theme.bar_menu) === null || _theme$bar_menu9 === void 0 ? void 0 : (_theme$bar_menu9$comp = _theme$bar_menu9.components) === null || _theme$bar_menu9$comp === void 0 ? void 0 : (_theme$bar_menu9$comp2 = _theme$bar_menu9$comp.promotions) === null || _theme$bar_menu9$comp2 === void 0 ? void 0 : _theme$bar_menu9$comp2.hidden;
+  var optionsDefault = [{
+    name: 'search',
+    pathname: '/explore',
+    displayName: 'My home',
+    key: 'my_home',
+    isActive: true
+  }, {
+    name: 'business_search',
+    pathname: '/business_search',
+    displayName: 'Browse & Search',
+    key: 'browse_search',
+    isActive: !hideBrowse
+  }, {
+    name: 'orders',
+    pathname: '/profile/orders',
+    displayName: 'orders',
+    key: 'orders',
+    isActive: !hideOrders
+  }];
   var extraOptions = [{
     name: 'profile',
     pathname: '/profile',
     displayName: 'view account',
     key: 'view_account',
-    isActive: true
+    isActive: !hideProfile
   }, {
     name: 'wallets',
     pathname: '/wallets',
     displayName: 'wallets',
     key: 'wallets',
-    isActive: isWalletEnabled && !isCustomerMode
+    isActive: !hideWallet && isWalletEnabled && !isCustomerMode
   }, {
     name: 'promotions',
     pathname: '/promotions',
     displayName: 'promotions',
     key: 'promotions',
-    isActive: isPromotionsEnabled
+    isActive: !hidePromotions && isPromotionsEnabled
   }, {
     name: 'messages',
     pathname: '/messages',
     displayName: 'messages',
     key: 'messages',
-    isActive: !isCustomerMode
+    isActive: !hideMessages && !isCustomerMode
   }, {
     name: 'help',
     pathname: '/help',
     displayName: 'help',
     key: 'help',
-    isActive: true
+    isActive: !hideHelp
   }, {
     name: 'sessions',
     pathname: '/sessions',
     displayName: 'sessions',
     key: 'sessions',
-    isActive: true
+    isActive: !hideSession
   }, {
     name: 'favorite',
     pathname: '/favorite',
     displayName: 'favorites',
     key: 'favorites',
-    isActive: true
+    isActive: !hideFavorites
   }, {
     name: 'addresses',
     pathname: '/profile/addresses',
@@ -216,7 +230,9 @@ var UserPopover = function UserPopover(props) {
   }))), /*#__PURE__*/_react.default.createElement(_styles.PopoverBody, _extends({
     ref: popperElement,
     style: popStyle
-  }, attributes.popper), /*#__PURE__*/_react.default.createElement(_styles.PopoverList, null, options && options.length > 0 && options.map(function (option, i) {
+  }, attributes.popper), /*#__PURE__*/_react.default.createElement(_styles.PopoverList, null, options && options.length > 0 && options.filter(function (option) {
+    return option.isActive;
+  }).map(function (option, i) {
     return /*#__PURE__*/_react.default.createElement(_styles.PopoverListLink, {
       key: i,
       active: window.location.pathname === option.pathname,

package/_modules/themes/five/src/components/UserProfileForm/index.js

@@ -21,6 +21,7 @@ var _utils = require("../../../../../utils");
 var _FiCamera = _interopRequireDefault(require("@meronex/icons/fi/FiCamera"));
 var _BiImage = _interopRequireDefault(require("@meronex/icons/bi/BiImage"));
 var _styles = require("./styles");
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(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 = {}; 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; }
@@ -68,7 +69,7 @@ var ListItemLogout = function ListItemLogout() {
   return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.LogoutAction, logoutActionProps);
 };
 var UserProfileFormUI = function UserProfileFormUI(props) {
-  var _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme2, _orderingTheme$theme3, _orderingTheme$theme4, _orderingTheme$theme5, _orderingTheme$theme6, _orderingTheme$theme7, _orderingTheme$theme8, _orderingTheme$theme9, _configs$advanced_off, _configs$advanced_off2, _orderingTheme$theme10, _orderingTheme$theme11, _orderingTheme$theme12, _orderingTheme$theme13, _orderingTheme$theme14, _orderingTheme$theme15, _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _formState$changes5, _verifyPhoneState$res3, _props$beforeElements, _props$beforeComponen, _formState$changes6, _formState$changes7, _formState$changes8, _formState$result, _formState$changes9, _formState$changes10, _props$afterComponent, _props$afterElements;
+  var _theme$profile, _theme$profile$compon, _theme$profile$compon2, _theme$profile2, _theme$profile2$compo, _theme$profile2$compo2, _theme$profile3, _theme$profile3$compo, _theme$profile3$compo2, _configs$advanced_off, _configs$advanced_off2, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _orderingTheme$theme$4, _orderingTheme$theme$5, _configs$cash_wallet, _configs$wallet_enabl, _configs$wallet_cash_, _configs$wallet_credi, _theme$bar_menu, _theme$bar_menu$compo, _theme$bar_menu$compo2, _theme$bar_menu2, _theme$bar_menu2$comp, _theme$bar_menu2$comp2, _theme$bar_menu3, _theme$bar_menu3$comp, _theme$bar_menu3$comp2, _theme$bar_menu4, _theme$bar_menu4$comp, _theme$bar_menu4$comp2, _theme$bar_menu5, _theme$bar_menu5$comp, _theme$bar_menu5$comp2, _theme$bar_menu6, _theme$bar_menu6$comp, _theme$bar_menu6$comp2, _formState$changes5, _verifyPhoneState$res3, _props$beforeElements, _props$beforeComponen, _formState$changes6, _formState$changes7, _formState$changes8, _formState$result, _formState$changes9, _formState$changes10, _props$afterComponent, _props$afterElements;
   var userData = props.userData,
     handleButtonUpdateClick = props.handleButtonUpdateClick,
     handlechangeImage = props.handlechangeImage,
@@ -92,6 +93,7 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
   var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configs = _useConfig2[0].configs;
+  var theme = (0, _styledComponents.useTheme)();
   var _useOrderingTheme = (0, _orderingComponentsExternal.useOrderingTheme)(),
     _useOrderingTheme2 = _slicedToArray(_useOrderingTheme, 1),
     orderingTheme = _useOrderingTheme2[0];
@@ -112,48 +114,54 @@ var UserProfileFormUI = function UserProfileFormUI(props) {
     setAlertState = _useState4[1];
   var inputRef = (0, _react.useRef)(null);
   var windowSize = (0, _useWindowSize.useWindowSize)();
-  var showCustomerPicture = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme = orderingTheme.theme) !== null && _orderingTheme$theme !== void 0 && (_orderingTheme$theme$ = _orderingTheme$theme.profile) !== null && _orderingTheme$theme$ !== void 0 && (_orderingTheme$theme$2 = _orderingTheme$theme$.components) !== null && _orderingTheme$theme$2 !== void 0 && (_orderingTheme$theme$3 = _orderingTheme$theme$2.picture) !== null && _orderingTheme$theme$3 !== void 0 && _orderingTheme$theme$3.hidden);
-  var showAddressList = !(orderingTheme !== null && orderingTheme !== void 0 && (_orderingTheme$theme2 = orderingTheme.theme) !== null && _orderingTheme$theme2 !== void 0 && (_orderingTheme$theme3 = _orderingTheme$theme2.profile) !== null && _orderingTheme$theme3 !== void 0 && (_orderingTheme$theme4 = _orderingTheme$theme3.components) !== null && _orderingTheme$theme4 !== void 0 && (_orderingTheme$theme5 = _orderingTheme$theme4.address_list) !== null && _orderingTheme$theme5 !== void 0 && _orderingTheme$theme5.hidden);
-  var userFormLayoutRow = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme6 = orderingTheme.theme) === null || _orderingTheme$theme6 === void 0 ? void 0 : (_orderingTheme$theme7 = _orderingTheme$theme6.profile) === null || _orderingTheme$theme7 === void 0 ? void 0 : (_orderingTheme$theme8 = _orderingTheme$theme7.components) === null || _orderingTheme$theme8 === void 0 ? void 0 : (_orderingTheme$theme9 = _orderingTheme$theme8.layout) === null || _orderingTheme$theme9 === void 0 ? void 0 : _orderingTheme$theme9.position) === 'row';
+  var showCustomerPicture = !(theme !== null && theme !== void 0 && (_theme$profile = theme.profile) !== null && _theme$profile !== void 0 && (_theme$profile$compon = _theme$profile.components) !== null && _theme$profile$compon !== void 0 && (_theme$profile$compon2 = _theme$profile$compon.picture) !== null && _theme$profile$compon2 !== void 0 && _theme$profile$compon2.hidden);
+  var showAddressList = !(theme !== null && theme !== void 0 && (_theme$profile2 = theme.profile) !== null && _theme$profile2 !== void 0 && (_theme$profile2$compo = _theme$profile2.components) !== null && _theme$profile2$compo !== void 0 && (_theme$profile2$compo2 = _theme$profile2$compo.address_list) !== null && _theme$profile2$compo2 !== void 0 && _theme$profile2$compo2.hidden);
+  var userFormLayoutRow = (theme === null || theme === void 0 ? void 0 : (_theme$profile3 = theme.profile) === null || _theme$profile3 === void 0 ? void 0 : (_theme$profile3$compo = _theme$profile3.components) === null || _theme$profile3$compo === void 0 ? void 0 : (_theme$profile3$compo2 = _theme$profile3$compo.layout) === null || _theme$profile3$compo2 === void 0 ? void 0 : _theme$profile3$compo2.position) === 'row';
   var isPromotionsEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$advanced_off = configs.advanced_offers_module) === null || _configs$advanced_off === void 0 ? void 0 : _configs$advanced_off.value) === '1' || (configs === null || configs === void 0 ? void 0 : (_configs$advanced_off2 = configs.advanced_offers_module) === null || _configs$advanced_off2 === void 0 ? void 0 : _configs$advanced_off2.value) === true;
-  var isAddressListNewPage = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme10 = orderingTheme.theme) === null || _orderingTheme$theme10 === void 0 ? void 0 : (_orderingTheme$theme11 = _orderingTheme$theme10.profile) === null || _orderingTheme$theme11 === void 0 ? void 0 : (_orderingTheme$theme12 = _orderingTheme$theme11.components) === null || _orderingTheme$theme12 === void 0 ? void 0 : (_orderingTheme$theme13 = _orderingTheme$theme12.address_list) === null || _orderingTheme$theme13 === void 0 ? void 0 : (_orderingTheme$theme14 = _orderingTheme$theme13.components) === null || _orderingTheme$theme14 === void 0 ? void 0 : (_orderingTheme$theme15 = _orderingTheme$theme14.layout) === null || _orderingTheme$theme15 === void 0 ? void 0 : _orderingTheme$theme15.position) === 'new_page';
+  var isAddressListNewPage = (orderingTheme === null || orderingTheme === void 0 ? void 0 : (_orderingTheme$theme = orderingTheme.theme) === null || _orderingTheme$theme === void 0 ? void 0 : (_orderingTheme$theme$ = _orderingTheme$theme.profile) === null || _orderingTheme$theme$ === void 0 ? void 0 : (_orderingTheme$theme$2 = _orderingTheme$theme$.components) === null || _orderingTheme$theme$2 === void 0 ? void 0 : (_orderingTheme$theme$3 = _orderingTheme$theme$2.address_list) === null || _orderingTheme$theme$3 === void 0 ? void 0 : (_orderingTheme$theme$4 = _orderingTheme$theme$3.components) === null || _orderingTheme$theme$4 === void 0 ? void 0 : (_orderingTheme$theme$5 = _orderingTheme$theme$4.layout) === null || _orderingTheme$theme$5 === void 0 ? void 0 : _orderingTheme$theme$5.position) === 'new_page';
   var isWalletEnabled = (configs === null || configs === void 0 ? void 0 : (_configs$cash_wallet = configs.cash_wallet) === null || _configs$cash_wallet === void 0 ? void 0 : _configs$cash_wallet.value) && (configs === null || configs === void 0 ? void 0 : (_configs$wallet_enabl = configs.wallet_enabled) === null || _configs$wallet_enabl === void 0 ? void 0 : _configs$wallet_enabl.value) === '1' && ((configs === null || configs === void 0 ? void 0 : (_configs$wallet_cash_ = configs.wallet_cash_enabled) === null || _configs$wallet_cash_ === void 0 ? void 0 : _configs$wallet_cash_.value) === '1' || (configs === null || configs === void 0 ? void 0 : (_configs$wallet_credi = configs.wallet_credit_point_enabled) === null || _configs$wallet_credi === void 0 ? void 0 : _configs$wallet_credi.value) === '1');
+  var hideWallet = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu = theme.bar_menu) === null || _theme$bar_menu === void 0 ? void 0 : (_theme$bar_menu$compo = _theme$bar_menu.components) === null || _theme$bar_menu$compo === void 0 ? void 0 : (_theme$bar_menu$compo2 = _theme$bar_menu$compo.wallet) === null || _theme$bar_menu$compo2 === void 0 ? void 0 : _theme$bar_menu$compo2.hidden;
+  var hideMessages = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu2 = theme.bar_menu) === null || _theme$bar_menu2 === void 0 ? void 0 : (_theme$bar_menu2$comp = _theme$bar_menu2.components) === null || _theme$bar_menu2$comp === void 0 ? void 0 : (_theme$bar_menu2$comp2 = _theme$bar_menu2$comp.messages) === null || _theme$bar_menu2$comp2 === void 0 ? void 0 : _theme$bar_menu2$comp2.hidden;
+  var hideHelp = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu3 = theme.bar_menu) === null || _theme$bar_menu3 === void 0 ? void 0 : (_theme$bar_menu3$comp = _theme$bar_menu3.components) === null || _theme$bar_menu3$comp === void 0 ? void 0 : (_theme$bar_menu3$comp2 = _theme$bar_menu3$comp.help) === null || _theme$bar_menu3$comp2 === void 0 ? void 0 : _theme$bar_menu3$comp2.hidden;
+  var hideFavorites = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu4 = theme.bar_menu) === null || _theme$bar_menu4 === void 0 ? void 0 : (_theme$bar_menu4$comp = _theme$bar_menu4.components) === null || _theme$bar_menu4$comp === void 0 ? void 0 : (_theme$bar_menu4$comp2 = _theme$bar_menu4$comp.favortes) === null || _theme$bar_menu4$comp2 === void 0 ? void 0 : _theme$bar_menu4$comp2.hidden;
+  var hideSession = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu5 = theme.bar_menu) === null || _theme$bar_menu5 === void 0 ? void 0 : (_theme$bar_menu5$comp = _theme$bar_menu5.components) === null || _theme$bar_menu5$comp === void 0 ? void 0 : (_theme$bar_menu5$comp2 = _theme$bar_menu5$comp.sessions) === null || _theme$bar_menu5$comp2 === void 0 ? void 0 : _theme$bar_menu5$comp2.hidden;
+  var hidePromotions = theme === null || theme === void 0 ? void 0 : (_theme$bar_menu6 = theme.bar_menu) === null || _theme$bar_menu6 === void 0 ? void 0 : (_theme$bar_menu6$comp = _theme$bar_menu6.components) === null || _theme$bar_menu6$comp === void 0 ? void 0 : (_theme$bar_menu6$comp2 = _theme$bar_menu6$comp.promotions) === null || _theme$bar_menu6$comp2 === void 0 ? void 0 : _theme$bar_menu6$comp2.hidden;
   var profileOptions = [{
     name: 'wallets',
     pathname: '/wallets',
     displayName: 'wallets',
     key: 'wallets',
-    isActive: isWalletEnabled && !isCustomerMode
+    isActive: !hideWallet && isWalletEnabled && !isCustomerMode
   }, {
     name: 'promotions',
     pathname: '/promotions',
     displayName: 'promotions',
     key: 'promotions',
-    isActive: isPromotionsEnabled
+    isActive: !hidePromotions && isPromotionsEnabled
   }, {
     name: 'messages',
     pathname: '/messages',
     displayName: 'messages',
     key: 'messages',
-    isActive: !isCustomerMode
+    isActive: !hideMessages && !isCustomerMode
   }, {
     name: 'help',
     pathname: '/help',
     displayName: 'help',
     key: 'help',
-    isActive: true
+    isActive: !hideHelp
   }, {
     name: 'sessions',
     pathname: '/sessions',
     displayName: 'sessions',
     key: 'sessions',
-    isActive: true
+    isActive: !hideSession
   }, {
     name: 'favorite',
     pathname: '/favorite',
     displayName: 'favorites',
     key: 'favorites',
-    isActive: true
+    isActive: !hideFavorites
   }, {
     name: 'addresses',
     pathname: '/profile/addresses',

package/_modules/themes/five/src/styles/Buttons/index.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Button = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _polished = require("polished");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(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 = {}; 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Button = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #CCC;\n  color: #FFF;\n  border: 1px solid #CCC;\n  border-radius: 7.6px;\n  line-height: 30px;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-size: 16px;\n  cursor: pointer;\n  outline: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  &:active {\n    background: ", ";\n  }\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function () {
+var Button = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #CCC;\n  color: #FFF;\n  border: 1px solid #CCC;\n  border-radius: 7.6px;\n  line-height: 30px;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-size: 16px;\n  cursor: pointer;\n  outline: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  &:active {\n    background: ", ";\n  }\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function () {
   return (0, _polished.darken)(0.07, '#CCC');
 }, function (_ref) {
   var bgtransparent = _ref.bgtransparent;
@@ -28,18 +28,28 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding-right: 15%;\n        padding-left: 0;\n    "])));
   });
 }, function (_ref3) {
-  var outline = _ref3.outline;
-  return outline && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background: #FFF;\n    color: #CCC;\n    border-color: #CCC;\n    &:active {\n      color: #FFF;\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n      color: #FFF;\n    }\n  "])), (0, _polished.darken)(0.07, '#CCC'), (0, _polished.darken)(0.07, '#CCC'));
+  var _theme$general, _theme$general$compon, _theme$general$compon2, _theme$general2, _theme$general2$compo, _theme$general2$compo2;
+  var theme = _ref3.theme;
+  return (theme === null || theme === void 0 ? void 0 : (_theme$general = theme.general) === null || _theme$general === void 0 ? void 0 : (_theme$general$compon = _theme$general.components) === null || _theme$general$compon === void 0 ? void 0 : (_theme$general$compon2 = _theme$general$compon.buttons) === null || _theme$general$compon2 === void 0 ? void 0 : _theme$general$compon2.borderRadius) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      border-radius: ", ";\n  "])), theme === null || theme === void 0 ? void 0 : (_theme$general2 = theme.general) === null || _theme$general2 === void 0 ? void 0 : (_theme$general2$compo = _theme$general2.components) === null || _theme$general2$compo === void 0 ? void 0 : (_theme$general2$compo2 = _theme$general2$compo.buttons) === null || _theme$general2$compo2 === void 0 ? void 0 : _theme$general2$compo2.borderRadius);
 }, function (_ref4) {
-  var circle = _ref4.circle;
-  return circle && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    background: #CCC;\n    color: #FFF;\n    border-color: #CCC;\n    padding: 0;\n    width: 34px;\n    height: 34px;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 50%;\n    &:active {\n      color: #FFF;\n      background: ", ";\n    }\n  "])), (0, _polished.darken)(0.07, '#CCC'));
+  var _theme$general3, _theme$general3$compo, _theme$general3$compo2, _theme$general3$compo3, _theme$general4, _theme$general4$compo, _theme$general4$compo2, _theme$general4$compo3, _theme$general4$compo4, _theme$general5, _theme$general5$compo, _theme$general5$compo2, _theme$general5$compo3, _theme$general5$compo4, _theme$general6, _theme$general6$compo, _theme$general6$compo2, _theme$general6$compo3, _theme$general6$compo4, _theme$general7, _theme$general7$compo, _theme$general7$compo2, _theme$general7$compo3, _theme$general7$compo4, _theme$general8, _theme$general8$compo, _theme$general8$compo2, _theme$general8$compo3, _theme$general8$compo4;
+  var theme = _ref4.theme;
+  return Object.values((theme === null || theme === void 0 ? void 0 : (_theme$general3 = theme.general) === null || _theme$general3 === void 0 ? void 0 : (_theme$general3$compo = _theme$general3.components) === null || _theme$general3$compo === void 0 ? void 0 : (_theme$general3$compo2 = _theme$general3$compo.buttons) === null || _theme$general3$compo2 === void 0 ? void 0 : (_theme$general3$compo3 = _theme$general3$compo2.shadow) === null || _theme$general3$compo3 === void 0 ? void 0 : _theme$general3$compo3.components) || {}).some(function (val) {
+    return !!val;
+  }) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    box-shadow: \n      ", "\n      ", "\n      ", "\n      ", "\n      ", ";\n  "])), (theme === null || theme === void 0 ? void 0 : (_theme$general4 = theme.general) === null || _theme$general4 === void 0 ? void 0 : (_theme$general4$compo = _theme$general4.components) === null || _theme$general4$compo === void 0 ? void 0 : (_theme$general4$compo2 = _theme$general4$compo.buttons) === null || _theme$general4$compo2 === void 0 ? void 0 : (_theme$general4$compo3 = _theme$general4$compo2.shadow) === null || _theme$general4$compo3 === void 0 ? void 0 : (_theme$general4$compo4 = _theme$general4$compo3.components) === null || _theme$general4$compo4 === void 0 ? void 0 : _theme$general4$compo4.x) || '0px', (theme === null || theme === void 0 ? void 0 : (_theme$general5 = theme.general) === null || _theme$general5 === void 0 ? void 0 : (_theme$general5$compo = _theme$general5.components) === null || _theme$general5$compo === void 0 ? void 0 : (_theme$general5$compo2 = _theme$general5$compo.buttons) === null || _theme$general5$compo2 === void 0 ? void 0 : (_theme$general5$compo3 = _theme$general5$compo2.shadow) === null || _theme$general5$compo3 === void 0 ? void 0 : (_theme$general5$compo4 = _theme$general5$compo3.components) === null || _theme$general5$compo4 === void 0 ? void 0 : _theme$general5$compo4.y) || '0px', (theme === null || theme === void 0 ? void 0 : (_theme$general6 = theme.general) === null || _theme$general6 === void 0 ? void 0 : (_theme$general6$compo = _theme$general6.components) === null || _theme$general6$compo === void 0 ? void 0 : (_theme$general6$compo2 = _theme$general6$compo.buttons) === null || _theme$general6$compo2 === void 0 ? void 0 : (_theme$general6$compo3 = _theme$general6$compo2.shadow) === null || _theme$general6$compo3 === void 0 ? void 0 : (_theme$general6$compo4 = _theme$general6$compo3.components) === null || _theme$general6$compo4 === void 0 ? void 0 : _theme$general6$compo4.blur) || '0px', (theme === null || theme === void 0 ? void 0 : (_theme$general7 = theme.general) === null || _theme$general7 === void 0 ? void 0 : (_theme$general7$compo = _theme$general7.components) === null || _theme$general7$compo === void 0 ? void 0 : (_theme$general7$compo2 = _theme$general7$compo.buttons) === null || _theme$general7$compo2 === void 0 ? void 0 : (_theme$general7$compo3 = _theme$general7$compo2.shadow) === null || _theme$general7$compo3 === void 0 ? void 0 : (_theme$general7$compo4 = _theme$general7$compo3.components) === null || _theme$general7$compo4 === void 0 ? void 0 : _theme$general7$compo4.spread) || '0px', (theme === null || theme === void 0 ? void 0 : (_theme$general8 = theme.general) === null || _theme$general8 === void 0 ? void 0 : (_theme$general8$compo = _theme$general8.components) === null || _theme$general8$compo === void 0 ? void 0 : (_theme$general8$compo2 = _theme$general8$compo.buttons) === null || _theme$general8$compo2 === void 0 ? void 0 : (_theme$general8$compo3 = _theme$general8$compo2.shadow) === null || _theme$general8$compo3 === void 0 ? void 0 : (_theme$general8$compo4 = _theme$general8$compo3.components) === null || _theme$general8$compo4 === void 0 ? void 0 : _theme$general8$compo4.color) || '#000');
 }, function (_ref5) {
-  var circle = _ref5.circle,
-    outline = _ref5.outline;
-  return circle && outline && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background: #FFF;\n    color: #CCC;\n    border-color: #CCC;\n    padding: 0;\n    width: 34px;\n    height: 34px;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 50%;\n    &:active {\n      color: #FFF;\n      background: ", ";\n    }\n  "])), (0, _polished.darken)(0.07, '#CCC'));
+  var outline = _ref5.outline;
+  return outline && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background: #FFF;\n    color: #CCC;\n    border-color: #CCC;\n    &:active {\n      color: #FFF;\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n      color: #FFF;\n    }\n  "])), (0, _polished.darken)(0.07, '#CCC'), (0, _polished.darken)(0.07, '#CCC'));
 }, function (_ref6) {
-  var color = _ref6.color;
-  return color === 'primary' && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n      color: #FFF;\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
+  var circle = _ref6.circle;
+  return circle && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    background: #CCC;\n    color: #FFF;\n    border-color: #CCC;\n    padding: 0;\n    width: 34px;\n    height: 34px;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 50%;\n    &:active {\n      color: #FFF;\n      background: ", ";\n    }\n  "])), (0, _polished.darken)(0.07, '#CCC'));
+}, function (_ref7) {
+  var circle = _ref7.circle,
+    outline = _ref7.outline;
+  return circle && outline && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background: #FFF;\n    color: #CCC;\n    border-color: #CCC;\n    padding: 0;\n    width: 34px;\n    height: 34px;\n    line-height: 34px;\n    text-align: center;\n    border-radius: 50%;\n    &:active {\n      color: #FFF;\n      background: ", ";\n    }\n  "])), (0, _polished.darken)(0.07, '#CCC'));
+}, function (_ref8) {
+  var color = _ref8.color;
+  return color === 'primary' && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n      color: #FFF;\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.primaryContrast;
@@ -49,9 +59,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     return (0, _polished.darken)(0.07, props.theme.colors.primary);
   }, function (props) {
     return (0, _polished.darken)(0.07, props.theme.colors.primary);
-  }, function (_ref7) {
-    var outline = _ref7.outline;
-    return outline && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: #FFF;\n      }\n    "])), function (props) {
+  }, function (_ref9) {
+    var outline = _ref9.outline;
+    return outline && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: #FFF;\n      }\n    "])), function (props) {
       return props.theme.colors.primary;
     }, function (props) {
       return props.theme.colors.primary;
@@ -62,9 +72,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     }, function (props) {
       return (0, _polished.darken)(0.07, props.theme.colors.primary);
     });
-  }, function (_ref8) {
-    var circle = _ref8.circle;
-    return circle && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
+  }, function (_ref10) {
+    var circle = _ref10.circle;
+    return circle && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
       return props.theme.colors.primary;
     }, function (props) {
       return props.theme.colors.primaryContrast;
@@ -75,10 +85,10 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     }, function (props) {
       return (0, _polished.darken)(0.07, props.theme.colors.primary);
     });
-  }, function (_ref9) {
-    var circle = _ref9.circle,
-      outline = _ref9.outline;
-    return circle && outline && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
+  }, function (_ref11) {
+    var circle = _ref11.circle,
+      outline = _ref11.outline;
+    return circle && outline && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
       return props.theme.colors.primary;
     }, function (props) {
       return props.theme.colors.primary;
@@ -88,9 +98,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
       return props.theme.colors.primary;
     });
   });
-}, function (_ref10) {
-  var color = _ref10.color;
-  return color === 'primaryContrast' && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n    ", "\n  "])), function (props) {
+}, function (_ref12) {
+  var color = _ref12.color;
+  return color === 'primaryContrast' && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n    ", "\n  "])), function (props) {
     return props.theme.colors.primaryContrast;
   }, function (props) {
     return props.theme.colors.primary;
@@ -100,13 +110,13 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     return (0, _polished.darken)(0.04, props.theme.colors.primaryContrast);
   }, function (props) {
     return (0, _polished.darken)(0.1, props.theme.colors.primaryContrast);
-  }, function (_ref11) {
-    var naked = _ref11.naked;
-    return naked && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n      background: transparent;\n      border-color: transparent;\n      &:active {\n        background: transparent;\n      }\n      &:hover {\n        background: transparent;\n      }\n    "])));
+  }, function (_ref13) {
+    var naked = _ref13.naked;
+    return naked && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      background: transparent;\n      border-color: transparent;\n      &:active {\n        background: transparent;\n      }\n      &:hover {\n        background: transparent;\n      }\n    "])));
   });
-}, function (_ref12) {
-  var color = _ref12.color;
-  return color === 'secundary' && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
+}, function (_ref14) {
+  var color = _ref14.color;
+  return color === 'secundary' && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
     return props.theme.colors.secundary;
   }, function (props) {
     return props.theme.colors.secundaryContrast;
@@ -114,9 +124,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     return props.theme.colors.secundary;
   }, function (props) {
     return (0, _polished.darken)(0.07, props.theme.colors.secundary);
-  }, function (_ref13) {
-    var outline = _ref13.outline;
-    return outline && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: #FFF;\n      }\n    "])), function (props) {
+  }, function (_ref15) {
+    var outline = _ref15.outline;
+    return outline && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: #FFF;\n      }\n    "])), function (props) {
       return props.theme.colors.secundary;
     }, function (props) {
       return props.theme.colors.secundary;
@@ -127,9 +137,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     }, function (props) {
       return (0, _polished.darken)(0.07, props.theme.colors.secundary);
     });
-  }, function (_ref14) {
-    var circle = _ref14.circle;
-    return circle && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        color: ", ";\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
+  }, function (_ref16) {
+    var circle = _ref16.circle;
+    return circle && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        color: ", ";\n        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
       return props.theme.colors.secundary;
     }, function (props) {
       return props.theme.colors.secundaryContrast;
@@ -142,10 +152,10 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     }, function (props) {
       return (0, _polished.darken)(0.07, props.theme.colors.secundary);
     });
-  }, function (_ref15) {
-    var circle = _ref15.circle,
-      outline = _ref15.outline;
-    return circle && outline && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n        color: ", ";\n      }\n    "])), function (props) {
+  }, function (_ref17) {
+    var circle = _ref17.circle,
+      outline = _ref17.outline;
+    return circle && outline && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      background: #FFF;\n      color: ", ";\n      border-color: ", ";\n      padding: 0;\n      width: 34px;\n      height: 34px;\n      line-height: 34px;\n      text-align: center;\n      border-radius: 50%;\n      &:active {\n        border-color: ", ";\n        background: ", ";\n        color: ", ";\n      }\n    "])), function (props) {
       return props.theme.colors.secundary;
     }, function (props) {
       return props.theme.colors.secundary;
@@ -157,9 +167,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
       return props.theme.colors.secundaryContrast;
     });
   });
-}, function (_ref16) {
-  var color = _ref16.color;
-  return color === 'gray' && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), function (props) {
+}, function (_ref18) {
+  var color = _ref18.color;
+  return color === 'gray' && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), function (props) {
     return props.theme.colors.grayDividerColor;
   }, function (props) {
     return props.theme.colors.darkGray;
@@ -170,9 +180,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
   }, function (props) {
     return (0, _polished.darken)(0.07, props.theme.colors.grayDividerColor);
   });
-}, function (_ref17) {
-  var color = _ref17.color;
-  return color === 'lightGray' && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), function (props) {
+}, function (_ref19) {
+  var color = _ref19.color;
+  return color === 'lightGray' && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), function (props) {
     return props.theme.colors.gray200;
   }, function (props) {
     return props.theme.colors.secondaryDark;
@@ -183,9 +193,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
   }, function (props) {
     return (0, _polished.darken)(0.07, props.theme.colors.gray200);
   });
-}, function (_ref18) {
-  var color = _ref18.color;
-  return color === 'red' && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    background: ", ";;\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n    ", "\n  "])), function (props) {
+}, function (_ref20) {
+  var color = _ref20.color;
+  return color === 'red' && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    background: ", ";;\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n    ", "\n  "])), function (props) {
     return props.theme.colors.danger500;
   }, function (props) {
     return props.theme.colors.backgroundPage;
@@ -195,9 +205,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     return (0, _polished.darken)(0.05, props.theme.colors.danger500);
   }, function (props) {
     return (0, _polished.darken)(0.07, props.theme.colors.danger500);
-  }, function (_ref19) {
-    var outline = _ref19.outline;
-    return outline && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    "])), function (props) {
+  }, function (_ref21) {
+    var outline = _ref21.outline;
+    return outline && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    "])), function (props) {
       return props.theme.colors.backgroundPage;
     }, function (props) {
       return props.theme.colors.danger500;
@@ -213,9 +223,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
       return props.theme.colors.backgroundPage;
     });
   });
-}, function (_ref20) {
-  var color = _ref20.color;
-  return color === 'black' && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    background: ", ";;\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n    ", "\n  "])), function (props) {
+}, function (_ref22) {
+  var color = _ref22.color;
+  return color === 'black' && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    background: ", ";;\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    &:hover {\n      background: ", ";\n    }\n    ", "\n  "])), function (props) {
     return props.theme.colors.black;
   }, function (props) {
     return props.theme.colors.backgroundPage;
@@ -225,9 +235,9 @@ var Button = _styledComponents.default.button(_templateObject || (_templateObjec
     return (0, _polished.darken)(0.05, props.theme.colors.black);
   }, function (props) {
     return (0, _polished.darken)(0.07, props.theme.colors.black);
-  }, function (_ref21) {
-    var outline = _ref21.outline;
-    return outline && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    "])), function (props) {
+  }, function (_ref23) {
+    var outline = _ref23.outline;
+    return outline && (0, _styledComponents.css)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    "])), function (props) {
       return props.theme.colors.backgroundPage;
     }, function (props) {
       return props.theme.colors.black;