@thecb/components 7.10.1-beta.1 → 7.10.1-beta.10

package/dist/index.cjs.js

@@ -26061,6 +26061,8 @@ 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,
       themeValues = _ref2.themeValues;
   var buttonBorder = {
     onFocused: {
@@ -26112,6 +26114,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
     "aria-label": name,
     disabled: disabled,
     onClick: toggleRadio,
+    "aria-describedby": ariaDescribedBy,
     tabIndex: "-1"
   }), /*#__PURE__*/React__default.createElement(Motion, {
     borderWidth: "1px",
@@ -47230,9 +47233,9 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
       background: themeValues.backgroundColor,
       border: "1px solid ".concat(themeValues.border),
       borderRadius: "3px",
-      extraStyles: "overflow: scroll; max-height: 20rem;"
+      extraStyles: "overflow: scroll; max-height: 20rem;",
+      id: "terms-body-text"
     }, /*#__PURE__*/React__default.createElement(Text$1, {
-      id: "terms-body-text",
       variant: "p",
       extraStyles: "& a { text-decoration: underline; }"
     }, terms)),
@@ -47961,7 +47964,8 @@ var RadioSection = function RadioSection(_ref) {
       _ref$initiallyOpen = _ref.initiallyOpen,
       initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
       _ref$openHeight = _ref.openHeight,
-      openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight;
+      openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
+      ariaDescribedBy = _ref.ariaDescribedBy;
 
   var handleKeyDown = function handleKeyDown(id, e) {
     if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13) {
@@ -48038,7 +48042,7 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React__default.createElement(Stack, {
       childGap: "0"
     }, /*#__PURE__*/React__default.createElement(Box, {
-      padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem 1.25rem 1.25rem",
+      padding: section.hideRadioButton ? "1.5rem" : "1.25rem 1.5rem",
       background: section.disabled ? themeValues.headingDisabledColor : themeValues.headingBackgroundColor,
       onClick: isMobile && supportsTouch || section.disabled ? noop : function () {
         return toggleOpenSection(section.id);
@@ -48055,7 +48059,7 @@ var RadioSection = function RadioSection(_ref) {
     }, /*#__PURE__*/React__default.createElement(Cluster, {
       justify: "space-between",
       align: "center",
-      childGap: "0.5rem",
+      childGap: "0",
       nowrap: true
     }, /*#__PURE__*/React__default.createElement(Cluster, {
       justify: "flex-start",
@@ -48064,7 +48068,8 @@ var RadioSection = function RadioSection(_ref) {
     }, !section.hideRadioButton && /*#__PURE__*/React__default.createElement(Box, {
       padding: "0"
     }, /*#__PURE__*/React__default.createElement(RadioButton$2, {
-      name: section.id,
+      name: typeof section.title === "string" ? createIdFromString(section.title) : section.id,
+      ariaDescribedBy: ariaDescribedBy,
       radioOn: openSection === section.id,
       radioFocused: focused === section.id,
       toggleRadio: section.disabled ? noop : function () {
@@ -48629,6 +48634,43 @@ var generateShadows = function generateShadows(baseColorRGB) {
   };
 };
 
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+var useScrollTo = function useScrollTo(id) {
+  var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var left = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var behavior = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "auto";
+  var delay = arguments.length > 4 ? arguments[4] : undefined;
+  var scrollItem;
+
+  if (delay) {
+    setTimeout(function () {
+      var _scrollItem;
+
+      scrollItem = document.getElementById(id);
+      (_scrollItem = scrollItem) === null || _scrollItem === void 0 ? void 0 : _scrollItem.scrollTo({
+        top: top,
+        left: left,
+        behavior: behavior
+      });
+    }, delay);
+  } else {
+    var _scrollItem2;
+
+    scrollItem = document.getElementById(id);
+    (_scrollItem2 = scrollItem) === null || _scrollItem2 === void 0 ? void 0 : _scrollItem2.scrollTo({
+      top: top,
+      left: left,
+      behavior: behavior
+    });
+  }
+};
+
 var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   var _ref$showCheckbox = _ref.showCheckbox,
       showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
@@ -48662,6 +48704,15 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
       toggleShowTerms = _useState2[1];
 
   var standardBoxShadow = generateShadows().standard.base;
+
+  var toggleTerms = function toggleTerms(termsOpen) {
+    toggleShowTerms(termsOpen);
+
+    if (termsOpen) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: displayInline ? "0" : "1.5rem",
     minWidth: displayInline ? "0" : "100%",
@@ -48697,7 +48748,7 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
     link: linkText,
     terms: terms,
     isOpen: showTerms,
-    toggleOpen: toggleShowTerms,
+    toggleOpen: toggleTerms,
     linkVariant: modalVariant,
     title: modalTitle
   })), showCheckbox && hasError && /*#__PURE__*/React__default.createElement(Text$1, {