@thecb/components 10.6.3-beta.2 → 10.6.4-beta.0

package/src/components/molecules/link-card/LinkCard.theme.js

@@ -8,13 +8,27 @@ import {
   TRANSPARENT
 } from "../../../constants/colors";
 
-const disabledBackgroundColor = TRANSPARENT;
-const disabledBorderColor = GHOST_GREY;
-const disabledColor = MANATEE_GREY;
-const activeBackgroundColor = CORNFLOWER_BLUE;
-const backgroundColor = LINK_WATER;
-const borderColor = MOON_RAKER;
-const color = ROYAL_BLUE_VIVID;
+const disabledBackgroundColor = {
+  primary: TRANSPARENT
+};
+const disabledBorderColor = {
+  primary: GHOST_GREY
+};
+const disabledColor = {
+  primary: MANATEE_GREY
+};
+const activeBackgroundColor = {
+  primary: CORNFLOWER_BLUE
+};
+const backgroundColor = {
+  primary: LINK_WATER
+};
+const borderColor = {
+  primary: MOON_RAKER
+};
+const color = {
+  primary: ROYAL_BLUE_VIVID
+};
 
 export const fallbackValues = {
   disabledBackgroundColor,

package/src/components/molecules/modal/Modal.stories.js

@@ -76,7 +76,6 @@ export const modalV2 = () => (
     noButtons={boolean("noButtons", false, groupId)}
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
-    showCloseIconButton={boolean("showCloseIconButton", true, groupId)}
     useDangerButton={boolean("useDangerButton", false, groupId)}
   />
 );

package/src/components/molecules/modal/ModalControlV2.js

@@ -18,7 +18,6 @@ import {
   ButtonLayoutWrapper,
   CancelButton,
   CloseButton,
-  CloseIconButton,
   ContinueButton
 } from "./__private__";
 
@@ -39,12 +38,10 @@ const Modal = ({
   buttonExtraStyles = "",
   cancelAction = noop,
   cancelButtonText = "Cancel",
-  cancelButtonVariant = "secondary",
   children = [],
   closeButtonText = "Close",
   continueAction = noop,
   continueButtonText = "Continue",
-  continueButtonVariant = "primary",
   continueURL = "",
   customWidth = "",
   dataQa = null,
@@ -63,7 +60,6 @@ const Modal = ({
   onExit = hideModal,
   onlyCloseButton = false,
   onlyContinueButton = false,
-  showCloseIconButton = false,
   underlayClickExits = true,
   useDangerButton = false
 }) => {
@@ -112,7 +108,7 @@ const Modal = ({
             borderRadius: BORDER_RADIUS.MD,
             margin: SPACING.XS,
             overflow: "auto",
-            width: isMobile ? "" : customWidth || "576px"
+            width: isMobile ? "" : customWidth || "615px"
           }}
           underlayClickExits={underlayClickExits}
           aria-modal={true}
@@ -126,13 +122,7 @@ const Modal = ({
               borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
               padding={`${SPACING.XS} ${SPACING.MD}`}
             >
-              <Cluster
-                justify={showCloseIconButton ? "space-between" : "flex-start"}
-                align={
-                  showCloseIconButton && isMobile ? "flex-start" : "center"
-                }
-                nowrap
-              >
+              <Cluster justify="flex-start" align="center">
                 <Title
                   as="h2"
                   weight={FONT_WEIGHT_SEMIBOLD}
@@ -140,9 +130,6 @@ const Modal = ({
                 >
                   {modalHeaderText}
                 </Title>
-                {showCloseIconButton && (
-                  <CloseIconButton hideModal={hideModal} />
-                )}
               </Cluster>
             </Box>
             <Box background={modalBodyBg || ATHENS_GREY} padding="0">
@@ -174,7 +161,6 @@ const Modal = ({
                         buttonExtraStyles={buttonExtraStyles}
                         cancelAction={cancelAction}
                         cancelButtonText={cancelButtonText}
-                        cancelButtonVariant={cancelButtonVariant}
                         hideModal={hideModal}
                         isMobile={isMobile}
                         key="cancel"
@@ -186,7 +172,6 @@ const Modal = ({
                         continueAction={continueAction}
                         continueButtonText={continueButtonText}
                         continueURL={continueURL}
-                        continueButtonVariant={continueButtonVariant}
                         isContinueActionDisabled={isContinueActionDisabled}
                         isLoading={isLoading}
                         isMobile={isMobile}

package/src/components/molecules/modal/__private__/CancelButton.js

@@ -10,7 +10,6 @@ export const CancelButton = ({
   buttonExtraStyles = "",
   cancelAction = noop,
   cancelButtonText = "",
-  cancelButtonVariant = "secondary",
   hideModal = noop,
   isMobile = false
 }) => {
@@ -28,7 +27,7 @@ export const CancelButton = ({
       role="button"
       text={cancelButtonText}
       textExtraStyles={`${fontSize}`}
-      variant={cancelButtonVariant}
+      variant="secondary"
     />
   );
 };

package/src/components/molecules/modal/__private__/ContinueButton.js

@@ -12,7 +12,6 @@ export const ContinueButton = ({
   continueAction = noop,
   continueButtonText = "",
   continueURL = "",
-  continueButtonVariant = "primary",
   isContinueActionDisabled = false,
   isLoading = false,
   isMobile = false,
@@ -37,7 +36,7 @@ export const ContinueButton = ({
       text={continueButtonText}
       textExtraStyles={`${fontSize}`}
       url={continueURL}
-      variant={useDangerButton ? "danger" : continueButtonVariant}
+      variant={useDangerButton ? "danger" : "primary"}
     />
   );
 };

package/src/components/molecules/modal/__private__/index.d.ts

@@ -14,7 +14,6 @@ export interface CancelButtonProps {
   buttonExtraStyles?: string;
   cancelAction?: Function;
   cancelButtonText?: string;
-  cancelButtonVariant?: string;
   hideModal?: Function;
   isMobile?: boolean;
 }
@@ -32,23 +31,11 @@ export interface CloseButtonProps {
 export declare const CloseButton: React.FC<Expand<CloseButtonProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export interface CloseIconButtonProps {
-  buttonExtraStyles?: string;
-  hideModal?: action;
-  iconWidth?: string;
-  iconHeight?: string;
-  ariaLabel?: string;
-}
-
-export declare const CloseIconButton: React.FC<Expand<CloseIconButtonProps> &
-  React.HTMLAttributes<HTMLElement>>;
-
 export interface ContinueButtonProps {
   buttonExtraStyles?: string;
   continueAction?: Function;
   continueButtonText?: string;
   continueURL?: string;
-  continueButtonVariant?: string;
   isContinueActionDisabled?: boolean;
   isLoading?: boolean;
   isMobile?: boolean;

package/src/components/molecules/modal/__private__/index.js

@@ -1,5 +1,4 @@
 export { default as ButtonLayoutWrapper } from "./ButtonLayoutWrapper";
 export { default as CancelButton } from "./CancelButton";
 export { default as CloseButton } from "./CloseButton";
-export { default as CloseIconButton } from "./CloseIconButton";
 export { default as ContinueButton } from "./ContinueButton";

package/src/components/molecules/module/Module.js

@@ -28,8 +28,7 @@ const Module = ({
   spacingBottom = "2.5rem",
   fontSize,
   themeValues,
-  children,
-  allowContentOverflow = false
+  children
 }) => {
   const themedFontSize =
     variant === "small"
@@ -65,12 +64,7 @@ const Module = ({
     >
       {heading && !rightTitleContent && headingText}
       {heading && rightTitleContent && (
-        <Cluster
-          justify="space-between"
-          align="center"
-          overflow={allowContentOverflow}
-          nowrap
-        >
+        <Cluster justify="space-between" align="center" nowrap>
           {headingText}
           {rightTitleContent}
         </Cluster>

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -4,11 +4,13 @@ import {
   numberGreaterThanOrEqualTo,
   numberLessThanOrEqualTo
 } from "redux-freeform";
-
-import PartialAmountField from "./PartialAmountField";
 import { displayCurrency } from "../../../util/general";
 import Text from "../../atoms/text";
-import { FormInputColumn, FormContainer } from "../../atoms/form-layouts";
+import {
+  FormInput,
+  FormInputColumn,
+  FormContainer
+} from "../../atoms/form-layouts";
 import { moneyFormat } from "../../../util/formats";
 
 const PartialAmountForm = ({
@@ -66,15 +68,27 @@ const PartialAmountForm = ({
       <div style={{ height: "16px" }}></div>
       <FormInputColumn>
         {lineItemsNew.map(li => (
-          <PartialAmountField
+          <FormInput
+            labelTextWhenNoError={li.description}
             key={li.id}
-            lineItem={li}
             field={fields[li.id]}
-            actions={actions}
-            showErrors={showErrors}
-            moneyFormat={moneyFormat}
             fieldActions={actions.fields[li.id]}
+            showErrors={showErrors}
             errorMessages={getPartialAmountFormErrors(li.amount)}
+            style={{ textAlign: "right" }}
+            placeholder="$0.00"
+            formatter={moneyFormat}
+            isNum
+            decorator={
+              <Text variant="p">
+                Amount owed:{"  "}
+                {
+                  <Text variant="p" weight="600">
+                    {displayCurrency(li.amount)}
+                  </Text>
+                }
+              </Text>
+            }
           />
         ))}
       </FormInputColumn>

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -362,11 +362,9 @@ const PaymentDetails = ({
     <Box width="100%" padding="none">
       <Cluster justify="space-between" align="center">
         <Title
-          weight={FONT_WEIGHT_SEMIBOLD}
+          weight={FONT_WEIGHT_BOLD}
           as="h2"
-          extraStyles={`font-size: 1.5rem; line-height: ${
-            isMobile ? "2.2861rem" : "2.25rem"
-          };`}
+          extraStyles={`font-size: 1.375rem;`}
           id="payment-details-title"
         >
           {titleText}
@@ -384,11 +382,9 @@ const PaymentDetails = ({
     <>
       <Title
         as="h2"
-        weight={FONT_WEIGHT_SEMIBOLD}
+        weight={FONT_WEIGHT_BOLD}
         margin="1rem 0 0 0"
-        extraStyles={`font-size: 1.5rem; line-height: ${
-          isMobile ? "2.2861rem" : "2.25rem"
-        };`}
+        extraStyles={`font-size: 1.75rem;`}
         id="payment-details-title"
       >
         {titleText}

package/src/components/molecules/radio-section/InnerRadioSection.js

@@ -94,17 +94,12 @@ const InnerRadioSection = ({
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
       onClick={
-        (isMobile && supportsTouch) ||
-        section.disabled ||
-        section.id === openSection
+        (isMobile && supportsTouch) || section.disabled
           ? noop
           : () => toggleOpenSection(section.id)
       }
       onTouchEnd={
-        isMobile &&
-        supportsTouch &&
-        !section.disabled &&
-        section.id !== openSection
+        isMobile && supportsTouch && !section.disabled
           ? () => toggleOpenSection(section.id)
           : noop
       }

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -7,8 +7,7 @@ import {
   hasLowercaseLetter,
   hasUppercaseLetter,
   hasSpecialCharacter,
-  isProbablyEmail,
-  validName
+  isProbablyEmail
 } from "redux-freeform";
 import PasswordRequirements from "../../atoms/password-requirements";
 import { Box } from "../../atoms/layouts";
@@ -27,12 +26,10 @@ const RegistrationForm = ({
     useEffect(() => () => actions.form.clear(), []);
   }
   const firstNameErrorMessages = {
-    [required.error]: "First name is required",
-    [validName.error]: "First name contains invalid characters"
+    [required.error]: "First name is required"
   };
   const lastNameErrorMessages = {
-    [required.error]: "Last name is required",
-    [validName.error]: "Last name contains invalid characters"
+    [required.error]: "Last name is required"
   };
   const emailErrorMessages = {
     [required.error]: "Email is required",

package/src/components/molecules/registration-form/RegistrationForm.state.js

@@ -7,16 +7,15 @@ import {
   hasLowercaseLetter,
   hasUppercaseLetter,
   hasSpecialCharacter,
-  isProbablyEmail,
-  validName
+  isProbablyEmail
 } from "redux-freeform";
 
 const formConfig = {
   firstName: {
-    validators: [required(), validName()]
+    validators: [required()]
   },
   lastName: {
-    validators: [required(), validName()]
+    validators: [required()]
   },
   email: {
     validators: [required(), isProbablyEmail()]

package/src/constants/style_constants.js

@@ -8,8 +8,7 @@ export const FONT_SIZE = {
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px
-  LG: "1.125rem", // 18px
-  XL: "1.250rem" //20px
+  LG: "1.125rem" // 18px
 };
 export const FONT_WEIGHT_REGULAR = "400";
 export const FONT_WEIGHT_SEMIBOLD = "600";

package/src/components/atoms/icons/DisabledAccountsAddIcon.js

@@ -1,200 +0,0 @@
-import React from "react";
-
-const DisabledAccountsAddIcon = () => {
-  return (
-    <svg
-      width="100"
-      height="100"
-      viewBox="0 0 100 100"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V84.5326C31.2213 84.5326 55.7247 98.7028 77.0408 78.1002Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M88.0002 51.4983C88.0002 72.4847 70.9876 89.4983 50.0002 89.4983C29.0128 89.4983 12.0002 72.4847 12.0002 51.4983C12.0002 30.5109 29.0128 13.4983 50.0002 13.4983C59.0261 13.4983 67.3177 16.6447 73.8366 21.902C82.475 28.8674 88.0002 39.5368 88.0002 51.4983Z"
-        stroke="#878E9B"
-        strokeWidth="2.59255"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V81.3853"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M23.3362 78.1002V11.6448C23.3362 11.0302 23.8264 10.5324 24.4306 10.5324H68.0622C68.6664 10.5324 69.1556 11.0302 69.1556 11.6448V84.1973C69.1556 84.1973 58.4947 90.719 43.9673 88.1179C32.3336 86.0346 23.3362 78.1002 23.3362 78.1002Z"
-        fill="white"
-      />
-      <path
-        d="M69.156 84.1973V11.6448C69.156 11.0302 68.6658 10.5324 68.0625 10.5324H24.43C23.8258 10.5324 23.3365 11.0302 23.3365 11.6448V78.1002"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M23.3362 19.3115H69.1556"
-        stroke="#878E9B"
-        strokeWidth="1.9285"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M69.156 40.1818H77.041"
-        stroke="#878E9B"
-        strokeWidth="1.9285"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 36.5974H62.672V31.4038H29.82V36.5974Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 36.5974H62.672V31.4038H29.82V36.5974Z"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 45.9207H62.672V40.7271H29.82V45.9207Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 45.9207H62.672V40.7271H29.82V45.9207Z"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M29.8201 26.2602H46.2466"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 63.0901H62.672V57.8964H29.82V63.0901Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 63.0901H62.672V57.8964H29.82V63.0901Z"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 72.4143H62.672V67.2207H29.82V72.4143Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.82 72.4143H62.672V67.2207H29.82V72.4143Z"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z"
-        fill="#878E9B"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M29.8201 52.7535H46.2466"
-        stroke="#878E9B"
-        strokeWidth="2.0653"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M73.8364 21.9017C82.4748 28.8671 88 39.5365 88 51.498C88 72.4844 70.9874 89.498 50 89.498C29.0126 89.498 12 72.4844 12 51.498"
-        stroke="#878E9B"
-        strokeWidth="2.59255"
-        strokeLinejoin="round"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M69.1557 40.1818H77.0407V31.4038H69.1557V40.1818Z"
-        fill="#878E9B"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M23.3363 19.3112H69.1557V10.5323H23.3363V19.3112Z"
-        fill="#878E9B"
-      />
-      <path
-        d="M72.0041 90.1C79.3495 90.1 85.3041 84.1454 85.3041 76.8C85.3041 69.4546 79.3495 63.5 72.0041 63.5C64.6587 63.5 58.7041 69.4546 58.7041 76.8C58.7041 84.1454 64.6587 90.1 72.0041 90.1Z"
-        fill="#878E9B"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z"
-        fill="white"
-      />
-      <mask
-        id="mask0_7610_37196"
-        style={{ maskType: "luminance" }}
-        maskUnits="userSpaceOnUse"
-        x="65"
-        y="69"
-        width="15"
-        height="15"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z"
-          fill="white"
-        />
-      </mask>
-      <g mask="url(#mask0_7610_37196)">
-        <rect x="60.2041" y="64.5" width="24" height="24" fill="white" />
-      </g>
-    </svg>
-  );
-};
-
-export default DisabledAccountsAddIcon;

package/src/components/atoms/icons/DisabledPaymentMethodsAddIcon.js

@@ -1,62 +0,0 @@
-import React from "react";
-
-const DisabledPaymentMethodsAddIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100"
-      height="100"
-      viewBox="0 0 100 100"
-      fill="none"
-    >
-      <mask
-        id="a"
-        x="-1"
-        y="0"
-        maskUnits="userSpaceOnUse"
-        style={{ maskType: "luminance" }}
-      >
-        <path fill="#fff" d="M97.88 0H-1v96h98.88V0Z" />
-      </mask>
-      <g mask="url(#a)">
-        <path
-          fill="#FEFEFE"
-          fillRule="evenodd"
-          d="M91.947 19.2v36.48H48.44v15.6c0 .881-.697 1.603-1.584 1.673l-.141.006H20.402c-1.888-2.755-3.416-5.315-4.649-7.68H40.53v-3.84H14.82v1.972c-6.089-12.75-3.332-19.251-3.332-19.251h13.22V19.2h67.24Z"
-          clipRule="evenodd"
-        />
-        <path
-          fill="#878E9B"
-          d="M48.24 10.56c8.325 0 16.249 2.587 22.793 7.298l.442.323h20.472c.525 0 .958.397 1.013.908l.006.111v36.48c0 .525-.397.958-.908 1.013l-.11.006h-6.48l-.01.039c-4.176 16.497-19.471 28.315-37.217 28.315-21.16 0-38.328-16.668-38.328-37.246 0-11.497 5.358-21.772 13.776-28.603V19.2c0-.525.398-.958.909-1.013l.11-.006h.298c6.447-4.782 14.501-7.621 23.235-7.621Zm34.688 46.139H48.47V71.28c0 1.44-1.138 2.608-2.565 2.693l-.166.005h-21.13c6.31 5.364 14.578 8.617 23.632 8.617 16.42 0 30.585-10.788 34.687-25.897Zm-60.52 15.243h23.331a.683.683 0 0 0 .687-.572l.006-.089V56.64H13.537c1.577 5.84 4.68 11.083 8.87 15.302Zm68.52-51.723-64.542-.001c-.222.165-.442.333-.66.504l.001 22.42H45.74c1.448 0 2.64 1.116 2.726 2.533l.005.165v8.821h42.458V20.217ZM66.324 44.784l.217.134.32.208.834.562 1.937 1.34c.583.396 1.101.73 1.59 1.023 1.5.896 2.662 1.348 3.404 1.298.678-.044 1.166-.132 1.655-.293l.247-.088 2.087-.915.92-.39.337-.138.307-.12c1.758-.675 3.308.021 4.548 1.49.513.608.867 1.21 1.061 1.633a.84.84 0 0 1-1.475.795l-.146-.28-.107-.19a6.45 6.45 0 0 0-.616-.875c-.83-.982-1.703-1.374-2.664-1.005l-.437.174-.766.322-2.46 1.071-.044.018c-.72.265-1.405.406-2.337.467-1.184.079-2.6-.471-4.375-1.533a31.938 31.938 0 0 1-1.315-.834l-2.312-1.594-.823-.554-.362-.233a2.115 2.115 0 0 0-.055-.033c-1.924-1.094-4.566 1.331-6.416 5.012a.84.84 0 0 1-1.5-.754c.083-.166.168-.33.255-.493l.263-.48c.446-.788.925-1.518 1.429-2.168l.305-.38c1.954-2.344 4.255-3.47 6.494-2.197Zm-53.847.326-.03.41a34.227 34.227 0 0 0-.011 4.4l33.996-.001v-4.08c0-.33-.257-.61-.598-.655l-.095-.006H12.843c-.129 0-.252-.024-.366-.068Zm.212-1.957.043-.007.111-.006H23.69V22.442c-5.868 5.346-9.88 12.586-11 20.712ZM84.135 24v1.629c1.346.237 2.494.713 3.488 1.42l-1.884 2.36c-1.243-.793-2.603-1.189-3.806-1.189-.913 0-1.36.327-1.36.775v.034c0 .551.467.792 2.37 1.171 3.106.602 5.049 1.498 5.049 3.753v.034c0 2.027-1.49 3.375-3.858 3.79v1.583h-3.587v-1.605c-1.665-.266-3.197-.879-4.42-1.839l2.096-2.22c1.36.945 2.835 1.446 4.408 1.446 1.03 0 1.573-.312 1.573-.828v-.034c0-.516-.446-.775-2.31-1.17-2.894-.585-5.128-1.31-5.128-3.771v-.034c0-1.875 1.408-3.311 3.781-3.73V24h3.588ZM57.339 36.12a.84.84 0 0 1 .105 1.673l-.105.007H28.664a.84.84 0 0 1-.105-1.673l.105-.007h28.675Zm-11.865-5.76a.84.84 0 0 1 .105 1.673l-.105.007h-16.81a.84.84 0 0 1-.105-1.673l.105-.007h16.81ZM56.35 24.6a.84.84 0 0 1 .106 1.673l-.106.007H43.496a.84.84 0 0 1-.105-1.673l.105-.007H56.35Zm-16.81 0a.84.84 0 0 1 .106 1.673l-.105.007H28.664a.84.84 0 0 1-.105-1.673l.105-.007H39.54Zm8.7-11.583c-6.9 0-13.345 1.89-18.814 5.164h37.63c-5.592-3.349-12.06-5.164-18.815-5.164Z"
-        />
-      </g>
-      <path
-        fill="#878E9B"
-        d="M73.768 86.536c7.052 0 12.768-5.716 12.768-12.768C86.536 66.716 80.82 61 73.768 61 66.716 61 61 66.716 61 73.768c0 7.052 5.716 12.768 12.768 12.768Z"
-      />
-      <path
-        fill="#FEFEFE"
-        d="M79.648 74.608h-5.04v5.04h-1.68v-5.04h-5.04v-1.68h5.04v-5.04h1.68v5.04h5.04v1.68Z"
-      />
-      <mask
-        id="b"
-        width="13"
-        height="13"
-        x="67"
-        y="67"
-        maskUnits="userSpaceOnUse"
-        style={{ maskType: "luminance" }}
-      >
-        <path
-          fill="#fff"
-          d="M79.648 74.608h-5.04v5.04h-1.68v-5.04h-5.04v-1.68h5.04v-5.04h1.68v5.04h5.04v1.68Z"
-        />
-      </mask>
-      <g mask="url(#b)">
-        <path fill="#FEFEFE" d="M83.848 63.688h-20.16v20.16h20.16v-20.16Z" />
-      </g>
-    </svg>
-  );
-};
-
-export default DisabledPaymentMethodsAddIcon;