@thecb/components 6.1.4 → 6.2.1

package/dist/index.esm.js

@@ -14398,6 +14398,42 @@ var ErroredIcon = function ErroredIcon() {
   }))));
 };
 
+var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
+  var linkColor = _ref.linkColor,
+      text = _ref.text;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.86092 1.59483C1.92074 1.56953 1.98651 1.55554 2.05554 1.55554H2.6111H4.94443C5.22057 1.55554 5.44443 1.7794 5.44443 2.05554V2.6111C5.44443 2.88724 5.22057 3.1111 4.94443 3.1111H3.1111V10.8889H10.8889V9.05554C10.8889 8.7794 11.1127 8.55554 11.3889 8.55554H11.9444C12.2206 8.55554 12.4444 8.7794 12.4444 9.05554V11.9444C12.4444 12.2206 12.2206 12.4444 11.9444 12.4444H11.3889C11.3507 12.4444 11.3135 12.4401 11.2778 12.432C11.242 12.4401 11.2048 12.4444 11.1667 12.4444H2.6111H2.05554C1.7794 12.4444 1.55554 12.2206 1.55554 11.9444V11.3889V2.6111V2.05554C1.55554 2.05554 1.55554 2.05554 1.55554 2.05554C1.55554 2.01307 1.56084 1.97183 1.57081 1.93246C1.60944 1.77983 1.71826 1.65517 1.86092 1.59483ZM7.77776 2.05554C7.77776 1.7794 8.00162 1.55554 8.27776 1.55554H11.3889H11.9444C12.2206 1.55554 12.4444 1.7794 12.4444 2.05554V2.6111V5.72221C12.4444 5.99835 12.2206 6.22221 11.9444 6.22221H11.3889C11.1127 6.22221 10.8889 5.99835 10.8889 5.72221V4.26638L6.89793 8.25733C6.70267 8.45259 6.38608 8.45259 6.19082 8.25733L5.79798 7.8645C5.60272 7.66923 5.60272 7.35265 5.79798 7.15739L9.84428 3.1111H8.27776C8.00162 3.1111 7.77776 2.88724 7.77776 2.6111V2.05554Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_902_435-".concat(text),
+    maskUnits: "userSpaceOnUse",
+    x: "1",
+    y: "1",
+    width: "12",
+    height: "12"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.86092 1.59483C1.92074 1.56953 1.98651 1.55554 2.05554 1.55554H2.6111H4.94443C5.22057 1.55554 5.44443 1.7794 5.44443 2.05554V2.6111C5.44443 2.88724 5.22057 3.1111 4.94443 3.1111H3.1111V10.8889H10.8889V9.05554C10.8889 8.7794 11.1127 8.55554 11.3889 8.55554H11.9444C12.2206 8.55554 12.4444 8.7794 12.4444 9.05554V11.9444C12.4444 12.2206 12.2206 12.4444 11.9444 12.4444H11.3889C11.3507 12.4444 11.3135 12.4401 11.2778 12.432C11.242 12.4401 11.2048 12.4444 11.1667 12.4444H2.6111H2.05554C1.7794 12.4444 1.55554 12.2206 1.55554 11.9444V11.3889V2.6111V2.05554C1.55554 2.05554 1.55554 2.05554 1.55554 2.05554C1.55554 2.01307 1.56084 1.97183 1.57081 1.93246C1.60944 1.77983 1.71826 1.65517 1.86092 1.59483ZM7.77776 2.05554C7.77776 1.7794 8.00162 1.55554 8.27776 1.55554H11.3889H11.9444C12.2206 1.55554 12.4444 1.7794 12.4444 2.05554V2.6111V5.72221C12.4444 5.99835 12.2206 6.22221 11.9444 6.22221H11.3889C11.1127 6.22221 10.8889 5.99835 10.8889 5.72221V4.26638L6.89793 8.25733C6.70267 8.45259 6.38608 8.45259 6.19082 8.25733L5.79798 7.8645C5.60272 7.66923 5.60272 7.35265 5.79798 7.15739L9.84428 3.1111H8.27776C8.00162 3.1111 7.77776 2.88724 7.77776 2.6111V2.05554Z",
+    fill: linkColor
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_902_435-".concat(text, ")")
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "-0.0864258",
+    width: "14",
+    height: "14",
+    fill: "#292A33"
+  })));
+};
+
 var FailedIcon = function FailedIcon() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "32px",
@@ -22542,7 +22578,7 @@ var fallbackValues$i = {
 };
 
 var _excluded$p = ["showErrors", "themeValues"],
-    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles"];
+    _excluded2 = ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"];
 var InputField = styled.input.withConfig({
   displayName: "FormInput__InputField",
   componentId: "sc-l094r1-0"
@@ -22626,6 +22662,7 @@ var FormInput = function FormInput(_ref15) {
       customHeight = _ref15.customHeight,
       autocomplete = _ref15.autocomplete,
       extraStyles = _ref15.extraStyles,
+      removeFromValue = _ref15.removeFromValue,
       props = _objectWithoutProperties(_ref15, _excluded2);
 
   var _useState = useState(false),
@@ -22636,6 +22673,14 @@ var FormInput = function FormInput(_ref15) {
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
+  var setValue = function setValue(value) {
+    if (removeFromValue !== undefined) {
+      return fieldActions.set(value.replace(removeFromValue, ""));
+    }
+
+    return fieldActions.set(value);
+  };
+
   return /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem"
   }, /*#__PURE__*/React.createElement(Box, {
@@ -22689,8 +22734,8 @@ var FormInput = function FormInput(_ref15) {
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
-    onChange: function onChange(e) {
-      return fieldActions.set(e);
+    onChange: function onChange(value) {
+      return setValue(value);
     },
     type: type,
     value: field.rawValue,
@@ -22709,7 +22754,7 @@ var FormInput = function FormInput(_ref15) {
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
     "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
     onChange: function onChange(e) {
-      return fieldActions.set(e.target.value);
+      return setValue(e.target.value);
     },
     type: type === "password" && showPassword ? "text" : type,
     value: field.rawValue,
@@ -34722,6 +34767,24 @@ const ONLY_NATURALS_ERROR = "error/ONLY_NATURALS";
 const onlyNaturals = createValidator(ONLY_NATURALS, ONLY_NATURALS_ERROR);
 validatorFns[ONLY_NATURALS] = (value, args, form) => /^(\d+)?$/.test(value);
 
+/* 
+07/22: experimental expiration date constraint
+should allow entry of expiration date using "/" character
+to accommodate browser autofill
+
+not tested as validation function
+to validate exp date instead use combo of:
+required(), hasLength(), isValidMonth(), dateAfterToday()
+*/
+const ONLY_EXPIRATION_DATE = "validator/ONLY_EXPIRATION_DATE";
+const ONLY_EXPIRATION_DATE_ERROR = "error/ONLY_EXPIRATION_DATE";
+const onlyExpirationDate = createValidator(
+  ONLY_EXPIRATION_DATE,
+  ONLY_EXPIRATION_DATE_ERROR
+);
+validatorFns[ONLY_EXPIRATION_DATE] = (value, args, form) =>
+  /^(\d?\d?\/?\d?\d?)?$/.test(value);
+
 const NUMBER_LESS_THAN = "validator/NUMBER_LESS_THAN";
 const NUMBER_LESS_THAN_ERROR = "error/NUMBER_LESS_THAN";
 const numberLessThan = createValidator(
@@ -42239,6 +42302,8 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     isNum: true,
+    removeFromValue: /\// // removes "/" from browser autofill
+    ,
     autocomplete: "cc-exp"
   }), /*#__PURE__*/React.createElement(FormInput$1, {
     labelTextWhenNoError: "CVV",
@@ -42291,7 +42356,7 @@ var formConfig$8 = {
   },
   expirationDate: {
     validators: [required(), hasLength(4, 4), isValidMonth(0), dateAfterToday("MMYY", "month", true)],
-    constraints: [onlyIntegers(), hasLength(0, 4)]
+    constraints: [onlyExpirationDate(), hasLength(0, 4)]
   },
   cvv: {
     validators: [required(), hasLength(3, 4)],
@@ -43719,5 +43784,5 @@ var index$5 = /*#__PURE__*/Object.freeze({
   useFocusInvalidInput: useFocusInvalidInput
 });
 
-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, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, 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, FailedIcon, 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, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, 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, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
+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, AutopayOnIcon, BankIcon, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackReversalIcon, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, 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, 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, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, Loading, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, 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, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, Switcher, TabSidebar$1 as TabSidebar, TableListItem, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$4 as constants, createPartialAmountFormState, index$5 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map