@thecb/components 5.10.4 → 5.11.1-beta.0

package/dist/index.cjs.js

@@ -40212,7 +40212,8 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       hasVoidablePaymentsSection = _ref.hasVoidablePaymentsSection,
       voidableTransactionDetails = _ref.voidableTransactionDetails,
       voidableAmountPaid = _ref.voidableAmountPaid,
-      partialVoidAction = _ref.partialVoidAction;
+      partialVoidAction = _ref.partialVoidAction,
+      remainingBalance = _ref.remainingBalance;
   return /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "16px"
   }, lineItemElems, hasVoidablePaymentsSection && /*#__PURE__*/React__default.createElement(Box, {
@@ -40220,7 +40221,8 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.text,
-    weight: "400"
+    weight: "400",
+    fontSize: "0.875rem"
   }, "Paid"), voidableTransactionDetails.map(function (t) {
     return /*#__PURE__*/React__default.createElement(Cluster, {
       key: t.id,
@@ -40228,7 +40230,8 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       align: "center"
     }, /*#__PURE__*/React__default.createElement(Cluster, {
       padding: "0",
-      align: "center"
+      align: "center",
+      extraStyles: "font-size: 14px;"
     }, /*#__PURE__*/React__default.createElement(Box, {
       padding: "0"
     }, t.voidText), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -40237,30 +40240,31 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
         return partialVoidAction(t);
       },
       text: "Void",
-      extraStyles: "min-width: 75px; margin: 0px;",
-      textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 16px;")
+      padding: "0",
+      extraStyles: "\n                  min-width: 65px; \n                  margin: 0px;\n                  min-height: 0px;\n                ",
+      textExtraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;")
     })), /*#__PURE__*/React__default.createElement(Box, {
       padding: "0",
       key: t.id
     }, displayCurrency(t.amount_processed)));
   }), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "8px 0px 16px 0px"
+    padding: "16px 0px"
   }, /*#__PURE__*/React__default.createElement(SolidDivider$1, null)), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
-    fontWeight: FONT_WEIGHT_REGULAR,
+    extraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;"),
     label: "Amount paid",
     amount: displayCurrency(voidableAmountPaid)
   })), !hasVoidablePaymentsSection && !!lineItemElems.length && /*#__PURE__*/React__default.createElement(SolidDivider$1, null) // avoids duplicate dividers -> case of voidable payment section, that acts as divider
-  , /*#__PURE__*/React__default.createElement(Box, {
+  , subtotal && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
     variant: themeValues.labeledAmountSubtotal,
     label: "Subtotal",
     amount: displayCurrency(subtotal)
-  }), feeElems), /*#__PURE__*/React__default.createElement(SolidDivider$1, null), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
+  }), feeElems), /*#__PURE__*/React__default.createElement(SolidDivider$1, null)), /*#__PURE__*/React__default.createElement(LabeledAmount$1, {
     as: "p",
     variant: themeValues.labeledAmountTotal,
     label: hasVoidablePaymentsSection ? "Remaining amount due" : "Total",
-    amount: displayCurrency(total),
+    amount: displayCurrency(typeof remainingBalance === "number" ? remainingBalance : total),
     extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";")
   }));
 };
@@ -40327,7 +40331,9 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       _ref4$partialVoidActi = _ref4.partialVoidAction,
       partialVoidAction = _ref4$partialVoidActi === void 0 ? noop : _ref4$partialVoidActi,
       _ref4$voidableAmountP = _ref4.voidableAmountPaid,
-      voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP;
+      voidableAmountPaid = _ref4$voidableAmountP === void 0 ? 0 : _ref4$voidableAmountP,
+      _ref4$remainingBalanc = _ref4.remainingBalance,
+      remainingBalance = _ref4$remainingBalanc === void 0 ? false : _ref4$remainingBalanc;
 
   var _useState = React.useState(initiallyOpen),
       _useState2 = _slicedToArray(_useState, 2),
@@ -40387,7 +40393,8 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     hasVoidablePaymentsSection: hasVoidablePaymentsSection,
     voidableTransactionDetails: voidableTransactionDetails,
     voidableAmountPaid: voidableAmountPaid,
-    partialVoidAction: partialVoidAction
+    partialVoidAction: partialVoidAction,
+    remainingBalance: remainingBalance
   })) : /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
@@ -40398,7 +40405,8 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     hasVoidablePaymentsSection: hasVoidablePaymentsSection,
     voidableTransactionDetails: voidableTransactionDetails,
     voidableAmountPaid: voidableAmountPaid,
-    partialVoidAction: partialVoidAction
+    partialVoidAction: partialVoidAction,
+    remainingBalance: remainingBalance
   });
   var title = hideTitle ? /*#__PURE__*/React__default.createElement(React.Fragment, null) : isCollapsible ? /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",