@thecb/components 9.5.0-beta.8 → 9.5.0

package/dist/index.esm.js

@@ -27068,17 +27068,26 @@ var Jumbo = function Jumbo(_ref) {
 var Jumbo$1 = withWindowSize(Jumbo);
 
 var fontWeight$4 = {
+  // v1 variants
   "default": "600",
   pS: "600",
   p: "600",
   pL: "600",
-  h6: "700"
+  h6: "700",
+  // v2 variants
+  regular: "600",
+  // fontsize Detail large
+  extraSmall: "600",
+  //fontsize Detail small
+  small: "600",
+  // fontsize Detail regular
+  large: "700" // fontsize Title small
 };
 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,
@@ -27101,19 +27110,51 @@ var LabeledAmount = function LabeledAmount(_ref) {
     extraStyles: "".concat(extraStyles, "; text-align: end; flex: 1;")
   }, 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;
+  var mappedDetailVariants = {
+    regular: "large",
+    small: "regular",
+    extraSmall: "small"
+  };
+  var LabeledAmountContainer = variant === "large" ? Title$1 : Detail$1;
+  var containerVariant = variant === "large" ? "small" : mappedDetailVariants[variant];
+  return /*#__PURE__*/React.createElement(LabeledAmountContainer, {
+    variant: containerVariant,
+    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) {
@@ -27137,35 +27178,27 @@ var LineItem = function LineItem(_ref) {
   var visibleCustomAttrs = customAttributes === null || customAttributes === 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");
 
@@ -27242,7 +27275,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,
     rightContent = _ref.rightContent,
@@ -27257,7 +27290,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,
     background: backgroundColor,
@@ -27288,7 +27321,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,
     rightContent = _ref.rightContent,
@@ -27297,7 +27330,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",
     background: backgroundColor,
@@ -27844,6 +27877,9 @@ var SearchableSelect = function SearchableSelect(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     itemList = _useState2[0],
     setItemList = _useState2[1];
+  var completeOptionsList = itemList.sort(function (a, b) {
+    return a.name == SELECT_ALL ? -1 : b.name === SELECT_ALL ? 1 : a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+  });
   useEffect$1(function () {
     return setItemList(items);
   }, [items, selectedItems]);
@@ -27875,17 +27911,16 @@ var SearchableSelect = function SearchableSelect(_ref) {
   }), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 0.5rem",
     extraStyles: "overflow-y: scroll; max-height: 250px;"
-  }, /*#__PURE__*/React.createElement(Stack, null, itemList.map(function (value) {
-    var _selectedItems$find;
+  }, /*#__PURE__*/React.createElement(Stack, null, completeOptionsList.map(function (option) {
     return /*#__PURE__*/React.createElement(Checkbox$1, {
-      key: value.name,
-      title: value.name,
-      name: value.name,
-      checked: (_selectedItems$find = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(function (item) {
-        return (item === null || item === void 0 ? void 0 : item.name) === (value === null || value === void 0 ? void 0 : value.name);
-      })) !== null && _selectedItems$find !== void 0 ? _selectedItems$find : false,
+      key: option.name,
+      title: option.name,
+      name: option.name,
+      checked: !!(selectedItems !== null && selectedItems !== void 0 && selectedItems.find(function (item) {
+        return (item === null || item === void 0 ? void 0 : item.name) === (option === null || option === void 0 ? void 0 : option.name);
+      })),
       onChange: function onChange() {
-        return handleSelect(value);
+        return handleSelect(option);
       },
       textExtraStyles: "margin: 0;",
       disabled: disabled,
@@ -39049,7 +39084,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,
     extraStyles = _ref.extraStyles,
@@ -39058,7 +39093,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,
     hoverEffect: hoverEffect,
@@ -46033,9 +46068,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"
@@ -47469,12 +47505,12 @@ var lineItem = {
   small: "small"
 };
 var labeledAmountSubtotal = {
-  "default": "pL",
-  small: "pS"
+  "default": "regular",
+  small: "small"
 };
 var labeledAmountTotal = {
-  "default": "h6",
-  small: "p"
+  "default": "large",
+  small: "small"
 };
 var fallbackValues$N = {
   backgroundColor: backgroundColor$c,
@@ -47483,7 +47519,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$x = ["amount"],
+var _excluded$y = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -47533,6 +47569,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)
@@ -47540,15 +47579,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;"
   }));
 };
 var LoadingDetails = function LoadingDetails() {
@@ -47717,7 +47759,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)
     });
@@ -47742,6 +47784,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)));
@@ -47785,7 +47829,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, {
@@ -47793,7 +47837,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;",
@@ -48124,11 +48168,11 @@ 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);
 };
@@ -48923,11 +48967,11 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
     animate: "open",
     exit: "closed",
     variants: wrapper,
-    extraStyles: "transform-origin: 100% 0; border-top: 1px solid ".concat(themeValues.borderColor)
+    extraStyles: "transform-origin: 100% 0; border-top: 0;"
   }, section.content))));
 };
 
-var _excluded$z = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
+var _excluded$A = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -48975,7 +49019,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$isSectionRequire = _ref.isSectionRequired,
     isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
     groupedSections = _ref.groupedSections,
-    rest = _objectWithoutProperties(_ref, _excluded$z);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -49055,7 +49099,7 @@ var RadioSection = function RadioSection(_ref) {
         openSection: openSection,
         toggleOpenSection: toggleOpenSection,
         isLastGroupedItemInSection: sectionIndex === sectionGroup.length - 1
-      }), sectionIndex === sectionGroup.length - 1 && groupedSections.indexOf(sectionGroup) !== groupedSections.length - 1 && /*#__PURE__*/React.createElement(SolidDivider$1, {
+      }), sectionIndex === sectionGroup.length - 1 && sectionGroupIndex !== groupedSections.length - 1 && /*#__PURE__*/React.createElement(SolidDivider$1, {
         borderSize: "1px",
         borderColor: MANATEE_GREY
       }));