@thecb/components 9.2.12-beta.0 → 9.2.13-beta.1

package/dist/index.cjs.js

@@ -6371,6 +6371,15 @@ var titleCaseString = function titleCaseString(string) {
 var kebabCaseString = function kebabCaseString(string) {
   return string === null || string === void 0 ? void 0 : string.replaceAll(" ", "-").toLowerCase();
 };
+var wrapIndex$1 = function wrapIndex(index, length) {
+  if (index == -1) {
+    return length - 1;
+  } else if (index == length) {
+    return 0;
+  } else {
+    return index;
+  }
+};
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6391,7 +6400,8 @@ var general = /*#__PURE__*/Object.freeze({
   throttle: throttle,
   titleCaseWord: titleCaseWord,
   titleCaseString: titleCaseString,
-  kebabCaseString: kebabCaseString
+  kebabCaseString: kebabCaseString,
+  wrapIndex: wrapIndex$1
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "textWrap", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children", "variant"];
@@ -12511,7 +12521,7 @@ var _excluded$f = ["position", "padding", "children"];
   This should be sufficient for most scenarios, but if you need to, you have the ability to make Motion act like all of the other primitives using the props provided.
 */
 
-var Motion = function Motion(_ref) {
+var Motion = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$position = _ref.position,
       position = _ref$position === void 0 ? "relative" : _ref$position,
       _ref$padding = _ref.padding,
@@ -12521,9 +12531,10 @@ var Motion = function Motion(_ref) {
 
   return /*#__PURE__*/React__default.createElement(MotionWrapper, _extends({
     position: position,
-    padding: padding
+    padding: padding,
+    ref: ref
   }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement(React.Fragment, null)));
-};
+});
 
 var ReelStyled = styled__default.div.withConfig({
   displayName: "Reelstyled__ReelStyled",
@@ -12926,7 +12937,7 @@ var Spinner = function Spinner(_ref) {
 */
 
 
-var ButtonWithAction = function ButtonWithAction(_ref2) {
+var ButtonWithAction = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$action = _ref2.action,
       action = _ref2$action === void 0 ? noop : _ref2$action,
       _ref2$variant = _ref2.variant,
@@ -12957,6 +12968,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-color: #6D717E;\n    border-color: #6D717E;\n    color: #FFFFFF;\n    cursor: default;\n    &:focus {\n      box-shadow: 0 0 10px #6D717E;\n      outline: none;\n    }\n    ".concat(extraDisabledStyles, "\n  ");
   return /*#__PURE__*/React__default.createElement(Box, _extends({
+    ref: ref,
     variant: variant,
     padding: themeValues.padding,
     minHeight: themeValues.height,
@@ -12985,7 +12997,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
     textWrap: textWrap,
     extraStyles: textExtraStyles
   }, text)));
-};
+});
 
 var primaryColor = {
   info: "".concat(WHITE),
@@ -15299,7 +15311,8 @@ var ShoppingCartIcon = function ShoppingCartIcon() {
 };
 
 var TrashIcon = function TrashIcon(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+      iconFill = _ref.iconFill;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "20px",
     height: "20px",
@@ -15323,12 +15336,12 @@ var TrashIcon = function TrashIcon(_ref) {
     xlinkHref: "#trash-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "trash-Mask",
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     fillRule: "nonzero",
     xlinkHref: "#trash-path-1"
   }), /*#__PURE__*/React__default.createElement("polygon", {
     id: "trash-Path",
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     fillRule: "nonzero",
     mask: "url(#trash-mask-2)",
     points: "0 0 20 0 20 20 0 20"
@@ -18259,6 +18272,34 @@ var PlusCircleIcon = function PlusCircleIcon(_ref) {
   }));
 };
 
+var KebabMenuIcon = function KebabMenuIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "21",
+    height: "32",
+    viewBox: "0 0 21 32",
+    fill: "none"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 4C0 1.79086 1.79086 0 4 0L17 0C19.2091 0 21 1.79086 21 4V28C21 30.2091 19.2091 32 17 32H4C1.79086 32 0 30.2091 0 28L0 4Z",
+    fill: "none"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 6C9.39333 6 8.5 6.89333 8.5 8C8.5 9.10667 9.39333 10 10.5 10C11.6067 10 12.5 9.10667 12.5 8C12.5 6.89333 11.6067 6 10.5 6Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 14C9.39333 14 8.5 14.8933 8.5 16C8.5 17.1067 9.39333 18 10.5 18C11.6067 18 12.5 17.1067 12.5 16C12.5 14.8933 11.6067 14 10.5 14Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.5 22C9.39333 22 8.5 22.9067 8.5 24C8.5 25.0933 9.40667 26 10.5 26C11.5933 26 12.5 25.0933 12.5 24C12.5 22.9067 11.6067 22 10.5 22Z",
+    fill: "#3B5BDB"
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -22085,6 +22126,13 @@ var fallbackValues$d = {
   disabledCheckedStyles: disabledCheckedStyles
 };
 
+var ARROW_UP = 38;
+var ARROW_RIGHT = 39;
+var ARROW_DOWN = 40;
+var ENTER = 13;
+var ESCAPE = 27;
+var SPACEBAR = 32;
+
 var CheckboxContainer = styled__default.div.withConfig({
   displayName: "Checkbox__CheckboxContainer",
   componentId: "sc-36kqbv-0"
@@ -22155,7 +22203,7 @@ var Checkbox = function Checkbox(_ref4) {
       setFocused = _useState2[1];
 
   var handleClick = function handleClick(e, func) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
+    if (e.keyCode === ENTER) {
       func();
     }
   };
@@ -24061,10 +24109,9 @@ var Dropdown = function Dropdown(_ref13) {
     dataQa: "".concat(ariaLabelledby, "-dropdown")
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
-    "aria-multiline": "false",
     autoComplete: autocompleteValue,
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
-    "aria-activedescendant": "focused_option",
+    "aria-activedescendant": isOpen ? "focused_option" : undefined,
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
@@ -24128,7 +24175,7 @@ var Dropdown = function Dropdown(_ref13) {
         return handleItemSelection(e, choice, i);
       },
       onKeyDown: function onKeyDown(e) {
-        if (e.keyCode === 13) {
+        if (e.keyCode === ENTER) {
           handleItemSelection(e, choice, i);
         }
       },
@@ -25494,7 +25541,7 @@ var Popover = function Popover(_ref) {
       handleTogglePopover(false);
     },
     onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === 27) {
+      if (e.keyCode === ESCAPE) {
         handleTogglePopover(false);
       }
     },
@@ -27389,8 +27436,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
       name = _ref2.name,
       _ref2$disabled = _ref2.disabled,
       disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      _ref2$ariaDescribedBy = _ref2.ariaDescribedBy,
-      ariaDescribedBy = _ref2$ariaDescribedBy === void 0 ? "" : _ref2$ariaDescribedBy,
+      ariaDescribedBy = _ref2.ariaDescribedBy,
       themeValues = _ref2.themeValues,
       _ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
       ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
@@ -38306,7 +38352,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   });
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       onToggle();
     }
   };
@@ -39835,7 +39881,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles;
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === 13) {
+    if (e.keyCode === ENTER) {
       toggleSection();
     }
   };
@@ -45771,9 +45817,7 @@ var Modal$1 = function Modal(_ref) {
       buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children,
       _ref$dataQa = _ref.dataQa,
-      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -45800,11 +45844,7 @@ var Modal$1 = function Modal(_ref) {
       width: customWidth || "615px",
       overflow: "auto"
     },
-    underlayClickExits: underlayClickExits,
-    "aria-modal": true,
-    initialFocus: initialFocusSelector,
-    focusDialog: !initialFocusSelector // Focus the dialogue box itself if no selector for initial focus was provided
-
+    underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "2px",
@@ -45851,9 +45891,7 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button",
-    role: "button",
-    name: cancelButtonText
+    className: "modal-cancel-button"
   })), /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",
     padding: "0"
@@ -45865,9 +45903,7 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button",
-    role: "button",
-    name: continueButtonText
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1rem",
     direction: "row",
@@ -45878,9 +45914,7 @@ var Modal$1 = function Modal(_ref) {
     text: cancelButtonText,
     dataQa: cancelButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-cancel-button",
-    role: "button",
-    name: cancelButtonText
+    className: "modal-cancel-button"
   }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
@@ -45889,9 +45923,7 @@ var Modal$1 = function Modal(_ref) {
     isLoading: isLoading,
     disabled: isContinueActionDisabled,
     extraStyles: buttonExtraStyles,
-    className: "modal-continue-button",
-    role: "button",
-    name: continueButtonText
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -45900,9 +45932,7 @@ var Modal$1 = function Modal(_ref) {
     text: closeButtonText,
     dataQa: closeButtonText,
     extraStyles: buttonExtraStyles,
-    className: "modal-close-button",
-    role: "button",
-    name: closeButtonText
+    className: "modal-close-button"
   }))))))))), children);
 };
 
@@ -47734,8 +47764,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    },
-    initialFocusSelector: "[name='Close']"
+    }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
     onClick: function onClick() {
@@ -47748,9 +47777,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "cursor: pointer;",
-    role: "button",
-    className: "modal-trigger"
+    extraStyles: "cursor: pointer;"
   }, link));
 };
 
@@ -47807,9 +47834,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       variant = _ref.variant,
       _ref$linkVariant = _ref.linkVariant,
       linkVariant = _ref$linkVariant === void 0 ? "p" : _ref$linkVariant,
-      themeValues = _ref.themeValues,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     modalOpen: isOpen,
     hideModal: function hideModal() {
@@ -47835,8 +47860,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     continueAction: function continueAction() {
       toggleAccepted(true);
       toggleOpen(false);
-    },
-    initialFocusSelector: initialFocusSelector
+    }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: linkVariant,
     onClick: function onClick() {
@@ -47849,10 +47873,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.modalLinkHoverFocus,
-    extraStyles: "display: inline-block; width: fit-content; cursor: pointer",
-    role: "button" // This should always be a "button" since it opens a modal
-    ,
-    className: "modal-trigger"
+    extraStyles: "display: inline-block; width: fit-content; cursor: pointer"
   }, link));
 };
 
@@ -47865,9 +47886,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
       terms = _ref.terms,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      linkVariant = _ref.linkVariant,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      linkVariant = _ref.linkVariant;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47889,8 +47908,7 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
     terms: terms,
     isOpen: showTerms,
     toggleOpen: toggleShowTerms,
-    linkVariant: linkVariant,
-    initialFocusSelector: initialFocusSelector
+    linkVariant: linkVariant
   })))));
 };
 
@@ -47921,9 +47939,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       _ref$checkboxMargin = _ref.checkboxMargin,
       checkboxMargin = _ref$checkboxMargin === void 0 ? "4px 8px 4px 4px" : _ref$checkboxMargin,
       _ref$modalTitle = _ref.modalTitle,
-      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
-      _ref$initialFocusSele = _ref.initialFocusSelector,
-      initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
+      modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47979,8 +47995,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     isOpen: showTerms,
     toggleOpen: toggleTerms,
     linkVariant: modalVariant,
-    title: modalTitle,
-    initialFocusSelector: initialFocusSelector
+    title: modalTitle
   })), /*#__PURE__*/React__default.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": true
@@ -48181,8 +48196,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };
 
@@ -48378,8 +48392,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     version: "v2",
     showCheckbox: false,
     description: "View",
-    terms: termsContent,
-    initialFocusSelector: ".modal-close-button"
+    terms: termsContent
   })))));
 };
 
@@ -48675,6 +48688,7 @@ var fallbackValues$Q = {
   focusStyles: focusStyles
 };
 
+var _excluded$z = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired"];
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -48721,11 +48735,39 @@ var RadioSection = function RadioSection(_ref) {
       containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
       ariaDescribedBy = _ref.ariaDescribedBy,
       _ref$isSectionRequire = _ref.isSectionRequired,
-      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire;
+      isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire,
+      rest = _objectWithoutProperties(_ref, _excluded$z);
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var sectionRefs = React.useRef(_toConsumableArray(Array(sections.length)).map(function () {
+    return /*#__PURE__*/React.createRef();
+  }));
 
-  var handleKeyDown = function handleKeyDown(id, e) {
-    if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
+  var handleKeyDown = function handleKeyDown(id, e, i) {
+    if (e.currentTarget !== e.target) {
+      return;
+    } // Allow Enter and Space to select a section
+
+
+    if (e.keyCode === ENTER || e.keyCode === SPACEBAR) {
+      e.preventDefault();
       toggleOpenSection(id);
+    } // Allow Up and Down arrow navigation between sections
+
+
+    if (e.keyCode == ARROW_UP || e.keyCode == ARROW_DOWN || e.keyCode == ARROW_LEFT || e.keyCode == ARROW_RIGHT) {
+      var _sectionRefs$current$, _sectionRefs$current$2, _sections$nextIndex, _sections$nextIndex2;
+
+      e.preventDefault();
+      var indexIncrement = e.keyCode == ARROW_RIGHT || e.keyCode == ARROW_DOWN ? 1 : -1;
+      var nextIndex = wrapIndex(i + indexIncrement);
+      sectionRefs === null || sectionRefs === void 0 ? void 0 : (_sectionRefs$current$ = sectionRefs.current[nextIndex]) === null || _sectionRefs$current$ === void 0 ? void 0 : (_sectionRefs$current$2 = _sectionRefs$current$.current) === null || _sectionRefs$current$2 === void 0 ? void 0 : _sectionRefs$current$2.focus();
+      setFocused((_sections$nextIndex = sections[nextIndex]) === null || _sections$nextIndex === void 0 ? void 0 : _sections$nextIndex.id);
+      toggleOpenSection((_sections$nextIndex2 = sections[nextIndex]) === null || _sections$nextIndex2 === void 0 ? void 0 : _sections$nextIndex2.id);
     }
   };
 
@@ -48764,34 +48806,29 @@ var RadioSection = function RadioSection(_ref) {
     var fade = _ref4.fade;
     return fade && "opacity: 0.4;";
   });
-
-  var _useState = React.useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      focused = _useState2[0],
-      setFocused = _useState2[1];
-
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
     borderRadius: "4px",
     extraStyles: containerStyles
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: "0",
-    "aria-role": "radiogroup",
+    role: "radiogroup",
     "aria-required": isSectionRequired
-  }, sections.filter(function (section) {
+  }, rest), sections.filter(function (section) {
     return !section.hidden;
-  }).map(function (section) {
+  }).map(function (section, i) {
     return /*#__PURE__*/React__default.createElement(Motion, {
       tabIndex: section.hideRadioButton || section.disabled ? "-1" : "0",
-      onKeyDown: function onKeyDown(e) {
-        return !section.disabled && handleKeyDown(section.id, e);
+      ref: sectionRefs.current[i],
+      onBlur: function onBlur() {
+        return !section.disabled && setFocused(null);
       },
       onFocus: function onFocus() {
         return !section.disabled && setFocused(section.id);
       },
-      onBlur: function onBlur() {
-        return !section.disabled && setFocused(null);
+      onKeyDown: function onKeyDown(e) {
+        return !section.disabled && handleKeyDown(section.id, e, i);
       },
       hoverStyles: themeValues.focusStyles,
       animate: openSection === section.id ? "open" : "closed",
@@ -48801,7 +48838,9 @@ var RadioSection = function RadioSection(_ref) {
       role: "radio",
       "aria-checked": openSection === section.id,
       "aria-disabled": section.disabled,
-      "aria-required": section === null || section === void 0 ? void 0 : section.required
+      "aria-required": section.required,
+      "aria-labelledby": section.id,
+      "aria-describedby": "right-icons-".concat(idString(section))
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -48840,7 +48879,7 @@ var RadioSection = function RadioSection(_ref) {
         return toggleOpenSection(section.id);
       },
       tabIndex: "-1",
-      isRequired: section === null || section === void 0 ? void 0 : section.required
+      isRequired: section.required
     })), section.titleIcon && /*#__PURE__*/React__default.createElement(Cluster, {
       align: "center"
     }, section.titleIcon), /*#__PURE__*/React__default.createElement(Box, {
@@ -48850,9 +48889,10 @@ var RadioSection = function RadioSection(_ref) {
       htmlFor: "radio-input-".concat(idString(section)),
       color: CHARADE_GREY
     }, section.title))), section.rightIcons && /*#__PURE__*/React__default.createElement(Cluster, {
+      id: "right-icons-".concat(idString(section)),
       childGap: "0.5rem",
-      "aria-label": (section === null || section === void 0 ? void 0 : section.rightIconsLabel) || null,
-      role: (section === null || section === void 0 ? void 0 : section.rightIconsRole) || null
+      "aria-label": section.rightIconsLabel || null,
+      role: section.rightIconsRole || null
     }, section.rightIcons.map(function (icon) {
       return /*#__PURE__*/React__default.createElement(RightIcon, {
         src: icon.img,
@@ -49905,6 +49945,7 @@ exports.ImageBox = ImageBox;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
 exports.Jumbo = Jumbo$1;
+exports.KebabMenuIcon = KebabMenuIcon;
 exports.KioskImage = KioskImage;
 exports.LabeledAmount = LabeledAmount$1;
 exports.LineItem = LineItem$1;