@thecb/components 8.4.10-beta.5 → 8.4.11-beta.1

package/dist/index.cjs.js

@@ -4997,6 +4997,8 @@ var BLACK_SQUEEZE = "#EAF2F7";
 var GREY_CHATEAU = "#959CA8"; // CBS-500
 
 var COOL_GREY_05 = "#fbfcfd"; // CBS-050
+
+var MANATEE_GREY = "#878E9B"; // CB-60 (cool)
 // BLUE
 
 var CLOUDBURST_BLUE = "#26395c";
@@ -5131,6 +5133,7 @@ var colors = /*#__PURE__*/Object.freeze({
   CHARADE_GREY: CHARADE_GREY,
   GRECIAN_GREY: GRECIAN_GREY,
   COOL_GREY_05: COOL_GREY_05,
+  MANATEE_GREY: MANATEE_GREY,
   BLACK_SQUEEZE: BLACK_SQUEEZE,
   GREY_CHATEAU: GREY_CHATEAU,
   CLOUDBURST_BLUE: CLOUDBURST_BLUE,
@@ -23989,7 +23992,10 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-labelledby": ariaLabelledby,
     "aria-describedby": ariaDescribedby,
     "aria-expanded": isOpen,
-    autocomplete: autocompleteValue,
+    "aria-live": "assertive",
+    role: "combobox",
+    disabled: disabled,
+    autoComplete: autocompleteValue,
     background: isOpen ? themeValues.hoverColor : WHITE,
     borderRadius: "2px",
     borderSize: "1px",
@@ -24009,7 +24015,6 @@ var Dropdown = function Dropdown(_ref8) {
     },
     padding: "12px",
     placeholder: getSelection(),
-    role: "combobox",
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
     type: "text",
@@ -24040,7 +24045,7 @@ var Dropdown = function Dropdown(_ref8) {
       id: focusedRef === optionRefs.current[i] ? "focused_option" : choice.value,
       key: choice.value,
       ref: optionRefs.current[i],
-      tabIndex: -1,
+      tabIndex: 0,
       onClick: function onClick(e) {
         return handleItemSelection(e, choice, i);
       },
@@ -24152,6 +24157,8 @@ var fallbackValues$g = {
   hoverFocusStyles: hoverFocusStyles
 };
 
+var _excluded$o = ["fieldActions", "labelTextWhenNoError", "errorMessages", "options", "field", "showErrors", "onChange", "dropdownMaxHeight", "disabledValues", "disabled", "themeValues", "hasTitles", "autocompleteValue", "smoothScroll"];
+
 var FormSelect = function FormSelect(_ref) {
   var fieldActions = _ref.fieldActions,
       labelTextWhenNoError = _ref.labelTextWhenNoError,
@@ -24168,7 +24175,8 @@ var FormSelect = function FormSelect(_ref) {
       hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
       autocompleteValue = _ref.autocompleteValue,
       _ref$smoothScroll = _ref.smoothScroll,
-      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll;
+      smoothScroll = _ref$smoothScroll === void 0 ? true : _ref$smoothScroll,
+      rest = _objectWithoutProperties(_ref, _excluded$o);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24189,10 +24197,10 @@ var FormSelect = function FormSelect(_ref) {
       document.removeEventListener("mousedown", handleClickAway);
     };
   });
-  return /*#__PURE__*/React__default.createElement(SelectContainer, {
+  return /*#__PURE__*/React__default.createElement(SelectContainer, _extends({
     ref: dropdownRef,
     disabled: disabled
-  }, /*#__PURE__*/React__default.createElement(Box, {
+  }, rest), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
@@ -24206,8 +24214,8 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: createIdFromString(labelTextWhenNoError)
   }, labelTextWhenNoError))), /*#__PURE__*/React__default.createElement(Dropdown$1, {
-    ariaLabelledby: createIdFromString(labelTextWhenNoError),
-    ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-labelledBy": createIdFromString(labelTextWhenNoError),
+    "aria-describedBy": createIdFromString(labelTextWhenNoError, "error message"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -24224,22 +24232,22 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
-    disabled: disabled,
+    "aria-disabled": disabled,
     autocompleteValue: autocompleteValue,
-    smoothScroll: smoothScroll
+    smoothScroll: smoothScroll,
+    required: options.required
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    "aria-live": "polite"
-  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
+    "aria-live": "assertive"
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
     weight: themeValues.fontWeight,
-    extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }",
-    id: createIdFromString(labelTextWhenNoError, "error message")
-  }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: "height: ".concat(themeValues.lineHeight, ";")
-  })));
+    extraStyles: "word-break: break-word;\n            font-family: Public Sans;\n            &::first-letter {\n              text-transform: uppercase;\n            }",
+    id: createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-live": "assertive"
+  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? errorMessages[field.errors[0]] : "")));
 };
 
 var FormSelect$1 = themeComponent(FormSelect, "FormSelect", fallbackValues$g, "default");
@@ -24987,14 +24995,18 @@ var options = [{
   value: "ZW"
 }];
 
+var _excluded$p = ["labelTextWhenNoError", "errorMessages", "field", "fieldActions", "showErrors", "onChange"];
+
 var CountryDropdown = function CountryDropdown(_ref) {
   var labelTextWhenNoError = _ref.labelTextWhenNoError,
       errorMessages = _ref.errorMessages,
       field = _ref.field,
       fieldActions = _ref.fieldActions,
       showErrors = _ref.showErrors,
-      onChange = _ref.onChange;
-  return /*#__PURE__*/React__default.createElement(FormSelect$1, {
+      onChange = _ref.onChange,
+      rest = _objectWithoutProperties(_ref, _excluded$p);
+
+  return /*#__PURE__*/React__default.createElement(FormSelect$1, _extends({
     options: options,
     field: field,
     fieldActions: fieldActions,
@@ -25002,8 +25014,9 @@ var CountryDropdown = function CountryDropdown(_ref) {
     errorMessages: errorMessages,
     showErrors: showErrors,
     onChange: onChange,
-    autocompleteValue: "country-name"
-  });
+    autocompleteValue: "country-name",
+    autoComplete: "country-name"
+  }, rest));
 };
 
 var DetailText = styled__default.p.withConfig({
@@ -25069,7 +25082,7 @@ var mobileFallbackValues$1 = {
 };
 var MOBILE_BREAKPOINT$1 = 768;
 
-var _excluded$o = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$q = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 /*
   New responsive text component for Detail elements
   (Block level text elements which are smaller than "Title" elements)
@@ -25119,7 +25132,7 @@ var Detail = function Detail(_ref) {
       as = _ref$as === void 0 ? "p" : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$o);
+      rest = _objectWithoutProperties(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default.createElement(DetailText, _extends({
     variant: variant,
@@ -25843,7 +25856,7 @@ var fallbackValues$k = {
   formFooterPanel: formFooterPanel
 };
 
-var _excluded$p = ["showErrors", "themeValues"],
+var _excluded$r = ["showErrors", "themeValues"],
     _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
 var InputField = styled__default.input.withConfig({
   displayName: "FormInput__InputField",
@@ -25877,7 +25890,7 @@ var InputField = styled__default.input.withConfig({
 var FormattedInputField = styled__default(function (_ref8) {
   var showErrors = _ref8.showErrors,
       themeValues = _ref8.themeValues,
-      props = _objectWithoutProperties(_ref8, _excluded$p);
+      props = _objectWithoutProperties(_ref8, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(FormattedInput, props);
 }).withConfig({
@@ -26037,7 +26050,7 @@ var FormInput = function FormInput(_ref15) {
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between",
-    "aria-live": "polite"
+    role: "alert"
   }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
     color: ERROR_COLOR,
     variant: "pXS",
@@ -26053,7 +26066,7 @@ var FormInput = function FormInput(_ref15) {
 
 var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$k, "default");
 
-var _excluded$q = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
+var _excluded$s = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -26063,7 +26076,7 @@ var FormInputRow = function FormInputRow(_ref) {
       largeChild = _ref.largeChild,
       largeChildSize = _ref.largeChildSize,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$q);
+      rest = _objectWithoutProperties(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0"
@@ -26075,14 +26088,14 @@ var FormInputRow = function FormInputRow(_ref) {
   }, children));
 };
 
-var _excluded$r = ["childGap", "bottomItem", "children"];
+var _excluded$t = ["childGap", "bottomItem", "children"];
 
 var FormInputColumn = function FormInputColumn(_ref) {
   var _ref$childGap = _ref.childGap,
       childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
       bottomItem = _ref.bottomItem,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$r);
+      rest = _objectWithoutProperties(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(Stack, _extends({
     childGap: childGap,
@@ -26090,12 +26103,12 @@ var FormInputColumn = function FormInputColumn(_ref) {
   }, rest), children);
 };
 
-var _excluded$s = ["themeValues", "children"];
+var _excluded$u = ["themeValues", "children"];
 
 var FormContainer = function FormContainer(_ref) {
   var themeValues = _ref.themeValues,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$s);
+      rest = _objectWithoutProperties(_ref, _excluded$u);
 
   var _useContext = React.useContext(styled.ThemeContext),
       isMobile = _useContext.isMobile;
@@ -26360,7 +26373,7 @@ var fallbackValues$o = {
   fontSize: fontSize$8
 };
 
-var _excluded$t = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$v = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
@@ -26380,7 +26393,7 @@ var Heading = function Heading(_ref) {
       as = _ref$as === void 0 ? variant : _ref$as,
       dataQa = _ref.dataQa,
       children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded$t);
+      rest = _objectWithoutProperties(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
@@ -26671,7 +26684,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$u = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$w = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
@@ -26687,7 +26700,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$w);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
@@ -26719,7 +26732,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$v = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$x = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
@@ -26729,7 +26742,7 @@ var NavHeader = function NavHeader(_ref) {
       isMobile = _ref.isMobile,
       backgroundColor = _ref.backgroundColor,
       headerWidth = _ref.headerWidth,
-      rest = _objectWithoutProperties(_ref, _excluded$v);
+      rest = _objectWithoutProperties(_ref, _excluded$x);
 
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
@@ -27110,7 +27123,24 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       themeValues = _ref5.themeValues,
       index = _ref5.index,
       _ref5$handleChange = _ref5.handleChange,
-      handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange;
+      handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
+      field = _ref5.field,
+      config = _ref5.config;
+
+  var getDefaultChecked = function getDefaultChecked(value, idx) {
+    var selectionExistsInConfig = config.map(function (c) {
+      return c.value;
+    }).includes(field.rawValue);
+
+    if (selectionExistsInConfig) {
+      // if exists, selection comes from the redux-freeform state
+      return field.rawValue === value;
+    } // fallback to first option as default selection
+
+
+    return idx === 0;
+  };
+
   return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem",
@@ -27128,7 +27158,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       setValue(e.target.value);
       handleChange(e);
     },
-    defaultChecked: index === 0
+    defaultChecked: getDefaultChecked(value, index)
   }), /*#__PURE__*/React__default.createElement(Text$1, {
     as: "label",
     htmlFor: id,
@@ -27332,14 +27362,16 @@ var fallbackValues$x = {
 };
 
 var SolidDivider = function SolidDivider(_ref) {
-  var themeValues = _ref.themeValues;
+  var borderColor = _ref.borderColor,
+      borderSize = _ref.borderSize,
+      themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minWidth: "100%",
     minHeight: "1px",
-    borderColor: themeValues.borderColor,
-    borderSize: themeValues.borderSize,
-    borderWidthOverride: "0px 0px ".concat(themeValues.borderSize, " 0px")
+    borderColor: borderColor || themeValues.borderColor,
+    borderSize: borderSize || themeValues.borderSize,
+    borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
 
@@ -38485,7 +38517,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
   return extraStyles;
 });
 
-var _excluded$w = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
+var _excluded$y = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
 
 var TableRow = function TableRow(_ref) {
   var children = _ref.children,
@@ -38495,7 +38527,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$y);
 
   return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
     onClick: onClick,
@@ -40336,6 +40368,7 @@ var AddressForm = function AddressForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(FormInputColumn, null, /*#__PURE__*/React__default.createElement(CountryDropdown, {
     labelTextWhenNoError: "Country",
     errorMessages: countryErrorMessages,
+    "aria-label": "country",
     field: fields.country,
     onChange: function onChange(value) {
       actions.fields.country.set(value); // temporary measure to not dirty fields until
@@ -40353,13 +40386,15 @@ var AddressForm = function AddressForm(_ref) {
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Address",
     errorMessages: street1ErrorMessages,
+    required: true,
+    "aria-label": "address line 1",
     field: fields.street1,
     fieldActions: actions.fields.street1,
     showErrors: showErrors,
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "address-line1"
+    autoComplete: "address-line1"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
     field: fields.street2,
@@ -40368,9 +40403,11 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "address-line2"
+    autoComplete: "address-line2"
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "City",
+    "aria-label": "city",
+    required: true,
     errorMessages: cityErrorMessages,
     field: fields.city,
     fieldActions: actions.fields.city,
@@ -40378,7 +40415,7 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "address-level2"
+    autoComplete: "address-level2"
   }), /*#__PURE__*/React__default.createElement(FormStateDropdown, {
     labelTextWhenNoError: isUS ? "State" : "State or Province",
     errorMessages: stateProvinceErrorMessages,
@@ -40389,7 +40426,9 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "address-level1"
+    autoComplete: "address-level1",
+    "aria-label": isUS ? "State" : "State or Province",
+    required: true
   }), /*#__PURE__*/React__default.createElement(FormInput$1, {
     isNum: isUS,
     formatter: isUS ? zipFormat : null,
@@ -40401,7 +40440,7 @@ var AddressForm = function AddressForm(_ref) {
     onKeyDown: function onKeyDown(e) {
       return e.key === "Enter" && handleSubmit(e);
     },
-    autocomplete: "postal-code"
+    autoComplete: "postal-code"
   }), showWalletCheckbox && /*#__PURE__*/React__default.createElement(Checkbox$1, {
     name: "address checkbox",
     title: "Save address to wallet",
@@ -46793,26 +46832,30 @@ var fallbackValues$J = {
 */
 
 var Module = function Module(_ref) {
-  var heading = _ref.heading,
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "default" : _ref$variant,
+      as = _ref.as,
+      disabled = _ref.disabled,
+      heading = _ref.heading,
+      rightTitleContent = _ref.rightTitleContent,
+      _ref$titleID = _ref.titleID,
+      titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
       _ref$spacing = _ref.spacing,
       spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
       _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? "0" : _ref$padding,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? "0" : _ref$margin,
       _ref$spacingBottom = _ref.spacingBottom,
       spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
-      themeValues = _ref.themeValues,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "default" : _ref$variant,
       fontSize = _ref.fontSize,
-      as = _ref.as,
-      _ref$titleID = _ref.titleID,
-      titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
-      rightTitleContent = _ref.rightTitleContent,
+      themeValues = _ref.themeValues,
       children = _ref.children;
   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;
+  var disabledStyles = "opacity: 0.40;";
   var headingText = /*#__PURE__*/React__default.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
@@ -46822,12 +46865,18 @@ var Module = function Module(_ref) {
     extraStyles: "font-size: ".concat(computedFontSize, ";"),
     id: titleID
   }, heading);
-  return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    "aria-disabled": disabled,
+    extraStyles: disabled && disabledStyles,
+    padding: "0",
+    role: "group"
+  }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center",
     nowrap: true
   }, headingText, rightTitleContent), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0 0 ".concat(spacingBottom)
+    padding: "0 0 ".concat(spacingBottom),
+    extraStyles: "margin: ".concat(margin)
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: padding,
     background: themeValues.backgroundColor,
@@ -48110,7 +48159,7 @@ var fallbackValues$N = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$x = ["amount"],
+var _excluded$z = ["amount"],
     _excluded2$1 = ["amount"];
 
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
@@ -48320,7 +48369,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$z);
 
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
@@ -48754,12 +48803,12 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage)))));
 };
 
-var _excluded$y = ["version"];
+var _excluded$A = ["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$A);
 
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
@@ -49384,6 +49433,8 @@ var RadioGroup = function RadioGroup(_ref) {
       groupName: groupName,
       setValue: setValue,
       handleChange: handleChange,
+      field: field,
+      config: config,
       "aria-invalid": field.dirty && field.hasErrors
     }));
   })));
@@ -49440,6 +49491,8 @@ var RadioSection = function RadioSection(_ref) {
       initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
       _ref$openHeight = _ref.openHeight,
       openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
+      _ref$containerStyles = _ref.containerStyles,
+      containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
       ariaDescribedBy = _ref.ariaDescribedBy;
 
   var handleKeyDown = function handleKeyDown(id, e) {
@@ -49492,7 +49545,8 @@ var RadioSection = function RadioSection(_ref) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
-    borderRadius: "4px"
+    borderRadius: "4px",
+    extraStyles: containerStyles
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, sections.filter(function (section) {