ordering-ui-external 10.0.1 → 10.1.0

package/_modules/themes/callcenterOriginal/src/components/Shared/SearchBar/styles.js

@@ -6,30 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SearchContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 SearchContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  svg {\n    position: absolute;\n    top: 10px;\n    ", "\n    font-size: 20px;\n    color: ", ";\n  }\n\n  > input {\n    width: 250px;\n    border: 1px solid ", " !important;\n    background: ", ";\n    border-radius: 22px;\n    outline: none;\n    padding: 10px 8px;\n    ", "\n    font-size: 14px;\n    color: ", ";\n\n    &::placeholder {\n      color: #909BA9;\n    }\n  }\n\n  ", "\n\n  @media (max-width: 1200px) {\n    flex: 1;\n\n    input {\n      width: 100%;\n      box-sizing: border-box;\n    }\n  }\n"])), function (props) {
-  var _props$theme;
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      right: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      left: 15px;\n    "])));
-}, function (props) {
-  return props.theme.colors.lightGray;
-}, function (props) {
+var SearchContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n    border: 1px solid ", " !important;\n    background: ", ";\n    outline: none;\n    padding: 10px 15px;\n    border-radius: 8px;\n    ", "\n    font-size: 14px;\n    color: ", ";\n\n    &::placeholder {\n      color: #909BA9;\n    }\n  }\n\n  svg {\n    position: absolute;\n    ", "\n    font-size: 16px;\n    color: ", ";\n\n    &.close {\n      cursor: pointer;\n    }\n  }\n\n  @media (max-width: 1200px) {\n    flex: 1;\n\n    input {\n      width: 100%;\n      box-sizing: border-box;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.borderColor;
 }, function (props) {
   var _props$theme$colors;
   return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
 }, function (props) {
-  var _props$theme2;
-  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding-right: 40px;\n    "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-left: 40px;\n    "])));
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-left: 40px;\n    "]))) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding-right: 40px;\n    "])));
 }, function (props) {
   return props.theme.colors.headingColor;
-}, function (_ref) {
-  var isCustomLayout = _ref.isCustomLayout;
-  return isCustomLayout && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    input {\n      border-radius: 8px;\n      width: 100%;\n      padding: 10px 15px;\n    }\n\n    svg {\n      ", "\n    }\n  "])), function (props) {
-    var _props$theme3;
-    return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        right: initial;\n        left: 10px;\n      "]))) : (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        left: initial;\n        right: 10px;\n      "])));
-  });
+}, function (props) {
+  var _props$theme2;
+  return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      left: 15px;\n    "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      right: 15px;\n    "])));
+}, function (props) {
+  return props.theme.colors.lightGray;
 });
 exports.SearchContainer = SearchContainer;

package/_modules/themes/callcenterOriginal/src/components/Shared/SideBar/index.js

@@ -25,7 +25,9 @@ var SideBar = function SideBar(props) {
     isBorderShow = props.isBorderShow,
     noAnimation = props.noAnimation,
     handleCloseWizard = props.handleCloseWizard,
-    IconTop = props.IconTop;
+    IconTop = props.IconTop,
+    showExpandIcon = props.showExpandIcon,
+    sidebarId = props.sidebarId;
   var sideBarRef = (0, _react.useRef)(null);
   var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
     width = _useWindowSize.width;
@@ -33,6 +35,10 @@ var SideBar = function SideBar(props) {
     _useState2 = _slicedToArray(_useState, 2),
     isMenuOpen = _useState2[0],
     setIsMenuOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpand = _useState4[0],
+    setIsExpand = _useState4[1];
   var sideBarWidth = defaultSideBarWidth || 500;
   var actionSidebar = function actionSidebar(value) {
     if (!value) {
@@ -59,6 +65,12 @@ var SideBar = function SideBar(props) {
       handleCloseWizard && handleCloseWizard();
     }
   };
+  var expandSideBar = function expandSideBar() {
+    if (isExpand) sideBarRef.current.style.width = "".concat(sideBarWidth, "px");else sideBarRef.current.style.width = '100vw';
+    setIsExpand(function (prev) {
+      return !prev;
+    });
+  };
   (0, _react.useEffect)(function () {
     if (!open) return;
     document.addEventListener('keydown', onCloseSidebar);
@@ -71,12 +83,19 @@ var SideBar = function SideBar(props) {
     isBorderShow: isBorderShow,
     moveDistance: moveDistance,
     noAnimation: noAnimation,
+    id: sidebarId !== null && sidebarId !== void 0 ? sidebarId : 'sideSlider'
+  }, /*#__PURE__*/_react.default.createElement(_styles2.IconButtonWrapper, {
     IconTop: IconTop
-  }, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+  }, width > 576 && showExpandIcon && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
+    color: "black",
+    onClick: function onClick() {
+      return expandSideBar();
+    }
+  }, isExpand ? /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowsAngleContract, null) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.ArrowsAngleExpand, null)), /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "black",
     onClick: function onClick() {
       return props.onClose();
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null)), props.children));
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.XLg, null))), props.children));
 };
 exports.SideBar = SideBar;

package/_modules/themes/callcenterOriginal/src/components/Shared/SideBar/styles.js

@@ -4,13 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BarContainer = void 0;
+exports.IconButtonWrapper = exports.BarContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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 BarContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 0;\n  position: fixed;\n  z-index: 1005;\n  top: 0;\n  background: ", ";\n  overflow-x: hidden;\n  ", "\n  height: calc(var(--vh, 1vh) * 100);\n  ", "\n\n  ", "\n\n  > button {\n    position: absolute;\n    z-index: 10;\n    top: 20px;\n    ", "\n  }\n\n  ", "\n"])), function (props) {
+var BarContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 0;\n  position: fixed;\n  z-index: 1005;\n  top: 0;\n  background: ", ";\n  overflow-x: hidden;\n  ", "\n  height: calc(var(--vh, 1vh) * 100);\n  ", "\n\n  ", "\n"])), function (props) {
   var _props$theme$colors;
   return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
 }, function (_ref) {
@@ -35,17 +35,19 @@ var BarContainer = _styledComponents.default.div(_templateObject || (_templateOb
     var moveDistance = _ref4.moveDistance;
     return moveDistance ? "".concat(moveDistance, "px") : '0px';
   });
-}, function (props) {
+});
+exports.BarContainer = BarContainer;
+var IconButtonWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 10;\n  top: 20px;\n  display: flex;\n  align-items: center;\n  ", "\n  ", "\n"])), function (props) {
   var _props$theme3;
-  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      left: ", ";\n    "])), function (_ref5) {
+  return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    left: ", ";\n  "])), function (_ref5) {
     var moveDistance = _ref5.moveDistance;
     return moveDistance ? "".concat(moveDistance + 20, "px") : '20px';
-  }) : (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      right: ", ";\n    "])), function (_ref6) {
+  }) : (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    right: ", ";\n  "])), function (_ref6) {
     var moveDistance = _ref6.moveDistance;
     return moveDistance ? "".concat(moveDistance + 20, "px") : '20px';
   });
 }, function (_ref7) {
   var IconTop = _ref7.IconTop;
-  return IconTop && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    > button {\n      top: ", "\n    }\n  "])), IconTop);
+  return IconTop && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    top: ", "\n  "])), IconTop);
 });
-exports.BarContainer = BarContainer;
+exports.IconButtonWrapper = IconButtonWrapper;

package/_modules/themes/callcenterOriginal/src/components/Shared/Tabs/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = exports.Tab = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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 Tabs = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;  \n  border-bottom: 1px solid ", ";\n"])), function (props) {
+  return props.theme.colors.borderColor;
+});
+exports.Tabs = Tabs;
+var Tab = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 10px 0;\n  ", "\n  cursor: pointer;\n  color: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  var _props$theme;
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-left: 30px;\n  "]))) : (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-right: 30px;\n  "])));
+}, function (props) {
+  var _props$theme$colors;
+  return (_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.headingColor;
+}, function (_ref) {
+  var active = _ref.active;
+  return active && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    border-bottom: 3px solid;\n    font-weight: 500;\n  "])));
+}, function (_ref2) {
+  var active = _ref2.active;
+  return !active && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (props) {
+    return props.theme.colors.lightGray;
+  });
+});
+exports.Tab = Tab;

package/_modules/themes/callcenterOriginal/src/components/Shared/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "DragScroll", {
     return _DragScroll.DragScroll;
   }
 });
+Object.defineProperty(exports, "HtmlEditor", {
+  enumerable: true,
+  get: function get() {
+    return _HtmlEditor.HtmlEditor;
+  }
+});
 Object.defineProperty(exports, "Image", {
   enumerable: true,
   get: function get() {
@@ -69,6 +75,12 @@ Object.defineProperty(exports, "InputPhoneNumber", {
     return _InputPhoneNumber.InputPhoneNumber;
   }
 });
+Object.defineProperty(exports, "LinkableText", {
+  enumerable: true,
+  get: function get() {
+    return _LinkableText.LinkableText;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
@@ -189,6 +201,18 @@ Object.defineProperty(exports, "SpreadSheetEditor", {
     return _SpreadSheetEditor.default;
   }
 });
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.Tab;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _Tabs.Tabs;
+  }
+});
 var _AutoScroll = require("./AutoScroll");
 var _CitySelector = require("./CitySelector");
 var _ColumnAllowSettingPopover = require("./ColumnAllowSettingPopover");
@@ -198,6 +222,7 @@ var _DragScroll = require("./DragScroll");
 var _Image = require("./Image");
 var _ImageCrop = require("./ImageCrop");
 var _InputPhoneNumber = require("./InputPhoneNumber");
+var _LinkableText = require("./LinkableText");
 var _Modal = require("./Modal");
 var _MoreSidebarLayout = require("./MoreSidebarLayout");
 var _NotFoundSource = require("./NotFoundSource");
@@ -208,6 +233,7 @@ var _ProtectedRoute = require("./ProtectedRoute");
 var _Schedule = require("./Schedule");
 var _SearchBar = require("./SearchBar");
 var _RangeCalendar = require("./RangeCalendar");
+var _Tabs = require("./Tabs");
 var _SelectBusinessCategories = require("./SelectBusinessCategories");
 var _SelectBusinessProducts = require("./SelectBusinessProducts");
 var _SelectBusinesses = require("./SelectBusinesses");
@@ -219,4 +245,5 @@ var _SpinnerLoader = require("./SpinnerLoader");
 var _SpreadSheetEditor = _interopRequireDefault(require("./SpreadSheetEditor"));
 var _ProgressRing = require("./ProgressRing");
 var _ColorPicker = require("./ColorPicker");
+var _HtmlEditor = require("./HtmlEditor");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/_modules/themes/callcenterOriginal/src/components/Stores/BusinessSelectHeader/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.BusinessSelectHeader = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
-var _orderingComponentsExternal = require("ordering-components-external");
+var _orderingComponents = require("ordering-components-");
 var _styles = require("../../../styles");
 var _styles2 = require("./styles");
 var _Shared = require("../../Shared");
@@ -39,10 +39,10 @@ var BusinessessListingUI = function BusinessessListingUI(props) {
     close = props.close,
     changeBusinessState = props.changeBusinessState,
     handleOpenAddBusiness = props.handleOpenAddBusiness;
-  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+  var _useLanguage = (0, _orderingComponents.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
-  var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
+  var _useUtils = (0, _orderingComponents.useUtils)(),
     _useUtils2 = _slicedToArray(_useUtils, 1),
     optimizeImage = _useUtils2[0].optimizeImage;
   var dropdownReference = (0, _react.useRef)();
@@ -143,6 +143,6 @@ var BusinessSelectHeader = function BusinessSelectHeader(props) {
     isSearchByBusinessPhone: true,
     propsToFetch: (_props$defaultPropsTo = props.defaultPropsToFetch) !== null && _props$defaultPropsTo !== void 0 ? _props$defaultPropsTo : ['name', 'slug', 'logo', 'city']
   });
-  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.DashboardBusinessList, businessListingProps);
+  return /*#__PURE__*/_react.default.createElement(_orderingComponents.DashboardBusinessList, businessListingProps);
 };
 exports.BusinessSelectHeader = BusinessSelectHeader;

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

@@ -4,10 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconButton = exports.Button = void 0;
+exports.LinkButton = exports.IconButton = 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, _templateObject27;
 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) } })); }
@@ -37,43 +36,58 @@ var IconButton = _styledComponents.default.button(_templateObject || (_templateO
   return isDisabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    pointer-events: none;\n  "])));
 });
 exports.IconButton = IconButton;
-var Button = _styledComponents.default.button(_templateObject6 || (_templateObject6 = _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"])), function () {
-  return (0, _polished.darken)(0.07, '#CCC');
-}, function (_ref5) {
-  var bgtransparent = _ref5.bgtransparent;
-  return bgtransparent && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      background: transparent !important;\n  "])));
+var Button = _styledComponents.default.button(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background: #CCC;\n  color: #FFF;\n  border: 1px solid #CCC;\n  border-radius: ", ";\n  line-height: 30px;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-size: 14px;\n  cursor: pointer;\n  outline: none;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all .2s ease-in;\n\n  &:active {\n    background: '#CCC';\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"])), function (_ref5) {
+  var borderRadius = _ref5.borderRadius;
+  return !borderRadius ? '30px' : borderRadius;
 }, function (_ref6) {
-  var initialIcon = _ref6.initialIcon;
-  return initialIcon && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    text-align: left;\n    ", "\n    img{\n      vertical-align: middle;\n    }\n    span {\n      padding-left: 15%\n      ", "\n    }\n  "])), function (props) {
+  var rectangle = _ref6.rectangle;
+  return rectangle && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    border-radius: unset;\n  "])));
+}, function (_ref7) {
+  var bgtransparent = _ref7.bgtransparent;
+  return bgtransparent && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    background: transparent !important;\n  "])));
+}, function (_ref8) {
+  var initialIcon = _ref8.initialIcon;
+  return initialIcon && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    text-align: left;\n    ", "\n    img{\n      vertical-align: middle;\n    }\n    span {\n      padding-left: 15%\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      text-align: right;\n    "])));
+    return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      text-align: right;\n    "])));
   }, function (props) {
     var _props$theme2;
-    return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        padding-right: 15%;\n        padding-left: 0\n    "])));
+    return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        padding-right: 15%;\n        padding-left: 0;\n    "])));
   });
-}, function (_ref7) {
-  var outline = _ref7.outline;
-  return outline && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _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 (_ref8) {
-  var circle = _ref8.circle;
-  return circle && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _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 (_ref9) {
-  var circle = _ref9.circle,
-    outline = _ref9.outline;
-  return circle && outline && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _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 = _ref9.outline;
+  return outline && (0, _styledComponents.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: #CCC;\n    border-color: #CCC;\n    &:active {\n      color: #FFF;\n      background: '#CCC';\n    }\n    &:hover {\n      background: '#CCC';\n      color: #FFF;\n    }\n  "])), function (props) {
+    var _props$theme$colors;
+    return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
+  });
 }, function (_ref10) {
-  var color = _ref10.color;
-  return color === 'primary' && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
+  var circle = _ref10.circle;
+  return circle && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _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: '#CCC';\n    }\n  "])));
+}, function (_ref11) {
+  var circle = _ref11.circle,
+    outline = _ref11.outline;
+  return circle && outline && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    background: ", ";\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: '#CCC';\n    }\n  "])), function (props) {
+    var _props$theme$colors2;
+    return ((_props$theme$colors2 = props.theme.colors) === null || _props$theme$colors2 === void 0 ? void 0 : _props$theme$colors2.backgroundPage) || '#FFF';
+  });
+}, function (_ref12) {
+  var color = _ref12.color;
+  return color === 'primary' && (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    ", "\n    ", "\n  "])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.primaryContrast;
   }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
-    return (0, _polished.darken)(0.07, props.theme.colors.primary);
-  }, function (_ref11) {
-    var outline = _ref11.outline;
-    return outline && (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _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;
+  }, function (_ref13) {
+    var outline = _ref13.outline;
+    return outline && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      background: ", ";\n      color: ", ";\n      border-color: ", ";\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n      &:hover {\n        background: ", ";\n        color: #FFF;\n      }\n    "])), function (props) {
+      var _props$theme$colors3;
+      return ((_props$theme$colors3 = props.theme.colors) === null || _props$theme$colors3 === void 0 ? void 0 : _props$theme$colors3.backgroundPage) || '#FFF';
+    }, function (props) {
       return props.theme.colors.primary;
     }, function (props) {
       return props.theme.colors.primary;
@@ -82,25 +96,28 @@ var Button = _styledComponents.default.button(_templateObject6 || (_templateObje
     }, function (props) {
       return props.theme.colors.primary;
     }, function (props) {
-      return (0, _polished.darken)(0.07, props.theme.colors.primary);
+      return props.theme.colors.primary;
     });
-  }, function (_ref12) {
-    var circle = _ref12.circle;
-    return circle && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _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 (_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        border-color: ", ";\n        background: ", ";\n      }\n    "])), function (props) {
       return props.theme.colors.primary;
     }, function (props) {
       return props.theme.colors.primaryContrast;
     }, function (props) {
       return props.theme.colors.primary;
     }, function (props) {
-      return (0, _polished.darken)(0.07, props.theme.colors.primary);
+      return props.theme.colors.primary;
     }, function (props) {
-      return (0, _polished.darken)(0.07, props.theme.colors.primary);
+      return props.theme.colors.primary;
     });
-  }, function (_ref13) {
-    var circle = _ref13.circle,
-      outline = _ref13.outline;
-    return circle && outline && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _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 (_ref15) {
+    var circle = _ref15.circle,
+      outline = _ref15.outline;
+    return circle && outline && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _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) {
+      var _props$theme$colors4;
+      return ((_props$theme$colors4 = props.theme.colors) === null || _props$theme$colors4 === void 0 ? void 0 : _props$theme$colors4.backgroundPage) || '#FFF';
+    }, function (props) {
       return props.theme.colors.primary;
     }, function (props) {
       return props.theme.colors.primary;
@@ -110,48 +127,63 @@ var Button = _styledComponents.default.button(_templateObject6 || (_templateObje
       return props.theme.colors.primary;
     });
   });
-}, function (_ref14) {
-  var color = _ref14.color;
-  return color === 'primaryContrast' && (0, _styledComponents.css)(_templateObject18 || (_templateObject18 = _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 (_ref16) {
+  var color = _ref16.color;
+  return color === 'lightPrimary' && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  "])), function (props) {
+    return props.theme.colors.lightPrimary;
   }, function (props) {
     return props.theme.colors.primary;
   }, function (props) {
-    return props.theme.colors.primaryContrast;
+    return props.theme.colors.lightPrimary;
   }, function (props) {
-    return (0, _polished.darken)(0.04, props.theme.colors.primaryContrast);
+    return props.theme.colors.lightPrimary;
   }, function (props) {
-    return (0, _polished.darken)(0.1, props.theme.colors.primaryContrast);
-  }, function (_ref15) {
-    var naked = _ref15.naked;
-    return naked && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      background: transparent;\n      border-color: transparent;\n      &:active {\n        background: transparent;\n      }\n      &:hover {\n        background: transparent;\n      }\n    "])));
+    return props.theme.colors.lightPrimary;
   });
-}, function (_ref16) {
-  var color = _ref16.color;
-  return color === 'secundary' && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:active {\n      background: ", ";\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
+}, function (_ref17) {
+  var color = _ref17.color;
+  return color === 'secundaryDark' && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  "])), function (props) {
+    return props.theme.colors.secundaryDarkContrast;
+  }, function (props) {
+    return props.theme.colors.secundaryDark;
+  }, function (props) {
+    return props.theme.colors.secundaryDarkContrast;
+  }, function (props) {
+    return props.theme.colors.secundaryDarkContrast;
+  }, function (props) {
+    return props.theme.colors.secundaryDarkContrast;
+  });
+}, function (_ref18) {
+  var color = _ref18.color;
+  return color === 'secundary' && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n    ", "\n    ", "\n    ", "\n  "])), function (props) {
     return props.theme.colors.secundary;
   }, function (props) {
     return props.theme.colors.secundaryContrast;
   }, function (props) {
     return props.theme.colors.secundary;
   }, function (props) {
-    return (0, _polished.darken)(0.07, props.theme.colors.secundary);
-  }, function (_ref17) {
-    var outline = _ref17.outline;
-    return outline && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _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;
+  }, 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: #FFF;\n      }\n    "])), function (props) {
+      var _props$theme$colors5;
+      return ((_props$theme$colors5 = props.theme.colors) === null || _props$theme$colors5 === void 0 ? void 0 : _props$theme$colors5.backgroundPage) || '#FFF';
+    }, function (props) {
       return props.theme.colors.secundary;
     }, function (props) {
       return props.theme.colors.secundary;
     }, function (props) {
       return props.theme.colors.secundaryContrast;
     }, function (props) {
-      return (0, _polished.darken)(0.05, props.theme.colors.secundary);
+      return props.theme.colors.secundary;
     }, function (props) {
-      return (0, _polished.darken)(0.07, props.theme.colors.secundary);
+      return props.theme.colors.secundary;
     });
-  }, function (_ref18) {
-    var circle = _ref18.circle;
-    return circle && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _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 (_ref20) {
+    var circle = _ref20.circle;
+    return circle && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _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;
@@ -160,14 +192,17 @@ var Button = _styledComponents.default.button(_templateObject6 || (_templateObje
     }, function (props) {
       return props.theme.colors.secundaryContrast;
     }, function (props) {
-      return (0, _polished.darken)(0.07, props.theme.colors.secundary);
+      return props.theme.colors.secundary;
     }, function (props) {
-      return (0, _polished.darken)(0.07, props.theme.colors.secundary);
+      return props.theme.colors.secundary;
     });
-  }, function (_ref19) {
-    var circle = _ref19.circle,
-      outline = _ref19.outline;
-    return circle && outline && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _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 (_ref21) {
+    var circle = _ref21.circle,
+      outline = _ref21.outline;
+    return circle && outline && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _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        color: ", ";\n      }\n    "])), function (props) {
+      var _props$theme$colors6;
+      return ((_props$theme$colors6 = props.theme.colors) === null || _props$theme$colors6 === void 0 ? void 0 : _props$theme$colors6.backgroundPage) || '#FFF';
+    }, function (props) {
       return props.theme.colors.secundary;
     }, function (props) {
       return props.theme.colors.secundary;
@@ -179,18 +214,25 @@ var Button = _styledComponents.default.button(_templateObject6 || (_templateObje
       return props.theme.colors.secundaryContrast;
     });
   });
-}, function (_ref20) {
-  var color = _ref20.color;
-  return color === 'gray' && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _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 (_ref22) {
+  var color = _ref22.color;
+  return color === 'black' && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n    background: ", ";\n    color: ", ";\n    border-color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &:active {\n      background: ", ";\n    }\n  "])), function (props) {
+    return props.theme.colors.black;
   }, function (props) {
-    return props.theme.colors.darkGray;
+    return props.theme.colors.white;
   }, function (props) {
-    return props.theme.colors.grayDividerColor;
+    return props.theme.colors.black;
   }, function (props) {
-    return (0, _polished.darken)(0.05, props.theme.colors.grayDividerColor);
+    return props.theme.colors.black;
   }, function (props) {
-    return (0, _polished.darken)(0.07, props.theme.colors.grayDividerColor);
+    return props.theme.colors.black;
   });
 });
-exports.Button = Button;
+exports.Button = Button;
+var LinkButton = _styledComponents.default.a(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  cursor: pointer;\n  color: ", ";\n  &:hover {\n    text-decoration: underline;\n  }\n\n  ", "\n"])), function (props) {
+  return props.theme.colors.primary;
+}, function (_ref23) {
+  var disabled = _ref23.disabled;
+  return disabled && (0, _styledComponents.css)(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n    pointer-events: none;\n    opacity: 0.5;\n  "])));
+});
+exports.LinkButton = LinkButton;

package/_modules/themes/callcenterOriginal/src/styles/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "Input", {
     return _Inputs.Input;
   }
 });
+Object.defineProperty(exports, "LinkButton", {
+  enumerable: true,
+  get: function get() {
+    return _Buttons.LinkButton;
+  }
+});
 Object.defineProperty(exports, "MultiSelect", {
   enumerable: true,
   get: function get() {