@thecb/components 7.7.4-beta.4 → 7.7.4-beta.6

package/dist/index.cjs.js

@@ -12811,7 +12811,7 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
   }))))));
 };
 
-var _excluded$h = ["action", "children", "contentOverride", "dataQa", "disabledBackgroundColor", "disabledBorderColor", "disabledColor", "extraStyles", "isLoading", "tabIndex", "text", "textExtraStyles", "textWrap", "variant"];
+var _excluded$h = ["action", "variant", "text", "textWrap", "isLoading", "dataQa", "textExtraStyles", "contentOverride", "extraStyles", "tabIndex", "children", "extraDisabledStyles"];
 var rotate$1 = posed.div({
   fixed: {
     rotate: "0deg"
@@ -12865,28 +12865,23 @@ var Spinner = function Spinner(_ref) {
 var ButtonWithAction = function ButtonWithAction(_ref2) {
   var _ref2$action = _ref2.action,
       action = _ref2$action === void 0 ? noop : _ref2$action,
-      children = _ref2.children,
-      _ref2$contentOverride = _ref2.contentOverride,
-      contentOverride = _ref2$contentOverride === void 0 ? false : _ref2$contentOverride,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
+      text = _ref2.text,
+      _ref2$textWrap = _ref2.textWrap,
+      textWrap = _ref2$textWrap === void 0 ? false : _ref2$textWrap,
+      _ref2$isLoading = _ref2.isLoading,
+      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
       _ref2$dataQa = _ref2.dataQa,
       dataQa = _ref2$dataQa === void 0 ? null : _ref2$dataQa,
-      _ref2$disabledBackgro = _ref2.disabledBackgroundColor,
-      disabledBackgroundColor = _ref2$disabledBackgro === void 0 ? "#6D717E" : _ref2$disabledBackgro,
-      _ref2$disabledBorderC = _ref2.disabledBorderColor,
-      disabledBorderColor = _ref2$disabledBorderC === void 0 ? "#6D717E" : _ref2$disabledBorderC,
-      _ref2$disabledColor = _ref2.disabledColor,
-      disabledColor = _ref2$disabledColor === void 0 ? "#FFFFFF" : _ref2$disabledColor,
+      textExtraStyles = _ref2.textExtraStyles,
+      _ref2$contentOverride = _ref2.contentOverride,
+      contentOverride = _ref2$contentOverride === void 0 ? false : _ref2$contentOverride,
       _ref2$extraStyles = _ref2.extraStyles,
       extraStyles = _ref2$extraStyles === void 0 ? "" : _ref2$extraStyles,
-      _ref2$isLoading = _ref2.isLoading,
-      isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
       tabIndex = _ref2.tabIndex,
-      text = _ref2.text,
-      textExtraStyles = _ref2.textExtraStyles,
-      _ref2$textWrap = _ref2.textWrap,
-      textWrap = _ref2$textWrap === void 0 ? false : _ref2$textWrap,
-      _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? "primary" : _ref2$variant,
+      children = _ref2.children,
+      extraDisabledStyles = _ref2.extraDisabledStyles,
       rest = _objectWithoutProperties(_ref2, _excluded$h);
 
   var themeContext = React.useContext(styled.ThemeContext);
@@ -12894,7 +12889,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
   var isMobile = themeContext.isMobile;
   var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
-  var disabledStyles = "\n    background-color: ".concat(disabledBackgroundColor, ";\n    border-color: ").concat(disabledBorderColor, ";\n    color: ").concat(disabledColor, ";\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px ").concat(disabledBackgroundColor, ";\n      outline: none;\n    }\n  ");
+  var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     variant: variant,
     padding: themeValues.padding,
@@ -45689,7 +45684,13 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
 var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
 var hoverBackgroundColor$2 = ALABASTER_WHITE;
+var activeBackgroundColor$1 = WHITE;
+var activeBorderColor$1 = MATISSE_BLUE;
+var activeColor$8 = MATISSE_BLUE;
 var fallbackValues$J = {
+  activeColor: activeColor$8,
+  activeBackgroundColor: activeBackgroundColor$1,
+  activeBorderColor: activeBorderColor$1,
   arrowColor: arrowColor,
   hoverBackgroundColor: hoverBackgroundColor$2,
   numberColor: numberColor
@@ -45699,23 +45700,34 @@ var PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
 
 var PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
 
-var PrevNextButton = function PrevNextButton(_ref) {
-  var action = _ref.action,
-      arrowColor = _ref.arrowColor,
-      borderRadius = _ref.borderRadius,
-      buttonHeight = _ref.buttonHeight,
-      buttonWidth = _ref.buttonWidth,
-      numberColor = _ref.numberColor,
-      type = _ref.type;
+var PrevNextPlaceholder = function PrevNextPlaceholder(_ref) {
+  var buttonHeight = _ref.buttonHeight,
+      buttonWidth = _ref.buttonWidth;
   return /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 10px 0",
+    padding: "0",
+    minHeight: buttonHeight,
+    minWidth: buttonWidth,
+    extraStyles: "max-height: ".concat(buttonHeight, ";")
+  });
+};
+
+var PrevNextButton = function PrevNextButton(_ref2) {
+  var action = _ref2.action,
+      arrowColor = _ref2.arrowColor,
+      borderRadius = _ref2.borderRadius,
+      buttonHeight = _ref2.buttonHeight,
+      buttonWidth = _ref2.buttonWidth,
+      numberColor = _ref2.numberColor,
+      type = _ref2.type;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
     minHeight: buttonHeight,
     extraStyles: "max-height: ".concat(buttonHeight, ";")
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: action,
     contentOverride: true,
     dataQa: type,
-    extraStyles: "\n        background-color: ".concat(numberColor, ";\n        border-color: ").concat(numberColor, "\n        border-radius: ").concat(borderRadius, ";\n        margin: 0;\n        max-height: ").concat(buttonHeight, ";\n        min-height: 100%;\n        min-width: ").concat(buttonWidth, ";\n        padding: 0;\n        &:focus {\n          outline: none\n        }\n      ")
+    extraStyles: "\n        background-color: ".concat(numberColor, ";\n        border-color: ").concat(numberColor, ";\n        border-radius: ").concat(borderRadius, ";\n        margin: 0;\n        max-height: ").concat(buttonHeight, ";\n        min-height: 100%;\n        min-width: ").concat(buttonWidth, ";\n        padding: 0;\n        &:focus {\n          outline: none\n        }\n      ")
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     extraStyles: type === "prev" && "transform: scaleX(-1)"
@@ -45771,34 +45783,37 @@ var getPagesPanel = function getPagesPanel(page, pagesCount) {
   return pages;
 };
 
-var Pagination = function Pagination(_ref2) {
-  var _ref2$activeBorderWid = _ref2.activeBorderWidth,
-      activeBorderWidth = _ref2$activeBorderWid === void 0 ? "1px" : _ref2$activeBorderWid,
-      activeBackgroundColor = _ref2.activeBackgroundColor,
-      arrowColor = _ref2.arrowColor,
-      _ref2$borderRadius = _ref2.borderRadius,
-      borderRadius = _ref2$borderRadius === void 0 ? "3px" : _ref2$borderRadius,
-      _ref2$buttonHeight = _ref2.buttonHeight,
-      buttonHeight = _ref2$buttonHeight === void 0 ? "40px" : _ref2$buttonHeight,
-      _ref2$buttonWidth = _ref2.buttonWidth,
-      buttonWidth = _ref2$buttonWidth === void 0 ? "40px" : _ref2$buttonWidth,
-      _ref2$childGap = _ref2.childGap,
-      childGap = _ref2$childGap === void 0 ? "10px" : _ref2$childGap,
-      currentPage = _ref2.currentPage,
-      _ref2$fontSize = _ref2.fontSize,
-      fontSize = _ref2$fontSize === void 0 ? "17px" : _ref2$fontSize,
-      _ref2$fontWeight = _ref2.fontWeight,
-      fontWeight = _ref2$fontWeight === void 0 ? "900" : _ref2$fontWeight,
-      numberColor = _ref2.numberColor,
-      pageCount = _ref2.pageCount,
-      pageNext = _ref2.pageNext,
-      pagePrevious = _ref2.pagePrevious,
-      setCurrentPage = _ref2.setCurrentPage,
-      themeValues = _ref2.themeValues;
+var Pagination = function Pagination(_ref3) {
+  var _ref3$activeBorderWid = _ref3.activeBorderWidth,
+      activeBorderWidth = _ref3$activeBorderWid === void 0 ? "3px" : _ref3$activeBorderWid,
+      arrowColor = _ref3.arrowColor,
+      _ref3$borderRadius = _ref3.borderRadius,
+      borderRadius = _ref3$borderRadius === void 0 ? "3px" : _ref3$borderRadius,
+      _ref3$buttonHeight = _ref3.buttonHeight,
+      buttonHeight = _ref3$buttonHeight === void 0 ? "44px" : _ref3$buttonHeight,
+      _ref3$buttonWidth = _ref3.buttonWidth,
+      buttonWidth = _ref3$buttonWidth === void 0 ? "44px" : _ref3$buttonWidth,
+      _ref3$childGap = _ref3.childGap,
+      childGap = _ref3$childGap === void 0 ? "24px" : _ref3$childGap,
+      currentPage = _ref3.currentPage,
+      _ref3$fontSize = _ref3.fontSize,
+      fontSize = _ref3$fontSize === void 0 ? "17px" : _ref3$fontSize,
+      _ref3$fontWeight = _ref3.fontWeight,
+      fontWeight = _ref3$fontWeight === void 0 ? "900" : _ref3$fontWeight,
+      numberColor = _ref3.numberColor,
+      pageCount = _ref3.pageCount,
+      pageNext = _ref3.pageNext,
+      pagePrevious = _ref3.pagePrevious,
+      setCurrentPage = _ref3.setCurrentPage,
+      themeValues = _ref3.themeValues;
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
   return /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     childGap: childGap
-  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+  }, currentPage > 1 ? /*#__PURE__*/React__default.createElement(PrevNextButton, {
     action: pagePrevious,
     arrowColor: arrowColor !== null && arrowColor !== void 0 ? arrowColor : themeValues.arrowColor,
     borderRadius: borderRadius,
@@ -45806,7 +45821,19 @@ var Pagination = function Pagination(_ref2) {
     buttonWidth: buttonWidth,
     numberColor: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor,
     type: "prev"
-  }), getPagesPanel(currentPage, pageCount).map(function (item, index) {
+  }) : isMobile && /*#__PURE__*/React__default.createElement(PrevNextPlaceholder, {
+    buttonHeight: buttonHeight,
+    buttonWidth: buttonWidth
+  }), isMobile ? pageCount > 0 && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(Cover, {
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pXL",
+    weight: fontWeight,
+    color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor,
+    extraStyles: "font-size: ".concat(fontSize)
+  }, "".concat(currentPage, " of ").concat(pageCount)))) : getPagesPanel(currentPage, pageCount).map(function (item, index) {
     return item.isButton ? /*#__PURE__*/React__default.createElement(Box, {
       padding: "0",
       extraStyles: "max-height: ".concat(buttonHeight, ";")
@@ -45815,17 +45842,15 @@ var Pagination = function Pagination(_ref2) {
       key: item.index,
       text: item.index,
       disabled: item.active,
+      extraDisabledStyles: "\n              border: ".concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n              color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.activeColor, ";\n              background-color: ").concat(themeValues.activeBackgroundColor, ";\n              &:focus {\n                box-shadow: none;\n              }\n              &:hover {\n                background-color: initial;\n              }\n            "),
       action: !item.active ? function () {
         return setCurrentPage({
           pageNumber: item.index
         });
       } : noop,
       textExtraStyles: "font-size: ".concat(fontSize, "; font-weight: ").concat(fontWeight, ";"),
-      extraStyles: "\n              ".concat(item.active ? "border: ".concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";") : "", "\n              min-width: ").concat(buttonWidth, "; min-height: 100%; padding: 0;\n              border-radius: ").concat(borderRadius, ";\n              &:hover, &:focus {\n                text-decoration: none;\n                > * > span {\n                  text-decoration: none;\n                }\n              }\n              > * > span {\n                color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n              }\n              margin: 0;\n              &:hover { ").concat(item.active ? "cursor: default;" : "background-color: ".concat(themeValues.hoverBackgroundColor), " }\n              &:focus {\n                outline: none\n              }\n            "),
-      dataQa: index,
-      disabledBackgroundColor: activeBackgroundColor,
-      disabledBorderColor: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor,
-      disabledColor: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor
+      extraStyles: "\n              min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n              border-radius: ").concat(borderRadius, ";\n              &:hover, &:focus {\n                text-decoration: none;\n                > * > span {\n                  text-decoration: none;\n                }\n              }\n              > * > span {\n                color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n              }\n              margin: 0;\n              &:hover {\n                  background-color: ").concat(themeValues.hoverBackgroundColor, "\n              }\n              &:focus {\n                outline: none\n              }\n            "),
+      dataQa: index
     }, item.index)) : /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 10px"
     }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -45834,9 +45859,10 @@ var Pagination = function Pagination(_ref2) {
       key: index,
       variant: "pXL",
       weight: fontWeight,
-      color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor
+      color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor,
+      extraStyles: "font-size: ".concat(fontSize)
     }, "...")));
-  }), currentPage < pageCount && /*#__PURE__*/React__default.createElement(PrevNextButton, {
+  }), currentPage < pageCount ? /*#__PURE__*/React__default.createElement(PrevNextButton, {
     action: pageNext,
     arrowColor: arrowColor !== null && arrowColor !== void 0 ? arrowColor : themeValues.arrowColor,
     borderRadius: borderRadius,
@@ -45844,6 +45870,9 @@ var Pagination = function Pagination(_ref2) {
     buttonWidth: buttonWidth,
     numberColor: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor,
     type: "next"
+  }) : isMobile && /*#__PURE__*/React__default.createElement(PrevNextPlaceholder, {
+    buttonHeight: buttonHeight,
+    buttonWidth: buttonWidth
   }));
 };