@thecb/components 10.7.5-beta.0 → 10.7.5-beta.1

package/dist/index.esm.js

@@ -18760,6 +18760,71 @@ var DisabledPaymentMethodsAddIcon = function DisabledPaymentMethodsAddIcon() {
   })));
 };
 
+var ReversalNeededIcon = function ReversalNeededIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "16",
+    cy: "16",
+    r: "16",
+    fill: "#D11053"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.4167 14.2222H13.5833C13.4453 14.2222 13.3333 14.1103 13.3333 13.9722V11.6667C13.3333 11.1144 13.781 10.6667 14.3333 10.6667H23C23.5523 10.6667 24 11.1144 24 11.6667V20.3333C24 20.8856 23.5523 21.3333 23 21.3333H14.3333C13.781 21.3333 13.3333 20.8856 13.3333 20.3333V18.0278C13.3333 17.8897 13.4453 17.7778 13.5833 17.7778H14.4167C14.5547 17.7778 14.6667 17.8897 14.6667 18.0278V20H22.6667V11.8518H14.6667V13.9722C14.6667 14.1103 14.5547 14.2222 14.4167 14.2222Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.8706 11.4627L5.51011 15.8232C5.41248 15.9209 5.41248 16.0791 5.51011 16.1768L9.8706 20.5373C9.96823 20.6349 10.1265 20.6349 10.2242 20.5373L10.8134 19.948C10.911 19.8504 10.911 19.6921 10.8134 19.5945L7.39573 16.1768C7.2981 16.0791 7.2981 15.9209 7.39573 15.8232L10.8134 12.4055C10.911 12.3079 10.911 12.1496 10.8134 12.052L10.2242 11.4627C10.1265 11.3651 9.96823 11.3651 9.8706 11.4627Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6.66667 15.5833C6.66667 15.4453 6.7786 15.3333 6.91667 15.3333L18.4167 15.3333C18.5547 15.3333 18.6667 15.4453 18.6667 15.5833L18.6667 16.4167C18.6667 16.5547 18.5547 16.6667 18.4167 16.6667L6.91667 16.6667C6.7786 16.6667 6.66667 16.5547 6.66667 16.4167L6.66667 15.5833Z",
+    fill: "white"
+  }));
+};
+
+var OverageIcon = function OverageIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "16",
+    cy: "16",
+    r: "16",
+    transform: "rotate(-180 16 16)",
+    fill: "#D11053"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.6465 7.15426L9.7539 13.0468C9.55864 13.2421 9.55864 13.5587 9.7539 13.7539L10.461 14.461C10.6563 14.6563 10.9728 14.6563 11.1681 14.461L15 10.6291L15 20.6667H11.8333C11.5572 20.6667 11.3333 20.8905 11.3333 21.1667L11.3333 22.1667C11.3333 22.4428 11.5572 22.6667 11.8333 22.6667L20.1667 22.6667C20.4428 22.6667 20.6667 22.4428 20.6667 22.1667V21.1667C20.6667 20.8905 20.4428 20.6667 20.1667 20.6667H17L17 10.6291L20.8319 14.461C21.0272 14.6563 21.3437 14.6563 21.539 14.461L22.2461 13.7539C22.4414 13.5587 22.4414 13.2421 22.2461 13.0468L16.3536 7.15426C16.1583 6.959 15.8417 6.959 15.6465 7.15426Z",
+    fill: "white"
+  }));
+};
+
+var ShortageIcon = function ShortageIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "16",
+    cy: "16",
+    r: "16",
+    fill: "#D11053"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.3333 9.83331C11.3333 9.55717 11.5572 9.33331 11.8333 9.33331H20.1667C20.4428 9.33331 20.6667 9.55717 20.6667 9.83331V10.8333C20.6667 11.1095 20.4428 11.3333 20.1667 11.3333H17V21.3709L20.8319 17.539C21.0272 17.3437 21.3437 17.3437 21.539 17.539L22.2461 18.2461C22.4414 18.4414 22.4414 18.7579 22.2461 18.9532L16.3535 24.8458C16.1583 25.041 15.8417 25.041 15.6464 24.8458L9.75388 18.9532C9.55862 18.7579 9.55862 18.4414 9.75388 18.2461L10.461 17.539C10.6563 17.3437 10.9728 17.3437 11.1681 17.539L15 21.3709V11.3333H11.8333C11.5572 11.3333 11.3333 11.1095 11.3333 10.8333V9.83331Z",
+    fill: "white"
+  }));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -27033,6 +27098,10 @@ var FormInput = function FormInput(_ref15) {
     _useState2 = _slicedToArray(_useState, 2),
     showPassword = _useState2[0],
     setShowPassword = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
   var _useContext = useContext(ThemeContext),
     isMobile = _useContext.isMobile;
   var setValue = function setValue(value) {
@@ -27046,6 +27115,7 @@ var FormInput = function FormInput(_ref15) {
     if (isRequired && value === "") {
       setValue("");
     }
+    setIsFocused(false);
   };
   return /*#__PURE__*/React.createElement(Stack, {
     childGap: "0.25rem"
@@ -27116,6 +27186,15 @@ var FormInput = function FormInput(_ref15) {
     "data-qa": dataQa || labelTextWhenNoError,
     autoComplete: autocompleteValue,
     required: isRequired
+    // Additional handler to detect autofilled values
+  }, autocompleteValue && {
+    onFocus: function onFocus(e) {
+      if (!isFocused) {
+        var _e$target;
+        setValue((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+        setIsFocused(true);
+      }
+    }
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
@@ -39349,7 +39428,7 @@ var ToggleSwitch = function ToggleSwitch(_ref10) {
     isMobile: isMobile
   })))), label && /*#__PURE__*/React.createElement(Box, {
     as: labelAs,
-    extraStyles: "\n                font-weight: ".concat(FONT_WEIGHT_SEMIBOLD, ";\n                color: ").concat(CHARADE_GREY, ";\n                margin: 0 0 0 0.25rem; \n                position: relative; \n                bottom: 1px; display: \n                inline-block; \n                ").concat(labelStyles),
+    extraStyles: "\n                font-weight: ".concat(FONT_WEIGHT_SEMIBOLD, ";\n                color: ").concat(CHARADE_GREY, ";\n                margin: 0 0 0 0.25rem; \n                position: relative; \n                bottom: 1px; \n                display: inline-block; \n                ").concat(labelStyles),
     id: "".concat(nameId, "-label"),
     htmlFor: labelAs === "label" ? nameId : null,
     padding: "0"
@@ -48615,6 +48694,7 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
     },
     isNum: true,
     autocompleteValue: "cc-number",
+    name: "cc-number",
     isRequired: true
   }), /*#__PURE__*/React.createElement(FormInputRow, {
     breakpoint: isMobile ? "1000rem" : "21rem",
@@ -50411,5 +50491,5 @@ var index$6 = /*#__PURE__*/Object.freeze({
   useToastNotification: useToastNotification
 });
 
-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, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, 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$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation$1 as 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, PopupMenu$1 as PopupMenu, 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$1 as 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, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 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, 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, CloseIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisabledAccountsAddIcon, DisabledPaymentMethodsAddIcon, DisabledPropertiesAddIcon, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, EmptyCartIconV2$1 as EmptyCartIconV2, 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$3 as Modal, Module$1 as Module, Motion, MultiCartIcon, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation$1 as Obligation, iconsMap as ObligationIcons, OverageIcon, 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, PopupMenu$1 as PopupMenu, 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$1 as ResetPasswordSuccess, RevenueManagementImage, ReversalNeededIcon, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, ShortageIcon, 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, TrashIconV2$1 as TrashIconV2, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WalletName, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$4 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$5 as hooks, index$6 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map