@thecb/components 9.3.3 → 9.3.5-beta.0

package/dist/index.esm.js

@@ -26743,13 +26743,17 @@ var fontWeight$4 = {
   pS: "600",
   p: "600",
   pL: "600",
-  h6: "700"
+  h6: "700",
+  regular: "600",
+  extraSmall: "600",
+  small: "600",
+  large: "600"
 };
 var fallbackValues$p = {
   fontWeight: fontWeight$4
 };
 
-var LabeledAmount = function LabeledAmount(_ref) {
+var LabeledAmountV1 = function LabeledAmountV1(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "pL" : _ref$variant,
       label = _ref.label,
@@ -26773,19 +26777,46 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
+var LabeledAmountV2 = function LabeledAmountV2(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "regular" : _ref$variant,
+      label = _ref.label,
+      amount = _ref.amount,
+      themeValues = _ref.themeValues,
+      as = _ref.as,
+      extraStyles = _ref.extraStyles;
+  return /*#__PURE__*/React.createElement(Detail$1, {
+    variant: variant,
+    as: as,
+    weight: themeValues.fontWeight,
+    extraStyles: "display: flex; justify-content: space-between; ".concat(extraStyles)
+  }, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", null, amount));
+};
+
+var _excluded$u = ["version"];
+
+var LabeledAmount = function LabeledAmount(_ref) {
+  var _ref$version = _ref.version,
+      version = _ref$version === void 0 ? "v1" : _ref$version,
+      rest = _objectWithoutProperties(_ref, _excluded$u);
+
+  var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
+  return /*#__PURE__*/React.createElement(LabeledAmountComponent, rest);
+};
+
 var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$p, "default");
 
 var weightTitle = {
   "default": "600",
   small: "400"
 };
-var paragraphVariant = {
-  "default": "pL",
-  small: "pS"
+var detailVariant = {
+  "default": "large",
+  small: "small"
 };
 var fallbackValues$q = {
   weightTitle: weightTitle,
-  paragraphVariant: paragraphVariant
+  detailVariant: detailVariant
 };
 
 var LineItem = function LineItem(_ref) {
@@ -26812,35 +26843,27 @@ var LineItem = function LineItem(_ref) {
   var visibleCustomAttrs = customAttributes === null || customAttributes === void 0 ? void 0 : (_customAttributes$fil = customAttributes.filter(function (attr) {
     return (visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.includes(attr.key)) && attr.key !== "description";
   })) === null || _customAttributes$fil === void 0 ? void 0 : _customAttributes$fil.map(function (attr) {
-    return /*#__PURE__*/React.createElement(Paragraph$1, {
-      variant: "pS",
+    return /*#__PURE__*/React.createElement(Detail$1, {
+      variant: "small",
       weight: "400",
       key: attr.key,
       color: STORM_GREY
     }, "".concat(formatAttrKeys(attr.key), ": ").concat(attr.value));
   });
-  return /*#__PURE__*/React.createElement(Cluster, {
-    nowrap: true,
-    justify: "space-between",
-    align: "start"
-  }, /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Stack, {
     childGap: "0px"
-  }, /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
-    weight: themeValues.weightTitle
-  }, description), /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
+  }, /*#__PURE__*/React.createElement(Detail$1, {
+    as: "h3",
+    variant: themeValues.detailVariant,
+    weight: themeValues.weightTitle,
+    extraStyles: "display: flex; justify-content: space-between;"
+  }, /*#__PURE__*/React.createElement("span", null, description), /*#__PURE__*/React.createElement("span", null, !!displayQuantity && "x".concat(displayQuantity)), /*#__PURE__*/React.createElement("span", null, amount)), /*#__PURE__*/React.createElement(Detail$1, {
+    as: "p",
+    variant: themeValues.detailVariant,
     weight: "400"
   }, subDescription), visibleCustomAttrs && /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem"
-  }, visibleCustomAttrs)), !!displayQuantity && /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
-    weight: themeValues.weightTitle
-  }, "x".concat(displayQuantity)), /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: themeValues.paragraphVariant,
-    weight: "600",
-    extraStyles: "margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
-  }, amount));
+  }, visibleCustomAttrs));
 };
 
 var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$q, "default");
@@ -26918,7 +26941,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$u = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$v = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
@@ -26934,7 +26957,7 @@ var NavFooter = function NavFooter(_ref) {
       footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
       isMobile = _ref.isMobile,
       footerWidth = _ref.footerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$u);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: footerPadding,
@@ -26966,7 +26989,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$v = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$w = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
@@ -26976,7 +26999,7 @@ var NavHeader = function NavHeader(_ref) {
       isMobile = _ref.isMobile,
       backgroundColor = _ref.backgroundColor,
       headerWidth = _ref.headerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$w);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
     padding: "0 16px 4px",
@@ -38771,7 +38794,7 @@ var TableRowWrapper = styled.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$w = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
@@ -38781,7 +38804,7 @@ var TableRow = function TableRow(_ref) {
       hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
       onClick = _ref.onClick,
       themeValues = _ref.themeValues,
-      props = _objectWithoutProperties(_ref, _excluded$w);
+      props = _objectWithoutProperties(_ref, _excluded$x);
 
   return /*#__PURE__*/React.createElement(TableRowWrapper, _extends({
     onClick: onClick,
@@ -45854,9 +45877,10 @@ var Modal$1 = function Modal(_ref) {
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
-  }, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h6",
-    weight: FONT_WEIGHT_SEMIBOLD
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    as: "h2",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    fontSize: "1.25rem"
   }, modalHeaderText))), /*#__PURE__*/React.createElement(Box, {
     background: modalBodyBg,
     padding: "1.5rem"
@@ -47348,12 +47372,12 @@ var lineItem = {
   small: "small"
 };
 var labeledAmountSubtotal = {
-  "default": "pL",
-  small: "pS"
+  "default": "large",
+  small: "small"
 };
 var labeledAmountTotal = {
-  "default": "h6",
-  small: "p"
+  "default": "large",
+  small: "small"
 };
 var fallbackValues$N = {
   backgroundColor: backgroundColor$c,
@@ -47362,7 +47386,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$x = ["amount"],
+var _excluded$y = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -47413,6 +47437,9 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "16px 0px"
   }, /*#__PURE__*/React.createElement(SolidDivider$1, null)), /*#__PURE__*/React.createElement(LabeledAmount$1, {
+    version: "v2",
+    as: "h3",
+    variant: "small",
     extraStyles: "font-weight: ".concat(FONT_WEIGHT_REGULAR, "; font-size: 14px;"),
     label: "Amount paid",
     amount: displayCurrency(voidableAmountPaid)
@@ -47420,15 +47447,18 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   , subtotal ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
     padding: "0.5rem 0"
   }, /*#__PURE__*/React.createElement(LabeledAmount$1, {
+    version: "v2",
     variant: themeValues.labeledAmountSubtotal,
     label: "Subtotal",
-    amount: displayCurrency(subtotal)
+    amount: displayCurrency(subtotal),
+    as: "h3"
   }), feeElems), /*#__PURE__*/React.createElement(SolidDivider$1, null)) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(LabeledAmount$1, {
-    as: "p",
+    version: "v2",
+    as: "h3",
     variant: themeValues.labeledAmountTotal,
     label: hasVoidablePaymentsSection ? "Remaining amount due" : "Total",
     amount: displayCurrency(typeof remainingBalance === "number" ? remainingBalance : total),
-    extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";")
+    extraStyles: "margin-top: 1rem;"
   }));
 };
 
@@ -47607,7 +47637,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-        rest = _objectWithoutProperties(_ref5, _excluded$x);
+        rest = _objectWithoutProperties(_ref5, _excluded$y);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -47636,6 +47666,8 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     }, /*#__PURE__*/React.createElement(Box, {
       padding: "4px 0"
     }), /*#__PURE__*/React.createElement(LabeledAmount$1, _extends({
+      version: "v2",
+      as: "h3",
       key: fee.label,
       variant: themeValues.labeledAmountSubtotal
     }, fee)));
@@ -47679,7 +47711,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     align: "center"
   }, /*#__PURE__*/React.createElement(Title$1, {
     weight: FONT_WEIGHT_BOLD,
-    as: "h1",
+    as: "h2",
     extraStyles: "font-size: 1.375rem;",
     id: "payment-details-title"
   }, titleText), /*#__PURE__*/React.createElement(Title$1, {
@@ -47687,7 +47719,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     as: "p",
     extraStyles: "font-size: 1.375rem;"
   }, displayCurrency(total)))) : /*#__PURE__*/React.createElement(Title$1, {
-    as: "h1",
+    as: "h2",
     weight: FONT_WEIGHT_BOLD,
     margin: "1rem 0 0 0",
     extraStyles: "font-size: 1.75rem;",
@@ -48029,12 +48061,12 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$y = ["version"];
+var _excluded$z = ["version"];
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
       version = _ref$version === void 0 ? "v1" : _ref$version,
-      rest = _objectWithoutProperties(_ref, _excluded$y);
+      rest = _objectWithoutProperties(_ref, _excluded$z);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React.createElement(TermsAndConditionsControl, rest);
@@ -48713,7 +48745,7 @@ var fallbackValues$Q = {
   focusStyles: focusStyles
 };
 
-var _excluded$z = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired"];
+var _excluded$A = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired"];
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -48761,7 +48793,7 @@ var RadioSection = function RadioSection(_ref) {
       ariaDescribedBy = _ref.ariaDescribedBy,
       _ref$isSectionRequire = _ref.isSectionRequired,
       isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
-      rest = _objectWithoutProperties(_ref, _excluded$z);
+      rest = _objectWithoutProperties(_ref, _excluded$A);
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),