ordering-ui-external 2.4.6 → 2.5.1

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;

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

@@ -8,11 +8,11 @@ exports.TextArea = exports.InputSecundary = exports.InputPrimary = exports.Input
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _polished = require("polished");
 var _Buttons = require("../Buttons");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 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 Input = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: #010300;\n  border: 1px solid #DBDCDB;\n  border-radius: 7.6px;\n  font-size: 16px;\n  padding: 7px 15px;\n  outline: none;\n  &:focus {\n    border-color: ", ";\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 Input = _styledComponents.default.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: #010300;\n  border: 1px solid #DBDCDB;\n  border-radius: 7.6px;\n  font-size: 16px;\n  padding: 7px 15px;\n  outline: none;\n  &:focus {\n    border-color: ", ";\n  }\n  ", "\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    color: #DBDCDB;\n  }\n  &:-ms-input-placeholder {\n    color: #DBDCDB;\n  }\n  ", "\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function () {
   return (0, _polished.darken)(0.07, '#CCC');
 }, function (_ref) {
   var w = _ref.w;
@@ -26,34 +26,58 @@ var Input = _styledComponents.default.input(_templateObject || (_templateObject
     var _props$theme$colors;
     return (_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.danger500;
   });
+}, function (_ref4) {
+  var _theme$general, _theme$general$compon, _theme$general$compon2, _theme$general2, _theme$general2$compo, _theme$general2$compo2;
+  var theme = _ref4.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.inputs) === null || _theme$general$compon2 === void 0 ? void 0 : _theme$general$compon2.borderRadius) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _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.inputs) === null || _theme$general2$compo2 === void 0 ? void 0 : _theme$general2$compo2.borderRadius);
+}, function (_ref5) {
+  var _theme$general3, _theme$general3$compo, _theme$general3$compo2, _theme$general4, _theme$general4$compo, _theme$general4$compo2;
+  var theme = _ref5.theme;
+  return (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.inputs) === null || _theme$general3$compo2 === void 0 ? void 0 : _theme$general3$compo2.color) && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\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.inputs) === null || _theme$general4$compo2 === void 0 ? void 0 : _theme$general4$compo2.color);
+}, function (_ref6) {
+  var _theme$general5, _theme$general5$compo, _theme$general5$compo2, _theme$general6, _theme$general6$compo, _theme$general6$compo2, _theme$general7, _theme$general7$compo, _theme$general7$compo2;
+  var theme = _ref6.theme;
+  return (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.inputs) === null || _theme$general5$compo2 === void 0 ? void 0 : _theme$general5$compo2.borderColor) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    &::placeholder,\n    &::-webkit-input-placeholder,\n    &:-ms-input-placeholder {\n      color: ", ";\n    }\n  "])), 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.inputs) === null || _theme$general6$compo2 === void 0 ? void 0 : _theme$general6$compo2.borderColor, 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.inputs) === null || _theme$general7$compo2 === void 0 ? void 0 : _theme$general7$compo2.borderColor);
 });
 exports.Input = Input;
-var InputGroup = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  & > ", ":not(:first-child) {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    border-left: 0;\n    padding-left: 0;\n  }\n  & > ", ":not(:last-child) {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0;\n    padding-right: 0;\n  }\n"])), Input, Input);
+var InputGroup = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  & > ", ":not(:first-child) {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    border-left: 0;\n    padding-left: 0;\n  }\n  & > ", ":not(:last-child) {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0;\n    padding-right: 0;\n  }\n"])), Input, Input);
 exports.InputGroup = InputGroup;
-var InputGroupLeft = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  line-height: 34px;\n  padding-left: 7px;\n  padding-right: 7px;\n  font-size: 16px;\n  border-width: 1px;\n  height: 34px;\n  border-style: solid;\n  ", "\n  & ", " {\n    margin-left: -7px;\n    ", "\n  }\n"])), function (props) {
+var InputGroupLeft = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  line-height: 34px;\n  padding-left: 7px;\n  padding-right: 7px;\n  font-size: 16px;\n  border-width: 1px;\n  height: 34px;\n  border-style: solid;\n  ", "\n  & ", " {\n    margin-left: -7px;\n    ", "\n  }\n"])), function (props) {
   var _props$theme;
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      border-left-width: 0;\n      border-radius: 34px 34px 0 0;\n  "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      border-radius: 34px 0 0 34px;\n      border-right-width: 0;\n  "])));
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      border-left-width: 0;\n      border-radius: 34px 34px 0 0;\n  "]))) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      border-radius: 34px 0 0 34px;\n      border-right-width: 0;\n  "])));
 }, _Buttons.Button, function (props) {
   var _props$theme2;
-  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        margin-right: -7px;\n        margin-left: 0;\n    "])));
+  return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        margin-right: -7px;\n        margin-left: 0;\n    "])));
 });
 exports.InputGroupLeft = InputGroupLeft;
-var TextArea = _styledComponents.default.textarea(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: #010300;\n  border: 1px solid #DBDCDB;\n  border-radius: 7.6px;\n  font-size: 16px;\n  padding: 7px 15px;\n  outline: none;\n  resize: none;\n  &:focus {\n    border-color: ", ";\n  }\n  ", "\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    color: #DBDCDB;\n  }\n  &:-ms-input-placeholder {\n    color: #DBDCDB;\n  }\n"])), function () {
+var TextArea = _styledComponents.default.textarea(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: #010300;\n  border: 1px solid #DBDCDB;\n  border-radius: 7.6px;\n  font-size: 16px;\n  padding: 7px 15px;\n  outline: none;\n  resize: none;\n  &:focus {\n    border-color: ", ";\n  }\n  ", "\n  &::placeholder,\n  &::-webkit-input-placeholder {\n    color: #DBDCDB;\n  }\n  &:-ms-input-placeholder {\n    color: #DBDCDB;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function () {
   return (0, _polished.darken)(0.07, '#CCC');
-}, function (_ref4) {
-  var w = _ref4.w;
-  return w && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    width: 20%;\n  "])));
+}, function (_ref7) {
+  var w = _ref7.w;
+  return w && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    width: 20%;\n  "])));
+}, function (_ref8) {
+  var _theme$general8, _theme$general8$compo, _theme$general8$compo2, _theme$general9, _theme$general9$compo, _theme$general9$compo2;
+  var theme = _ref8.theme;
+  return (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.inputs) === null || _theme$general8$compo2 === void 0 ? void 0 : _theme$general8$compo2.borderRadius) && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    border-radius: ", ";\n  "])), theme === null || theme === void 0 ? void 0 : (_theme$general9 = theme.general) === null || _theme$general9 === void 0 ? void 0 : (_theme$general9$compo = _theme$general9.components) === null || _theme$general9$compo === void 0 ? void 0 : (_theme$general9$compo2 = _theme$general9$compo.inputs) === null || _theme$general9$compo2 === void 0 ? void 0 : _theme$general9$compo2.borderRadius);
+}, function (_ref9) {
+  var _theme$general10, _theme$general10$comp, _theme$general10$comp2, _theme$general11, _theme$general11$comp, _theme$general11$comp2;
+  var theme = _ref9.theme;
+  return (theme === null || theme === void 0 ? void 0 : (_theme$general10 = theme.general) === null || _theme$general10 === void 0 ? void 0 : (_theme$general10$comp = _theme$general10.components) === null || _theme$general10$comp === void 0 ? void 0 : (_theme$general10$comp2 = _theme$general10$comp.inputs) === null || _theme$general10$comp2 === void 0 ? void 0 : _theme$general10$comp2.color) && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), theme === null || theme === void 0 ? void 0 : (_theme$general11 = theme.general) === null || _theme$general11 === void 0 ? void 0 : (_theme$general11$comp = _theme$general11.components) === null || _theme$general11$comp === void 0 ? void 0 : (_theme$general11$comp2 = _theme$general11$comp.inputs) === null || _theme$general11$comp2 === void 0 ? void 0 : _theme$general11$comp2.color);
+}, function (_ref10) {
+  var _theme$general12, _theme$general12$comp, _theme$general12$comp2, _theme$general13, _theme$general13$comp, _theme$general13$comp2, _theme$general14, _theme$general14$comp, _theme$general14$comp2;
+  var theme = _ref10.theme;
+  return (theme === null || theme === void 0 ? void 0 : (_theme$general12 = theme.general) === null || _theme$general12 === void 0 ? void 0 : (_theme$general12$comp = _theme$general12.components) === null || _theme$general12$comp === void 0 ? void 0 : (_theme$general12$comp2 = _theme$general12$comp.inputs) === null || _theme$general12$comp2 === void 0 ? void 0 : _theme$general12$comp2.borderColor) && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    &::placeholder,\n    &::-webkit-input-placeholder,\n    &:-ms-input-placeholder {\n      color: ", ";\n    }\n  "])), theme === null || theme === void 0 ? void 0 : (_theme$general13 = theme.general) === null || _theme$general13 === void 0 ? void 0 : (_theme$general13$comp = _theme$general13.components) === null || _theme$general13$comp === void 0 ? void 0 : (_theme$general13$comp2 = _theme$general13$comp.inputs) === null || _theme$general13$comp2 === void 0 ? void 0 : _theme$general13$comp2.borderColor, theme === null || theme === void 0 ? void 0 : (_theme$general14 = theme.general) === null || _theme$general14 === void 0 ? void 0 : (_theme$general14$comp = _theme$general14.components) === null || _theme$general14$comp === void 0 ? void 0 : (_theme$general14$comp2 = _theme$general14$comp.inputs) === null || _theme$general14$comp2 === void 0 ? void 0 : _theme$general14$comp2.borderColor);
 });
 exports.TextArea = TextArea;
-var InputGroupRight = (0, _styledComponents.default)(InputGroupLeft)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  border-radius: 0 34px 34px 0;\n  line-height: 34px;\n  border-right-width: 1px;\n  border-left-width: 0;\n  ", "\n  & ", " {\n    margin-left: 0;\n    margin-right: -7px;\n    ", "\n  }\n  \n"])), function (props) {
+var InputGroupRight = (0, _styledComponents.default)(InputGroupLeft)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  border-radius: 0 34px 34px 0;\n  line-height: 34px;\n  border-right-width: 1px;\n  border-left-width: 0;\n  ", "\n  & ", " {\n    margin-left: 0;\n    margin-right: -7px;\n    ", "\n  }\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)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        border-left-width: 1px;\n        border-right-width: 0;\n        border-radius: 0 0 34px 34px;\n    "])));
+  return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        border-left-width: 1px;\n        border-right-width: 0;\n        border-radius: 0 0 34px 34px;\n    "])));
 }, _Buttons.Button, function (props) {
   var _props$theme4;
-  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        margin-left: -7px;\n        margin-right: 0;\n    "])));
+  return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n        margin-left: -7px;\n        margin-right: 0;\n    "])));
 });
 exports.InputGroupRight = InputGroupRight;
-var InputPrimary = (0, _styledComponents.default)(Input)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: ", ";\n  border-color: ", ";\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) {
+var InputPrimary = (0, _styledComponents.default)(Input)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: ", ";\n  border-color: ", ";\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   return props.theme.colors.primary;
@@ -61,7 +85,7 @@ var InputPrimary = (0, _styledComponents.default)(Input)(_templateObject15 || (_
   return (0, _polished.darken)(0.1, props.theme.colors.primary);
 });
 exports.InputPrimary = InputPrimary;
-var InputSecundary = (0, _styledComponents.default)(Input)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: ", ";\n  border-color: ", ";\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) {
+var InputSecundary = (0, _styledComponents.default)(Input)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  background: #FFF;\n  color: ", ";\n  border-color: ", ";\n  &:focus {\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.theme.colors.secundary;
 }, function (props) {
   return props.theme.colors.secundary;
@@ -69,7 +93,7 @@ var InputSecundary = (0, _styledComponents.default)(Input)(_templateObject16 ||
   return (0, _polished.darken)(0.1, props.theme.colors.secundary);
 });
 exports.InputSecundary = InputSecundary;
-var InputGroupPrimary = (0, _styledComponents.default)(InputGroup)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  & > ", " {\n    color: ", ";\n    border-color: ", ";\n  }\n"])), InputGroupLeft, function (props) {
+var InputGroupPrimary = (0, _styledComponents.default)(InputGroup)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  & > ", " {\n    color: ", ";\n    border-color: ", ";\n  }\n"])), InputGroupLeft, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
   return props.theme.colors.primary;

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.lightenDarkenColor = exports.getTraduction = exports.getTimes = exports.getStarWidth = exports.getOrderStatus = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.getCateringValues = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.calendarLanguages = exports.bytesConverter = void 0;
+exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.orderTypeList = exports.lightenDarkenColor = exports.getTraduction = exports.getTimes = exports.getStarWidth = exports.getOrderStatus = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.getCateringValues = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.calendarLanguages = exports.bytesConverter = void 0;
 var _orderingComponentsExternal = require("ordering-components-external");
 var _styledComponents = require("styled-components");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -406,12 +406,18 @@ var priceList = [{
   content: '$$$$$'
 }];
 
+/**
+ * List of order type
+ */
+exports.priceList = priceList;
+var orderTypeList = ['delivery', 'pickup', 'eatin', 'curbside', 'drivethru', 'seatdelivery'];
+
 /**
  * function to manage review comment list
  * @param {number} param0 type of reviews to return
  * @returns object with reviews dictionary
  */
-exports.priceList = priceList;
+exports.orderTypeList = orderTypeList;
 var reviewCommentList = function reviewCommentList(type) {
   var _useLanguage5 = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage6 = _slicedToArray(_useLanguage5, 2),

package/index.html

@@ -8,7 +8,7 @@
   <link rel="apple-touch-icon" href="/favicon.png">
   <link rel="android-touch-icon" href="/favicon.png">
   <link rel="windows-touch-icon" href="/favicon.png">
-  <link rel="icon" href="/favicon.png" type="image/png" sizes="16x16">
+  <link rel="icon" href="/favicon.png" type="image/png" sizes="16x16" id='favicon'>
   <title><%= htmlWebpackPlugin.options.title %></title>
   <style type="text/css" id="styles"></style>
   <style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "2.4.6",
+  "version": "2.5.1",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -86,7 +86,8 @@
     "libphonenumber-js": "^1.9.4",
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
-    "ordering-components-external": "2.5.4",
+    "nanoid": "^4.0.0",
+    "ordering-components-external": "2.6.0",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",

package/src/components/OrdersOption/styles.js

@@ -243,6 +243,7 @@ export const ImageNotFound = styled.div`
 `
 
 export const BusinessInformation = styled.div`
+  width: 80%;
   display: inline-flex;
   flex-direction: column;
   flex: 1;

package/src/components/StripeMethodForm/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { PaymentRequestButtonElement, useStripe } from '@stripe/react-stripe-js'
-import { CardForm as CardFormController, useLanguage } from 'ordering-components-external'
+import { CardForm as CardFormController, useConfig, useLanguage } from 'ordering-components-external'
 import Skeleton from 'react-loading-skeleton'
 import { Container } from './styles'
 export const StripeMethodFormUI = (props) => {
@@ -8,22 +8,33 @@ export const StripeMethodFormUI = (props) => {
     cart,
     handleSource,
     handleCancel,
-    paymethod
+    paymethod,
+    cartGroup
   } = props
 
   const [, t] = useLanguage()
   const stripe = useStripe()
+  const [{ configs }] = useConfig()
   const [paymentRequest, setPaymentRequest] = useState(null)
   const [methodUnavailable, setMethodUnavailable] = useState(false)
 
+  const googlePayMethods = ['google_pay', 'global_google_pay']
+
   useEffect(() => {
     if (stripe) {
+      let cartNames = ''
+      if (cartGroup) {
+        // eslint-disable-next-line no-unused-expressions
+        cartGroup?.carts.map((cart, i) => (
+          cartNames = `${cart?.business?.name} ${i !== cartNames?.carts?.length && ', '}`
+        ))
+      }
       const pr = stripe.paymentRequest({
         country: 'US',
-        currency: 'usd',
+        currency: configs?.stripe_currency?.value?.toLowerCase?.() || 'usd',
         total: {
-          label: cart?.business?.name,
-          amount: Math.floor((cart?.balance || cart?.total) * 100)
+          label: cartNames || cart?.business?.name,
+          amount: Math.floor((cartGroup?.balance || cartGroup?.total || cart?.balance || cart?.total) * 100)
         },
         requestPayerName: true,
         requestPayerEmail: true
@@ -36,9 +47,7 @@ export const StripeMethodFormUI = (props) => {
         }
       })
       pr.on('paymentmethod', async (e) => {
-        e.complete('success')
-        handleCancel()
-        handleSource({
+        const data = {
           ...e?.paymentMethod?.card,
           id: e.paymentMethod.id,
           type: e.paymentMethod.type,
@@ -47,7 +56,10 @@ export const StripeMethodFormUI = (props) => {
             brand: e.paymentMethod.card.brand,
             last4: e.paymentMethod.card.last4
           }
-        })
+        }
+        e.complete('success')
+        handleCancel()
+        handleSource(cartGroup ? JSON.stringify(data) : data)
       })
     }
   }, [stripe])
@@ -55,7 +67,7 @@ export const StripeMethodFormUI = (props) => {
   return (
     <Container>
       {methodUnavailable ? (
-        <h2>{paymethod === 'google_pay' ? t('GOOGLE_PAY_UNAVAILABLE', 'Google pay unavailable') : t('APPLE_PAY_UNAVAILABLE', 'Apple pay unavailable')}</h2>
+        <h2>{googlePayMethods.includes(paymethod) ? t('GOOGLE_PAY_UNAVAILABLE', 'Google pay unavailable') : t('APPLE_PAY_UNAVAILABLE', 'Apple pay unavailable')}</h2>
       ) : (
         <>
           {paymentRequest ? (