@thecb/components 9.3.2-beta.1 → 9.3.4-beta.0
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 +153 -52
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.esm.js +153 -53
- package/dist/index.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/.DS_Store +0 -0
- package/src/components/atoms/button-with-action/ButtonWithAction.js +76 -70
- package/src/components/atoms/checkbox/Checkbox.js +8 -1
- package/src/components/atoms/checkbox/Checkbox.stories.js +1 -0
- package/src/components/atoms/country-dropdown/CountryDropdown.js +2 -0
- package/src/components/atoms/dropdown/Dropdown.js +8 -5
- package/src/components/atoms/form-layouts/FormInput.js +3 -0
- package/src/components/atoms/form-select/FormSelect.js +3 -1
- package/src/components/atoms/icons/AccountNumberImage.js +2 -0
- package/src/components/atoms/icons/BankIcon.js +2 -0
- package/src/components/atoms/icons/CheckmarkIcon.js +2 -0
- package/src/components/atoms/icons/GenericCard.js +2 -0
- package/src/components/atoms/icons/GenericCardLarge.js +2 -0
- package/src/components/atoms/icons/KebabMenuIcon.d.ts +1 -0
- package/src/components/atoms/icons/KebabMenuIcon.js +38 -0
- package/src/components/atoms/icons/RoutingNumberImage.js +2 -0
- package/src/components/atoms/icons/TrashIcon.js +42 -40
- package/src/components/atoms/icons/icons.stories.js +3 -1
- package/src/components/atoms/icons/index.d.ts +1 -0
- package/src/components/atoms/icons/index.js +3 -1
- package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js +3 -1
- package/src/components/molecules/address-form/AddressForm.js +5 -0
- package/src/components/molecules/email-form/EmailForm.js +3 -1
- package/src/components/molecules/modal/Modal.js +2 -1
- package/src/components/molecules/payment-form-ach/PaymentFormACH.js +6 -0
- package/src/components/molecules/payment-form-card/PaymentFormCard.js +5 -0
- package/src/components/molecules/phone-form/PhoneForm.js +3 -1
- package/src/components/molecules/popup-menu/PopupMenu.js +152 -0
- package/src/components/molecules/popup-menu/PopupMenu.stories.js +40 -0
- package/src/components/molecules/popup-menu/PopupMenu.styled.js +20 -0
- package/src/components/molecules/popup-menu/PopupMenu.theme.js +11 -0
- package/src/components/molecules/popup-menu/index.d.ts +25 -0
- package/src/components/molecules/popup-menu/index.js +3 -0
- package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.js +79 -0
- package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.styled.js +27 -0
- package/src/components/molecules/popup-menu/popup-menu-item/PopupMenuItem.theme.js +23 -0
- package/src/components/molecules/radio-section/RadioSection.js +9 -2
- package/src/components/molecules/radio-section/RadioSection.stories.js +4 -2
- package/src/components/molecules/radio-section/radio-button/RadioButton.js +3 -1
- package/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js +3 -1
- package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js +4 -0
package/dist/index.d.ts
CHANGED
|
@@ -731,6 +731,8 @@ interface XCircleIconSmallProps {
|
|
|
731
731
|
declare const XCircleIconSmall: React.FC<Expand<XCircleIconSmallProps> &
|
|
732
732
|
React.HTMLAttributes<HTMLElement>>;
|
|
733
733
|
|
|
734
|
+
declare const KebabMenuIcon: JSX.Element;
|
|
735
|
+
|
|
734
736
|
interface BoxProps {
|
|
735
737
|
autocompleteValue?: string;
|
|
736
738
|
padding?: string;
|
|
@@ -1185,5 +1187,5 @@ interface DefaultPageTemplateProps {
|
|
|
1185
1187
|
declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
|
|
1186
1188
|
React.HTMLAttributes<HTMLElement>>;
|
|
1187
1189
|
|
|
1188
|
-
export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ToastVariants, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
|
|
1190
|
+
export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PointOfSaleImage, Popover, PopoverProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ToastVariants, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
|
|
1189
1191
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.esm.js
CHANGED
|
@@ -12918,7 +12918,7 @@ var Spinner = function Spinner(_ref) {
|
|
|
12918
12918
|
*/
|
|
12919
12919
|
|
|
12920
12920
|
|
|
12921
|
-
var ButtonWithAction = function
|
|
12921
|
+
var ButtonWithAction = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
12922
12922
|
var _ref2$action = _ref2.action,
|
|
12923
12923
|
action = _ref2$action === void 0 ? noop : _ref2$action,
|
|
12924
12924
|
_ref2$variant = _ref2.variant,
|
|
@@ -12949,6 +12949,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
|
|
|
12949
12949
|
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 ");
|
|
12950
12950
|
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 ");
|
|
12951
12951
|
return /*#__PURE__*/React.createElement(Box, _extends({
|
|
12952
|
+
ref: ref,
|
|
12952
12953
|
variant: variant,
|
|
12953
12954
|
padding: themeValues.padding,
|
|
12954
12955
|
minHeight: themeValues.height,
|
|
@@ -12977,7 +12978,7 @@ var ButtonWithAction = function ButtonWithAction(_ref2) {
|
|
|
12977
12978
|
textWrap: textWrap,
|
|
12978
12979
|
extraStyles: textExtraStyles
|
|
12979
12980
|
}, text)));
|
|
12980
|
-
};
|
|
12981
|
+
});
|
|
12981
12982
|
|
|
12982
12983
|
var primaryColor = {
|
|
12983
12984
|
info: "".concat(WHITE),
|
|
@@ -13675,7 +13676,9 @@ var AccountNumberImage = function AccountNumberImage() {
|
|
|
13675
13676
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13676
13677
|
width: "371",
|
|
13677
13678
|
height: "164",
|
|
13678
|
-
viewBox: "0 0 371 164"
|
|
13679
|
+
viewBox: "0 0 371 164",
|
|
13680
|
+
role: "img",
|
|
13681
|
+
"aria-label": "A check with the account number highlighted in the bottom center"
|
|
13679
13682
|
}, /*#__PURE__*/React.createElement("g", {
|
|
13680
13683
|
fill: "none",
|
|
13681
13684
|
fillRule: "evenodd",
|
|
@@ -13756,7 +13759,9 @@ var RoutingNumberImage = function RoutingNumberImage() {
|
|
|
13756
13759
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13757
13760
|
width: "371",
|
|
13758
13761
|
height: "164",
|
|
13759
|
-
viewBox: "0 0 371 164"
|
|
13762
|
+
viewBox: "0 0 371 164",
|
|
13763
|
+
role: "img",
|
|
13764
|
+
"aria-label": "A check with the routing number highlighted in the lower left hand corner"
|
|
13760
13765
|
}, /*#__PURE__*/React.createElement("g", {
|
|
13761
13766
|
fill: "none",
|
|
13762
13767
|
fillRule: "evenodd",
|
|
@@ -13839,7 +13844,9 @@ var CheckmarkIcon = function CheckmarkIcon() {
|
|
|
13839
13844
|
viewBox: "0 0 98 98",
|
|
13840
13845
|
version: "1.1",
|
|
13841
13846
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13842
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
13847
|
+
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
13848
|
+
role: "img",
|
|
13849
|
+
"aria-label": "Successful payment, green checkmark"
|
|
13843
13850
|
}, /*#__PURE__*/React.createElement("g", {
|
|
13844
13851
|
id: "Cityville-Checkout---Desktop---Logged-In",
|
|
13845
13852
|
stroke: "none",
|
|
@@ -13884,7 +13891,9 @@ var BankIcon = function BankIcon() {
|
|
|
13884
13891
|
height: "18",
|
|
13885
13892
|
viewBox: "0 0 28 18",
|
|
13886
13893
|
fill: "none",
|
|
13887
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
13894
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
13895
|
+
role: "img",
|
|
13896
|
+
"aria-label": "Check Payment"
|
|
13888
13897
|
}, /*#__PURE__*/React.createElement("path", {
|
|
13889
13898
|
d: "M0 2.25C0 1.00736 1.04467 0 2.33333 0H25.6667C26.9553 0 28 1.00736 28 2.25V15.75C28 16.9926 26.9553 18 25.6667 18H2.33333C1.04467 18 0 16.9926 0 15.75V2.25Z",
|
|
13890
13899
|
fill: "#E4F4FD"
|
|
@@ -13931,7 +13940,9 @@ var GenericCard = function GenericCard() {
|
|
|
13931
13940
|
height: "18",
|
|
13932
13941
|
viewBox: "0 0 28 18",
|
|
13933
13942
|
fill: "none",
|
|
13934
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
13943
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
13944
|
+
role: "img",
|
|
13945
|
+
"aria-label": "Card Payment"
|
|
13935
13946
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
13936
13947
|
width: "28",
|
|
13937
13948
|
height: "18",
|
|
@@ -15190,7 +15201,9 @@ var GenericCardLarge = function GenericCardLarge() {
|
|
|
15190
15201
|
height: "24",
|
|
15191
15202
|
viewBox: "0 0 36 24",
|
|
15192
15203
|
fill: "none",
|
|
15193
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
15204
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
15205
|
+
role: "img",
|
|
15206
|
+
"aria-label": "Card Payment"
|
|
15194
15207
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
15195
15208
|
width: "36",
|
|
15196
15209
|
height: "24",
|
|
@@ -15279,7 +15292,8 @@ var ShoppingCartIcon = function ShoppingCartIcon() {
|
|
|
15279
15292
|
};
|
|
15280
15293
|
|
|
15281
15294
|
var TrashIcon = function TrashIcon(_ref) {
|
|
15282
|
-
var themeValues = _ref.themeValues
|
|
15295
|
+
var themeValues = _ref.themeValues,
|
|
15296
|
+
iconFill = _ref.iconFill;
|
|
15283
15297
|
return /*#__PURE__*/React.createElement("svg", {
|
|
15284
15298
|
width: "20px",
|
|
15285
15299
|
height: "20px",
|
|
@@ -15303,12 +15317,12 @@ var TrashIcon = function TrashIcon(_ref) {
|
|
|
15303
15317
|
xlinkHref: "#trash-path-1"
|
|
15304
15318
|
})), /*#__PURE__*/React.createElement("use", {
|
|
15305
15319
|
id: "trash-Mask",
|
|
15306
|
-
fill: themeValues.singleIconColor,
|
|
15320
|
+
fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
|
|
15307
15321
|
fillRule: "nonzero",
|
|
15308
15322
|
xlinkHref: "#trash-path-1"
|
|
15309
15323
|
}), /*#__PURE__*/React.createElement("polygon", {
|
|
15310
15324
|
id: "trash-Path",
|
|
15311
|
-
fill: themeValues.singleIconColor,
|
|
15325
|
+
fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
|
|
15312
15326
|
fillRule: "nonzero",
|
|
15313
15327
|
mask: "url(#trash-mask-2)",
|
|
15314
15328
|
points: "0 0 20 0 20 20 0 20"
|
|
@@ -18239,6 +18253,34 @@ var PlusCircleIcon = function PlusCircleIcon(_ref) {
|
|
|
18239
18253
|
}));
|
|
18240
18254
|
};
|
|
18241
18255
|
|
|
18256
|
+
var KebabMenuIcon = function KebabMenuIcon() {
|
|
18257
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
18258
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
18259
|
+
width: "21",
|
|
18260
|
+
height: "32",
|
|
18261
|
+
viewBox: "0 0 21 32",
|
|
18262
|
+
fill: "none"
|
|
18263
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
18264
|
+
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",
|
|
18265
|
+
fill: "none"
|
|
18266
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
18267
|
+
fillRule: "evenodd",
|
|
18268
|
+
clipRule: "evenodd",
|
|
18269
|
+
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",
|
|
18270
|
+
fill: "#3B5BDB"
|
|
18271
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
18272
|
+
fillRule: "evenodd",
|
|
18273
|
+
clipRule: "evenodd",
|
|
18274
|
+
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",
|
|
18275
|
+
fill: "#3B5BDB"
|
|
18276
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
18277
|
+
fillRule: "evenodd",
|
|
18278
|
+
clipRule: "evenodd",
|
|
18279
|
+
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",
|
|
18280
|
+
fill: "#3B5BDB"
|
|
18281
|
+
}));
|
|
18282
|
+
};
|
|
18283
|
+
|
|
18242
18284
|
var color$2 = "#15749D";
|
|
18243
18285
|
var hoverColor$1 = "#116285";
|
|
18244
18286
|
var activeColor$1 = "#0E506D";
|
|
@@ -22125,6 +22167,7 @@ var Checkbox = function Checkbox(_ref4) {
|
|
|
22125
22167
|
checkboxMargin = _ref4$checkboxMargin === void 0 ? "0 16px 0 0" : _ref4$checkboxMargin,
|
|
22126
22168
|
extraStyles = _ref4.extraStyles,
|
|
22127
22169
|
textExtraStyles = _ref4.textExtraStyles,
|
|
22170
|
+
labelledById = _ref4.labelledById,
|
|
22128
22171
|
_ref4$dataQa = _ref4.dataQa,
|
|
22129
22172
|
dataQa = _ref4$dataQa === void 0 ? null : _ref4$dataQa;
|
|
22130
22173
|
|
|
@@ -22139,6 +22182,9 @@ var Checkbox = function Checkbox(_ref4) {
|
|
|
22139
22182
|
}
|
|
22140
22183
|
};
|
|
22141
22184
|
|
|
22185
|
+
var titleId = title ? "checkboxlabel-".concat(name) : undefined;
|
|
22186
|
+
var ariaLabelledById = labelledById !== null && labelledById !== void 0 ? labelledById : titleId;
|
|
22187
|
+
var ariaLabel = ariaLabelledById ? undefined : name;
|
|
22142
22188
|
return /*#__PURE__*/React.createElement(Box, {
|
|
22143
22189
|
padding: "0",
|
|
22144
22190
|
tabIndex: "0",
|
|
@@ -22162,7 +22208,8 @@ var Checkbox = function Checkbox(_ref4) {
|
|
|
22162
22208
|
id: "checkbox-".concat(name),
|
|
22163
22209
|
disabled: disabled,
|
|
22164
22210
|
name: name,
|
|
22165
|
-
"aria-label":
|
|
22211
|
+
"aria-label": ariaLabel,
|
|
22212
|
+
"aria-labelledby": ariaLabelledById,
|
|
22166
22213
|
checked: checked,
|
|
22167
22214
|
onChange: onChange,
|
|
22168
22215
|
tabIndex: "-1",
|
|
@@ -22189,6 +22236,7 @@ var Checkbox = function Checkbox(_ref4) {
|
|
|
22189
22236
|
}, /*#__PURE__*/React.createElement("polyline", {
|
|
22190
22237
|
points: "20 6 9 17 4 12"
|
|
22191
22238
|
})))), title && /*#__PURE__*/React.createElement(Text$1, {
|
|
22239
|
+
id: titleId,
|
|
22192
22240
|
variant: "p",
|
|
22193
22241
|
weight: themeValues.textFontWeight,
|
|
22194
22242
|
color: themeValues.textColor,
|
|
@@ -23834,7 +23882,9 @@ var Dropdown = function Dropdown(_ref13) {
|
|
|
23834
23882
|
_ref13$smoothScroll = _ref13.smoothScroll,
|
|
23835
23883
|
smoothScroll = _ref13$smoothScroll === void 0 ? true : _ref13$smoothScroll,
|
|
23836
23884
|
_ref13$ariaInvalid = _ref13.ariaInvalid,
|
|
23837
|
-
ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid
|
|
23885
|
+
ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
|
|
23886
|
+
_ref13$isRequired = _ref13.isRequired,
|
|
23887
|
+
isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
|
|
23838
23888
|
|
|
23839
23889
|
var _useState = useState(""),
|
|
23840
23890
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -24027,11 +24077,13 @@ var Dropdown = function Dropdown(_ref13) {
|
|
|
24027
24077
|
clearTimeout(timer);
|
|
24028
24078
|
setTimer(setTimeout(function () {
|
|
24029
24079
|
return setInputValue("");
|
|
24030
|
-
},
|
|
24080
|
+
}, 20000));
|
|
24031
24081
|
}
|
|
24032
24082
|
|
|
24033
24083
|
setFilteredOptions(options.filter(function (option) {
|
|
24034
|
-
|
|
24084
|
+
var _option$value, _option$value$toLower, _option$text, _option$text$toLowerC;
|
|
24085
|
+
|
|
24086
|
+
return (option === null || option === void 0 ? void 0 : (_option$value = option.value) === null || _option$value === void 0 ? void 0 : (_option$value$toLower = _option$value.toLowerCase()) === null || _option$value$toLower === void 0 ? void 0 : _option$value$toLower.indexOf(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase())) >= 0 || ((_option$text = option.text) === null || _option$text === void 0 ? void 0 : (_option$text$toLowerC = _option$text.toLowerCase()) === null || _option$text$toLowerC === void 0 ? void 0 : _option$text$toLowerC.indexOf(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase())) >= 0;
|
|
24035
24087
|
}));
|
|
24036
24088
|
}, [inputValue]);
|
|
24037
24089
|
useEffect$1(function () {
|
|
@@ -24105,7 +24157,7 @@ var Dropdown = function Dropdown(_ref13) {
|
|
|
24105
24157
|
},
|
|
24106
24158
|
padding: "12px",
|
|
24107
24159
|
placeholder: getSelection(),
|
|
24108
|
-
required: options.required,
|
|
24160
|
+
required: options.required || isRequired,
|
|
24109
24161
|
role: "combobox",
|
|
24110
24162
|
themeValues: themeValues,
|
|
24111
24163
|
title: hasTitles ? getSelection() : null,
|
|
@@ -24273,7 +24325,9 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
24273
24325
|
_ref$dataQa = _ref.dataQa,
|
|
24274
24326
|
dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa,
|
|
24275
24327
|
_ref$widthFitOptions = _ref.widthFitOptions,
|
|
24276
|
-
widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions
|
|
24328
|
+
widthFitOptions = _ref$widthFitOptions === void 0 ? false : _ref$widthFitOptions,
|
|
24329
|
+
_ref$isRequired = _ref.isRequired,
|
|
24330
|
+
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
24277
24331
|
|
|
24278
24332
|
var _useState = useState(false),
|
|
24279
24333
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -24335,7 +24389,8 @@ var FormSelect = function FormSelect(_ref) {
|
|
|
24335
24389
|
},
|
|
24336
24390
|
disabled: disabled,
|
|
24337
24391
|
autocompleteValue: autocompleteValue,
|
|
24338
|
-
smoothScroll: smoothScroll
|
|
24392
|
+
smoothScroll: smoothScroll,
|
|
24393
|
+
isRequired: isRequired
|
|
24339
24394
|
}), /*#__PURE__*/React.createElement(Stack, {
|
|
24340
24395
|
direction: "row",
|
|
24341
24396
|
justify: "space-between"
|
|
@@ -25106,6 +25161,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
|
|
|
25106
25161
|
fieldActions = _ref.fieldActions,
|
|
25107
25162
|
showErrors = _ref.showErrors,
|
|
25108
25163
|
onChange = _ref.onChange,
|
|
25164
|
+
_ref$isRequired = _ref.isRequired,
|
|
25165
|
+
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
|
|
25109
25166
|
_ref$dataQa = _ref.dataQa,
|
|
25110
25167
|
dataQa = _ref$dataQa === void 0 ? null : _ref$dataQa;
|
|
25111
25168
|
return /*#__PURE__*/React.createElement(FormSelect$1, {
|
|
@@ -25117,7 +25174,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
|
|
|
25117
25174
|
errorMessages: errorMessages,
|
|
25118
25175
|
showErrors: showErrors,
|
|
25119
25176
|
onChange: onChange,
|
|
25120
|
-
autocompleteValue: "country-name"
|
|
25177
|
+
autocompleteValue: "country-name",
|
|
25178
|
+
isRequired: isRequired
|
|
25121
25179
|
});
|
|
25122
25180
|
};
|
|
25123
25181
|
|
|
@@ -25964,7 +26022,7 @@ var fallbackValues$k = {
|
|
|
25964
26022
|
};
|
|
25965
26023
|
|
|
25966
26024
|
var _excluded$p = ["showErrors", "themeValues"],
|
|
25967
|
-
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa"];
|
|
26025
|
+
_excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocompleteValue", "extraStyles", "removeFromValue", "dataQa", "isRequired"];
|
|
25968
26026
|
var InputField = styled.input.withConfig({
|
|
25969
26027
|
displayName: "FormInput__InputField",
|
|
25970
26028
|
componentId: "sc-l094r1-0"
|
|
@@ -26051,6 +26109,8 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26051
26109
|
removeFromValue = _ref15.removeFromValue,
|
|
26052
26110
|
_ref15$dataQa = _ref15.dataQa,
|
|
26053
26111
|
dataQa = _ref15$dataQa === void 0 ? null : _ref15$dataQa,
|
|
26112
|
+
_ref15$isRequired = _ref15.isRequired,
|
|
26113
|
+
isRequired = _ref15$isRequired === void 0 ? false : _ref15$isRequired,
|
|
26054
26114
|
props = _objectWithoutProperties(_ref15, _excluded2);
|
|
26055
26115
|
|
|
26056
26116
|
var _useState = useState(false),
|
|
@@ -26137,7 +26197,8 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26137
26197
|
$customHeight: customHeight,
|
|
26138
26198
|
$extraStyles: extraStyles,
|
|
26139
26199
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26140
|
-
autoComplete: autocompleteValue
|
|
26200
|
+
autoComplete: autocompleteValue,
|
|
26201
|
+
required: isRequired
|
|
26141
26202
|
}, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
|
|
26142
26203
|
"aria-labelledby": createIdFromString(labelTextWhenNoError),
|
|
26143
26204
|
"aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
|
|
@@ -26156,7 +26217,8 @@ var FormInput = function FormInput(_ref15) {
|
|
|
26156
26217
|
$customHeight: customHeight,
|
|
26157
26218
|
$extraStyles: extraStyles,
|
|
26158
26219
|
"data-qa": dataQa || labelTextWhenNoError,
|
|
26159
|
-
autoComplete: autocompleteValue
|
|
26220
|
+
autoComplete: autocompleteValue,
|
|
26221
|
+
required: isRequired
|
|
26160
26222
|
}, props))), /*#__PURE__*/React.createElement(Stack, {
|
|
26161
26223
|
direction: "row",
|
|
26162
26224
|
justify: "space-between",
|
|
@@ -27398,7 +27460,9 @@ var RadioButton$1 = function RadioButton(_ref2) {
|
|
|
27398
27460
|
_ref2$ariaLabelledBy = _ref2.ariaLabelledBy,
|
|
27399
27461
|
ariaLabelledBy = _ref2$ariaLabelledBy === void 0 ? "" : _ref2$ariaLabelledBy,
|
|
27400
27462
|
_ref2$ariaLabel = _ref2.ariaLabel,
|
|
27401
|
-
ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel
|
|
27463
|
+
ariaLabel = _ref2$ariaLabel === void 0 ? null : _ref2$ariaLabel,
|
|
27464
|
+
_ref2$isRequired = _ref2.isRequired,
|
|
27465
|
+
isRequired = _ref2$isRequired === void 0 ? false : _ref2$isRequired;
|
|
27402
27466
|
var buttonBorder = {
|
|
27403
27467
|
onFocused: {
|
|
27404
27468
|
borderColor: themeValues.activeColor,
|
|
@@ -27460,7 +27524,8 @@ var RadioButton$1 = function RadioButton(_ref2) {
|
|
|
27460
27524
|
disabled: disabled,
|
|
27461
27525
|
onClick: toggleRadio,
|
|
27462
27526
|
"aria-describedby": ariaDescribedBy,
|
|
27463
|
-
tabIndex: "-1"
|
|
27527
|
+
tabIndex: "-1",
|
|
27528
|
+
required: isRequired
|
|
27464
27529
|
}, extraProps)), /*#__PURE__*/React.createElement(Motion, {
|
|
27465
27530
|
borderWidth: "1px",
|
|
27466
27531
|
borderStyle: "solid",
|
|
@@ -38150,7 +38215,9 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
|
|
|
38150
38215
|
field = _ref.field,
|
|
38151
38216
|
fieldActions = _ref.fieldActions,
|
|
38152
38217
|
showErrors = _ref.showErrors,
|
|
38153
|
-
countryCode = _ref.countryCode
|
|
38218
|
+
countryCode = _ref.countryCode,
|
|
38219
|
+
_ref$isRequired = _ref.isRequired,
|
|
38220
|
+
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
38154
38221
|
var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
|
|
38155
38222
|
var options = [placeholder].concat(_toConsumableArray(getOptions(countryCode)));
|
|
38156
38223
|
return /*#__PURE__*/React.createElement(FormSelect$1, {
|
|
@@ -38160,7 +38227,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
|
|
|
38160
38227
|
labelTextWhenNoError: labelTextWhenNoError,
|
|
38161
38228
|
errorMessages: errorMessages,
|
|
38162
38229
|
showErrors: showErrors,
|
|
38163
|
-
autocompleteValue: "address-level1"
|
|
38230
|
+
autocompleteValue: "address-level1",
|
|
38231
|
+
isRequired: isRequired
|
|
38164
38232
|
});
|
|
38165
38233
|
};
|
|
38166
38234
|
|
|
@@ -39499,7 +39567,8 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39499
39567
|
}
|
|
39500
39568
|
},
|
|
39501
39569
|
showErrors: showErrors,
|
|
39502
|
-
dataQa: "Country"
|
|
39570
|
+
dataQa: "Country",
|
|
39571
|
+
isRequired: true
|
|
39503
39572
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
39504
39573
|
labelTextWhenNoError: "Address",
|
|
39505
39574
|
errorMessages: street1ErrorMessages,
|
|
@@ -39510,7 +39579,8 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39510
39579
|
return e.key === "Enter" && handleSubmit(e);
|
|
39511
39580
|
},
|
|
39512
39581
|
autocompleteValue: "address-line1",
|
|
39513
|
-
dataQa: "Address"
|
|
39582
|
+
dataQa: "Address",
|
|
39583
|
+
isRequired: true
|
|
39514
39584
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
39515
39585
|
labelTextWhenNoError: "Apt, Suite, Unit, Floor, etc. (Optional)",
|
|
39516
39586
|
field: fields.street2,
|
|
@@ -39531,7 +39601,8 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39531
39601
|
return e.key === "Enter" && handleSubmit(e);
|
|
39532
39602
|
},
|
|
39533
39603
|
autocompleteValue: "address-level2",
|
|
39534
|
-
dataQa: "City"
|
|
39604
|
+
dataQa: "City",
|
|
39605
|
+
isRequired: true
|
|
39535
39606
|
}), /*#__PURE__*/React.createElement(FormStateDropdown, {
|
|
39536
39607
|
labelTextWhenNoError: isUS ? "State" : "State or Province",
|
|
39537
39608
|
errorMessages: stateProvinceErrorMessages,
|
|
@@ -39542,7 +39613,8 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39542
39613
|
onKeyDown: function onKeyDown(e) {
|
|
39543
39614
|
return e.key === "Enter" && handleSubmit(e);
|
|
39544
39615
|
},
|
|
39545
|
-
dataQa: "State or Province"
|
|
39616
|
+
dataQa: "State or Province",
|
|
39617
|
+
isRequired: true
|
|
39546
39618
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
39547
39619
|
isNum: isUS,
|
|
39548
39620
|
formatter: isUS ? zipFormat : null,
|
|
@@ -39555,7 +39627,8 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
39555
39627
|
return e.key === "Enter" && handleSubmit(e);
|
|
39556
39628
|
},
|
|
39557
39629
|
autocompleteValue: "postal-code",
|
|
39558
|
-
dataQa: "Zip code"
|
|
39630
|
+
dataQa: "Zip code",
|
|
39631
|
+
isRequired: true
|
|
39559
39632
|
}), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
39560
39633
|
name: "address checkbox",
|
|
39561
39634
|
title: "Save address to wallet",
|
|
@@ -40458,7 +40531,9 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40458
40531
|
handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
|
|
40459
40532
|
showWalletCheckbox = _ref.showWalletCheckbox,
|
|
40460
40533
|
saveToWallet = _ref.saveToWallet,
|
|
40461
|
-
walletCheckboxMarked = _ref.walletCheckboxMarked
|
|
40534
|
+
walletCheckboxMarked = _ref.walletCheckboxMarked,
|
|
40535
|
+
_ref$isRequired = _ref.isRequired,
|
|
40536
|
+
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
40462
40537
|
|
|
40463
40538
|
if (clearOnDismount) {
|
|
40464
40539
|
useEffect$1(function () {
|
|
@@ -40487,7 +40562,8 @@ var EmailForm = function EmailForm(_ref) {
|
|
|
40487
40562
|
},
|
|
40488
40563
|
isEmail: true,
|
|
40489
40564
|
autocompleteValue: "email",
|
|
40490
|
-
dataQa: "Email address"
|
|
40565
|
+
dataQa: "Email address",
|
|
40566
|
+
isRequired: isRequired
|
|
40491
40567
|
}), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
40492
40568
|
name: "email checkbox",
|
|
40493
40569
|
title: "Save email address to wallet",
|
|
@@ -45784,7 +45860,8 @@ var Modal$1 = function Modal(_ref) {
|
|
|
45784
45860
|
alignItems: "center"
|
|
45785
45861
|
},
|
|
45786
45862
|
dialogStyle: {
|
|
45787
|
-
width: customWidth || "615px"
|
|
45863
|
+
width: customWidth || "615px",
|
|
45864
|
+
overflow: "auto"
|
|
45788
45865
|
},
|
|
45789
45866
|
underlayClickExits: underlayClickExits
|
|
45790
45867
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
@@ -47854,6 +47931,8 @@ var TermsAndConditionsControlV1 = function TermsAndConditionsControlV1(_ref) {
|
|
|
47854
47931
|
})))));
|
|
47855
47932
|
};
|
|
47856
47933
|
|
|
47934
|
+
var TermsAndConditionsTitleDivId = "terms-and-conditions-title";
|
|
47935
|
+
|
|
47857
47936
|
var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
|
|
47858
47937
|
var _ref$showCheckbox = _ref.showCheckbox,
|
|
47859
47938
|
showCheckbox = _ref$showCheckbox === void 0 ? true : _ref$showCheckbox,
|
|
@@ -47916,7 +47995,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
|
|
|
47916
47995
|
checked: isChecked,
|
|
47917
47996
|
onChange: onCheck,
|
|
47918
47997
|
checkboxMargin: checkboxMargin,
|
|
47919
|
-
extraStyles: "align-self: flex-start;"
|
|
47998
|
+
extraStyles: "align-self: flex-start;",
|
|
47999
|
+
labelledById: TermsAndConditionsTitleDivId
|
|
47920
48000
|
}), /*#__PURE__*/React.createElement(Stack, {
|
|
47921
48001
|
childGap: "0.25rem",
|
|
47922
48002
|
fullHeight: true
|
|
@@ -47924,7 +48004,8 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
|
|
|
47924
48004
|
justify: "flex-start",
|
|
47925
48005
|
align: "center",
|
|
47926
48006
|
nowrap: true,
|
|
47927
|
-
extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };"
|
|
48007
|
+
extraStyles: "padding-right: 2px; > div > * { margin: 4px 2px; };",
|
|
48008
|
+
id: TermsAndConditionsTitleDivId
|
|
47928
48009
|
}, description && /*#__PURE__*/React.createElement(Text$1, {
|
|
47929
48010
|
color: CHARADE_GREY
|
|
47930
48011
|
}, description), terms && /*#__PURE__*/React.createElement(TermsAndConditionsModal$1, {
|
|
@@ -48022,7 +48103,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48022
48103
|
onKeyDown: function onKeyDown(e) {
|
|
48023
48104
|
return e.key === "Enter" && handleSubmit(e);
|
|
48024
48105
|
},
|
|
48025
|
-
autocompleteValue: "name"
|
|
48106
|
+
autocompleteValue: "name",
|
|
48107
|
+
isRequired: true
|
|
48026
48108
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48027
48109
|
labelTextWhenNoError: "Routing number",
|
|
48028
48110
|
dataQa: "Routing number",
|
|
@@ -48044,7 +48126,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48044
48126
|
},
|
|
48045
48127
|
onKeyDown: function onKeyDown(e) {
|
|
48046
48128
|
return e.key === "Enter" && handleSubmit(e);
|
|
48047
|
-
}
|
|
48129
|
+
},
|
|
48130
|
+
isRequired: true
|
|
48048
48131
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48049
48132
|
labelTextWhenNoError: "Confirm routing number",
|
|
48050
48133
|
dataQa: "Confirm routing number",
|
|
@@ -48055,7 +48138,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48055
48138
|
onKeyDown: function onKeyDown(e) {
|
|
48056
48139
|
return e.key === "Enter" && handleSubmit(e);
|
|
48057
48140
|
},
|
|
48058
|
-
isNum: true
|
|
48141
|
+
isNum: true,
|
|
48142
|
+
isRequired: true
|
|
48059
48143
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48060
48144
|
labelTextWhenNoError: "Account number",
|
|
48061
48145
|
dataQa: "Account number",
|
|
@@ -48077,7 +48161,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48077
48161
|
},
|
|
48078
48162
|
onKeyDown: function onKeyDown(e) {
|
|
48079
48163
|
return e.key === "Enter" && handleSubmit(e);
|
|
48080
|
-
}
|
|
48164
|
+
},
|
|
48165
|
+
isRequired: true
|
|
48081
48166
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48082
48167
|
labelTextWhenNoError: "Confirm account number",
|
|
48083
48168
|
dataQa: "Confirm account number",
|
|
@@ -48088,6 +48173,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48088
48173
|
onKeyDown: function onKeyDown(e) {
|
|
48089
48174
|
return e.key === "Enter" && handleSubmit(e);
|
|
48090
48175
|
},
|
|
48176
|
+
isRequired: true,
|
|
48091
48177
|
isNum: true
|
|
48092
48178
|
}), allowBankAccountType && /*#__PURE__*/React.createElement(FormSelect$1, {
|
|
48093
48179
|
labelTextWhenNoError: "Account type",
|
|
@@ -48105,7 +48191,8 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
|
|
|
48105
48191
|
fieldActions: actions.fields.accountType,
|
|
48106
48192
|
showErrors: showErrors,
|
|
48107
48193
|
errorMessages: accountTypeErrors,
|
|
48108
|
-
field: fields.accountType
|
|
48194
|
+
field: fields.accountType,
|
|
48195
|
+
isRequired: true
|
|
48109
48196
|
}), !hideDefaultPayment && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
48110
48197
|
title: "Save as Default Payment Method",
|
|
48111
48198
|
dataQa: "default-payment-ach",
|
|
@@ -48243,7 +48330,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48243
48330
|
onKeyDown: function onKeyDown(e) {
|
|
48244
48331
|
return e.key === "Enter" && handleSubmit(e);
|
|
48245
48332
|
},
|
|
48246
|
-
autocompleteValue: "cc-name"
|
|
48333
|
+
autocompleteValue: "cc-name",
|
|
48334
|
+
isRequired: true
|
|
48247
48335
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48248
48336
|
labelTextWhenNoError: "Credit card number",
|
|
48249
48337
|
dataQa: "Credit card number",
|
|
@@ -48256,7 +48344,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48256
48344
|
return e.key === "Enter" && handleSubmit(e);
|
|
48257
48345
|
},
|
|
48258
48346
|
isNum: true,
|
|
48259
|
-
autocompleteValue: "cc-number"
|
|
48347
|
+
autocompleteValue: "cc-number",
|
|
48348
|
+
isRequired: true
|
|
48260
48349
|
}), /*#__PURE__*/React.createElement(FormInputRow, {
|
|
48261
48350
|
breakpoint: isMobile ? "1000rem" : "21rem",
|
|
48262
48351
|
childGap: isMobile ? "0rem" : "1rem"
|
|
@@ -48274,7 +48363,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48274
48363
|
isNum: true,
|
|
48275
48364
|
removeFromValue: /\// // removes "/" from browser autofill
|
|
48276
48365
|
,
|
|
48277
|
-
autocompleteValue: "cc-exp"
|
|
48366
|
+
autocompleteValue: "cc-exp",
|
|
48367
|
+
isRequired: true
|
|
48278
48368
|
}), /*#__PURE__*/React.createElement(FormInput$1, {
|
|
48279
48369
|
labelTextWhenNoError: "CVV",
|
|
48280
48370
|
dataQa: "CVV",
|
|
@@ -48287,7 +48377,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48287
48377
|
onKeyDown: function onKeyDown(e) {
|
|
48288
48378
|
return e.key === "Enter" && handleSubmit(e);
|
|
48289
48379
|
},
|
|
48290
|
-
autocompleteValue: "cc-csc"
|
|
48380
|
+
autocompleteValue: "cc-csc",
|
|
48381
|
+
isRequired: true
|
|
48291
48382
|
})), !hideZipCode && /*#__PURE__*/React.createElement(Box, {
|
|
48292
48383
|
padding: isMobile ? "0" : "0 0.5rem 0 0",
|
|
48293
48384
|
width: isMobile ? "100%" : "50%"
|
|
@@ -48303,7 +48394,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
|
|
|
48303
48394
|
onKeyDown: function onKeyDown(e) {
|
|
48304
48395
|
return e.key === "Enter" && handleSubmit(e);
|
|
48305
48396
|
},
|
|
48306
|
-
autocompleteValue: "billing postal-code"
|
|
48397
|
+
autocompleteValue: "billing postal-code",
|
|
48398
|
+
isRequired: true
|
|
48307
48399
|
})), (showWalletCheckbox || showTerms) && /*#__PURE__*/React.createElement(Cluster, {
|
|
48308
48400
|
childGap: "4px",
|
|
48309
48401
|
align: "center"
|
|
@@ -48496,7 +48588,9 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48496
48588
|
handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
|
|
48497
48589
|
showWalletCheckbox = _ref.showWalletCheckbox,
|
|
48498
48590
|
saveToWallet = _ref.saveToWallet,
|
|
48499
|
-
walletCheckboxMarked = _ref.walletCheckboxMarked
|
|
48591
|
+
walletCheckboxMarked = _ref.walletCheckboxMarked,
|
|
48592
|
+
_ref$isRequired = _ref.isRequired,
|
|
48593
|
+
isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired;
|
|
48500
48594
|
|
|
48501
48595
|
if (clearOnDismount) {
|
|
48502
48596
|
useEffect$1(function () {
|
|
@@ -48523,7 +48617,8 @@ var PhoneForm = function PhoneForm(_ref) {
|
|
|
48523
48617
|
},
|
|
48524
48618
|
autocompleteValue: "tel-national",
|
|
48525
48619
|
dataQa: "Phone number",
|
|
48526
|
-
isNum: true
|
|
48620
|
+
isNum: true,
|
|
48621
|
+
isRequired: isRequired
|
|
48527
48622
|
}), showWalletCheckbox && /*#__PURE__*/React.createElement(Checkbox$1, {
|
|
48528
48623
|
name: "phone checkbox",
|
|
48529
48624
|
title: "Save phone number to wallet",
|
|
@@ -48656,7 +48751,9 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48656
48751
|
openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
|
|
48657
48752
|
_ref$containerStyles = _ref.containerStyles,
|
|
48658
48753
|
containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
|
|
48659
|
-
ariaDescribedBy = _ref.ariaDescribedBy
|
|
48754
|
+
ariaDescribedBy = _ref.ariaDescribedBy,
|
|
48755
|
+
_ref$isSectionRequire = _ref.isSectionRequired,
|
|
48756
|
+
isSectionRequired = _ref$isSectionRequire === void 0 ? false : _ref$isSectionRequire;
|
|
48660
48757
|
|
|
48661
48758
|
var handleKeyDown = function handleKeyDown(id, e) {
|
|
48662
48759
|
if ((e === null || e === void 0 ? void 0 : e.keyCode) === 13 || (e === null || e === void 0 ? void 0 : e.keyCode) === 32) {
|
|
@@ -48712,7 +48809,8 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48712
48809
|
extraStyles: containerStyles
|
|
48713
48810
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
48714
48811
|
childGap: "0",
|
|
48715
|
-
role: "radiogroup"
|
|
48812
|
+
"aria-role": "radiogroup",
|
|
48813
|
+
"aria-required": isSectionRequired
|
|
48716
48814
|
}, sections.filter(function (section) {
|
|
48717
48815
|
return !section.hidden;
|
|
48718
48816
|
}).map(function (section) {
|
|
@@ -48734,7 +48832,8 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48734
48832
|
extraStyles: borderStyles,
|
|
48735
48833
|
role: "radio",
|
|
48736
48834
|
"aria-checked": openSection === section.id,
|
|
48737
|
-
"aria-disabled": section.disabled
|
|
48835
|
+
"aria-disabled": section.disabled,
|
|
48836
|
+
"aria-required": section === null || section === void 0 ? void 0 : section.required
|
|
48738
48837
|
}, /*#__PURE__*/React.createElement(Stack, {
|
|
48739
48838
|
childGap: "0"
|
|
48740
48839
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
@@ -48772,7 +48871,8 @@ var RadioSection = function RadioSection(_ref) {
|
|
|
48772
48871
|
toggleRadio: section.disabled ? noop : function () {
|
|
48773
48872
|
return toggleOpenSection(section.id);
|
|
48774
48873
|
},
|
|
48775
|
-
tabIndex: "-1"
|
|
48874
|
+
tabIndex: "-1",
|
|
48875
|
+
isRequired: section === null || section === void 0 ? void 0 : section.required
|
|
48776
48876
|
})), section.titleIcon && /*#__PURE__*/React.createElement(Cluster, {
|
|
48777
48877
|
align: "center"
|
|
48778
48878
|
}, section.titleIcon), /*#__PURE__*/React.createElement(Box, {
|
|
@@ -49740,5 +49840,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
|
|
|
49740
49840
|
useToastNotification: useToastNotification
|
|
49741
49841
|
});
|
|
49742
49842
|
|
|
49743
|
-
export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as hooks, index$6 as util, withWindowSize };
|
|
49843
|
+
export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KebabMenuIcon, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToastNotification, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as hooks, index$6 as util, withWindowSize };
|
|
49744
49844
|
//# sourceMappingURL=index.esm.js.map
|