@thecb/components 12.0.0-beta.1 → 12.0.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -15099,7 +15099,8 @@ var AutopayOnIcon = function AutopayOnIcon(_ref) {
15099
15099
  xmlns: "http://www.w3.org/2000/svg",
15100
15100
  width: "12",
15101
15101
  height: "13",
15102
- viewBox: "0 0 12 13"
15102
+ viewBox: "0 0 12 13",
15103
+ "aria-hidden": "true"
15103
15104
  }, /*#__PURE__*/React__default.createElement("g", {
15104
15105
  fill: "none",
15105
15106
  fillRule: "evenodd",
@@ -21673,6 +21674,7 @@ var StyledInternalLink = styled__default( /*#__PURE__*/React.forwardRef(function
21673
21674
  });
21674
21675
  /* eslint-enable no-unused-vars */
21675
21676
 
21677
+ var _excluded$u = ["to", "color", "children", "active", "fontSize", "lineheight", "fontWeight", "variant", "margin", "tabIndex", "dataQa", "extraStyles", "isUnderlined", "hoverUnderline", "extraHoverStyles", "extraActiveStyles", "extraFocusStyles"];
21676
21678
  var InternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
21677
21679
  var _ref$to = _ref.to,
21678
21680
  to = _ref$to === void 0 ? "" : _ref$to,
@@ -21699,10 +21701,11 @@ var InternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
21699
21701
  _ref$extraActiveStyle = _ref.extraActiveStyles,
21700
21702
  extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle,
21701
21703
  _ref$extraFocusStyles = _ref.extraFocusStyles,
21702
- extraFocusStyles = _ref$extraFocusStyles === void 0 ? "" : _ref$extraFocusStyles;
21704
+ extraFocusStyles = _ref$extraFocusStyles === void 0 ? "" : _ref$extraFocusStyles,
21705
+ rest = _objectWithoutProperties(_ref, _excluded$u);
21703
21706
  var themeContext = React.useContext(styled.ThemeContext);
21704
21707
  var themeValues = createThemeValues(themeContext, fallbackValues$a, "Link", variant);
21705
- return /*#__PURE__*/React__default.createElement(StyledInternalLink, {
21708
+ return /*#__PURE__*/React__default.createElement(StyledInternalLink, _extends({
21706
21709
  to: to,
21707
21710
  color: color,
21708
21711
  lineheight: lineheight,
@@ -21722,7 +21725,7 @@ var InternalLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
21722
21725
  extraFocusStyles: extraFocusStyles,
21723
21726
  "data-qa": dataQa,
21724
21727
  ref: ref
21725
- }, safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
21728
+ }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
21726
21729
  });
21727
21730
 
21728
21731
  var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -21757,7 +21760,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
21757
21760
  })));
21758
21761
  };
21759
21762
 
21760
- var _excluded$u = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
21763
+ var _excluded$v = ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab", "dataQa"];
21761
21764
  var ButtonWithLink = function ButtonWithLink(_ref) {
21762
21765
  var _ref$url = _ref.url,
21763
21766
  url = _ref$url === void 0 ? "/" : _ref$url,
@@ -21772,7 +21775,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
21772
21775
  _ref$newTab = _ref.newTab,
21773
21776
  newTab = _ref$newTab === void 0 ? false : _ref$newTab,
21774
21777
  dataQa = _ref.dataQa,
21775
- otherProps = _objectWithoutProperties(_ref, _excluded$u);
21778
+ otherProps = _objectWithoutProperties(_ref, _excluded$v);
21776
21779
  var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
21777
21780
  var children = _ref2.children,
21778
21781
  url = _ref2.url,
@@ -21860,7 +21863,7 @@ var ParagraphText = styled__default.p.withConfig({
21860
21863
  return extraStyles;
21861
21864
  });
21862
21865
 
21863
- var _excluded$v = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
21866
+ var _excluded$w = ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"];
21864
21867
  var Paragraph = function Paragraph(_ref) {
21865
21868
  var themeValues = _ref.themeValues,
21866
21869
  _ref$weight = _ref.weight,
@@ -21874,7 +21877,7 @@ var Paragraph = function Paragraph(_ref) {
21874
21877
  dataQa = _ref.dataQa,
21875
21878
  children = _ref.children,
21876
21879
  as = _ref.as,
21877
- rest = _objectWithoutProperties(_ref, _excluded$v);
21880
+ rest = _objectWithoutProperties(_ref, _excluded$w);
21878
21881
  return /*#__PURE__*/React__default.createElement(ParagraphText, _extends({
21879
21882
  weight: weight,
21880
21883
  color: color,
@@ -22116,7 +22119,7 @@ var ENTER = 13;
22116
22119
  var ESCAPE = 27;
22117
22120
  var SPACEBAR = 32;
22118
22121
 
22119
- var _excluded$w = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
22122
+ var _excluded$x = ["title", "name", "checked", "onChange", "disabled", "themeValues", "hidden", "error", "isRequired", "checkboxMargin", "extraStyles", "textExtraStyles", "labelledById", "dataQa", "checkboxExtraStyles", "hasIconOverride", "icon"];
22120
22123
  var CheckboxContainer = styled__default.span.withConfig({
22121
22124
  displayName: "Checkbox__CheckboxContainer",
22122
22125
  componentId: "sc-36kqbv-0"
@@ -22175,6 +22178,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
22175
22178
  hidden = _ref5$hidden === void 0 ? false : _ref5$hidden,
22176
22179
  _ref5$error = _ref5.error,
22177
22180
  error = _ref5$error === void 0 ? false : _ref5$error,
22181
+ _ref5$isRequired = _ref5.isRequired,
22182
+ isRequired = _ref5$isRequired === void 0 ? false : _ref5$isRequired,
22178
22183
  _ref5$checkboxMargin = _ref5.checkboxMargin,
22179
22184
  checkboxMargin = _ref5$checkboxMargin === void 0 ? "0 16px 0 0" : _ref5$checkboxMargin,
22180
22185
  extraStyles = _ref5.extraStyles,
@@ -22186,7 +22191,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
22186
22191
  _ref5$hasIconOverride = _ref5.hasIconOverride,
22187
22192
  hasIconOverride = _ref5$hasIconOverride === void 0 ? false : _ref5$hasIconOverride,
22188
22193
  Icon = _ref5.icon,
22189
- rest = _objectWithoutProperties(_ref5, _excluded$w);
22194
+ rest = _objectWithoutProperties(_ref5, _excluded$x);
22190
22195
  var _useState = React.useState(false),
22191
22196
  _useState2 = _slicedToArray(_useState, 2),
22192
22197
  focused = _useState2[0],
@@ -22203,6 +22208,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
22203
22208
  ref: ref,
22204
22209
  padding: "0",
22205
22210
  tabIndex: "0",
22211
+ role: "checkbox",
22212
+ "aria-checked": checked,
22213
+ "aria-required": isRequired || undefined,
22214
+ "aria-invalid": error,
22215
+ "aria-label": ariaLabel,
22216
+ "aria-labelledby": ariaLabelledById,
22217
+ "aria-describedby": error ? "".concat(name, "-error-message") : undefined,
22206
22218
  onFocus: function onFocus() {
22207
22219
  return setFocused(true);
22208
22220
  },
@@ -22223,19 +22235,16 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
22223
22235
  id: "checkbox-".concat(name),
22224
22236
  disabled: disabled,
22225
22237
  name: name,
22226
- "aria-label": ariaLabel,
22227
- "aria-labelledby": ariaLabelledById,
22228
22238
  checked: checked,
22229
22239
  onChange: onChange,
22230
22240
  tabIndex: "-1",
22231
- "aria-invalid": error,
22232
- "aria-describedby": error ? "".concat(name, "-error-message") : ""
22241
+ required: isRequired,
22242
+ "aria-hidden": "true"
22233
22243
  }), /*#__PURE__*/React__default.createElement(StyledCheckbox, {
22234
- role: "checkbox",
22244
+ "aria-hidden": "true",
22235
22245
  error: error,
22236
22246
  disabled: disabled,
22237
22247
  checked: checked,
22238
- "aria-checked": checked,
22239
22248
  focused: focused,
22240
22249
  defaultStyles: themeValues.defaultStyles,
22241
22250
  checkedStyles: themeValues.checkedStyles,
@@ -22542,7 +22551,7 @@ var TableRowWrapper = styled__default.tr.withConfig({
22542
22551
  return extraStyles;
22543
22552
  });
22544
22553
 
22545
- var _excluded$x = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
22554
+ var _excluded$y = ["children", "extraStyles", "hoverCursor", "hoverEffect", "onClick", "themeValues"];
22546
22555
  var TableRow = function TableRow(_ref) {
22547
22556
  var children = _ref.children,
22548
22557
  extraStyles = _ref.extraStyles,
@@ -22552,7 +22561,7 @@ var TableRow = function TableRow(_ref) {
22552
22561
  hoverEffect = _ref$hoverEffect === void 0 ? true : _ref$hoverEffect,
22553
22562
  onClick = _ref.onClick,
22554
22563
  themeValues = _ref.themeValues,
22555
- props = _objectWithoutProperties(_ref, _excluded$x);
22564
+ props = _objectWithoutProperties(_ref, _excluded$y);
22556
22565
  return /*#__PURE__*/React__default.createElement(TableRowWrapper, _extends({
22557
22566
  onClick: onClick,
22558
22567
  hoverEffect: hoverEffect,
@@ -25389,7 +25398,7 @@ var mobileFallbackValues$1 = {
25389
25398
  };
25390
25399
  var MOBILE_BREAKPOINT$1 = 768;
25391
25400
 
25392
- var _excluded$y = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
25401
+ var _excluded$z = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
25393
25402
  var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
25394
25403
  var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
25395
25404
  var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$1;
@@ -25412,7 +25421,7 @@ var Detail = function Detail(_ref) {
25412
25421
  as = _ref$as === void 0 ? "p" : _ref$as,
25413
25422
  dataQa = _ref.dataQa,
25414
25423
  children = _ref.children,
25415
- rest = _objectWithoutProperties(_ref, _excluded$y);
25424
+ rest = _objectWithoutProperties(_ref, _excluded$z);
25416
25425
  return /*#__PURE__*/React__default.createElement(DetailText, _extends({
25417
25426
  variant: variant,
25418
25427
  as: as,
@@ -25802,7 +25811,7 @@ var fallbackValues$m = {
25802
25811
  formFooterPanel: formFooterPanel
25803
25812
  };
25804
25813
 
25805
- var _excluded$z = ["showErrors", "themeValues"],
25814
+ var _excluded$A = ["showErrors", "themeValues"],
25806
25815
  _excluded2 = ["ariaLabelledBy", "type", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant"];
25807
25816
  var InputField = styled__default.input.withConfig({
25808
25817
  displayName: "FormInput__InputField",
@@ -25837,7 +25846,7 @@ var InputField = styled__default.input.withConfig({
25837
25846
  var FormattedInputField = styled__default(function (_ref8) {
25838
25847
  var showErrors = _ref8.showErrors,
25839
25848
  themeValues = _ref8.themeValues,
25840
- props = _objectWithoutProperties(_ref8, _excluded$z);
25849
+ props = _objectWithoutProperties(_ref8, _excluded$A);
25841
25850
  return /*#__PURE__*/React__default.createElement(FormattedInput, props);
25842
25851
  }).withConfig({
25843
25852
  displayName: "FormInput__FormattedInputField",
@@ -25972,6 +25981,7 @@ var FormInput = function FormInput(_ref15) {
25972
25981
  "aria-labelledby": ariaLabelledBy === undefined ? createIdFromString(labelTextWhenNoError) : ariaLabelledBy,
25973
25982
  "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
25974
25983
  "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
25984
+ "aria-required": isRequired,
25975
25985
  onChange: function onChange(value) {
25976
25986
  return setValue(value);
25977
25987
  },
@@ -26004,6 +26014,7 @@ var FormInput = function FormInput(_ref15) {
26004
26014
  "aria-labelledby": ariaLabelledBy === undefined ? createIdFromString(labelTextWhenNoError) : ariaLabelledBy,
26005
26015
  "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
26006
26016
  "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
26017
+ "aria-required": isRequired,
26007
26018
  onChange: function onChange(e) {
26008
26019
  return setValue(e.target.value);
26009
26020
  },
@@ -26042,7 +26053,7 @@ var FormInput = function FormInput(_ref15) {
26042
26053
  };
26043
26054
  var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$m, "default");
26044
26055
 
26045
- var _excluded$A = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
26056
+ var _excluded$B = ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"];
26046
26057
  var FormInputRow = function FormInputRow(_ref) {
26047
26058
  var _ref$breakpoint = _ref.breakpoint,
26048
26059
  breakpoint = _ref$breakpoint === void 0 ? "30rem" : _ref$breakpoint,
@@ -26051,7 +26062,7 @@ var FormInputRow = function FormInputRow(_ref) {
26051
26062
  largeChild = _ref.largeChild,
26052
26063
  largeChildSize = _ref.largeChildSize,
26053
26064
  children = _ref.children,
26054
- rest = _objectWithoutProperties(_ref, _excluded$A);
26065
+ rest = _objectWithoutProperties(_ref, _excluded$B);
26055
26066
  return /*#__PURE__*/React__default.createElement(Box, _extends({
26056
26067
  padding: "0"
26057
26068
  }, rest), /*#__PURE__*/React__default.createElement(Switcher, {
@@ -26062,24 +26073,24 @@ var FormInputRow = function FormInputRow(_ref) {
26062
26073
  }, children));
26063
26074
  };
26064
26075
 
26065
- var _excluded$B = ["childGap", "bottomItem", "children"];
26076
+ var _excluded$C = ["childGap", "bottomItem", "children"];
26066
26077
  var FormInputColumn = function FormInputColumn(_ref) {
26067
26078
  var _ref$childGap = _ref.childGap,
26068
26079
  childGap = _ref$childGap === void 0 ? "0.5rem" : _ref$childGap,
26069
26080
  bottomItem = _ref.bottomItem,
26070
26081
  children = _ref.children,
26071
- rest = _objectWithoutProperties(_ref, _excluded$B);
26082
+ rest = _objectWithoutProperties(_ref, _excluded$C);
26072
26083
  return /*#__PURE__*/React__default.createElement(Stack, _extends({
26073
26084
  childGap: childGap,
26074
26085
  bottomItem: bottomItem
26075
26086
  }, rest), children);
26076
26087
  };
26077
26088
 
26078
- var _excluded$C = ["themeValues", "children"];
26089
+ var _excluded$D = ["themeValues", "children"];
26079
26090
  var FormContainer = function FormContainer(_ref) {
26080
26091
  var themeValues = _ref.themeValues,
26081
26092
  children = _ref.children,
26082
- rest = _objectWithoutProperties(_ref, _excluded$C);
26093
+ rest = _objectWithoutProperties(_ref, _excluded$D);
26083
26094
  var _useContext = React.useContext(styled.ThemeContext),
26084
26095
  isMobile = _useContext.isMobile;
26085
26096
  return /*#__PURE__*/React__default.createElement(Box, _extends({
@@ -26111,7 +26122,7 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
26111
26122
  };
26112
26123
  var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$m, "default");
26113
26124
 
26114
- var _excluded$D = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
26125
+ var _excluded$E = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
26115
26126
  var TextareaField = styled__default.textarea.withConfig({
26116
26127
  displayName: "FormTextarea__TextareaField",
26117
26128
  componentId: "sc-94tlb0-0"
@@ -26174,7 +26185,7 @@ var FormTextarea = function FormTextarea(_ref8) {
26174
26185
  cols = _ref8.cols,
26175
26186
  placeholder = _ref8.placeholder,
26176
26187
  maxLength = _ref8.maxLength,
26177
- props = _objectWithoutProperties(_ref8, _excluded$D);
26188
+ props = _objectWithoutProperties(_ref8, _excluded$E);
26178
26189
  var setValue = function setValue(value) {
26179
26190
  if (removeFromValue !== undefined) {
26180
26191
  return fieldActions.set(value.replace(removeFromValue, ""));
@@ -26314,9 +26325,13 @@ var BankItemWrapper = styled__default.div.withConfig({
26314
26325
  displayName: "FormattedBankAccount__BankItemWrapper",
26315
26326
  componentId: "sc-18hcgw4-0"
26316
26327
  })(["display:flex;justify-content:flex-start;align-items:center;"]);
26328
+ var BankIconWrapper = styled__default.div.withConfig({
26329
+ displayName: "FormattedBankAccount__BankIconWrapper",
26330
+ componentId: "sc-18hcgw4-1"
26331
+ })(["margin-right:8px;width:36px;height:auto;display:flex;"]);
26317
26332
  var BankAccountText = styled__default.h4.withConfig({
26318
26333
  displayName: "FormattedBankAccount__BankAccountText",
26319
- componentId: "sc-18hcgw4-1"
26334
+ componentId: "sc-18hcgw4-2"
26320
26335
  })(["color:", ";font-size:1rem;font-weight:400;line-height:1.5rem;text-align:left;margin-right:0.5rem;display:inline-block;"], function (_ref) {
26321
26336
  var color = _ref.color;
26322
26337
  return color;
@@ -26328,10 +26343,7 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
26328
26343
  accountType = _ref2.accountType,
26329
26344
  autoPay = _ref2.autoPay,
26330
26345
  themeValues = _ref2.themeValues;
26331
- return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(Box, {
26332
- padding: "0.25rem 0 0 0",
26333
- extraStyles: "margin-right: 1rem;"
26334
- }, /*#__PURE__*/React__default.createElement(BankIcon, null)), /*#__PURE__*/React__default.createElement(Stack, {
26346
+ return /*#__PURE__*/React__default.createElement(BankItemWrapper, null, /*#__PURE__*/React__default.createElement(BankIconWrapper, null, /*#__PURE__*/React__default.createElement(BankIconLarge, null)), /*#__PURE__*/React__default.createElement(Stack, {
26335
26347
  childGap: "0"
26336
26348
  }, accountType === CHECKING && /*#__PURE__*/React__default.createElement(BankAccountText, {
26337
26349
  color: themeValues.textColor
@@ -26386,7 +26398,7 @@ var CardType = function CardType(_ref) {
26386
26398
  var _ref2 = cardBrands[normalizedType] || cardBrands["default"],
26387
26399
  label = _ref2.label,
26388
26400
  IconComponent = _ref2[size];
26389
- return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(IconComponent, null));
26401
+ return /*#__PURE__*/React__default.createElement(IconComponent, null);
26390
26402
  };
26391
26403
 
26392
26404
  var textColor$2 = "".concat(CHARADE_GREY);
@@ -26463,7 +26475,7 @@ var CreditCardWrapper = styled__default.div.withConfig({
26463
26475
  var CCIconWrapper = styled__default.div.withConfig({
26464
26476
  displayName: "FormattedCreditCard__CCIconWrapper",
26465
26477
  componentId: "sc-s0ta5l-1"
26466
- })(["margin-right:16px;width:36px;height:auto;display:flex;"]);
26478
+ })(["margin-right:8px;width:36px;height:auto;display:flex;"]);
26467
26479
  var FormattedCreditCard = function FormattedCreditCard(_ref) {
26468
26480
  var lastFour = _ref.lastFour,
26469
26481
  type = _ref.type,
@@ -26578,7 +26590,7 @@ var fallbackValues$q = {
26578
26590
  fontSize: fontSize$8
26579
26591
  };
26580
26592
 
26581
- var _excluded$E = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
26593
+ var _excluded$F = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
26582
26594
  var Heading = function Heading(_ref) {
26583
26595
  var themeValues = _ref.themeValues,
26584
26596
  _ref$weight = _ref.weight,
@@ -26597,7 +26609,7 @@ var Heading = function Heading(_ref) {
26597
26609
  as = _ref$as === void 0 ? variant : _ref$as,
26598
26610
  dataQa = _ref.dataQa,
26599
26611
  children = _ref.children,
26600
- rest = _objectWithoutProperties(_ref, _excluded$E);
26612
+ rest = _objectWithoutProperties(_ref, _excluded$F);
26601
26613
  return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
26602
26614
  variant: variant,
26603
26615
  as: as,
@@ -26877,11 +26889,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
26877
26889
  }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
26878
26890
  };
26879
26891
 
26880
- var _excluded$F = ["version"];
26892
+ var _excluded$G = ["version"];
26881
26893
  var LabeledAmount = function LabeledAmount(_ref) {
26882
26894
  var _ref$version = _ref.version,
26883
26895
  version = _ref$version === void 0 ? "v1" : _ref$version,
26884
- rest = _objectWithoutProperties(_ref, _excluded$F);
26896
+ rest = _objectWithoutProperties(_ref, _excluded$G);
26885
26897
  var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
26886
26898
  return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
26887
26899
  };
@@ -26959,7 +26971,7 @@ var Loading = function Loading() {
26959
26971
  })))));
26960
26972
  };
26961
26973
 
26962
- var _excluded$G = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
26974
+ var _excluded$H = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
26963
26975
  var NavFooter = function NavFooter(_ref) {
26964
26976
  var leftContent = _ref.leftContent,
26965
26977
  rightContent = _ref.rightContent,
@@ -26974,7 +26986,7 @@ var NavFooter = function NavFooter(_ref) {
26974
26986
  footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
26975
26987
  isMobile = _ref.isMobile,
26976
26988
  footerWidth = _ref.footerWidth,
26977
- rest = _objectWithoutProperties(_ref, _excluded$G);
26989
+ rest = _objectWithoutProperties(_ref, _excluded$H);
26978
26990
  return /*#__PURE__*/React__default.createElement(Box, _extends({
26979
26991
  padding: footerPadding,
26980
26992
  background: backgroundColor,
@@ -27005,7 +27017,7 @@ var NavFooter = function NavFooter(_ref) {
27005
27017
  }, rightContent)))))));
27006
27018
  };
27007
27019
 
27008
- var _excluded$H = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
27020
+ var _excluded$I = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
27009
27021
  var NavHeader = function NavHeader(_ref) {
27010
27022
  var leftContent = _ref.leftContent,
27011
27023
  rightContent = _ref.rightContent,
@@ -27014,7 +27026,7 @@ var NavHeader = function NavHeader(_ref) {
27014
27026
  isMobile = _ref.isMobile,
27015
27027
  backgroundColor = _ref.backgroundColor,
27016
27028
  headerWidth = _ref.headerWidth,
27017
- rest = _objectWithoutProperties(_ref, _excluded$H);
27029
+ rest = _objectWithoutProperties(_ref, _excluded$I);
27018
27030
  return /*#__PURE__*/React__default.createElement(Box, _extends({
27019
27031
  padding: "0 16px 4px",
27020
27032
  background: backgroundColor,
@@ -27572,7 +27584,7 @@ var RadioButton$1 = function RadioButton(_ref2) {
27572
27584
  borderWidth: "1px",
27573
27585
  borderStyle: "solid",
27574
27586
  borderRadius: "12px",
27575
- margin: "6px 14px 6px 6px",
27587
+ margin: "6px 8px 6px 6px",
27576
27588
  height: "24px",
27577
27589
  width: "24px",
27578
27590
  variants: buttonBorder,
@@ -38875,7 +38887,7 @@ var LoadingPill = styled__default.span.withConfig({
38875
38887
  return backgroundColor;
38876
38888
  }, shineFrames);
38877
38889
 
38878
- var _excluded$I = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
38890
+ var _excluded$J = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
38879
38891
  var LoadingLine = function LoadingLine(_ref) {
38880
38892
  var minWidth = _ref.minWidth,
38881
38893
  maxWidth = _ref.maxWidth,
@@ -38889,7 +38901,7 @@ var LoadingLine = function LoadingLine(_ref) {
38889
38901
  backgroundColor = _ref$backgroundColor === void 0 ? SEASHELL_WHITE : _ref$backgroundColor,
38890
38902
  _ref$foregroundColor = _ref.foregroundColor,
38891
38903
  foregroundColor = _ref$foregroundColor === void 0 ? ALABASTER_WHITE : _ref$foregroundColor,
38892
- props = _objectWithoutProperties(_ref, _excluded$I);
38904
+ props = _objectWithoutProperties(_ref, _excluded$J);
38893
38905
  var calculatedWidth = Math.floor(Math.random() * (parseInt(maxWidth) - parseInt(minWidth) + 1) + parseInt(minWidth));
38894
38906
  return /*#__PURE__*/React__default.createElement(LoadingPill, _extends({
38895
38907
  "aria-label": "loading",
@@ -40923,7 +40935,9 @@ var EditableList = function EditableList(_ref) {
40923
40935
  _ref$editItemAriaRole = _ref.editItemAriaRole,
40924
40936
  editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole,
40925
40937
  _ref$disablePlacehold = _ref.disablePlaceholder,
40926
- disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold;
40938
+ disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold,
40939
+ _ref$getEditHref = _ref.getEditHref,
40940
+ getEditHref = _ref$getEditHref === void 0 ? null : _ref$getEditHref;
40927
40941
  var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
40928
40942
  return /*#__PURE__*/React__default.createElement(Box, {
40929
40943
  padding: listPadding,
@@ -40990,7 +41004,12 @@ var EditableList = function EditableList(_ref) {
40990
41004
  extraStyles: ":not(:first-child) { border-left: 2px solid ".concat(BOSTON_BLUE, ";}"),
40991
41005
  dataQa: qaPrefix + " Edit",
40992
41006
  key: "Edit ".concat(item.id)
40993
- }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
41007
+ }, getEditHref ? /*#__PURE__*/React__default.createElement(InternalLink, {
41008
+ to: getEditHref(item),
41009
+ fontWeight: "400",
41010
+ extraStyles: "margin: 0.5rem; min-width: 0;",
41011
+ "aria-label": "Edit ".concat(ariaLabel || itemName)
41012
+ }, "Edit") : /*#__PURE__*/React__default.createElement(ButtonWithAction, {
40994
41013
  variant: "smallGhost",
40995
41014
  text: "Edit",
40996
41015
  action: function action() {
@@ -45288,11 +45307,11 @@ var Modal$2 = function Modal(_ref) {
45288
45307
  };
45289
45308
  var ModalControlV2 = withWindowSize(Modal$2);
45290
45309
 
45291
- var _excluded$J = ["version"];
45310
+ var _excluded$K = ["version"];
45292
45311
  var Modal$3 = function Modal(_ref) {
45293
45312
  var _ref$version = _ref.version,
45294
45313
  version = _ref$version === void 0 ? "v1" : _ref$version,
45295
- rest = _objectWithoutProperties(_ref, _excluded$J);
45314
+ rest = _objectWithoutProperties(_ref, _excluded$K);
45296
45315
  var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
45297
45316
  return /*#__PURE__*/React__default.createElement(ModalControl, rest);
45298
45317
  };
@@ -45814,9 +45833,8 @@ var disabledBorderColor$1 = GHOST_GREY;
45814
45833
  var disabledColor$2 = MANATEE_GREY;
45815
45834
  var activeBackgroundColor$1 = CORNFLOWER_BLUE;
45816
45835
  var backgroundColor$a = LINK_WATER;
45817
- var borderColor$5 = MANATEE_GREY;
45836
+ var borderColor$5 = MOON_RAKER;
45818
45837
  var color$c = ROYAL_BLUE_VIVID;
45819
- var textColor$5 = BRIGHT_GREY;
45820
45838
  var fallbackValues$L = {
45821
45839
  disabledBackgroundColor: disabledBackgroundColor$1,
45822
45840
  disabledBorderColor: disabledBorderColor$1,
@@ -45824,37 +45842,36 @@ var fallbackValues$L = {
45824
45842
  activeBackgroundColor: activeBackgroundColor$1,
45825
45843
  backgroundColor: backgroundColor$a,
45826
45844
  borderColor: borderColor$5,
45827
- color: color$c,
45828
- textColor: textColor$5
45845
+ color: color$c
45829
45846
  };
45830
45847
 
45831
45848
  var Container = styled__default(Box).withConfig({
45832
45849
  displayName: "LinkCardstyled__Container",
45833
45850
  componentId: "sc-l5q1h2-0"
45834
- })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;padding:", ";", " text-decoration:none;transition:all 0.2s ease-in-out;", ""], SPACING.MD, function (_ref) {
45835
- var disabled = _ref.disabled,
45836
- themeValues = _ref.themeValues;
45837
- return "\n background-color: ".concat(disabled ? themeValues.disabledBackgroundColor : themeValues.backgroundColor, ";\n border: 1px solid ").concat(disabled ? themeValues.disabledBorderColor : themeValues.borderColor, ";\n ");
45851
+ })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;", " transition:all .2s ease-in-out;", ""], function (_ref) {
45852
+ var isDisabled = _ref.isDisabled,
45853
+ theme = _ref.theme;
45854
+ return "\n background-color: ".concat(isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor, ";\n border: 1px solid ").concat(isDisabled ? theme.disabledBorderColor : theme.borderColor, ";\n ");
45838
45855
  }, function (_ref2) {
45839
- var disabled = _ref2.disabled,
45840
- themeValues = _ref2.themeValues;
45841
- return disabled ? "\n &:hover,\n &:active {\n cursor: default;\n box-shadow: none;\n border: 1px solid ".concat(themeValues.disabledBorderColor, ";\n }\n ") : "\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n 0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n 0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n 0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n 0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n 0px 80px 33px 0px rgba(41, 42, 51, 0);\n }\n\n &:hover:not(:active) {\n border: 1px solid ".concat(themeValues.borderColor, ";\n }\n\n &:active {\n background-color: ").concat(themeValues.activeBackgroundColor, ";\n border: ").concat(BORDER_THIN, " solid ").concat(themeValues.borderColor, ";\n }\n ");
45856
+ var isDisabled = _ref2.isDisabled,
45857
+ theme = _ref2.theme;
45858
+ return isDisabled ? "\n &:hover,\n &:active {\n cursor: default;\n box-shadow: none;\n border: 1px solid ".concat(theme.disabledBorderColor, ";\n }\n ") : "\n &:hover,\n &:active {\n cursor: pointer;\n box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),\n 0px 5px 11px 0px rgba(41, 42, 51, 0.1),\n 0px 4px 19px 0px rgba(41, 42, 51, 0.09),\n 0px 27px 26px 0px rgba(41, 42, 51, 0.05),\n 0px 56px 31px 0px rgba(41, 42, 51, 0.01),\n 0px 80px 33px 0px rgba(41, 42, 51, 0);\n }\n\n &:hover:not(:active) {\n border: 1px solid ".concat(theme.borderColor, ";\n }\n\n &:active {\n background-color: ").concat(theme.activeBackgroundColor, ";\n border: 1px solid ").concat(theme.borderColor, ";\n }\n ");
45842
45859
  });
45843
45860
  var Title$2 = styled__default(Heading$1).withConfig({
45844
45861
  displayName: "LinkCardstyled__Title",
45845
45862
  componentId: "sc-l5q1h2-1"
45846
- })(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:", ";line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_SIZE.MD, FONT_WEIGHT_SEMIBOLD, function (_ref3) {
45847
- var disabled = _ref3.disabled,
45848
- themeValues = _ref3.themeValues;
45849
- return "color: ".concat(disabled ? themeValues.disabledColor : themeValues.color, ";");
45863
+ })(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref3) {
45864
+ var isDisabled = _ref3.isDisabled,
45865
+ theme = _ref3.theme;
45866
+ return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
45850
45867
  });
45851
45868
  var Subtitle = styled__default(Paragraph$1).withConfig({
45852
45869
  displayName: "LinkCardstyled__Subtitle",
45853
45870
  componentId: "sc-l5q1h2-2"
45854
- })(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:", ";line-height:150%;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_SIZE.SM, FONT_WEIGHT_REGULAR, function (_ref4) {
45855
- var disabled = _ref4.disabled,
45856
- themeValues = _ref4.themeValues;
45857
- return "color: ".concat(disabled ? themeValues.disabledColor : themeValues.textColor, ";");
45871
+ })(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150%;letter-spacing:0.14px;font-weight:", ";", ";"], FONT_WEIGHT_SEMIBOLD, function (_ref4) {
45872
+ var isDisabled = _ref4.isDisabled,
45873
+ theme = _ref4.theme;
45874
+ return "color: ".concat(isDisabled ? theme.disabledColor : theme.color, ";");
45858
45875
  });
45859
45876
  var Footer = styled__default(Stack).withConfig({
45860
45877
  displayName: "LinkCardstyled__Footer",
@@ -45873,6 +45890,7 @@ var LinkCard = function LinkCard(_ref) {
45873
45890
  leftContent = _ref.leftContent,
45874
45891
  showRight = _ref.showRight,
45875
45892
  rightContent = _ref.rightContent,
45893
+ onClick = _ref.onClick,
45876
45894
  _ref$extraStyles = _ref.extraStyles,
45877
45895
  extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
45878
45896
  _ref$extraHoverStyles = _ref.extraHoverStyles,
@@ -45882,34 +45900,31 @@ var LinkCard = function LinkCard(_ref) {
45882
45900
  themeValues = _ref.themeValues,
45883
45901
  _ref$titleVariant = _ref.titleVariant,
45884
45902
  titleVariant = _ref$titleVariant === void 0 ? "h3" : _ref$titleVariant,
45903
+ _ref$titlePadding = _ref.titlePadding,
45885
45904
  _ref$disabled = _ref.disabled,
45886
45905
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
45887
45906
  _ref$isExternalLink = _ref.isExternalLink,
45888
- isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink,
45889
- _ref$href = _ref.href,
45890
- href = _ref$href === void 0 ? "" : _ref$href;
45907
+ isExternalLink = _ref$isExternalLink === void 0 ? false : _ref$isExternalLink;
45891
45908
  var _useContext = React.useContext(styled.ThemeContext),
45892
45909
  isMobile = _useContext.isMobile;
45893
45910
  var regex = /\W/g;
45894
45911
  var locatorSlug = title === null || title === void 0 || (_title$toLowerCase = title.toLowerCase) === null || _title$toLowerCase === void 0 || (_title$toLowerCase = _title$toLowerCase.call(title)) === null || _title$toLowerCase === void 0 || (_title$toLowerCase$re = _title$toLowerCase.replaceAll) === null || _title$toLowerCase$re === void 0 ? void 0 : _title$toLowerCase$re.call(_title$toLowerCase, regex, "-");
45895
45912
  return /*#__PURE__*/React__default.createElement(Container, {
45896
- as: "a",
45897
- role: "link",
45898
- href: disabled ? undefined : href,
45899
- tabIndex: disabled ? -1 : 0,
45900
45913
  borderRadius: "8px",
45901
45914
  dataQa: "link-card-".concat(locatorSlug),
45902
45915
  width: "100%",
45903
45916
  maxWidth: isMobile ? "100%" : "288px",
45904
45917
  minWidth: isMobile ? "240px" : "288px",
45905
45918
  minHeight: "141px",
45906
- padding: SPACING.MD,
45907
- themeValues: themeValues,
45919
+ padding: "24px",
45920
+ theme: themeValues,
45908
45921
  extraStyles: extraStyles,
45909
45922
  hoverStyles: extraHoverStyles,
45910
45923
  activeStyles: extraActiveStyles,
45924
+ onClick: disabled ? noop$1 : onClick,
45911
45925
  "aria-disabled": disabled,
45912
- disabled: disabled,
45926
+ isDisabled: disabled,
45927
+ role: "group",
45913
45928
  "aria-label": "".concat(title, ", ").concat(subtitle)
45914
45929
  }, /*#__PURE__*/React__default.createElement(Stack, {
45915
45930
  childGap: 0,
@@ -45925,9 +45940,9 @@ var LinkCard = function LinkCard(_ref) {
45925
45940
  extraStyles: "align-items: center;"
45926
45941
  }, /*#__PURE__*/React__default.createElement(Title$2, {
45927
45942
  variant: titleVariant,
45928
- themeValues: themeValues,
45943
+ theme: themeValues,
45929
45944
  margin: 0,
45930
- disabled: disabled
45945
+ isDisabled: disabled
45931
45946
  }, title), isExternalLink && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
45932
45947
  linkColor: themeValues.color,
45933
45948
  text: locatorSlug,
@@ -45940,8 +45955,8 @@ var LinkCard = function LinkCard(_ref) {
45940
45955
  width: "100%"
45941
45956
  }, /*#__PURE__*/React__default.createElement(Subtitle, {
45942
45957
  variant: "pS",
45943
- themeValues: themeValues,
45944
- disabled: disabled
45958
+ theme: themeValues,
45959
+ isDisabled: disabled
45945
45960
  }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
45946
45961
  background: "transparent",
45947
45962
  borderWidthOverride: "0 0 0 0",
@@ -46138,7 +46153,8 @@ var IconsModule = function IconsModule(_ref) {
46138
46153
  Icon = iconsMap[icon];
46139
46154
  }
46140
46155
  return /*#__PURE__*/React__default.createElement(Box, {
46141
- padding: "0 1rem 0 0"
46156
+ padding: "0 1rem 0 0",
46157
+ "aria-hidden": "true"
46142
46158
  }, /*#__PURE__*/React__default.createElement(Cluster, {
46143
46159
  justify: "center",
46144
46160
  align: "center"
@@ -46222,7 +46238,6 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
46222
46238
  } : navigateToSettings,
46223
46239
  isLoading: deactivatingSchedule
46224
46240
  };
46225
- var modalLinkHoverFocus = "\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-decoration-color: #317D4F;\n ";
46226
46241
  var hoverStyles = "text-decoration: underline;";
46227
46242
  var activeStyles = "text-decoration: underline;";
46228
46243
  var renderAutoPayControl = function renderAutoPayControl() {
@@ -46257,28 +46272,25 @@ var AutopayModalModule = function AutopayModalModule(_ref) {
46257
46272
  {
46258
46273
  return /*#__PURE__*/React__default.createElement(Box, {
46259
46274
  padding: "0",
46275
+ role: "button",
46276
+ tabIndex: "0",
46260
46277
  onClick: onClick || function () {
46261
46278
  toggleModal(true);
46262
46279
  },
46280
+ onKeyDown: onKeyPress || function (e) {
46281
+ e.key === "Enter" && toggleModal(true);
46282
+ },
46263
46283
  hoverStyles: hoverStyles,
46264
46284
  activeStyles: activeStyles,
46265
- extraStyles: "cursor: pointer;"
46285
+ extraStyles: "cursor: pointer; margin-bottom: 5px;",
46286
+ dataQa: "".concat(shortPlan, " On")
46266
46287
  }, /*#__PURE__*/React__default.createElement(Cluster, {
46267
46288
  justify: isMobile ? "flex-start" : "flex-end",
46268
46289
  align: "center"
46269
46290
  }, /*#__PURE__*/React__default.createElement(AutopayOnIcon, null), /*#__PURE__*/React__default.createElement(Text$1, {
46270
46291
  variant: "pS",
46271
- onClick: onClick || function () {
46272
- return toggleModal(true);
46273
- },
46274
- onKeyPress: onKeyPress || function (e) {
46275
- e.key === "Enter" && toggleModal(true);
46276
- },
46277
- tabIndex: "0",
46278
- dataQa: "".concat(shortPlan, " On"),
46279
46292
  color: SEA_GREEN,
46280
46293
  weight: FONT_WEIGHT_REGULAR,
46281
- hoverStyles: modalLinkHoverFocus,
46282
46294
  extraStyles: "padding-left: 0.25rem;",
46283
46295
  disabled: disableActions
46284
46296
  }, "".concat(shortPlan, " ").concat(nextAutopayDate))));
@@ -47552,7 +47564,7 @@ var fallbackValues$Q = {
47552
47564
  labeledAmountTotal: labeledAmountTotal
47553
47565
  };
47554
47566
 
47555
- var _excluded$K = ["amount"],
47567
+ var _excluded$L = ["amount"],
47556
47568
  _excluded2$1 = ["amount"];
47557
47569
  var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
47558
47570
  var lineItemElems = _ref.lineItemElems,
@@ -47795,7 +47807,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
47795
47807
  return fee.amount > 0;
47796
47808
  }).map(function (_ref5) {
47797
47809
  var amount = _ref5.amount,
47798
- rest = _objectWithoutProperties(_ref5, _excluded$K);
47810
+ rest = _objectWithoutProperties(_ref5, _excluded$L);
47799
47811
  return _objectSpread2(_objectSpread2({}, rest), {}, {
47800
47812
  amount: displayCurrency(amount)
47801
47813
  });
@@ -48169,7 +48181,9 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
48169
48181
  _ref$modalTitle = _ref.modalTitle,
48170
48182
  modalTitle = _ref$modalTitle === void 0 ? "Terms and Conditions" : _ref$modalTitle,
48171
48183
  _ref$initialFocusSele = _ref.initialFocusSelector,
48172
- initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele;
48184
+ initialFocusSelector = _ref$initialFocusSele === void 0 ? "" : _ref$initialFocusSele,
48185
+ _ref$isRequired = _ref.isRequired,
48186
+ isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
48173
48187
  var _useState = React.useState(false),
48174
48188
  _useState2 = _slicedToArray(_useState, 2),
48175
48189
  showTerms = _useState2[0],
@@ -48202,7 +48216,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
48202
48216
  onChange: onCheck,
48203
48217
  checkboxMargin: checkboxMargin,
48204
48218
  extraStyles: "align-self: flex-start;",
48205
- labelledById: TermsAndConditionsTitleDivId
48219
+ labelledById: TermsAndConditionsTitleDivId,
48220
+ isRequired: isRequired
48206
48221
  }), /*#__PURE__*/React__default.createElement(Stack, {
48207
48222
  childGap: "0.25rem",
48208
48223
  fullHeight: true
@@ -48232,11 +48247,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
48232
48247
  }, errorMessage))))));
48233
48248
  };
48234
48249
 
48235
- var _excluded$L = ["version"];
48250
+ var _excluded$M = ["version"];
48236
48251
  var TermsAndConditions = function TermsAndConditions(_ref) {
48237
48252
  var _ref$version = _ref.version,
48238
48253
  version = _ref$version === void 0 ? "v1" : _ref$version,
48239
- rest = _objectWithoutProperties(_ref, _excluded$L);
48254
+ rest = _objectWithoutProperties(_ref, _excluded$M);
48240
48255
  var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
48241
48256
  return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
48242
48257
  };
@@ -49044,7 +49059,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
49044
49059
  }, section.content))));
49045
49060
  };
49046
49061
 
49047
- var _excluded$M = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
49062
+ var _excluded$N = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
49048
49063
 
49049
49064
  /**
49050
49065
  - The RadioSection component takes either a flat array (via the 'sections'
@@ -49094,7 +49109,7 @@ var RadioSection = function RadioSection(_ref) {
49094
49109
  _ref$groupedSections = _ref.groupedSections,
49095
49110
  groupedSections = _ref$groupedSections === void 0 ? [] : _ref$groupedSections,
49096
49111
  borderOverride = _ref.borderOverride,
49097
- rest = _objectWithoutProperties(_ref, _excluded$M);
49112
+ rest = _objectWithoutProperties(_ref, _excluded$N);
49098
49113
  var _useState = React.useState(null),
49099
49114
  _useState2 = _slicedToArray(_useState, 2),
49100
49115
  focused = _useState2[0],
@@ -49360,7 +49375,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
49360
49375
  return e.key === "Enter" && handleSubmit(e);
49361
49376
  },
49362
49377
  autocompleteValue: "given-name",
49363
- dataQa: "First name"
49378
+ dataQa: "First name",
49379
+ isRequired: true
49364
49380
  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
49365
49381
  labelTextWhenNoError: "Last name",
49366
49382
  errorMessages: lastNameErrorMessages,
@@ -49371,7 +49387,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
49371
49387
  return e.key === "Enter" && handleSubmit(e);
49372
49388
  },
49373
49389
  autocompleteValue: "family-name",
49374
- dataQa: "Last name"
49390
+ dataQa: "Last name",
49391
+ isRequired: true
49375
49392
  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
49376
49393
  labelTextWhenNoError: "Email address",
49377
49394
  errorMessages: emailErrorMessages,
@@ -49384,7 +49401,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
49384
49401
  type: "email",
49385
49402
  isEmail: true,
49386
49403
  autocompleteValue: "email",
49387
- dataQa: "Email address"
49404
+ dataQa: "Email address",
49405
+ isRequired: true
49388
49406
  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
49389
49407
  labelTextWhenNoError: "Password",
49390
49408
  errorMessages: passwordErrorMessages,
@@ -49396,7 +49414,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
49396
49414
  },
49397
49415
  type: "password",
49398
49416
  autocompleteValue: "new-password",
49399
- dataQa: "Password"
49417
+ dataQa: "Password",
49418
+ isRequired: true
49400
49419
  }), /*#__PURE__*/React__default.createElement(FormInput$1, {
49401
49420
  labelTextWhenNoError: "Confirm password",
49402
49421
  errorMessages: confirmPasswordErrorMessages,
@@ -49408,7 +49427,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
49408
49427
  },
49409
49428
  type: "password",
49410
49429
  autocompleteValue: "new-password",
49411
- dataQa: "Confirm password"
49430
+ dataQa: "Confirm password",
49431
+ isRequired: true
49412
49432
  }), /*#__PURE__*/React__default.createElement(Box, {
49413
49433
  padding: isMobile ? "0" : "0.5rem 0 0"
49414
49434
  }, /*#__PURE__*/React__default.createElement(PasswordRequirements, {
@@ -49650,7 +49670,7 @@ var Tab = function Tab(_ref) {
49650
49670
  }, label));
49651
49671
  };
49652
49672
 
49653
- var _excluded$N = ["tabsConfig", "tabsDisplayMode", "tabsPadding", "contentPadding", "extraStyles"];
49673
+ var _excluded$O = ["tabsConfig", "tabsDisplayMode", "tabsPadding", "contentPadding", "extraStyles"];
49654
49674
  var HORIZONTAL = "horizontal";
49655
49675
  var Tabs = function Tabs(_ref) {
49656
49676
  var _tabsConfig$tabs$;
@@ -49663,7 +49683,7 @@ var Tabs = function Tabs(_ref) {
49663
49683
  contentPadding = _ref$contentPadding === void 0 ? "0" : _ref$contentPadding,
49664
49684
  _ref$extraStyles = _ref.extraStyles,
49665
49685
  extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
49666
- props = _objectWithoutProperties(_ref, _excluded$N);
49686
+ props = _objectWithoutProperties(_ref, _excluded$O);
49667
49687
  var _useState = React.useState(((_tabsConfig$tabs$ = tabsConfig.tabs[0]) === null || _tabsConfig$tabs$ === void 0 ? void 0 : _tabsConfig$tabs$.label) || null),
49668
49688
  _useState2 = _slicedToArray(_useState, 2),
49669
49689
  activeTab = _useState2[0],
@@ -49816,7 +49836,7 @@ var Timeout = function Timeout(_ref) {
49816
49836
  };
49817
49837
  var Timeout$1 = withWindowSize(Timeout);
49818
49838
 
49819
- var _excluded$O = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
49839
+ var _excluded$P = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
49820
49840
  var VARIANTS = {
49821
49841
  SUCCESS: "success",
49822
49842
  ERROR: "error"
@@ -49845,7 +49865,7 @@ var ToastNotification = function ToastNotification(_ref) {
49845
49865
  screenReaderMessage = _ref.screenReaderMessage,
49846
49866
  _ref$showScreenReader = _ref.showScreenReaderMessage,
49847
49867
  showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
49848
- rest = _objectWithoutProperties(_ref, _excluded$O);
49868
+ rest = _objectWithoutProperties(_ref, _excluded$P);
49849
49869
  var screenReaderMessageRef = React.useRef();
49850
49870
  var LIVEREGION_TRANSITION_DELAY = 1000;
49851
49871
  React.useEffect(function () {
@@ -50028,7 +50048,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
50028
50048
  return "\n background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n ");
50029
50049
  });
50030
50050
 
50031
- var _excluded$P = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
50051
+ var _excluded$Q = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
50032
50052
  var PopupMenuItem = function PopupMenuItem(_ref) {
50033
50053
  var id = _ref.id,
50034
50054
  closeMenuCallback = _ref.closeMenuCallback,
@@ -50044,7 +50064,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
50044
50064
  hoverStyles = _ref.hoverStyles,
50045
50065
  activeStyles = _ref.activeStyles,
50046
50066
  extraStyles = _ref.extraStyles,
50047
- rest = _objectWithoutProperties(_ref, _excluded$P);
50067
+ rest = _objectWithoutProperties(_ref, _excluded$Q);
50048
50068
  return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
50049
50069
  id: id,
50050
50070
  role: "menuItem",
@@ -50283,7 +50303,7 @@ var ActionLinkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
50283
50303
  });
50284
50304
  });
50285
50305
 
50286
- var _excluded$Q = ["width", "height", "color"];
50306
+ var _excluded$R = ["width", "height", "color"];
50287
50307
  var DropdownIconV2 = function DropdownIconV2(_ref) {
50288
50308
  var _ref$width = _ref.width,
50289
50309
  width = _ref$width === void 0 ? "18" : _ref$width,
@@ -50291,7 +50311,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
50291
50311
  height = _ref$height === void 0 ? "19" : _ref$height,
50292
50312
  _ref$color = _ref.color,
50293
50313
  color = _ref$color === void 0 ? "#292A33" : _ref$color,
50294
- props = _objectWithoutProperties(_ref, _excluded$Q);
50314
+ props = _objectWithoutProperties(_ref, _excluded$R);
50295
50315
  return /*#__PURE__*/React__default.createElement("svg", _extends({
50296
50316
  "aria-hidden": "true",
50297
50317
  width: width,
@@ -50439,7 +50459,7 @@ var SearchBox = function SearchBox(_ref) {
50439
50459
  }));
50440
50460
  };
50441
50461
 
50442
- var _excluded$R = ["width", "height", "color"];
50462
+ var _excluded$S = ["width", "height", "color"];
50443
50463
  var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
50444
50464
  var _ref$width = _ref.width,
50445
50465
  width = _ref$width === void 0 ? "18" : _ref$width,
@@ -50447,7 +50467,7 @@ var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
50447
50467
  height = _ref$height === void 0 ? "18" : _ref$height,
50448
50468
  _ref$color = _ref.color,
50449
50469
  color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
50450
- props = _objectWithoutProperties(_ref, _excluded$R);
50470
+ props = _objectWithoutProperties(_ref, _excluded$S);
50451
50471
  return /*#__PURE__*/React__default.createElement("svg", _extends({
50452
50472
  xmlns: "http://www.w3.org/2000/svg",
50453
50473
  width: width,
@@ -51143,7 +51163,7 @@ var fallbackValues$11 = {
51143
51163
  justifyContent: justifyContent
51144
51164
  };
51145
51165
 
51146
- var _excluded$S = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
51166
+ var _excluded$T = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
51147
51167
  _excluded2$2 = ["theme", "isMobile"],
51148
51168
  _excluded3 = ["theme", "isMobile"],
51149
51169
  _excluded4 = ["theme", "isMobile"];
@@ -51166,7 +51186,7 @@ var HeroContainer = styled__default(function (_ref2) {
51166
51186
  isMobile = _ref2.isMobile,
51167
51187
  theme = _ref2.theme,
51168
51188
  extraStyles = _ref2.extraStyles,
51169
- props = _objectWithoutProperties(_ref2, _excluded$S);
51189
+ props = _objectWithoutProperties(_ref2, _excluded$T);
51170
51190
  return /*#__PURE__*/React__default.createElement(Box, props);
51171
51191
  }).withConfig({
51172
51192
  displayName: "HeroImagestyled__HeroContainer",
@@ -51479,12 +51499,12 @@ var TurnstileWidget = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
51479
51499
  var hoverColor$6 = ROYAL_BLUE;
51480
51500
  var activeColor$b = CONGRESS_BLUE;
51481
51501
  var linkColor$6 = ROYAL_BLUE_VIVID;
51482
- var textColor$6 = CHARADE_GREY;
51502
+ var textColor$5 = CHARADE_GREY;
51483
51503
  var fallbackValues$12 = {
51484
51504
  linkColor: linkColor$6,
51485
51505
  hoverColor: hoverColor$6,
51486
51506
  activeColor: activeColor$b,
51487
- textColor: textColor$6
51507
+ textColor: textColor$5
51488
51508
  };
51489
51509
 
51490
51510
  var TOOLTIP_THEME_SOURCE = "Popover";