ordering-ui-external 1.0.0 → 1.1.1

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

@@ -11,7 +11,7 @@ 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, _templateObject25, _templateObject26, _templateObject27;
+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, _templateObject27, _templateObject28;
 
 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); }
 
@@ -19,16 +19,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var LoginContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  min-height: ", ";\n  padding: 0 10px;\n  box-sizing: border-box;\n\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"])), function (_ref) {
+var LoginContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  padding: 0 10px;\n  box-sizing: border-box;\n\n  flex-direction: column;\n\n  ", "\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n  }\n"])), function (_ref) {
   var isPopup = _ref.isPopup;
-  return isPopup ? '410px' : 'calc(100vh - 65px)';
+  return !isPopup && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-height: calc(100vh - 65px);\n  "])));
 });
 
 exports.LoginContainer = LoginContainer;
 
-var Side = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
+var Side = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n"])));
 
-var FormSide = (0, _styledComponents.default)(Side)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  @media (min-width: 992px) {\n    width: ", ";\n    font-size: ", ";\n  }\n\n  @media (min-width: 1200px){\n    font-size: ", ";\n  }\n"])), function (_ref2) {
+var FormSide = (0, _styledComponents.default)(Side)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  @media (min-width: 992px) {\n    width: ", ";\n    font-size: ", ";\n  }\n\n  @media (min-width: 1200px){\n    font-size: ", ";\n  }\n"])), function (_ref2) {
   var isCustomerMode = _ref2.isCustomerMode;
   return isCustomerMode ? '55%' : '100%';
 }, function (_ref3) {
@@ -40,13 +40,13 @@ var FormSide = (0, _styledComponents.default)(Side)(_templateObject3 || (_templa
 });
 exports.FormSide = FormSide;
 
-var Title = _styledComponents.default.h1(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 24px;\n  margin-top: 0;\n  margin-bottom: 30px;\n  color: ", ";\n"])), function (props) {
+var Title = _styledComponents.default.h1(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 24px;\n  margin-top: 0;\n  margin-bottom: 30px;\n  color: ", ";\n"])), function (props) {
   return props.theme.colors.darkTextColor;
 });
 
 exports.Title = Title;
 
-var LoginWith = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: ", ";\n  border-bottom: 1px solid #E9ECEF;\n  font-size: 14px;\n  margin-bottom: 10px;\n\n  @media (min-width: 425px) {\n    font-size: 18px;\n  }\n\n  @media (min-width: 768px) {\n    font-size: 14px;\n  }\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n  }\n\n  @media (min-width: 1200px) {\n    ", ";\n  }\n"])), function (_ref5) {
+var LoginWith = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: ", ";\n  border-bottom: 1px solid #E9ECEF;\n  font-size: 14px;\n  margin-bottom: 10px;\n\n  @media (min-width: 425px) {\n    font-size: 18px;\n  }\n\n  @media (min-width: 768px) {\n    font-size: 14px;\n  }\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n  }\n\n  @media (min-width: 1200px) {\n    ", ";\n  }\n"])), function (_ref5) {
   var isPopup = _ref5.isPopup;
   return isPopup ? '100%' : '80%';
 }, function (_ref6) {
@@ -54,22 +54,22 @@ var LoginWith = _styledComponents.default.div(_templateObject5 || (_templateObje
   return isPopup ? '13px' : '18px';
 }, function (_ref7) {
   var isPopup = _ref7.isPopup;
-  return isPopup && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-size: 17px;\n    "])));
+  return isPopup && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: 17px;\n    "])));
 });
 
 exports.LoginWith = LoginWith;
 
-var FormInput = _styledComponents.default.form(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", ";\n  display: flex;\n  flex-direction: column;\n\n  input:not(:last-child) {\n    margin: 5px 0px;\n    padding: 8px 20px;\n  }\n\n  button {\n    margin-top: 10px;\n    padding: 5px;\n  }\n\n  .phone_number {\n    margin: 10px 0;\n  }\n"])), function (_ref8) {
+var FormInput = _styledComponents.default.form(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: ", ";\n  display: flex;\n  flex-direction: column;\n\n  input:not(:last-child) {\n    margin: 5px 0px;\n    padding: 8px 20px;\n  }\n\n  button {\n    margin-top: 10px;\n    padding: 5px;\n  }\n\n  .phone_number {\n    margin: 10px 0;\n  }\n"])), function (_ref8) {
   var isPopup = _ref8.isPopup;
   return isPopup ? '100%' : '80%';
 });
 
 exports.FormInput = FormInput;
 
-var RedirectLink = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  margin: 0px;\n  font-size: 17px;\n\n  span {\n    margin-right: 5px;\n    color: black;\n    ", "\n  }\n\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &.new-account {\n    a {\n      color: ", " !important;\n      text-decoration: none;\n      &:link, &:visited {\n        color: ", " !important;\n      }\n      &:hover {\n        text-decoration: underline !important;\n      }\n    }\n  }\n\n  * {\n    margin: 0px;\n    padding: 0px;\n  }\n\n  ", "\n\n  @media (min-width: 425px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 768px) {\n    font-size: 14px;\n  }\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n    flex-direction: row;\n  }\n\n  @media (min-width: 1200px) {\n    ", ";\n  }\n"])), function (props) {
+var RedirectLink = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  margin: 0px;\n  font-size: 17px;\n\n  span {\n    margin-right: 5px;\n    color: black;\n    ", "\n  }\n\n  a {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &.new-account {\n    a {\n      color: ", " !important;\n      text-decoration: none;\n      &:link, &:visited {\n        color: ", " !important;\n      }\n      &:hover {\n        text-decoration: underline !important;\n      }\n    }\n  }\n\n  * {\n    margin: 0px;\n    padding: 0px;\n  }\n\n  ", "\n\n  @media (min-width: 425px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 768px) {\n    font-size: 14px;\n  }\n\n  @media (min-width: 992px) {\n    font-size: ", ";\n    flex-direction: row;\n  }\n\n  @media (min-width: 1200px) {\n    ", ";\n  }\n"])), function (props) {
   var _props$theme;
 
-  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n      margin-right: 0px;\n    "])));
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      margin-left: 5px;\n      margin-right: 0px;\n    "])));
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
@@ -78,7 +78,7 @@ var RedirectLink = _styledComponents.default.div(_templateObject8 || (_templateO
   return props.theme.colors.primary;
 }, function (_ref9) {
   var register = _ref9.register;
-  return register && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: calc(95% - 20px);\n\n    @media (min-width: 481px) {\n      width: ", ";\n    }\n  "])), function (_ref10) {
+  return register && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    width: calc(95% - 20px);\n\n    @media (min-width: 481px) {\n      width: ", ";\n    }\n  "])), function (_ref10) {
     var isPopup = _ref10.isPopup;
     return isPopup ? 'calc(100% - 20px)' : 'calc(80% - 20px)';
   });
@@ -87,46 +87,46 @@ var RedirectLink = _styledComponents.default.div(_templateObject8 || (_templateO
   return isPopup ? '13px' : '18px';
 }, function (_ref12) {
   var isPopup = _ref12.isPopup;
-  return isPopup && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      font-size: 16px;\n    "])));
+  return isPopup && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      font-size: 16px;\n    "])));
 });
 
 exports.RedirectLink = RedirectLink;
 
-var SocialButtons = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n   width: ", ";\n   margin-top: 10px;\n\n  button {\n    width: 100%;\n    padding: 6px 40px;\n    color: #000000;\n\n    img {\n      width: 16px;\n    }\n\n    div {\n      font-size: 16px;\n    }\n  }\n"])), function (_ref13) {
+var SocialButtons = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n   width: ", ";\n   margin-top: 10px;\n\n  button {\n    width: 100%;\n    padding: 6px 40px;\n    color: #000000;\n\n    img {\n      width: 16px;\n    }\n\n    div {\n      font-size: 16px;\n    }\n  }\n"])), function (_ref13) {
   var isPopup = _ref13.isPopup;
   return isPopup ? '100%' : '80%';
 });
 
 exports.SocialButtons = SocialButtons;
 
-var SkeletonSocialWrapper = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: ", ";\n  span{\n    border-radius: 30px;\n    margin-bottom: 10px\n  }\n"])), function (_ref14) {
+var SkeletonSocialWrapper = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  width: ", ";\n  span{\n    border-radius: 30px;\n    margin-bottom: 10px\n  }\n"])), function (_ref14) {
   var isPopup = _ref14.isPopup;
   return isPopup ? '100%' : '80%';
 });
 
 exports.SkeletonSocialWrapper = SkeletonSocialWrapper;
 
-var TogglePassword = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 300;\n  color: #333;\n  font-size: 24px;\n  transform: translate(-150%, 24%);\n  max-height: 100%;\n  ", "\n  span{\n    cursor: pointer;\n  }\n\n  svg {\n    font-size: 16px;\n    color: ", ";\n  }\n"])), function (props) {
+var TogglePassword = _styledComponents.default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  font-weight: 300;\n  color: #333;\n  font-size: 24px;\n  transform: translate(-150%, 24%);\n  max-height: 100%;\n  ", "\n  span{\n    cursor: pointer;\n  }\n\n  svg {\n    font-size: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   var _props$theme2;
 
-  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    transform: translate(150%, 24%);\n  "])));
+  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    transform: translate(150%, 24%);\n  "])));
 }, function (props) {
   return props.theme.colors.lightGray;
 });
 
 exports.TogglePassword = TogglePassword;
 
-var InputWrapper = _styledComponents.default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-bottom: 5px;\n  \n  input{\n    box-sizing: border-box;\n    width: 100%;\n    padding-right: 40px !important;\n    padding-left: 40px !important;\n    margin: 10px 0;\n  }\n"])));
+var InputWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-bottom: 5px;\n  \n  input{\n    box-sizing: border-box;\n    width: 100%;\n    padding-right: 40px !important;\n    padding-left: 40px !important;\n    margin: 10px 0;\n  }\n"])));
 
 exports.InputWrapper = InputWrapper;
 
-var OtpWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  width: 100%;\n  .otp-container{\n    display: flex;\n    justify-content: space-evenly;\n    margin: 20px;\n    \n    .otp-input{\n      width: 30px;\n      height: 30px;\n      padding: 12px 20px;\n      border: 2px solid #CCC;\n      border-radius: 16px;\n      background-color: #FFF;\n      outline: none;\n      font-size: 20px;\n      font-weight: bold; \n\n      &:focus{\n        border-color: ", " !important;\n      }\n\n      &::placeholder,\n      &::-webkit-input-placeholder {\n        color: #DBDCDB;\n      }\n      &:-ms-input-placeholder {\n        color: #DBDCDB;\n      }\n    }\n  }\n"])), function () {
+var OtpWrapper = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  width: 100%;\n  .otp-container{\n    display: flex;\n    justify-content: space-evenly;\n    margin: 20px;\n    \n    .otp-input{\n      width: 30px;\n      height: 30px;\n      padding: 12px 20px;\n      border: 2px solid #CCC;\n      border-radius: 16px;\n      background-color: #FFF;\n      outline: none;\n      font-size: 20px;\n      font-weight: bold; \n\n      &:focus{\n        border-color: ", " !important;\n      }\n\n      &::placeholder,\n      &::-webkit-input-placeholder {\n        color: #DBDCDB;\n      }\n      &:-ms-input-placeholder {\n        color: #DBDCDB;\n      }\n    }\n  }\n"])), function () {
   return (0, _polished.darken)(0.07, '#CCC');
 });
 
 exports.OtpWrapper = OtpWrapper;
 
-var CountdownTimer = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n  margin: 20px;\n  \n  span {\n    &:first-child {\n      font-size: 30px;\n      font-weight: bold;\n      color: ", "\n    }\n    &:last-child {\n      font-size: 24px;\n      color: #DBDCDB;\n      cursor: pointer;\n      :hover {\n        color: ", " !important;\n      }\n      :active {\n        color: ", " !important;\n      }\n    }\n  }\n\n"])), function (props) {
+var CountdownTimer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-evenly;\n  align-items: center;\n  margin: 20px;\n  \n  span {\n    &:first-child {\n      font-size: 30px;\n      font-weight: bold;\n      color: ", "\n    }\n    &:last-child {\n      font-size: 24px;\n      color: #DBDCDB;\n      cursor: pointer;\n      :hover {\n        color: ", " !important;\n      }\n      :active {\n        color: ", " !important;\n      }\n    }\n  }\n\n"])), function (props) {
   return props.theme.colors.primary;
 }, function () {
   return (0, _polished.darken)(0.07, '#DBDCDB');
@@ -136,42 +136,42 @@ var CountdownTimer = _styledComponents.default.div(_templateObject18 || (_templa
 
 exports.CountdownTimer = CountdownTimer;
 
-var ReCaptchaWrapper = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  margin: 12px auto;\n"])));
+var ReCaptchaWrapper = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  margin: 12px auto;\n"])));
 
 exports.ReCaptchaWrapper = ReCaptchaWrapper;
 
-var InputBeforeIcon = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 14px;\n  top: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  ", "\n\n  svg {\n    font-size: 16px;\n    color: #B1BCCC;\n  }\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    right: 14px;\n    left: initial;\n  "])));
+var InputBeforeIcon = _styledComponents.default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 14px;\n  top: 0;\n  display: flex;\n  align-items: center;\n  height: 100%;\n\n  ", "\n\n  svg {\n    font-size: 16px;\n    color: #B1BCCC;\n  }\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    right: 14px;\n    left: initial;\n  "])));
 });
 
 exports.InputBeforeIcon = InputBeforeIcon;
 
-var LoginDivider = _styledComponents.default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: ", ";\n  margin: 30px 0;\n\n  p {\n    margin: 0;\n    width: 70px;\n    font-size: 14px;\n    color: #748194;\n    text-align: center;\n  }\n"])), function (_ref15) {
+var LoginDivider = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: ", ";\n  margin: 30px 0;\n\n  p {\n    margin: 0;\n    width: 70px;\n    font-size: 14px;\n    color: #748194;\n    text-align: center;\n  }\n"])), function (_ref15) {
   var isPopup = _ref15.isPopup;
   return isPopup ? '100%' : '80%';
 });
 
 exports.LoginDivider = LoginDivider;
 
-var DividerLine = _styledComponents.default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  height: 1px;\n  background: #E9ECEF;\n  flex-grow: 1;\n"])));
+var DividerLine = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  height: 1px;\n  background: #E9ECEF;\n  flex-grow: 1;\n"])));
 
 exports.DividerLine = DividerLine;
 
-var ValidationText = _styledComponents.default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 18px;\n  color: ", ";\n"])), function (props) {
+var ValidationText = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 18px;\n  color: ", ";\n"])), function (props) {
   return props.theme.colors.danger500;
 });
 
 exports.ValidationText = ValidationText;
 
-var LogotypeContainer = _styledComponents.default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  margin-bottom: 50px;\n"])));
+var LogotypeContainer = _styledComponents.default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  margin-bottom: 50px;\n"])));
 
 exports.LogotypeContainer = LogotypeContainer;
-var HeroSide = (0, _styledComponents.default)(Side)(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  display: none;\n\n  img{\n    width: 95%;\n    height: 80%;\n  }\n  @media (min-width: 992px) {\n    width: 45%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n\n    img{\n      max-width: 100%;\n      height: auto;\n    }\n  }\n"])), function (props) {
+var HeroSide = (0, _styledComponents.default)(Side)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: none;\n\n  img{\n    width: 95%;\n    height: 80%;\n  }\n  @media (min-width: 992px) {\n    width: 45%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: ", ";\n\n    img{\n      max-width: 100%;\n      height: auto;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.primaryContrast;
 });
 exports.HeroSide = HeroSide;
 
-var ResendCode = _styledComponents.default.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 24px;\n  align-self: center;\n  margin-bottom: 10px;\n  cursor: ", ";\n"])), function (props) {
+var ResendCode = _styledComponents.default.span(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 24px;\n  align-self: center;\n  margin-bottom: 10px;\n  cursor: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.colors.disabled : props.theme.colors.primary;
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';

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

@@ -13,7 +13,7 @@ var _reactHookForm = require("react-hook-form");
 
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _styles = require("./styles");
 
@@ -57,15 +57,15 @@ var LogoutUI = function LogoutUI(props) {
   var handleLogoutClick = props.handleLogoutClick,
       onClose = props.onClose;
 
-  var _useApi = (0, _orderingComponents.useApi)(),
+  var _useApi = (0, _orderingComponentsExternal.useApi)(),
       _useApi2 = _slicedToArray(_useApi, 1),
       ordering = _useApi2[0];
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       token = _useSession2[0].token;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
@@ -250,7 +250,7 @@ var LogoutPopup = function LogoutPopup(props) {
     UIComponent: LogoutUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.LogoutAction, logoutProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.LogoutAction, logoutProps);
 };
 
-exports.LogoutPopup = LogoutPopup;
+exports.LogoutPopup = LogoutPopup;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = require("styled-components");
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _reactHookForm = require("react-hook-form");
 
@@ -92,7 +92,7 @@ var MessagesUI = function MessagesUI(props) {
       profileMessages = props.profileMessages;
   var theme = (0, _styledComponents.useTheme)();
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
@@ -110,11 +110,11 @@ var MessagesUI = function MessagesUI(props) {
       alertState = _useState2[0],
       setAlertState = _useState2[1];
 
-  var _useSession = (0, _orderingComponents.useSession)(),
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
       _useSession2 = _slicedToArray(_useSession, 1),
       user = _useSession2[0].user;
 
-  var _useUtils = (0, _orderingComponents.useUtils)(),
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
       _useUtils2 = _slicedToArray(_useUtils, 1),
       _useUtils2$ = _useUtils2[0],
       parseDate = _useUtils2$.parseDate,
@@ -625,7 +625,7 @@ var Messages = function Messages(props) {
     UIComponent: MessagesUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.Messages, MessagesProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.Messages, MessagesProps);
 };
 
-exports.Messages = Messages;
+exports.Messages = Messages;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Buttons = require("../../styles/Buttons");
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _styledComponents = require("styled-components");
 
@@ -72,17 +72,17 @@ var OrdersListingUI = function OrdersListingUI(props) {
       small = props.small,
       setOrderListStatus = props.setOrderListStatus;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
   var theme = (0, _styledComponents.useTheme)();
 
-  var _useEvent = (0, _orderingComponents.useEvent)(),
+  var _useEvent = (0, _orderingComponentsExternal.useEvent)(),
       _useEvent2 = _slicedToArray(_useEvent, 1),
       events = _useEvent2[0];
 
-  var _useUtils = (0, _orderingComponents.useUtils)(),
+  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
       _useUtils2 = _slicedToArray(_useUtils, 1),
       _useUtils2$ = _useUtils2[0],
       parseDate = _useUtils2$.parseDate,
@@ -294,7 +294,7 @@ var IdOrderList = function IdOrderList(props) {
     orderDirection: 'desc'
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.OrderList, orderListProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.OrderList, orderListProps);
 };
 
 exports.IdOrderList = IdOrderList;
@@ -309,7 +309,7 @@ var NewestOrderList = function NewestOrderList(props) {
     orderDirection: 'asc'
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.OrderList, orderListProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.OrderList, orderListProps);
 };
 
 exports.NewestOrderList = NewestOrderList;
@@ -384,7 +384,7 @@ var MessageControler = function MessageControler(props) {
     UIComponent: OrderDetailsUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.OrderDetails, orderDetailsProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.OrderDetails, orderDetailsProps);
 };
 
 exports.MessageControler = MessageControler;
@@ -399,7 +399,7 @@ var MessagesListing = function MessagesListing(props) {
       orderByOption = _useState4[0],
       setOrderByOption = _useState4[1];
 
-  var _useLanguage3 = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage3 = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage4 = _slicedToArray(_useLanguage3, 2),
       t = _useLanguage4[1];
 
@@ -462,4 +462,4 @@ var MessagesListing = function MessagesListing(props) {
   }))));
 };
 
-exports.MessagesListing = MessagesListing;
+exports.MessagesListing = MessagesListing;

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

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _MdClose = _interopRequireDefault(require("@meronex/icons/md/MdClose"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _styles = require("./styles");
 
@@ -54,9 +54,11 @@ var ModalUI = function ModalUI(props) {
       isProductForm = props.isProductForm,
       authModal = props.authModal,
       onRemove = props.onRemove,
+      isSlideBar = props.isSlideBar,
+      slideBarPosition = props.slideBarPosition,
       disableOverflowX = props.disableOverflowX;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
@@ -88,6 +90,9 @@ var ModalUI = function ModalUI(props) {
     height: props.height,
     padding: props.padding,
     isTransparent: isTransparent,
+    isSlideBar: isSlideBar,
+    slideBarPosition: slideBarPosition,
+    open: props.open,
     disableOverflowX: disableOverflowX,
     style: props.customStyle
   }, isProductForm && /*#__PURE__*/_react.default.createElement(_styles.ModalBackHeader, null), !hideCloseDefault && /*#__PURE__*/_react.default.createElement(_styles.ModalIcon, {
@@ -118,7 +123,7 @@ var Modal = function Modal(props) {
     UIComponent: ModalUI
   });
 
-  return /*#__PURE__*/_react.default.createElement(_orderingComponents.Popup, ModalProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.Popup, ModalProps);
 };
 
-exports.Modal = Modal;
+exports.Modal = Modal;

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

@@ -11,7 +11,7 @@ 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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 
 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); }
 
@@ -26,7 +26,7 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 
 exports.Container = Container;
 
-var ModalDialog = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  background-color: ", ";\n  padding: ", ";\n  width: 100vw;\n  border-radius: 0px;\n  box-sizing: border-box;\n  margin-top: auto;\n  margin-bottom: auto;\n  height: ", ";;\n  max-height: 100vh;\n  overflow: auto;\n  overflow-x: ", ";\n  @media (min-width: 769px) {\n    width: ", ";\n    max-height: 90vh;\n    border-radius: 10px;\n    height: auto;\n  }\n"])), function (_ref2) {
+var ModalDialog = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  background-color: ", ";\n  padding: ", ";\n  width: 100vw;\n  border-radius: 0px;\n  box-sizing: border-box;\n  margin-top: auto;\n  margin-bottom: auto;\n  height: ", ";;\n  max-height: 100vh;\n  overflow: auto;\n  overflow-x: ", ";\n  @media (min-width: 769px) {\n    width: ", ";\n    max-height: 90vh;\n    border-radius: 10px;\n    height: auto;\n    ", "\n  }\n"])), function (_ref2) {
   var isTransparent = _ref2.isTransparent;
   return isTransparent ? 'transparent' : '#FFF';
 }, function (_ref3) {
@@ -41,51 +41,56 @@ var ModalDialog = _styledComponents.default.div(_templateObject3 || (_templateOb
 }, function (_ref6) {
   var width = _ref6.width;
   return width || '50%';
+}, function (_ref7) {
+  var isSlideBar = _ref7.isSlideBar,
+      slideBarPosition = _ref7.slideBarPosition,
+      open = _ref7.open;
+  return isSlideBar && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: fixed;\n      max-height: 100vh;\n      height: 100%;\n      min-width: 0px;\n      width: 0%;\n      right: ", ";\n      left: ", ";\n\n      ", "\n\n\n      @-webkit-keyframes slide-in {\n       100% { width: 25%; min-width: 400px; }\n      }\n\n      @keyframes slide-in {\n        100% { width: 25%; min-width: 400px; }\n      }\n\n      @keyframes slide-out {\n        0% { width: 25%; min-width: 400px; }\n        100% { width: 0%; min-width: 0px; }\n      }\n\n      @-webkit-keyframes slide-out {\n        0% { width: 25%; min-width: 400px; }\n        100% { width: 0%; min-width: 0px; }\n      }\n    "])), slideBarPosition !== 'left' ? 0 : 'initial', slideBarPosition === 'left' ? 0 : 'initial', open ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: slide-in 0.25s forwards;\n        -webkit-animation: slide-in 0.25s forwards;\n      "]))) : (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: slide-out 0.25s forwards;\n        -webkit-animation: slide-out 0.25s forwards; \n      "]))));
 });
 
 exports.ModalDialog = ModalDialog;
 
-var ModalActions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 30px 0px 0px;\n  button {\n    width: 100%;\n    border-radius: 32px;\n    opacity: 1;\n    height: 45px;\n    &:nth-child(1) {\n      margin-right: 25px;\n      ", "\n    }\n  }\n"])), function (props) {
+var ModalActions = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  margin: 30px 0px 0px;\n  button {\n    width: 100%;\n    border-radius: 32px;\n    opacity: 1;\n    height: 45px;\n    &:nth-child(1) {\n      margin-right: 25px;\n      ", "\n    }\n  }\n"])), function (props) {
   var _props$theme;
 
-  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        margin-left: 25px;\n        margin-right: 0px;\n      "])));
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        margin-left: 25px;\n        margin-right: 0px;\n      "])));
 });
 
 exports.ModalActions = ModalActions;
 
-var ModalHeader = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n\n"])));
+var ModalHeader = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n\n"])));
 
 exports.ModalHeader = ModalHeader;
 
-var ModalTitle = _styledComponents.default.h2(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 24px;\n  text-align: center;\n  letter-spacing: 0px;\n  color: #010300;\n  opacity: 1;\n  margin: 0px 0px;\n  margin-bottom: 20px;\n  padding-left: 10px;\n  /* text-transform: capitalize; */\n  flex: 1;\n  ", "\n  &::first-letter {\n    text-transform: capitalize;\n  }\n"])), function (props) {
+var ModalTitle = _styledComponents.default.h2(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  font-size: 24px;\n  text-align: center;\n  letter-spacing: 0px;\n  color: #010300;\n  opacity: 1;\n  margin: 0px 0px;\n  margin-bottom: 20px;\n  padding-left: 10px;\n  /* text-transform: capitalize; */\n  flex: 1;\n  ", "\n  &::first-letter {\n    text-transform: capitalize;\n  }\n"])), function (props) {
   var _props$theme2;
 
-  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    text-align: left;\n    padding-right: 10px;\n    padding-left: 0px;\n  "])));
+  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    text-align: left;\n    padding-right: 10px;\n    padding-left: 0px;\n  "])));
 });
 
 exports.ModalTitle = ModalTitle;
 
-var ModalOrderTypes = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-right: 15px;\n  ", "\n"])), function (props) {
+var ModalOrderTypes = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-right: 15px;\n  ", "\n"])), function (props) {
   var _props$theme3;
 
-  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    padding-left: 15px;\n    padding-right: 0px;\n  "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    padding-left: 15px;\n    padding-right: 0px;\n  "])));
 });
 
 exports.ModalOrderTypes = ModalOrderTypes;
 
-var ModalIcon = _styledComponents.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: fixed;\n  left: 25px;\n  top: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  z-index: 2;\n  ", "\n  ", "\n  svg{\n    /* background: rgba(255,255,255,0.5); */\n    transition: all .2s ease-in;\n\n    &:hover {\n      background-color: #1507260a;\n\n      > svg {\n        color:  #151b26;\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  \n    border-radius: 50%;\n  }\n\n  @media(min-width: 769px){\n    position: absolute;\n  }\n"])), function (props) {
+var ModalIcon = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: fixed;\n  left: 25px;\n  top: 30px;\n  font-size: 30px;\n  cursor: pointer;\n  z-index: 2;\n  ", "\n  ", "\n  svg{\n    /* background: rgba(255,255,255,0.5); */\n    transition: all .2s ease-in;\n\n    &:hover {\n      background-color: #1507260a;\n\n      > svg {\n        color:  #151b26;\n      }\n    }\n\n    &:active {\n      background-color: ", ";\n    }\n  \n    border-radius: 50%;\n  }\n\n  @media(min-width: 769px){\n    position: absolute;\n  }\n"])), function (props) {
   var _props$theme4;
 
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    right: 25px;\n    left: initial;\n  "])));
-}, function (_ref7) {
-  var isProductForm = _ref7.isProductForm;
-  return isProductForm && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    top: 18px;\n  "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    right: 25px;\n    left: initial;\n  "])));
+}, function (_ref8) {
+  var isProductForm = _ref8.isProductForm;
+  return isProductForm && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    top: 18px;\n  "])));
 }, function () {
   return (0, _polished.darken)(0.07, '#CCC');
 });
 
 exports.ModalIcon = ModalIcon;
 
-var ModalBackHeader = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  height: 70px;\n  background-color: white;\n  width: 100%;\n  position: fixed;\n  z-index: 2;\n\n  @media (min-width: 769px) {\n    display: none;\n  }\n"])));
+var ModalBackHeader = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  height: 70px;\n  background-color: white;\n  width: 100%;\n  position: fixed;\n  z-index: 2;\n\n  @media (min-width: 769px) {\n    display: none;\n  }\n"])));
 
 exports.ModalBackHeader = ModalBackHeader;

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

@@ -7,7 +7,7 @@ exports.MomentContent = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 var _styles = require("./styles");
 
@@ -36,13 +36,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var MomentContent = function MomentContent(props) {
   var _configs$max_days_pre, _document, _document$getElementB, _props$beforeElements, _props$beforeComponen, _orderState$options, _orderState$options$a, _props$afterComponent, _props$afterElements;
 
-  var _useConfig = (0, _orderingComponents.useConfig)(),
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
   var limitDays = parseInt(configs === null || configs === void 0 ? void 0 : (_configs$max_days_pre = configs.max_days_preorder) === null || _configs$max_days_pre === void 0 ? void 0 : _configs$max_days_pre.value, 10);
 
-  var _useOrder = (0, _orderingComponents.useOrder)(),
+  var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
       _useOrder2 = _slicedToArray(_useOrder, 1),
       orderState = _useOrder2[0];
 
@@ -90,4 +90,4 @@ var MomentContent = function MomentContent(props) {
   }));
 };
 
-exports.MomentContent = MomentContent;
+exports.MomentContent = MomentContent;

package/_modules/themes/five/src/components/MomentControl/Layouts/CustomLayout/index.js

@@ -9,7 +9,7 @@ exports.CustomLayout = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _orderingComponents = require("ordering-components-external");
+var _orderingComponentsExternal = require("ordering-components-external");
 
 require("react-calendar/dist/Calendar.css");
 
@@ -49,11 +49,11 @@ var CustomLayout = function CustomLayout(props) {
       timeSelected = props.timeSelected,
       handleChangeTime = props.handleChangeTime;
 
-  var _useConfig = (0, _orderingComponents.useConfig)(),
+  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
       _useConfig2 = _slicedToArray(_useConfig, 1),
       configs = _useConfig2[0].configs;
 
-  var _useLanguage = (0, _orderingComponents.useLanguage)(),
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
       _useLanguage2 = _slicedToArray(_useLanguage, 2),
       t = _useLanguage2[1];
 
@@ -149,4 +149,4 @@ var CustomLayout = function CustomLayout(props) {
   })) : /*#__PURE__*/_react.default.createElement(_styles.ClosedBusinessMsg, null, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'))));
 };
 
-exports.CustomLayout = CustomLayout;
+exports.CustomLayout = CustomLayout;

package/_modules/themes/five/src/components/MomentControl/Layouts/CustomLayout/styles.js

@@ -17,11 +17,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var LayoutContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  @media (min-width: 768px) {\n    flex-direction: row;\n    justify-content: space-between;\n    > div {\n      width: calc(50% - 10px);\n    }\n  }\n"])));
+var LayoutContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 768px) {\n    flex-direction: row;\n    justify-content: space-between;\n    > div {\n      width: calc(50% - 10px);\n    }\n  }\n"])));
 
 exports.LayoutContainer = LayoutContainer;
 
-var CalendarWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n  padding: 17px 15px 3px 15px;\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  border-radius: 7.6px;\n  input {\n    padding: 10px;\n    border: 1px solid #DEE2E6;\n    box-sizing: border-box;\n    border-radius: 7.6px;\n    outline: none;\n  }\n  .react-calendar {\n    border: none;\n    width: 100%;\n    .react-calendar__tile--active,\n    .react-calendar__tile:enabled:focus {\n      /* background: ", "; */\n      background: transparent;\n      abbr {\n        background: #E9F2FE;\n        color: #344050;\n      }\n    }\n    .react-calendar__tile:enabled:hover {\n      background: transparent;\n      abbr {\n        background: #EFEFEF;\n        color: #344050;\n      }\n    }\n    .react-calendar__tile--now {\n      background: transparent;\n    }\n    .react-calendar__month-view__weekdays {\n      font-size: 12px;\n      color: #909BA9;\n      font-weight: normal;\n      text-transform: capitalize;\n      abbr {\n        text-decoration: none;\n      }\n    }\n    .react-calendar__month-view__days__day {\n      font-size: 12px;\n      color: #344050;\n      abbr {\n        width: 20px;\n        height: 20px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-radius: 50%;\n        @media (min-width: 350px) {\n          width: 34px;\n          height: 32px;\n        }\n      }\n    }\n    .react-calendar__tile:disabled {\n      background-color: transparent;\n      color: ", ";\n      cursor: not-allowed;\n    }\n    .react-calendar__navigation {\n      button {\n        background: transparent!important;\n        color: #748194;\n        svg {\n          font-size: 24px;\n          ", "\n        }\n        &:disabled {\n          cursor: not-allowed;\n        }\n        span {\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          width: 100%;\n          display: inline-block;\n          @media (min-width: 768px) {\n            width: auto;\n            display: initial;\n          }\n        }\n      }\n      .react-calendar__navigation__prev2-button,\n      .react-calendar__navigation__next2-button {\n        display: none;\n      }\n    }\n  }\n"])), function (props) {
+var CalendarWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: center;\n  padding: 17px 15px 3px 15px;\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  border-radius: 7.6px;\n\n  input {\n    padding: 10px;\n    border: 1px solid #DEE2E6;\n    box-sizing: border-box;\n    border-radius: 7.6px;\n    outline: none;\n  }\n\n  .react-calendar {\n    border: none;\n    width: 100%;\n\n    .react-calendar__tile--active,\n    .react-calendar__tile:enabled:focus {\n      /* background: ", "; */\n      background: transparent;\n\n      abbr {\n        background: #E9F2FE;\n        color: #344050;\n      }\n    }\n\n    .react-calendar__tile:enabled:hover {\n      background: transparent;\n\n      abbr {\n        background: #EFEFEF;\n        color: #344050;\n      }\n    }\n\n    .react-calendar__tile--now {\n      background: transparent;\n    }\n\n    .react-calendar__month-view__weekdays {\n      font-size: 12px;\n      color: #909BA9;\n      font-weight: normal;\n      text-transform: capitalize;\n      abbr {\n        text-decoration: none;\n      }\n    }\n\n    .react-calendar__month-view__days__day {\n      font-size: 12px;\n      color: #344050;\n      abbr {\n        width: 20px;\n        height: 20px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-radius: 50%;\n\n        @media (min-width: 350px) {\n          width: 34px;\n          height: 32px;\n        }\n      }\n    }\n\n    .react-calendar__tile:disabled {\n      background-color: transparent;\n      color: ", ";\n      cursor: not-allowed;\n    }\n\n    .react-calendar__navigation {\n      button {\n        background: transparent!important;\n        color: #748194;\n\n        svg {\n          font-size: 24px;\n\n          ", "\n        }\n\n        &:disabled {\n          cursor: not-allowed;\n        }\n\n        span {\n          white-space: nowrap;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          width: 100%;\n          display: inline-block;\n\n          @media (min-width: 768px) {\n            width: auto;\n            display: initial;\n          }\n        }\n      }\n\n      .react-calendar__navigation__prev2-button,\n      .react-calendar__navigation__next2-button {\n        display: none;\n      }\n    }\n  }\n"])), function (props) {
   var _props$theme;
 
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.colors.primaryContrast;
@@ -35,11 +35,11 @@ var CalendarWrapper = _styledComponents.default.div(_templateObject2 || (_templa
 
 exports.CalendarWrapper = CalendarWrapper;
 
-var TimeListWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  max-height: 425px;\n  overflow: auto;\n  padding: 17px 15px 3px 15px;\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  border-radius: 7.6px;\n  margin-top: 20px;\n  @media (min-width: 768px) {\n    margin-top: 0;\n  }\n"])));
+var TimeListWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  max-height: 425px;\n  overflow: auto;\n  padding: 17px 15px 3px 15px;\n  border: 1px solid #E9ECEF;\n  box-sizing: border-box;\n  border-radius: 7.6px;\n  margin-top: 20px;\n\n  @media (min-width: 768px) {\n    margin-top: 0;\n  }\n"])));
 
 exports.TimeListWrapper = TimeListWrapper;
 
-var TimeItem = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #E9ECEF;\n  border-radius: 7.6px;\n  padding: 5px 15px;\n  margin: 12px;\n  width: calc(50% - 24px);\n  min-width: calc(50% - 24px);\n  box-sizing: border-box;\n  user-select: none;\n  ", "\n  span {\n    font-size: 14px;\n    white-space: nowrap;\n  }\n"])), function (_ref) {
+var TimeItem = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #E9ECEF;\n  border-radius: 7.6px;\n  padding: 5px 15px;\n  margin: 12px;\n  width: calc(50% - 24px);\n  min-width: calc(50% - 24px);\n  box-sizing: border-box;\n  user-select: none;\n\n  ", "\n\n  span {\n    font-size: 14px;\n    white-space: nowrap;\n  }\n"])), function (_ref) {
   var active = _ref.active;
   return active && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    background: #F5F9FF;\n    color: ", ";\n  "])), function (props) {
     return props.theme.colors.primary;