@thecb/components 5.3.4 → 5.6.0

package/dist/index.esm.js

@@ -12138,7 +12138,7 @@ var Motion = function Motion(_ref) {
 var ReelStyled = styled.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) {
@@ -12156,9 +12156,18 @@ var ReelStyled = styled.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", "children"];
+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,
@@ -12173,17 +12182,27 @@ var Reel = function Reel(_ref) {
       justifyContent = _ref$justifyContent === void 0 ? "flex-start" : _ref$justifyContent,
       _ref$disableScroll = _ref.disableScroll,
       disableScroll = _ref$disableScroll === void 0 ? false : _ref$disableScroll,
+      _ref$useOrderedList = _ref.useOrderedList,
+      useOrderedList = _ref$useOrderedList === void 0 ? false : _ref$useOrderedList,
+      _ref$useUnorderedList = _ref.useUnorderedList,
+      useUnorderedList = _ref$useUnorderedList === void 0 ? false : _ref$useUnorderedList,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$g);
 
+  var elementType = useOrderedList ? "ol" : useUnorderedList ? "ul" : "div";
   return /*#__PURE__*/React.createElement(ReelStyled, _extends({
     childGap: childGap,
     height: height,
     childWidth: childWidth,
     padding: padding,
     justifyContent: justifyContent,
-    disableScroll: disableScroll
-  }, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null)));
+    disableScroll: disableScroll,
+    as: elementType,
+    useOrderedList: useOrderedList,
+    useUnorderedList: useUnorderedList
+  }, rest, {
+    role: useOrderedList || useUnorderedList ? "list" : "section"
+  }), safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null)));
 };
 
 /*
@@ -16987,7 +17006,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     return /*#__PURE__*/React.createElement(Fragment, {
       key: "breadcrumb-".concat(linkText)
     }, /*#__PURE__*/React.createElement(InternalLink, {
-      "aria-current": index === breadcrumbsList.length - 1 && "location",
+      "aria-current": index === breadcrumbsList.length - 1 ? "location" : "",
       to: linkDestination,
       active: isActive.toString(),
       color: themeValues.color,
@@ -16996,7 +17015,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.createElement(IconChevron, null));
+    }, linkText), index < breadcrumbsList.length - 1 ? /*#__PURE__*/React.createElement(IconChevron, null) : /*#__PURE__*/React.createElement(Fragment, null));
   })));
 };
 
@@ -35180,6 +35199,8 @@ var fallbackValues$v = {
 };
 
 var CollapsibleSection = function CollapsibleSection(_ref) {
+  var _label$replaceAll;
+
   var isOpen = _ref.isOpen,
       toggleSection = _ref.toggleSection,
       themeValues = _ref.themeValues,
@@ -35198,7 +35219,11 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       stackTitle = _ref$stackTitle === void 0 ? false : _ref$stackTitle,
       stackTitleContent = _ref.stackTitleContent,
       _ref$sectionGap = _ref.sectionGap,
-      sectionGap = _ref$sectionGap === void 0 ? "0.5rem" : _ref$sectionGap;
+      sectionGap = _ref$sectionGap === void 0 ? "0.5rem" : _ref$sectionGap,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 1 : _ref$index;
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -35207,6 +35232,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   };
 
   var numChildren = typeof children === "Array" ? children.length : 1;
+  var label = name !== "" ? name : !customTitle ? title : "collapsible section";
+  var id = "".concat(label === null || label === void 0 ? void 0 : (_label$replaceAll = label.replaceAll(" ", "-")) === null || _label$replaceAll === void 0 ? void 0 : _label$replaceAll.toLowerCase(), "-").concat(index);
   var wrapper = {
     open: {
       height: openHeight,
@@ -35242,6 +35269,11 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     positionTransition: true
   }, stackTitle && /*#__PURE__*/React.createElement(Fragment, null, stackTitleContent), /*#__PURE__*/React.createElement(Stack, {
     childGap: isOpen && !isMobile ? sectionGap : "0rem"
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    role: "heading",
+    "aria-label": label,
+    "aria-level": 3
   }, /*#__PURE__*/React.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
@@ -35251,22 +35283,26 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    extraStyles: "z-index: 25;"
+    extraStyles: "z-index: 25;",
+    role: "button",
+    "aria-expanded": isOpen.toString(),
+    "aria-controls": id,
+    id: "".concat(id, "-button")
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center"
   }, customTitle ? /*#__PURE__*/React.createElement(Box, {
     width: "calc(100% - 36px)",
     padding: "0px"
-  }, title) : /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h6",
+  }, title) : /*#__PURE__*/React.createElement(Title$1, {
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.titleColor,
-    as: "h6"
+    as: "h6",
+    variant: "small"
   }, title), /*#__PURE__*/React.createElement(Motion, {
     variants: icon,
     extraStyles: "display: flex; align-items: center;"
-  }, /*#__PURE__*/React.createElement(ChevronIcon$1, null)))), /*#__PURE__*/React.createElement(AnimatePresence, {
+  }, /*#__PURE__*/React.createElement(ChevronIcon$1, null))))), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isOpen && /*#__PURE__*/React.createElement(Motion, {
     padding: "0",
@@ -35276,7 +35312,10 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     initial: initiallyOpen ? "open" : "closed",
     exit: "closed",
     variants: wrapper,
-    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;"
+    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;",
+    id: "".concat(id, "-content"),
+    role: "region",
+    "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
 
@@ -35387,18 +35426,23 @@ var EditableList = function EditableList(_ref) {
       Modal = _ref.modal,
       modalProps = _ref.modalProps,
       autoPayMethods = _ref.autoPayMethods,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "p" : _ref$as,
       qaPrefix = _ref.qaPrefix;
+  var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React.createElement(Box, {
-    padding: "0rem 0rem 1.5rem 0rem"
+    padding: "0rem 0rem 1.5rem 0rem",
+    as: "section",
+    "aria-labelledby": "li"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0rem"
   }, title !== "" && /*#__PURE__*/React.createElement(Box, {
     padding: "0rem 0rem 0.5rem 0rem"
-  }, /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: "pL",
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    as: as,
     weight: titleWeight,
     color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px;"
+    extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;"
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -35443,7 +35487,8 @@ var EditableList = function EditableList(_ref) {
       action: function action() {
         return removeItem(item.id);
       },
-      extraStyles: "min-width: 0;"
+      extraStyles: "min-width: 0;",
+      "aria-label": "Remove ".concat(itemName)
     })), canEdit && /*#__PURE__*/React.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
@@ -35456,14 +35501,16 @@ var EditableList = function EditableList(_ref) {
       action: function action() {
         return editItem(item.id);
       },
-      extraStyles: "min-width: 0;"
+      extraStyles: "min-width: 0;",
+      "aria-label": "Edit ".concat(itemName)
     }))));
   })), canAdd && (!maxItems || items.length < maxItems) && /*#__PURE__*/React.createElement(Box, {
     padding: items.length === 0 ? "0" : "1rem 0 0"
   }, /*#__PURE__*/React.createElement(Placeholder$1, {
-    text: "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName),
+    text: addText,
     action: addItem,
-    dataQa: "Add " + qaPrefix
+    dataQa: "Add " + qaPrefix,
+    "aria-label": addText
   }))));
 };
 
@@ -35730,7 +35777,11 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   var tabs = _ref.tabs,
       highlightIndex = _ref.highlightIndex,
       themeValues = _ref.themeValues,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      _ref$useOrderedList = _ref.useOrderedList,
+      useOrderedList = _ref$useOrderedList === void 0 ? true : _ref$useOrderedList,
+      _ref$useUnorderedList = _ref.useUnorderedList,
+      useUnorderedList = _ref$useUnorderedList === void 0 ? false : _ref$useUnorderedList;
   var itemsAfterIndex = tabs.slice(highlightIndex).length - 1;
   var itemsBeforeIndex = tabs.slice(0, highlightIndex).length;
   var boxesBefore = itemsAfterIndex > itemsBeforeIndex && isMobile ? itemsAfterIndex - itemsBeforeIndex : 0;
@@ -35749,14 +35800,18 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     childGap: "4.5rem",
     childWidth: "11rem",
     justifyContent: "space-evenly",
-    disableScroll: true
+    disableScroll: true,
+    useOrderedList: useOrderedList,
+    useUnorderedList: useUnorderedList
   }, repeat( /*#__PURE__*/React.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
     return /*#__PURE__*/React.createElement(Box, {
       key: t,
       borderSize: "3px",
       borderColor: highlightIndex == i ? themeValues.textColor : "transparent",
       borderWidthOverride: "0 0 3px 0",
-      extraStyles: "text-align: center;"
+      extraStyles: "text-align: center; display: block;",
+      as: "li",
+      "aria-current": highlightIndex == i ? "step" : ""
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       textAlign: "center",
@@ -38909,6 +38964,17 @@ var fallbackValues$x = {
   backgroundColor: backgroundColor$6
 };
 
+/*
+  New (01/22) - updated <Module /> to use <Title /> atom
+  Because <Title /> decouples size from element, also gave <Module />
+  two new props: "as" and "fontSize"
+
+  When present, <Module /> will use those values to dictate element type and font size.
+
+  For backwards compatability, <Module /> still computes a themed font size and element type based on old
+  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
+*/
+
 var Module = function Module(_ref) {
   var heading = _ref.heading,
       _ref$spacing = _ref.spacing,
@@ -38920,13 +38986,20 @@ var Module = function Module(_ref) {
       themeValues = _ref.themeValues,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
+      fontSize = _ref.fontSize,
+      as = _ref.as,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(Fragment, null, heading && /*#__PURE__*/React.createElement(Heading$1, {
-    variant: variant === "small" ? "h6" : variant === "default" ? "h5" : "h2",
+  var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
+  var computedFontSize = fontSize || themedFontSize;
+  var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
+  var computedElemType = as || themedElemType;
+  return /*#__PURE__*/React.createElement(Fragment, null, heading && /*#__PURE__*/React.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
-    textAlign: themeValues.textAlign
+    textAlign: themeValues.textAlign,
+    as: computedElemType,
+    extraStyles: "font-size: ".concat(computedFontSize, ";")
   }, heading), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React.createElement(Box, {
@@ -39798,7 +39871,8 @@ var Collapsible = function Collapsible(_ref2) {
     toggleSection: function toggleSection() {
       return setIsOpen(!isOpen);
     },
-    customTitle: true
+    customTitle: true,
+    name: "Collapsed Payment Details"
   }, /*#__PURE__*/React.createElement(Motion, {
     variants: {
       open: {
@@ -39907,19 +39981,21 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center"
-  }, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h5",
-    weight: "700",
-    as: "h1"
-  }, titleText), /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h5",
-    weight: "700",
-    as: "h1"
-  }, displayCurrency(total)))) : /*#__PURE__*/React.createElement(Heading$1, {
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    weight: FONT_WEIGHT_BOLD,
     as: "h1",
-    variant: "h3",
-    weight: "700",
-    margin: "1rem 0 0 0"
+    extraStyles: "font-size: 1.375rem;",
+    id: "payment-details-title"
+  }, titleText), /*#__PURE__*/React.createElement(Title$1, {
+    weight: FONT_WEIGHT_BOLD,
+    as: "p",
+    extraStyles: "font-size: 1.375rem;"
+  }, displayCurrency(total)))) : /*#__PURE__*/React.createElement(Title$1, {
+    as: "h1",
+    weight: FONT_WEIGHT_BOLD,
+    margin: "1rem 0 0 0",
+    extraStyles: "font-size: 1.75rem;",
+    id: "payment-details-title"
   }, titleText);
   return isCollapsible ? /*#__PURE__*/React.createElement(Collapsible, {
     title: title,