@thecb/components 11.8.1 → 11.10.0-beta.0

package/dist/index.cjs.js

@@ -19020,6 +19020,238 @@ var WireSmallIcon = function WireSmallIcon() {
   }));
 };
 
+var VisaLargeIcon = function VisaLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Visa"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M34.858 24H1.14296C0.511437 24 0 23.4738 0 22.8252V1.17485C0 0.5262 0.511437 0 1.14296 0H34.858C35.4897 0 36 0.5262 36 1.17485V22.8252C36 23.4738 35.4897 24 34.858 24Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip0_visa_large)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15.1125 7.63715L11.9703 15.1338H9.92036L8.37411 9.15114C8.28024 8.78265 8.19861 8.64765 7.91312 8.4924C7.44699 8.23952 6.67725 7.99227 6 7.85502L6.04601 7.63715H9.34586C9.71649 7.63715 10.0446 7.91715 10.1401 8.40152L10.9567 12.7395L13.0749 7.63702H15.1125V7.63715ZM23.1447 12.6864C23.153 10.7078 20.4087 10.5988 20.4276 9.71489C20.4335 9.44589 20.6895 9.15989 21.2502 9.08689C21.528 9.05052 22.2936 9.02277 23.162 9.42239L23.5026 7.83266C23.0361 7.66328 22.4357 7.50027 21.6887 7.50027C19.7718 7.50027 18.4229 8.51927 18.4115 9.97839C18.399 11.0576 19.3743 11.6599 20.109 12.0185C20.8649 12.3858 21.1185 12.6218 21.1157 12.9503C21.1103 13.4531 20.5128 13.6751 19.9545 13.6839C18.9797 13.6989 18.414 13.4201 17.9633 13.2105L17.6117 14.8529C17.9648 15.0608 18.9012 15.2421 19.7684 15.2513C21.8057 15.2513 23.1384 14.2449 23.1447 12.6864ZM28.2065 15.134H30L28.4345 7.63715H26.779C26.4066 7.63715 26.0927 7.85389 25.9536 8.18715L23.0436 15.1338H25.0799L25.4841 14.0141H27.9723L28.2065 15.1338V15.134ZM26.0426 12.4778L27.0633 9.66302L27.6507 12.4778H26.0426ZM17.8833 7.63715L16.2797 15.1338H14.3405L15.9447 7.63715H17.8833Z",
+    fill: "#1434CB"
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip0_visa_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "24",
+    height: "7.75097",
+    fill: "white",
+    transform: "translate(6 7.5)"
+  }))));
+};
+
+var AmExLargeIcon = function AmExLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "American Express"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip0_amex_large)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip1_amex_large)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M32.868 21.376L31.204 19.52L29.4761 21.376H26.084H18.788V12.736H15.396L19.62 3.072H23.7161L25.188 6.4V3.072H30.3079L31.204 5.568L32.1 3.072H36.004V1.6C36.004 0.704 35.2999 0 34.404 0H0.0999999C-0.795999 0 -1.5 0.704 -1.5 1.6V22.4C-1.5 23.296 -0.795999 24 0.0999999 24H34.404C35.2999 24 36.004 23.296 36.004 22.4V21.376H32.868Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M33.3161 20.352H36.004L32.484 16.576L36.004 12.864H33.38L31.14 15.296L28.9639 12.864H26.2759L29.86 16.64L26.2759 20.352H28.9L31.14 17.92L33.3161 20.352Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M21.9878 18.624V17.472H26.2118V15.744H21.9878V14.592H26.2759V12.864H19.9398V20.352H26.2759V18.624H21.9878Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M34.02 11.776H35.94V4.224L32.868 4.288L31.204 8.96L29.4761 4.288H26.2759V11.776H28.3241V6.528L30.244 11.776H32.036L34.02 6.528V11.776Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.012 4.28796H20.388L17.06 11.776H19.2999L19.94 10.304H23.396L24.036 11.776H26.34L23.012 4.28796ZM20.6439 8.57596L21.6679 6.14396L22.692 8.57596H20.6439Z",
+    fill: "#0071CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M34.148 16.3839L36.004 18.432V14.3359L34.148 16.3839Z",
+    fill: "#0071CE"
+  }))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip0_amex_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    rx: "1.5",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip1_amex_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    fill: "white"
+  }))));
+};
+
+var DiscoverLargeIcon = function DiscoverLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Discover"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#clip0_discover_large)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M34.8144 0H1.18564C0.529586 0 0 0.552009 0 1.23584V22.7642C0 23.448 0.529586 24 1.18564 24H34.8144C35.4704 24 36 23.448 36 22.7642V1.23584C36 0.552009 35.4704 0 34.8144 0ZM34.2294 12C34.2294 18.3975 29.2538 23.5881 23.1122 23.5881H1.18564C1.13031 23.5881 1.07893 23.5839 1.02756 23.5716C0.976178 23.5592 0.9248 23.5428 0.877374 23.5221C0.810188 23.4933 0.746954 23.448 0.691623 23.3985C0.652103 23.3657 0.616533 23.3286 0.584916 23.2874C0.470304 23.1432 0.395214 22.9619 0.395214 22.7601V1.23584C0.395214 1.06694 0.446592 0.906282 0.529586 0.774459C0.557252 0.729146 0.588869 0.687951 0.624438 0.650876C0.695576 0.576725 0.782523 0.514934 0.877374 0.47274C0.9248 0.453141 0.976178 0.436664 1.02756 0.424305C1.07893 0.411947 1.13031 0.407828 1.18564 0.407828H23.1122C29.2497 0.407828 34.2294 5.59424 34.2294 11.9959V12Z",
+    fill: "url(#paint0_linear_discover_large)"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.06678 9.25305H1.66773V13.928H3.06284C3.80189 13.928 4.33937 13.7618 4.80968 13.388C5.36693 12.9462 5.69891 12.2816 5.69891 11.5943C5.69891 10.2160 4.61997 9.25305 3.07074 9.25305H3.06678ZM4.18128 12.7649C3.88092 13.0217 3.49361 13.1350 2.87708 13.1350H2.62019V10.0423H2.87708C3.49361 10.0423 3.86907 10.1480 4.18128 10.4199C4.51326 10.6993 4.71087 11.1373 4.71087 11.583C4.71087 12.0286 4.51326 12.4817 4.18128 12.7612V12.7649Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.08614 9.25305H6.13367V13.928H7.08614V9.25305Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M9.42188 11.0467C8.84882 10.8428 8.68283 10.7106 8.68283 10.4576C8.68283 10.1631 8.98319 9.94031 9.39413 9.94031C9.67875 9.94031 9.91589 10.0536 10.1649 10.318L10.6628 9.69486C10.2518 9.35123 9.76175 9.17725 9.22427 9.17725C8.35875 9.17725 7.69874 9.75150 7.69874 10.518C7.69874 11.1638 8.00700 11.4923 8.90415 11.7982C9.27567 11.9228 9.46929 12.0097 9.56415 12.0625C9.75386 12.1796 9.84870 12.3495 9.84870 12.5459C9.84870 12.9235 9.53253 13.2068 9.10578 13.2068C8.65113 13.2068 8.28366 12.9877 8.06241 12.5836L7.44586 13.1501C7.88445 13.7656 8.41407 14.0412 9.14119 14.0412C10.1331 14.0412 10.8286 13.4106 10.8286 12.5081C10.8286 11.7642 10.5087 11.4281 9.42188 11.1005V11.0467Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.1291 11.5943C11.1291 12.9688 12.2595 14.0336 13.7099 14.0336C14.1209 14.0336 14.4727 13.9581 14.9073 13.7618V12.6893C14.524 13.0556 14.1881 13.2029 13.7534 13.2029C12.7932 13.2029 12.1093 12.5383 12.1093 11.5905C12.1093 10.6917 12.8128 10.0056 13.7099 10.0056C14.1644 10.0056 14.5082 10.1604 14.9073 10.5105V9.43804C14.4885 9.23414 14.1446 9.15106 13.7336 9.15106C12.2871 9.15106 11.1291 10.2386 11.1291 11.598V11.5943Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M22.4756 12.3911L21.1674 9.25305H20.1281L22.2029 14.045H22.7167L24.8312 9.25305H23.7957L22.4756 12.3911Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M25.262 13.928H27.9692V13.1350H26.2145V11.8737H27.902V11.0808H26.2145V10.0461H27.9692V9.25305H25.262V13.928Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M31.7474 10.6314C31.7474 9.75528 31.1150 9.25305 29.9164 9.25305H28.6014V13.928H29.5539V12.0512H29.6804L31.0004 13.928H32.1742L30.6329 11.9568C31.3519 11.8171 31.7474 11.3488 31.7474 10.6314ZM29.8346 11.4016H29.5539V9.98564H29.8464C30.4393 9.98564 30.7633 10.2236 30.7633 10.6805C30.7633 11.1374 30.4393 11.4016 29.8305 11.4016H29.8346Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M32.5062 9.49845C32.5062 9.41537 32.4469 9.37005 32.3442 9.37005H32.2059V9.78167H32.3087V9.62317L32.4312 9.78167H32.5577L32.4153 9.61173C32.4746 9.59663 32.5103 9.55509 32.5103 9.49845H32.5062ZM32.3244 9.55509H32.3087V9.44558H32.3285C32.3798 9.44558 32.4075 9.46446 32.4075 9.49845C32.4075 9.53244 32.3798 9.55509 32.3285 9.55509H32.3244Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M32.364 9.21524C32.1545 9.21524 31.9886 9.37385 31.9886 9.57398C31.9886 9.77412 32.1585 9.93272 32.364 9.93272C32.5695 9.93272 32.7355 9.77034 32.7355 9.57398C32.7355 9.37762 32.5695 9.21524 32.364 9.21524ZM32.364 9.86852C32.198 9.86852 32.0636 9.73635 32.0636 9.57398C32.0636 9.41160 32.198 9.27944 32.364 9.27944C32.5299 9.27944 32.6604 9.41538 32.6604 9.57398C32.6604 9.73258 32.526 9.86852 32.364 9.86852Z",
+    fill: "#261F20"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    filter: "url(#filter0_i_discover_large)"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "17.7501",
+    cy: "11.6276",
+    r: "2.64908",
+    fill: "url(#paint1_linear_discover_large)"
+  }))), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+    id: "filter0_i_discover_large",
+    x: "15.1011",
+    y: "8.9785",
+    width: "5.68815",
+    height: "5.68815",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    "in": "SourceGraphic",
+    in2: "BackgroundImageFix",
+    result: "shape"
+  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
+    "in": "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React__default.createElement("feMorphology", {
+    radius: "0.015",
+    operator: "erode",
+    "in": "SourceAlpha",
+    result: "effect1_innerShadow_discover_large"
+  }), /*#__PURE__*/React__default.createElement("feOffset", {
+    dx: "0.75",
+    dy: "0.75"
+  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
+    stdDeviation: "0.1875"
+  }), /*#__PURE__*/React__default.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "arithmetic",
+    k2: "-1",
+    k3: "1"
+  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+  }), /*#__PURE__*/React__default.createElement("feBlend", {
+    mode: "normal",
+    in2: "shape",
+    result: "effect1_innerShadow_discover_large"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: "paint0_linear_discover_large",
+    x1: "47.9987",
+    y1: "66.2864",
+    x2: "5.22557",
+    y2: "-4.9576",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#F9A020"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "0.5",
+    stopColor: "#F9A020"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#DF5026"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: "paint1_linear_discover_large",
+    x1: "19.8984",
+    y1: "13.2793",
+    x2: "15.9843",
+    y2: "9.62301",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#EA953E"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#D44B33"
+  })), /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "clip0_discover_large"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    fill: "white"
+  }))));
+};
+
+var MasterCardLargeIcon = function MasterCardLargeIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "36",
+    height: "24",
+    viewBox: "0 0 36 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img",
+    "aria-label": "Mastercard"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "36",
+    height: "24",
+    rx: "1.5",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M21.7104 5.06982H14.2698V18.4409H21.7104V5.06982Z",
+    fill: "#FF5F00"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M14.7422 11.7553C14.7410 10.4676 14.9329 9.19649 15.5955 8.03822C16.2583 6.87993 17.1270 5.86487 18.0001 5.06984C16.7357 4.08381 15.2291 3.47061 13.6426 3.30033C12.0561 3.13007 10.4538 3.40956 9.01863 4.10691C7.58351 4.80426 6.37353 5.89133 5.52701 7.24383C4.6805 8.59635 4.23156 10.1597 4.23156 11.7553C4.23156 13.3509 4.6805 14.9143 5.52701 16.2668C6.37353 17.6193 7.58351 18.7064 9.01863 19.4037C10.4538 20.1011 12.0561 20.3806 13.6426 20.2103C15.2291 20.0400 16.7357 19.4268 18.0001 18.4408C17.1272 17.6457 16.2583 16.6307 15.5955 15.4724C14.9329 14.3141 14.7410 13.043 14.7422 11.7553Z",
+    fill: "#EB001B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M31.7483 11.7553C31.7483 13.3509 31.2994 14.9143 30.4529 16.2668C29.6064 17.6193 28.3965 18.7064 26.9614 19.4037C25.5263 20.1011 23.924 20.3805 22.3376 20.2103C20.751 20.04 19.2446 19.4268 17.9801 18.4408C18.8522 17.6450 19.5204 16.6298 19.9831 15.4716C20.4456 14.3136 20.7379 13.0428 20.7379 11.7553C20.7379 10.4678 20.4456 9.19709 19.9831 8.03899C19.5204 6.88091 18.8522 5.86566 17.9801 5.06984C19.2446 4.08381 20.751 3.47061 22.3376 3.30033C23.924 3.13006 25.5263 3.40958 26.9614 4.10694C28.3965 4.80429 29.6064 5.89136 30.4529 7.24386C31.2994 8.59638 31.7483 10.1598 31.7483 11.7553Z",
+    fill: "#F79E1B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M30.9371 17.0246V16.7508H31.0475V16.6952H30.7664V16.7508H30.8768V17.0246H30.9371ZM31.4828 17.0246V16.6946H31.3967L31.2977 16.9215L31.1984 16.6946H31.1121V17.0246H31.173V16.7757L31.266 16.9904H31.329L31.422 16.7751V17.0246H31.4828Z",
+    fill: "#F79E1B"
+  }));
+};
+
 var color$3 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -26106,6 +26338,46 @@ var FormattedBankAccount = function FormattedBankAccount(_ref2) {
 };
 var FormattedBankAccount$1 = themeComponent(FormattedBankAccount, "FormattedBankAccount", fallbackValues$o);
 
+var cardBrands = {
+  visa: {
+    label: "Visa",
+    small: VisaSmallIcon,
+    large: VisaLargeIcon
+  },
+  master_card: {
+    label: "Mastercard",
+    small: MasterCardSmallIcon,
+    large: MasterCardLargeIcon
+  },
+  discover: {
+    label: "Discover",
+    small: DiscoverSmallIcon,
+    large: DiscoverLargeIcon
+  },
+  amex: {
+    label: "American Express",
+    small: AmExSmallIcon,
+    large: AmExLargeIcon
+  },
+  "default": {
+    label: "Credit card",
+    small: GenericSmallIcon,
+    large: GenericCardLarge
+  }
+};
+var CardType = function CardType(_ref) {
+  var type = _ref.type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "small" : _ref$size;
+  var _ref2 = cardBrands[type] || cardBrands["default"],
+    label = _ref2.label,
+    IconComponent = _ref2[size];
+  return /*#__PURE__*/React__default.createElement("span", {
+    role: "img",
+    "aria-label": label
+  }, /*#__PURE__*/React__default.createElement(IconComponent, null));
+};
+
 var textColor$2 = "".concat(CHARADE_GREY);
 var autopayTextColor$1 = "".concat(REGENT_GREY);
 var fallbackValues$p = {
@@ -26180,11 +26452,14 @@ var CCIconWrapper = styled__default.div.withConfig({
 })(["margin-right:16px;width:30px;height:auto;display:flex;"]);
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
+    type = _ref.type,
     autoPay = _ref.autoPay,
     expireDate = _ref.expireDate,
     expirationStatus = _ref.expirationStatus,
     themeValues = _ref.themeValues;
-  return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(GenericCard, null)), /*#__PURE__*/React__default.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(CardType, {
+    type: type
+  })), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
@@ -51329,8 +51604,163 @@ var Tooltip = function Tooltip(_ref) {
   })));
 };
 
-var pageBackground = "#FBFCFD";
+var TOOLTIP_V2_THEME_SOURCE = "Popover";
+var hoverColor$6 = SAPPHIRE_BLUE;
+var activeColor$b = PEACOCK_BLUE;
+var tooltipTriggerColor = MATISSE_BLUE;
+var borderColor$7 = "rgba(255, 255, 255, 0.85)";
 var fallbackValues$13 = {
+  hoverColor: hoverColor$6,
+  activeColor: activeColor$b,
+  tooltipTriggerColor: tooltipTriggerColor,
+  borderColor: borderColor$7
+};
+
+var TooltipV2 = function TooltipV2(_ref) {
+  var children = _ref.children,
+    _ref$content = _ref.content,
+    content = _ref$content === void 0 ? "" : _ref$content,
+    tooltipID = _ref.tooltipID,
+    _ref$triggerText = _ref.triggerText,
+    triggerText = _ref$triggerText === void 0 ? "" : _ref$triggerText,
+    _ref$contentPosition = _ref.contentPosition,
+    contentPosition = _ref$contentPosition === void 0 ? {
+      top: "-110px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    } : _ref$contentPosition,
+    _ref$arrowDirection = _ref.arrowDirection,
+    arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
+    _ref$arrowPosition = _ref.arrowPosition,
+    arrowPosition = _ref$arrowPosition === void 0 ? {
+      arrowTop: "auto",
+      arrowRight: "10px",
+      arrowBottom: "-8px",
+      arrowLeft: "auto"
+    } : _ref$arrowPosition,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "250px" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "100%" : _ref$maxWidth,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "auto" : _ref$height,
+    _ref$containerExtraSt = _ref.containerExtraStyles,
+    containerExtraStyles = _ref$containerExtraSt === void 0 ? "" : _ref$containerExtraSt,
+    _ref$contentExtraStyl = _ref.contentExtraStyles,
+    contentExtraStyles = _ref$contentExtraStyl === void 0 ? "" : _ref$contentExtraStyl,
+    _ref$contentBackgroun = _ref.contentBackgroundColor,
+    contentBackgroundColor = _ref$contentBackgroun === void 0 ? WHITE : _ref$contentBackgroun,
+    _ref$triggerVariant = _ref.triggerVariant,
+    triggerVariant = _ref$triggerVariant === void 0 ? "smallGhost" : _ref$triggerVariant;
+  var closeTimeoutRef = React.useRef(null);
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipOpen = _useState2[0],
+    setTooltipOpen = _useState2[1];
+  var themeContext = React.useContext(styled.ThemeContext);
+  var themeValues = createThemeValues(themeContext, fallbackValues$13, TOOLTIP_V2_THEME_SOURCE);
+  var arrowColor = themeValues.borderColor,
+    tooltipTriggerColor = themeValues.tooltipTriggerColor,
+    hoverColor = themeValues.hoverColor,
+    activeColor = themeValues.activeColor;
+  var top = contentPosition.top,
+    right = contentPosition.right,
+    bottom = contentPosition.bottom,
+    left = contentPosition.left;
+  var arrowTop = arrowPosition.arrowTop,
+    arrowRight = arrowPosition.arrowRight,
+    arrowBottom = arrowPosition.arrowBottom,
+    arrowLeft = arrowPosition.arrowLeft;
+  var handleToggleTooltip = function handleToggleTooltip(desiredState) {
+    if (tooltipOpen !== desiredState) {
+      setTooltipOpen(desiredState);
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      handleToggleTooltip(false);
+    }
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    handleToggleTooltip(true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    closeTimeoutRef.current = setTimeout(function () {
+      handleToggleTooltip(false);
+    }, 300);
+  };
+  React.useEffect(function () {
+    return function () {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+  var renderTrigger = function renderTrigger() {
+    if (children) {
+      return /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
+        "aria-describedby": tooltipID,
+        onFocus: function onFocus() {
+          return handleToggleTooltip(true);
+        },
+        onBlur: function onBlur() {
+          return handleToggleTooltip(false);
+        },
+        onKeyDown: handleKeyDown
+      });
+    }
+    return /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+      action: function action() {
+        return noop$1;
+      },
+      "aria-describedby": tooltipID,
+      onKeyDown: handleKeyDown,
+      variant: triggerVariant,
+      onFocus: function onFocus() {
+        return handleToggleTooltip(true);
+      },
+      onBlur: function onBlur() {
+        return handleToggleTooltip(false);
+      },
+      onTouchStart: function onTouchStart() {
+        return handleToggleTooltip(true);
+      },
+      "data-qa": "tooltip-v2-trigger",
+      text: triggerText,
+      extraStyles: "\n          color: ".concat(tooltipTriggerColor, ";\n          &:hover { color: ").concat(hoverColor, "; text-decoration: none;}\n          &:active, &:focus { color: ").concat(activeColor, "; text-decoration: none;}\n          button, span, &:hover span { text-decoration: none; }\n        ")
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative; ".concat(containerExtraStyles),
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    "data-qa": "tooltip-v2-container"
+  }, renderTrigger(), /*#__PURE__*/React__default.createElement(Box, {
+    role: "tooltip",
+    id: tooltipID,
+    "aria-hidden": !tooltipOpen,
+    background: contentBackgroundColor,
+    "data-qa": "tooltip-v2-contents",
+    extraStyles: "\n          position: absolute;\n          display: ".concat(tooltipOpen ? "block" : "none", ";\n          top: ").concat(top, ";\n          right: ").concat(right, ";\n          bottom: ").concat(bottom, ";\n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          ").concat(contentExtraStyles, "\n        "),
+    boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
+    border: "1px solid transparent",
+    borderRadius: "4px",
+    minWidth: minWidth,
+    maxWidth: maxWidth
+  }, typeof content === "string" ? /*#__PURE__*/React__default.createElement(Text$1, null, content) : content, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+  })));
+};
+
+var pageBackground = "#FBFCFD";
+var fallbackValues$14 = {
   pageBackground: pageBackground
 };
 
@@ -51378,7 +51808,7 @@ var CenterSingle = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$13));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$14));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -51421,7 +51851,7 @@ var CenterStack = function CenterStack(_ref) {
     padding: "0"
   })));
 };
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$13));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$14));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -51467,7 +51897,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
     padding: "0"
   })));
 };
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$13));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$14));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -51520,7 +51950,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
     padding: "0"
   })));
 };
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$13));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$14));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -51589,7 +52019,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
     key: "footer-box"
   })));
 };
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$13));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$14));
 
 var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
   var resetHasErrors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
@@ -51670,6 +52100,7 @@ exports.AddressForm = AddressForm;
 exports.AgencyIcon = AgencyIcon;
 exports.Alert = Alert$1;
 exports.AllocatedIcon = AllocatedIcon;
+exports.AmExLargeIcon = AmExLargeIcon;
 exports.AmExSmallIcon = AmExSmallIcon;
 exports.AmountCallout = AmountCallout$1;
 exports.ArrowDownCircleIconSmall = ArrowDownCircleIconSmall;
@@ -51692,6 +52123,7 @@ exports.ButtonWithAction = ButtonWithAction;
 exports.ButtonWithLink = ButtonWithLink;
 exports.CalendarIcon = CalendarIcon;
 exports.Card = Card$1;
+exports.CardType = CardType;
 exports.CaretArrowDown = CaretArrowDown$1;
 exports.CaretArrowUp = CaretArrowUp$1;
 exports.CarrotIcon = CarrotIcon$1;
@@ -51726,6 +52158,7 @@ exports.Detail = Detail$1;
 exports.DisabledAccountsAddIcon = DisabledAccountsAddIcon;
 exports.DisabledPaymentMethodsAddIcon = DisabledPaymentMethodsAddIcon;
 exports.DisabledPropertiesAddIcon = DisabledPropertiesAddIcon;
+exports.DiscoverLargeIcon = DiscoverLargeIcon;
 exports.DiscoverSmallIcon = DiscoverSmallIcon;
 exports.DisplayBox = DisplayBox$1;
 exports.Dropdown = Dropdown$1;
@@ -51782,6 +52215,7 @@ exports.LinkCard = LinkCard$1;
 exports.Loading = Loading;
 exports.LoadingLine = LoadingLine;
 exports.LoginForm = LoginForm;
+exports.MasterCardLargeIcon = MasterCardLargeIcon;
 exports.MasterCardSmallIcon = MasterCardSmallIcon;
 exports.Modal = Modal$3;
 exports.Module = Module$1;
@@ -51885,11 +52319,13 @@ exports.Title = Title$1;
 exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.Tooltip = Tooltip;
+exports.TooltipV2 = TooltipV2;
 exports.TrashIcon = TrashIcon$1;
 exports.TrashIconV2 = TrashIconV2$1;
 exports.TurnstileWidget = TurnstileWidget;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
+exports.VisaLargeIcon = VisaLargeIcon;
 exports.VisaSmallIcon = VisaSmallIcon;
 exports.VoidedIcon = VoidedIcon;
 exports.WalletBannerIcon = WalletBannerIcon$1;