@thecb/components 5.4.4 → 5.6.1

package/dist/index.cjs.js

@@ -6044,6 +6044,9 @@ var displayCurrency = function displayCurrency(cents) {
 var convertCentsToMoneyInt = function convertCentsToMoneyInt(n) {
   return (n / 100).toFixed(0);
 };
+var formatPercent = function formatPercent(decimal) {
+  return Number.parseFloat(decimal).toFixed(2);
+};
 
 var createUniqueId = function createUniqueId() {
   return "_" + Math.random().toString(36).substr(2, 9);
@@ -6118,6 +6121,7 @@ var general = /*#__PURE__*/Object.freeze({
   noop: noop,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
+  formatPercent: formatPercent,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
@@ -12146,7 +12150,7 @@ var Motion = function Motion(_ref) {
 var ReelStyled = styled__default.div.withConfig({
   displayName: "Reelstyled__ReelStyled",
   componentId: "sc-bhf05j-0"
-})(["display:flex;overflow-x:", ";padding:", ";height:", ";justify-content:", ";> * + *{margin-left:", ";}> *{flex:0 0 ", ";}"], function (_ref) {
+})(["display:flex;overflow-x:", ";padding:", ";height:", ";justify-content:", ";> * + *{margin-left:", ";}> *{flex:0 0 ", ";}", ""], function (_ref) {
   var disableScroll = _ref.disableScroll;
   return disableScroll ? "hidden" : "auto";
 }, function (_ref2) {
@@ -12164,9 +12168,18 @@ var ReelStyled = styled__default.div.withConfig({
 }, function (_ref6) {
   var childWidth = _ref6.childWidth;
   return childWidth;
+}, function (_ref7) {
+  var useOrderedList = _ref7.useOrderedList,
+      useUnorderedList = _ref7.useUnorderedList;
+  return useOrderedList || useUnorderedList ? "\n      margin: 0;\n      margin-block-start: 0;\n      margin-block-end: 0;\n      padding-inline-start: 0;\n      list-style-type: none;\n    " : "";
 });
 
 var _excluded$g = ["childGap", "height", "childWidth", "padding", "justifyContent", "disableScroll", "useOrderedList", "useUnorderedList", "children"];
+/*
+  Safari has a bug where it refuses to recognize <ul /> tags as lists when list-style: none is used
+  This affects the apple voice over (mainly used on iOS devices)
+  The solution is to explicitly include "role=List"
+*/
 
 var Reel = function Reel(_ref) {
   var _ref$childGap = _ref.childGap,
@@ -12196,8 +12209,12 @@ var Reel = function Reel(_ref) {
     padding: padding,
     justifyContent: justifyContent,
     disableScroll: disableScroll,
-    as: elementType
-  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
+    as: elementType,
+    useOrderedList: useOrderedList,
+    useUnorderedList: useUnorderedList
+  }, rest, {
+    role: useOrderedList || useUnorderedList ? "list" : "section"
+  }), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
 };
 
 /*
@@ -17001,7 +17018,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     return /*#__PURE__*/React__default.createElement(React.Fragment, {
       key: "breadcrumb-".concat(linkText)
     }, /*#__PURE__*/React__default.createElement(InternalLink, {
-      "aria-current": index === breadcrumbsList.length - 1 && "location",
+      "aria-current": index === breadcrumbsList.length - 1 ? "location" : "",
       to: linkDestination,
       active: isActive.toString(),
       color: themeValues.color,
@@ -17010,7 +17027,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       fontWeight: themeValues.fontWeight,
       margin: themeValues.margin,
       extraStyles: "\n                          text-transform: uppercase;\n                          ".concat(isActive.toString() === "true" && "pointer-events: none;\n                             color: ".concat(themeValues.activeBreadcrumbColor, ";\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, "; \n                          }")
-    }, linkText), index < breadcrumbsList.length - 1 && /*#__PURE__*/React__default.createElement(IconChevron, null));
+    }, linkText), index < breadcrumbsList.length - 1 ? /*#__PURE__*/React__default.createElement(IconChevron, null) : /*#__PURE__*/React__default.createElement(React.Fragment, null));
   })));
 };
 
@@ -22154,7 +22171,7 @@ var ProcessingFee = function ProcessingFee(_ref) {
     hiddenStyles: hide
   }, /*#__PURE__*/React__default.createElement(Alert$1, {
     heading: "Processing Fee",
-    text: "There is a processing fee of ".concat(feeType === "FLAT" ? "".concat(displayCurrency(feeValue)) : "".concat(feeValue * 100, "%"), " ").concat(ifElse(isNil, always(""), function (a) {
+    text: "There is a processing fee of ".concat(feeType === "FLAT" ? "".concat(displayCurrency(feeValue)) : "".concat(formatPercent(feeValue * 100), "%"), " ").concat(ifElse(isNil, always(""), function (a) {
       return "with a minimum of ".concat(displayCurrency(a), " ");
     })(feeMinimum), "on all ").concat(feeName, " payments."),
     variant: "info",
@@ -35289,11 +35306,11 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, customTitle ? /*#__PURE__*/React__default.createElement(Box, {
     width: "calc(100% - 36px)",
     padding: "0px"
-  }, title) : /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: "h6",
+  }, title) : /*#__PURE__*/React__default.createElement(Title$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.titleColor,
-    as: "h6"
+    as: "h6",
+    variant: "small"
   }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
     extraStyles: "display: flex; align-items: center;"
@@ -35483,7 +35500,7 @@ var EditableList = function EditableList(_ref) {
         return removeItem(item.id);
       },
       extraStyles: "min-width: 0;",
-      "aria-label": "Remove ".concat(itemName, " ").concat(title)
+      "aria-label": "Remove ".concat(itemName)
     })), canEdit && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
@@ -35497,7 +35514,7 @@ var EditableList = function EditableList(_ref) {
         return editItem(item.id);
       },
       extraStyles: "min-width: 0;",
-      "aria-label": "Edit ".concat(itemName, " ").concat(title)
+      "aria-label": "Edit ".concat(itemName)
     }))));
   })), canAdd && (!maxItems || items.length < maxItems) && /*#__PURE__*/React__default.createElement(Box, {
     padding: items.length === 0 ? "0" : "1rem 0 0"
@@ -35804,8 +35821,9 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       borderSize: "3px",
       borderColor: highlightIndex == i ? themeValues.textColor : "transparent",
       borderWidthOverride: "0 0 3px 0",
-      extraStyles: "text-align: center;",
-      as: "li"
+      extraStyles: "text-align: center; display: block;",
+      as: "li",
+      "aria-current": highlightIndex == i ? "step" : ""
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       textAlign: "center",