@thecb/components 4.4.3 → 4.5.0-beta.2

package/dist/index.cjs.js

@@ -15222,182 +15222,6 @@ var ResetPasswordIcon = function ResetPasswordIcon() {
   }))))));
 };
 
-var PeriscopeFailedIcon = function PeriscopeFailedIcon() {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: "632",
-    height: "345",
-    viewBox: "0 0 632 345"
-  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
-    id: "periscope-failed-path-1",
-    d: "M298.876 295.918v28.33a4.498 4.498 0 01-4.159 4.488l-.335.012h-17.978a4.498 4.498 0 01-4.494-4.5 4.498 4.498 0 014.16-4.489l.334-.012 13.484.002v-23.831h8.988zm17.978 0v23.83h13.483c2.37 0 4.31 1.835 4.482 4.164l.012.336a4.498 4.498 0 01-4.159 4.488l-.335.012H312.36a4.497 4.497 0 01-4.483-4.164l-.012-.336v-28.33h8.989zm224.157-92.063a4.498 4.498 0 014.495 4.501 4.498 4.498 0 01-4.16 4.488l-.335.013h-16.67L488.01 250.85a4.49 4.49 0 01-5.106.984l-.34-.173-29.755-16.502v-11.252l31.117 18.199 27.97-29.25h-7.963a4.498 4.498 0 01-4.495-4.5 4.498 4.498 0 014.16-4.488l.335-.013h37.078zm-325.5-32.5a4.501 4.501 0 013.294 5.444 28.718 28.718 0 00-.828 6.85c0 5.071 1.337 10.012 3.92 14.631a4.504 4.504 0 01-1.724 6.126 4.491 4.491 0 01-6.117-1.727 41.106 41.106 0 01-2.574-5.511l-65.128 26.791 5.331 2.199v10.126l-18.653-8.327-.34-.165c-3.227-1.723-3.128-6.474.23-8.035l.2-.088 76.159-31.329a37.7 37.7 0 01.794-13.686 4.494 4.494 0 015.436-3.299zm335.545-38.385a4 4 0 014 4v55.01a4 4 0 01-4 4h-54.921a4 4 0 01-4-4v-55.01a4 4 0 014-4h54.921z"
-  }), /*#__PURE__*/React__default.createElement("filter", {
-    id: "periscope-failed-filter-2",
-    width: "111.3%",
-    height: "124.5%",
-    x: "-5.7%",
-    y: "-12.3%",
-    filterUnits: "objectBoundingBox"
-  }, /*#__PURE__*/React__default.createElement("feOffset", {
-    "in": "SourceAlpha",
-    result: "shadowOffsetOuter1"
-  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
-    "in": "shadowOffsetOuter1",
-    result: "shadowBlurOuter1",
-    stdDeviation: "8"
-  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
-    "in": "shadowBlurOuter1",
-    values: "0 0 0 0 0.0823529412 0 0 0 0 0.454901961 0 0 0 0 0.615686275 0 0 0 0.5 0"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    id: "periscope-failed-path-3",
-    d: "M151.685 24.754V37.13l-24.838.186a2 2 0 00-1.985 2v2.766a2 2 0 002.015 1.985l24.808-.186v7.876h-91.01V26.95a2 2 0 011.995-2l89.015-.196zM113.693 37.33h-38.41a2 2 0 00-2 2v2.751a2 2 0 002 2h38.41a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
-  }), /*#__PURE__*/React__default.createElement("filter", {
-    id: "periscope-failed-filter-4",
-    width: "152.7%",
-    height: "277.7%",
-    x: "-26.4%",
-    y: "-88.9%",
-    filterUnits: "objectBoundingBox"
-  }, /*#__PURE__*/React__default.createElement("feOffset", {
-    "in": "SourceAlpha",
-    result: "shadowOffsetOuter1"
-  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
-    "in": "shadowOffsetOuter1",
-    result: "shadowBlurOuter1",
-    stdDeviation: "8"
-  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
-    "in": "shadowBlurOuter1",
-    values: "0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    id: "periscope-failed-path-5",
-    d: "M452.809 0l124.97.196a2 2 0 011.996 2v27.305a2 2 0 01-2 2h-.003l-124.963-.196V19.128h9.236a2 2 0 002-2v-2.751a2 2 0 00-2-2h-9.236V0zm55.047 12.377h-32.679a2 2 0 00-2 2v2.75a2 2 0 002 2h32.679a2 2 0 002-2v-2.75a2 2 0 00-2-2zm25.217 0h-12.047a2 2 0 00-2 2v2.75a2 2 0 002 2h12.047a2 2 0 002-2v-2.75a2 2 0 00-2-2zm32.094 0h-18.924a2 2 0 00-2 2v2.75a2 2 0 002 2h18.924a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
-  }), /*#__PURE__*/React__default.createElement("filter", {
-    id: "periscope-failed-filter-6",
-    width: "137.8%",
-    height: "252.4%",
-    x: "-18.9%",
-    y: "-76.2%",
-    filterUnits: "objectBoundingBox"
-  }, /*#__PURE__*/React__default.createElement("feOffset", {
-    "in": "SourceAlpha",
-    result: "shadowOffsetOuter1"
-  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
-    "in": "shadowOffsetOuter1",
-    result: "shadowBlurOuter1",
-    stdDeviation: "8"
-  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
-    "in": "shadowBlurOuter1",
-    values: "0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    id: "periscope-failed-path-7",
-    d: "M180.022 51.757a2 2 0 012 2v27.505a2 2 0 01-2 2H2a2 2 0 01-2-2V53.757a2 2 0 012-2h178.022zm-141.7 12.377h-23.65a2 2 0 00-2 2v2.751a2 2 0 002 2h23.65a2 2 0 002-2v-2.75a2 2 0 00-2-2zm25.344 0H51.538a2 2 0 00-2 2v2.751a2 2 0 002 2h12.128a2 2 0 002-2v-2.75a2 2 0 00-2-2zm56.45 0H76.883a2 2 0 00-2 2v2.751a2 2 0 002 2h43.233a2 2 0 002-2v-2.75a2 2 0 00-2-2zm47.234 0h-34.017a2 2 0 00-2 2v2.751a2 2 0 002 2h34.017a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
-  }), /*#__PURE__*/React__default.createElement("filter", {
-    id: "periscope-failed-filter-8",
-    width: "126.4%",
-    height: "252.4%",
-    x: "-13.2%",
-    y: "-76.2%",
-    filterUnits: "objectBoundingBox"
-  }, /*#__PURE__*/React__default.createElement("feOffset", {
-    "in": "SourceAlpha",
-    result: "shadowOffsetOuter1"
-  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
-    "in": "shadowOffsetOuter1",
-    result: "shadowBlurOuter1",
-    stdDeviation: "8"
-  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
-    "in": "shadowBlurOuter1",
-    values: "0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    id: "periscope-failed-path-9",
-    d: "M598 27.004a2 2 0 012 2v27.504a2 2 0 01-2 2h-42.944V46.13h30.272a2 2 0 001.994-1.85l.006-.15v-2.75a2 2 0 00-2-2H554.97l-.041-.176a4.002 4.002 0 00-3.674-2.994l-.2-.005h-54.921a4 4 0 00-3.995 3.8l-.005.2v18.302h-72.157a2 2 0 01-2-2V29.004a2 2 0 012-2H598zM456.299 39.38H432.65a2 2 0 00-2 2v2.75a2 2 0 002 2h23.649a2 2 0 002-2v-2.75a2 2 0 00-2-2zm25.345 0h-12.129a2 2 0 00-2 2v2.75a2 2 0 002 2h12.129a2 2 0 002-2v-2.75a2 2 0 00-2-2z"
-  }), /*#__PURE__*/React__default.createElement("filter", {
-    id: "periscope-failed-filter-10",
-    width: "126.4%",
-    height: "252.4%",
-    x: "-13.2%",
-    y: "-76.2%",
-    filterUnits: "objectBoundingBox"
-  }, /*#__PURE__*/React__default.createElement("feOffset", {
-    "in": "SourceAlpha",
-    result: "shadowOffsetOuter1"
-  }), /*#__PURE__*/React__default.createElement("feGaussianBlur", {
-    "in": "shadowOffsetOuter1",
-    result: "shadowBlurOuter1",
-    stdDeviation: "8"
-  }), /*#__PURE__*/React__default.createElement("feColorMatrix", {
-    "in": "shadowBlurOuter1",
-    values: "0 0 0 0 0.161570617 0 0 0 0 0.163300979 0 0 0 0 0.199501812 0 0 0 0.3 0"
-  }))), /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    stroke: "none",
-    strokeWidth: "1"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(-404 -259)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(132 195)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(288 64)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "#15749D",
-    fillOpacity: "0.3",
-    d: "M302.247 310.746c36.612 0 66.292 6.549 66.292 14.627S338.86 340 302.247 340c-36.613 0-66.292-6.55-66.292-14.627 0-8.078 29.68-14.627 66.292-14.627zM65.904 208.318c6.071 0 11.057 4.655 11.608 10.6a6.983 6.983 0 014.09-1.321c3.885 0 7.034 3.159 7.034 7.055 0 3.818-3.022 6.926-6.798 7.051l-.237.004H49.756c-4.548 0-8.234-3.696-8.234-8.256 0-4.56 3.686-8.257 8.234-8.257 1.848 0 3.549.618 4.923 1.65 1.378-4.919 5.88-8.526 11.225-8.526zm195.894-57.546c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.134 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm80.899 0c16.134 0 29.213 13.097 29.213 29.254 0 16.157-13.08 29.254-29.213 29.254-16.135 0-29.214-13.097-29.214-29.254 0-16.157 13.08-29.254 29.214-29.254zm-80.899 22.503c-5.514 0-10.317 3.673-12.173 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.658-9.018-12.172-9.018zm80.9 0c-5.515 0-10.318 3.673-12.174 9.018a3.377 3.377 0 002.077 4.297 3.37 3.37 0 004.29-2.08l.16-.42c1.027-2.474 3.233-4.064 5.646-4.064 2.547 0 4.863 1.771 5.805 4.484l.12.302a3.37 3.37 0 004.17 1.778 3.377 3.377 0 002.077-4.297c-1.855-5.345-6.659-9.018-12.172-9.018zM519.99 12.426c12.578 0 22.908 9.642 24.048 21.958a14.473 14.473 0 018.471-2.737c8.049 0 14.575 6.544 14.575 14.617 0 7.966-6.358 14.445-14.262 14.612l-.313.003H486.54c-9.42 0-17.057-7.658-17.057-17.106 0-9.446 7.637-17.104 17.057-17.104 3.83 0 7.352 1.281 10.2 3.418 2.855-10.189 12.179-17.66 23.252-17.66zM170.591 0c6.61 0 12.239 4.15 14.476 9.99a6.571 6.571 0 011.792-.252c2.114 0 3.994.996 5.208 2.543a9.767 9.767 0 014.028-.872c5.431 0 9.833 4.414 9.833 9.86 0 5.354-4.254 9.712-9.557 9.858l-.276.004h-42.442c-5.43 0-9.833-4.415-9.833-9.861 0-5.447 4.403-9.861 9.833-9.861.666 0 1.315.068 1.942.194C157.345 4.93 163.386 0 170.59 0z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#FFF",
-    d: "M446.067 111.391v175.276a2.5 2.5 0 01-2.5 2.5h-282.64a2.5 2.5 0 01-2.5-2.5V111.39h287.64zm-184.27 39.38c-16.133 0-29.213 13.098-29.213 29.255 0 16.157 13.08 29.254 29.214 29.254s29.213-13.097 29.213-29.254c0-16.157-13.08-29.254-29.213-29.254zm80.9 0c-16.135 0-29.214 13.098-29.214 29.255 0 16.157 13.08 29.254 29.214 29.254s29.213-13.097 29.213-29.254c0-16.157-13.08-29.254-29.213-29.254z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#292A33",
-    fillRule: "nonzero",
-    d: "M452.808 155.272v111.39l73.035.002a4.498 4.498 0 014.494 4.5 4.498 4.498 0 01-4.159 4.488l-.335.013-73.035-.001.001 7.877c0 6.733-5.37 12.211-12.055 12.373l-.305.004H164.045c-6.724 0-12.194-5.377-12.356-12.072l-.004-.305v-7.877H94.381a4.498 4.498 0 01-4.494-4.5 4.498 4.498 0 014.159-4.488l.335-.012 57.302-.001.001-44.897 6.741-2.773.001 64.548a5.622 5.622 0 005.397 5.622l.22.004H440.45c3.03 0 5.498-2.4 5.614-5.405l.004-.221v-128.27h6.741zm129.214 111.392a4.498 4.498 0 014.495 4.5 4.498 4.498 0 01-4.16 4.488l-.335.013h-33.707a4.498 4.498 0 01-4.495-4.5 4.498 4.498 0 014.16-4.49l.335-.011h33.707zm-507.865 0a4.498 4.498 0 014.495 4.5 4.498 4.498 0 01-4.16 4.488l-.335.013H56.18a4.498 4.498 0 01-4.495-4.5 4.498 4.498 0 014.16-4.49l.335-.011h17.977zm242.477-33.13l.478.01c6.182.271 10.978 5.775 10.978 12.367a3.373 3.373 0 01-3.37 3.375c-1.8 0-3.27-1.412-3.367-3.19l-.005-.185-.011-.394c-.167-2.905-2.173-5.107-4.503-5.227l-.2-.005h-31.022l-.313.012c-2.384.193-4.4 2.564-4.4 5.614a3.373 3.373 0 01-3.37 3.375 3.373 3.373 0 01-3.372-3.375c0-6.657 4.89-12.204 11.16-12.373l.295-.004h31.022zm26.063-89.513c19.858 0 35.955 16.119 35.955 36.004 0 19.886-16.097 36.006-35.955 36.006-18.994 0-34.546-14.746-35.865-33.43l-9.166-.061c-1.288 18.712-16.854 33.491-35.868 33.491-19.857 0-35.955-16.12-35.955-36.006 0-19.885 16.097-36.004 35.955-36.004 13.281 0 24.88 7.21 31.106 17.934 3.515-1.212 6.847-1.818 9.994-1.818 2.95 0 5.89.533 8.822 1.6 6.255-10.605 17.786-17.716 30.977-17.716zm-184.27 36.005v29.234l-6.742 2.773v-32.007h6.741zm184.27-29.254c-16.135 0-29.214 13.096-29.214 29.253 0 16.158 13.079 29.255 29.214 29.255 16.135 0 29.213-13.097 29.213-29.255 0-16.157-13.078-29.253-29.213-29.253zm-80.899 0c-16.134 0-29.214 13.097-29.214 29.253 0 16.157 13.08 29.255 29.214 29.255 16.135 0 29.213-13.097 29.213-29.255 0-16.157-13.078-29.253-29.213-29.253zm0 22.503c5.514 0 10.317 3.673 12.172 9.018a3.377 3.377 0 01-2.077 4.297 3.37 3.37 0 01-4.17-1.778l-.12-.302c-.942-2.713-3.258-4.484-5.805-4.484-2.413 0-4.619 1.59-5.645 4.064l-.16.42a3.37 3.37 0 01-4.29 2.08 3.377 3.377 0 01-2.078-4.297c1.856-5.345 6.66-9.018 12.173-9.018zm80.9 0c5.512 0 10.316 3.673 12.171 9.018a3.377 3.377 0 01-2.077 4.297 3.37 3.37 0 01-4.17-1.778l-.12-.302c-.942-2.713-3.258-4.484-5.805-4.484-2.413 0-4.619 1.59-5.645 4.064l-.16.42a3.37 3.37 0 01-4.291 2.08 3.377 3.377 0 01-2.077-4.297c1.856-5.345 6.66-9.018 12.173-9.018zm-40.45-8.638a3.374 3.374 0 00-3.372 3.376 3.374 3.374 0 003.372 3.375c1.861 0 3.37-1.51 3.37-3.375a3.373 3.373 0 00-3.37-3.376zM440.45 68.635c6.725 0 12.195 5.377 12.356 12.072l.004.305-.002 23.465h.002v6.751h-.002l.001 12.539h-6.74l-.002-12.54h-287.64v37.294h-6.74V81.01c0-6.733 5.369-12.21 12.054-12.372l.305-.004h276.404zm0 6.75H164.045a5.622 5.622 0 00-5.614 5.406l-.004.22v23.466h287.64V81.012a5.622 5.622 0 00-5.397-5.622l-.22-.004zM173.034 85.513l.211.005a4.498 4.498 0 014.283 4.496c0 2.486-2.012 4.5-4.494 4.5a4.498 4.498 0 01-4.495-4.5c0-2.486 2.013-4.5 4.495-4.5zm13.483 0l.211.005a4.498 4.498 0 014.283 4.496c0 2.486-2.012 4.5-4.494 4.5a4.498 4.498 0 01-4.495-4.5c0-2.486 2.013-4.5 4.495-4.5zm13.483 0l.212.005a4.498 4.498 0 014.282 4.496c0 2.486-2.012 4.5-4.494 4.5a4.498 4.498 0 01-4.494-4.5c0-2.486 2.012-4.5 4.494-4.5z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#CACED8",
-    d: "M38.321 160.898a2 2 0 012 2v2.751a2 2 0 01-2 2H14.672a2 2 0 01-2-2v-2.75a2 2 0 012-2h23.65zm25.345 0a2 2 0 012 2v2.751a2 2 0 01-2 2H51.538a2 2 0 01-2-2v-2.75a2 2 0 012-2h12.128zm56.45 0a2 2 0 012 2v2.751a2 2 0 01-2 2H76.883a2 2 0 01-2-2v-2.75a2 2 0 012-2h43.233zm47.234 0a2 2 0 012 2v2.751a2 2 0 01-2 2h-34.017a2 2 0 01-2-2v-2.75a2 2 0 012-2h34.017zm288.949-24.753a2 2 0 012 2v2.75a2 2 0 01-2 2H432.65a2 2 0 01-2-2v-2.75a2 2 0 012-2h23.649zm25.345 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-12.129a2 2 0 01-2-2v-2.75a2 2 0 012-2h12.129zm103.684 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-30.273l.001-5.925c0-.283-.03-.56-.085-.826h30.357zm-471.635-2.05a2 2 0 012 2v2.751a2 2 0 01-2 2h-38.41a2 2 0 01-2-2v-2.75a2 2 0 012-2h38.41zm37.992-.2v6.75l-24.808.186a2 2 0 01-2.015-1.985v-2.766a2 2 0 011.985-2l24.838-.186zm356.171-24.754a2 2 0 012 2v2.75a2 2 0 01-2 2h-32.679a2 2 0 01-2-2v-2.75a2 2 0 012-2h32.679zm-45.811 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-9.236v-6.75h9.236zm71.028 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-12.047a2 2 0 01-2-2v-2.75a2 2 0 012-2h12.047zm32.094 0a2 2 0 012 2v2.75a2 2 0 01-2 2h-18.924a2 2 0 01-2-2v-2.75a2 2 0 012-2h18.924zm-121.6-33.755a2.5 2.5 0 012.5 2.5v26.754h-287.64V77.886a2.5 2.5 0 012.5-2.5h282.64zM173.034 85.512a4.498 4.498 0 00-4.495 4.501c0 2.486 2.013 4.5 4.495 4.5a4.498 4.498 0 004.494-4.5c0-2.486-2.012-4.5-4.494-4.5zm13.483 0a4.498 4.498 0 00-4.495 4.501c0 2.486 2.013 4.5 4.495 4.5a4.498 4.498 0 004.494-4.5c0-2.486-2.012-4.5-4.494-4.5zm13.483 0a4.498 4.498 0 00-4.494 4.501c0 2.486 2.012 4.5 4.494 4.5a4.498 4.498 0 004.494-4.5c0-2.486-2.012-4.5-4.494-4.5z"
-  }), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("use", {
-    fill: "#000",
-    filter: "url(#periscope-failed-filter-2)",
-    xlinkHref: "#periscope-failed-path-1"
-  }), /*#__PURE__*/React__default.createElement("use", {
-    fill: "#15749D",
-    xlinkHref: "#periscope-failed-path-1"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(0 96.764)"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("use", {
-    fill: "#000",
-    filter: "url(#periscope-failed-filter-4)",
-    xlinkHref: "#periscope-failed-path-3"
-  }), /*#__PURE__*/React__default.createElement("use", {
-    fill: "#FFF",
-    xlinkHref: "#periscope-failed-path-3"
-  })), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("use", {
-    fill: "#000",
-    filter: "url(#periscope-failed-filter-6)",
-    xlinkHref: "#periscope-failed-path-5"
-  }), /*#__PURE__*/React__default.createElement("use", {
-    fill: "#FFF",
-    xlinkHref: "#periscope-failed-path-5"
-  })), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("use", {
-    fill: "#000",
-    filter: "url(#periscope-failed-filter-8)",
-    xlinkHref: "#periscope-failed-path-7"
-  }), /*#__PURE__*/React__default.createElement("use", {
-    fill: "#FFF",
-    xlinkHref: "#periscope-failed-path-7"
-  })), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("use", {
-    fill: "#000",
-    filter: "url(#periscope-failed-filter-10)",
-    xlinkHref: "#periscope-failed-path-9"
-  }), /*#__PURE__*/React__default.createElement("use", {
-    fill: "#FFF",
-    xlinkHref: "#periscope-failed-path-9"
-  })), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#FFF",
-    d: "M524.284 47.541a3 3 0 013 3v13.002h13a3 3 0 013 3v2.002a3 3 0 01-3 3h-13v13.002a3 3 0 01-3 3h-2a3 3 0 01-3-3V71.544h-13a3 3 0 01-3-3v-2a3 3 0 013-3h13V50.54a3 3 0 013-3h2z",
-    transform: "rotate(45 523.284 67.544)"
-  })))))));
-};
-
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -16579,7 +16403,7 @@ function parseToRgb(color) {
     };
   }
 
-  var rgbaMatched = rgbaRegex.exec(normalizedColor);
+  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
   if (rgbaMatched) {
     return {
@@ -16610,7 +16434,7 @@ function parseToRgb(color) {
     };
   }
 
-  var hslaMatched = hslaRegex.exec(normalizedColor);
+  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
 
   if (hslaMatched) {
     var _hue = parseInt("" + hslaMatched[1], 10);
@@ -20789,9 +20613,135 @@ var CountryDropdown = function CountryDropdown(_ref) {
   });
 };
 
+function _templateObject$p() {
+  var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"]);
+
+  _templateObject$p = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var DetailText = styled__default.p(_templateObject$p(), function (_ref) {
+  var fontSize = _ref.fontSize;
+  return fontSize;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, function (_ref3) {
+  var weight = _ref3.weight;
+  return weight;
+}, function (_ref4) {
+  var margin = _ref4.margin;
+  return margin;
+}, function (_ref5) {
+  var textAlign = _ref5.textAlign;
+  return textAlign;
+}, function (_ref6) {
+  var fontFamily = _ref6.fontFamily;
+  return fontFamily;
+}, function (_ref7) {
+  var extraStyles = _ref7.extraStyles;
+  return extraStyles;
+});
+
+var fontSize$6 = {
+  large: "1.125rem",
+  regular: "1rem",
+  small: "0.875rem",
+  extraSmall: "0.75rem"
+};
+var fontFamily$4 = {
+  large: "Public Sans",
+  regular: "Public Sans",
+  small: "Public Sans",
+  extraSmall: "Public Sans"
+};
+var mobileFontSize = {
+  large: "1.14285rem",
+  regular: "1",
+  small: "0.85714rem",
+  extraSmall: "0.71428rem"
+};
+var fallbackValues$g = {
+  fontFamily: fontFamily$4,
+  fontSize: fontSize$6
+};
+var mobileFallbackValues = {
+  fontFamily: fontFamily$4,
+  fontSize: mobileFontSize
+};
+var MOBILE_BREAKPOINT = 768;
+
+/*
+  New responsive text component for Detail elements
+  (Block level text elements which are smaller than "Title" elements)
+  Size is decoupled from tag
+  Comes with two variants - "large" and "small"
+  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
+  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
+  
+  If you need a smaller larger size, use the <Title /> atom, which has larger variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Detail.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set all of the variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
+var isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
+var isTouchDevice$1 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+var mobileDeviceDetected = isBelowBreakpoint && isTouchDevice$1;
+var fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues$g;
+
+var Detail = function Detail(_ref) {
+  var themeValues = _ref.themeValues,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? FIREFLY_GREY : _ref$color,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? 0 : _ref$margin,
+      textAlign = _ref.textAlign,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+      className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "regular" : _ref$variant,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "p" : _ref$as,
+      dataQa = _ref.dataQa,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
+
+  return /*#__PURE__*/React__default.createElement(DetailText, _extends({
+    variant: variant,
+    as: as,
+    weight: weight,
+    color: color,
+    margin: margin,
+    textAlign: textAlign,
+    extraStyles: extraStyles,
+    className: className,
+    fontFamily: themeValues.fontFamily,
+    fontSize: themeValues.fontSize,
+    "data-qa": dataQa
+  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
+};
+
+var Detail$1 = themeComponent(Detail, "Detail", fallbacks, "regular");
+
 var backgroundColor$3 = WHITE;
 var boxShadow = "0px 2px 14px 0px ".concat(ATHENS_GREY, ", 0px 3px 8px 0px ").concat(GHOST_GREY);
-var fallbackValues$g = {
+var fallbackValues$h = {
   backgroundColor: backgroundColor$3,
   boxShadow: boxShadow
 };
@@ -20812,7 +20762,7 @@ var DisplayBox = function DisplayBox(_ref) {
   }, children));
 };
 
-var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$g);
+var DisplayBox$1 = themeComponent(DisplayBox, "DisplayBox", fallbackValues$h);
 
 var DisplayCard = function DisplayCard(_ref) {
   var title = _ref.title,
@@ -21189,7 +21139,7 @@ var lineHeight$3 = {
   "default": "1rem",
   disabled: "1rem"
 };
-var fontSize$6 = {
+var fontSize$7 = {
   "default": "0.875rem",
   disabled: "0.875rem"
 };
@@ -21208,7 +21158,7 @@ var hoverFocusStyles$1 = {
 var formFooterPanel = {
   "default": "".concat(INFO_BLUE)
 };
-var fallbackValues$h = {
+var fallbackValues$i = {
   linkColor: linkColor$2,
   formBackgroundColor: formBackgroundColor$1,
   inputBackgroundColor: inputBackgroundColor$1,
@@ -21216,7 +21166,7 @@ var fallbackValues$h = {
   labelColor: labelColor$1,
   borderColor: borderColor$1,
   lineHeight: lineHeight$3,
-  fontSize: fontSize$6,
+  fontSize: fontSize$7,
   errorFontSize: errorFontSize$1,
   fontWeight: fontWeight$3,
   hoverFocusStyles: hoverFocusStyles$1,
@@ -21273,16 +21223,16 @@ function _templateObject2$d() {
   return data;
 }
 
-function _templateObject$p() {
+function _templateObject$q() {
   var data = _taggedTemplateLiteral(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"]);
 
-  _templateObject$p = function _templateObject() {
+  _templateObject$q = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var InputField = styled__default.input(_templateObject$p(), function (_ref) {
+var InputField = styled__default.input(_templateObject$q(), function (_ref) {
   var field = _ref.field,
       showErrors = _ref.showErrors,
       themeValues = _ref.themeValues;
@@ -21464,7 +21414,7 @@ var FormInput = function FormInput(_ref15) {
   }, decorator)));
 };
 
-var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$h, "default");
+var FormInput$1 = themeComponent(FormInput, "FormInput", fallbackValues$i, "default");
 
 var FormInputRow = function FormInputRow(_ref) {
   var _ref$breakpoint = _ref.breakpoint,
@@ -21514,7 +21464,7 @@ var FormContainer = function FormContainer(_ref) {
   }, rest), children);
 };
 
-var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$h, "default");
+var FormContainer$1 = themeComponent(withWindowSize(FormContainer), "FormContainer", fallbackValues$i, "default");
 
 var FormFooterPanel = function FormFooterPanel(_ref) {
   var themeValues = _ref.themeValues,
@@ -21538,9 +21488,9 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
   })));
 };
 
-var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$h, "default");
+var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$i, "default");
 
-var fontSize$7 = {
+var fontSize$8 = {
   "default": "1rem",
   radio: "1.0625rem"
 };
@@ -21552,8 +21502,8 @@ var color$7 = {
   "default": "".concat(CHARADE_GREY),
   radio: "".concat(MINESHAFT_GREY)
 };
-var fallbackValues$i = {
-  fontSize: fontSize$7,
+var fallbackValues$j = {
+  fontSize: fontSize$8,
   padding: padding$1,
   color: color$7
 };
@@ -21595,11 +21545,11 @@ var FormattedAddress = function FormattedAddress(_ref) {
   }, city, ", ", stateProvince, " ".concat(zip), country ? " ".concat(country) : "")));
 };
 
-var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$i, "default");
+var FormattedAddress$1 = themeComponent(FormattedAddress, "FormattedAddress", fallbackValues$j, "default");
 
 var textColor$1 = "".concat(CHARADE_GREY);
 var autopayTextColor = "".concat(REGENT_GREY);
-var fallbackValues$j = {
+var fallbackValues$k = {
   textColor: textColor$1,
   autopayTextColor: autopayTextColor
 };
@@ -21614,10 +21564,10 @@ function _templateObject2$e() {
   return data;
 }
 
-function _templateObject$q() {
+function _templateObject$r() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"]);
 
-  _templateObject$q = function _templateObject() {
+  _templateObject$r = function _templateObject() {
     return data;
   };
 
@@ -21626,7 +21576,7 @@ function _templateObject$q() {
 var ACTIVE = "ACTIVE";
 var EXPIRING_SOON = "EXPIRING_SOON";
 var EXPIRED = "EXPIRED";
-var CreditCardWrapper = styled__default.div(_templateObject$q());
+var CreditCardWrapper = styled__default.div(_templateObject$r());
 var CCIconWrapper = styled__default.div(_templateObject2$e());
 
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
@@ -21678,7 +21628,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$j);
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$k);
 
 function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
@@ -21700,16 +21650,16 @@ function _templateObject2$f() {
   return data;
 }
 
-function _templateObject$r() {
+function _templateObject$s() {
   var data = _taggedTemplateLiteral(["\n  padding: 8px;\n  display: inline-block;\n  cursor: pointer;\n  transition-property: opacity;\n  transition-duration: 0.15s;\n  transition-timing-function: linear;\n  font: inherit;\n  color: inherit;\n  text-transform: none;\n  background-color: transparent;\n  border: 0;\n  margin: 0;\n  overflow: visible;\n\n  &:focus {\n    outline: none;\n  }\n"]);
 
-  _templateObject$r = function _templateObject() {
+  _templateObject$s = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Hamburger = styled__default.button(_templateObject$r());
+var Hamburger = styled__default.button(_templateObject$s());
 var HamburgerBox = styled__default.span(_templateObject2$f());
 var HamburgerInner = styled__default.span(_templateObject3$8(), function (_ref) {
   var inactiveColor = _ref.inactiveColor;
@@ -21809,12 +21759,11 @@ var Jumbo$1 = withWindowSize(Jumbo);
 
 var fontWeight$4 = {
   "default": "600",
-  pS: "600",
   p: "600",
   pL: "600",
   h6: "700"
 };
-var fallbackValues$k = {
+var fallbackValues$l = {
   fontWeight: fontWeight$4
 };
 
@@ -21824,8 +21773,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
       label = _ref.label,
       amount = _ref.amount,
       themeValues = _ref.themeValues,
-      as = _ref.as,
-      extraStyles = _ref.extraStyles;
+      as = _ref.as;
   var LabeledAmountText = variant === "h6" ? Heading$1 : Paragraph$1;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
@@ -21833,16 +21781,16 @@ var LabeledAmount = function LabeledAmount(_ref) {
     variant: variant,
     as: as,
     weight: themeValues.fontWeight,
-    extraStyles: "".concat(extraStyles, "; text-align: start; flex: 3;")
+    extraStyles: "text-align: start; flex: 3;"
   }, label, ":"), /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
     as: as,
     weight: themeValues.fontWeight,
-    extraStyles: "".concat(extraStyles, "; text-align: end; flex: 1;")
+    extraStyles: "text-align: end; flex: 1;"
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$k, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$l, "default");
 
 var weightTitle = {
   "default": "600",
@@ -21850,9 +21798,9 @@ var weightTitle = {
 };
 var paragraphVariant = {
   "default": "pL",
-  small: "pS"
+  small: "p"
 };
-var fallbackValues$l = {
+var fallbackValues$m = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -21881,10 +21829,10 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$l, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$m, "default");
 
 var color$8 = "#15749D";
-var fallbackValues$m = {
+var fallbackValues$n = {
   color: color$8
 };
 
@@ -21898,16 +21846,16 @@ function _templateObject2$g() {
   return data;
 }
 
-function _templateObject$s() {
+function _templateObject$t() {
   var data = _taggedTemplateLiteral(["\n  animation: rotate 2s linear infinite;\n  margin: -25px 0 0 -25px;\n  width: ", "px;\n  height: ", "px;\n  & .path {\n    stroke: ", ";\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"]);
 
-  _templateObject$s = function _templateObject() {
+  _templateObject$t = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var SpinnerSvgAnimation = styled__default.svg(_templateObject$s(), function (_ref) {
+var SpinnerSvgAnimation = styled__default.svg(_templateObject$t(), function (_ref) {
   var size = _ref.size;
   return size;
 }, function (_ref2) {
@@ -21936,7 +21884,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$m);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$n);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -22184,10 +22132,10 @@ function _templateObject2$h() {
   return data;
 }
 
-function _templateObject$t() {
+function _templateObject$u() {
   var data = _taggedTemplateLiteral(["", " is too short"]);
 
-  _templateObject$t = function _templateObject() {
+  _templateObject$u = function _templateObject() {
     return data;
   };
 
@@ -22233,7 +22181,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$u(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -22358,7 +22306,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$n = {
+var fallbackValues$o = {
   color: color$9,
   height: height$1
 };
@@ -22451,12 +22399,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$n, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$o, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$o = {
+var fallbackValues$p = {
   backgroundColor: backgroundColor$4
 };
 
@@ -22484,25 +22432,25 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$o, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$p, "default");
 
 var activeColor$4 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$p = {
+var fallbackValues$q = {
   activeColor: activeColor$4,
   inactiveColor: inactiveColor
 };
 
-function _templateObject$u() {
+function _templateObject$v() {
   var data = _taggedTemplateLiteral(["\n  opacity: 0;\n  position: absolute;\n  cursor: ", ";\n"]);
 
-  _templateObject$u = function _templateObject() {
+  _templateObject$v = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var HiddenRadioButton = styled__default.input(_templateObject$u(), function (_ref) {
+var HiddenRadioButton = styled__default.input(_templateObject$v(), function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
 });
@@ -22584,12 +22532,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$p);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$q);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$q = {
+var fallbackValues$r = {
   border: border$2
 };
 
@@ -22664,7 +22612,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
   })))));
 };
 
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$q, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$r, "default");
 
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
@@ -22672,7 +22620,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$r = {
+var fallbackValues$s = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -22689,7 +22637,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$r, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$s, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -33264,6 +33212,125 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
   });
 };
 
+function _templateObject$w() {
+  var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"]);
+
+  _templateObject$w = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var TitleText = styled__default.h1(_templateObject$w(), function (_ref) {
+  var fontSize = _ref.fontSize;
+  return fontSize;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, function (_ref3) {
+  var weight = _ref3.weight;
+  return weight;
+}, function (_ref4) {
+  var margin = _ref4.margin;
+  return margin;
+}, function (_ref5) {
+  var textAlign = _ref5.textAlign;
+  return textAlign;
+}, function (_ref6) {
+  var fontFamily = _ref6.fontFamily;
+  return fontFamily;
+}, function (_ref7) {
+  var extraStyles = _ref7.extraStyles;
+  return extraStyles;
+});
+
+var fontSize$9 = {
+  large: "1.5rem",
+  small: "1.25rem"
+};
+var fontFamily$5 = {
+  large: "Public Sans",
+  small: "Public Sans"
+};
+var mobileFontSize$1 = {
+  large: "1.5rem",
+  small: "1.2142rem"
+};
+var fallbackValues$t = {
+  fontFamily: fontFamily$5,
+  fontSize: fontSize$9
+};
+var mobileFallbackValues$1 = {
+  fontFamily: fontFamily$5,
+  fontSize: mobileFontSize$1
+};
+var MOBILE_BREAKPOINT$1 = 768;
+
+/*
+  New responsive text component for Title elements
+  Size is decoupled from tag
+  Comes with two variants - "large" and "small"
+  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
+  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
+  
+  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Title.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
+var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
+var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$t;
+
+var Title = function Title(_ref) {
+  var themeValues = _ref.themeValues,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? FIREFLY_GREY : _ref$color,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? 0 : _ref$margin,
+      textAlign = _ref.textAlign,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+      className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "large" : _ref$variant,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "h1" : _ref$as,
+      dataQa = _ref.dataQa,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
+
+  return /*#__PURE__*/React__default.createElement(TitleText, _extends({
+    variant: variant,
+    as: as,
+    weight: weight,
+    color: color,
+    margin: margin,
+    textAlign: textAlign,
+    extraStyles: extraStyles,
+    className: className,
+    fontFamily: themeValues.fontFamily,
+    fontSize: themeValues.fontSize,
+    "data-qa": dataQa
+  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
+};
+
+var Title$1 = themeComponent(Title, "Title", fallbacks$1, "large");
+
 var onBackground = "".concat(MATISSE_BLUE);
 var disabledBackground = "".concat(IRON_GREY);
 var white = "".concat(WHITE);
@@ -33271,7 +33338,7 @@ var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
-var fallbackValues$s = {
+var fallbackValues$u = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
   white: white,
@@ -33310,16 +33377,16 @@ function _templateObject2$i() {
   return data;
 }
 
-function _templateObject$v() {
+function _templateObject$x() {
   var data = _taggedTemplateLiteral(["\n  opacity: 0;\n  position: absolute;\n  cursor: ", ";\n  height: 24px;\n  width: 50px;\n  ", "\n"]);
 
-  _templateObject$v = function _templateObject() {
+  _templateObject$x = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var HiddenToggleSwitchBox = styled__default.input(_templateObject$v(), function (_ref) {
+var HiddenToggleSwitchBox = styled__default.input(_templateObject$x(), function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
 }, function (_ref2) {
@@ -33473,7 +33540,7 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
   }, label))));
 };
 
-var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$s);
+var ToggleSwitch$1 = themeComponent(ToggleSwitch, "ToggleSwitch", fallbackValues$u);
 
 var background$1 = "".concat(ATHENS_GREY);
 var white$1 = "".concat(WHITE);
@@ -33486,16 +33553,16 @@ var themeValues = {
   focusBorder: focusBorder
 };
 
-function _templateObject$w() {
+function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  background: ", ";\n\n  input {\n    border: 0;\n    height: 72px;\n    width: 100%;\n    padding: 1.5rem;\n    padding-left: 1rem;\n    min-width: 100px;\n    margin: 0;\n    box-sizing: border-box;\n    position: relative;\n    font-size: 1.1rem;\n    line-height: 2rem;\n    font-weight: 400;\n    background-color: ", ";\n    color: ", ";\n    box-shadow: none;\n    border: 1px solid transparent;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n"]);
 
-  _templateObject$w = function _templateObject() {
+  _templateObject$y = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var TypeaheadInputWrapper = styled__default.div(_templateObject$w(), themeValues.background, themeValues.background, themeValues.black, themeValues.focusBorder);
+var TypeaheadInputWrapper = styled__default.div(_templateObject$y(), themeValues.background, themeValues.background, themeValues.black, themeValues.focusBorder);
 
 var TypeaheadInput = function TypeaheadInput(_ref) {
   var handleChange = _ref.handleChange,
@@ -35439,7 +35506,7 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var fallbackValues$t = {
+var fallbackValues$v = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
   bodyBackgroundColor: bodyBackgroundColor
@@ -35546,7 +35613,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, children))));
 };
 
-var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$t);
+var CollapsibleSection$1 = themeComponent(CollapsibleSection, "CollapsibleSection", fallbackValues$v);
 
 var EditNameForm = function EditNameForm(_ref) {
   var fields = _ref.fields,
@@ -35620,16 +35687,16 @@ function _templateObject2$j() {
   return data;
 }
 
-function _templateObject$x() {
+function _templateObject$z() {
   var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background: ", ";\n  border-color: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"]);
 
-  _templateObject$x = function _templateObject() {
+  _templateObject$z = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableListItem = styled__default.div(_templateObject$x(), function (_ref) {
+var EditableListItem = styled__default.div(_templateObject$z(), function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "rgba(246, 246, 249, 0.7)" : WHITE;
 }, GHOST_GREY, function (_ref2) {
@@ -35826,16 +35893,16 @@ function _templateObject2$k() {
   return data;
 }
 
-function _templateObject$y() {
+function _templateObject$A() {
   var data = _taggedTemplateLiteral(["\n  display: ", ";\n  flex-direction: column;\n  flex: 1;\n"]);
 
-  _templateObject$y = function _templateObject() {
+  _templateObject$A = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var EditableTableContainer = styled__default.div(_templateObject$y(), function (_ref) {
+var EditableTableContainer = styled__default.div(_templateObject$A(), function (_ref) {
   var hide = _ref.hide;
   return hide ? "none" : "flex";
 });
@@ -36062,7 +36129,7 @@ ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
 var textColor$2 = "#ffffff";
 var backgroundColor$5 = "#182848";
-var fallbackValues$u = {
+var fallbackValues$w = {
   textColor: textColor$2,
   backgroundColor: backgroundColor$5
 };
@@ -36108,7 +36175,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   }), repeat( /*#__PURE__*/React__default.createElement(Box, null), boxesAfter))));
 };
 
-var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$u));
+var HighlightTabRow$1 = /*#__PURE__*/React.memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues$w));
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -39188,58 +39255,48 @@ var Modal$1 = function Modal(_ref) {
   })))))))), children);
 };
 
-var fontSize$8 = {
+var fontSize$a = {
   "default": "1.375rem",
-  largeTitle: "1.75rem",
-  small: "1.25rem"
+  largeTitle: "1.75rem"
 };
 var fontWeight$5 = {
   "default": "600",
-  largeTitle: "700",
-  small: "600"
+  largeTitle: "700"
 };
 var fontColor = {
   "default": CHARADE_GREY,
-  largeTitle: CHARADE_GREY,
-  small: CHARADE_GREY
+  largeTitle: CHARADE_GREY
 };
 var lineHeight$4 = {
   "default": "2rem",
-  largeTitle: "2rem",
-  small: "2rem"
+  largeTitle: "2rem"
 };
 var textAlign = {
   "default": "left",
-  largeTitle: "left",
-  small: "left"
+  largeTitle: "left"
 };
 var titleType = {
   "default": "h5",
-  largeTitle: "h1",
-  small: "h6"
+  largeTitle: "h1"
 };
 var titleSpacing = {
   "default": "0.5rem",
-  largeTitle: "1.125rem",
-  small: "0.5rem"
+  largeTitle: "1.125rem"
 };
 var boxShadow$1 = {
   "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
 };
 var borderRadius = {
   "default": "0.25rem",
-  largeTitle: "0.25rem",
-  small: "0.25rem"
+  largeTitle: "0.25rem"
 };
 var backgroundColor$6 = {
   "default": WHITE,
-  largeTitle: WHITE,
-  small: WHITE
+  largeTitle: WHITE
 };
-var fallbackValues$v = {
-  fontSize: fontSize$8,
+var fallbackValues$x = {
+  fontSize: fontSize$a,
   fontWeight: fontWeight$5,
   fontColor: fontColor,
   lineHeight: lineHeight$4,
@@ -39264,7 +39321,7 @@ var Module = function Module(_ref) {
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: variant === "small" ? "h6" : variant === "default" ? "h5" : "h2",
+    variant: variant === "default" ? "h5" : "h2",
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
@@ -39279,7 +39336,7 @@ var Module = function Module(_ref) {
   }, children)));
 };
 
-var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$v, "default"));
+var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$x, "default"));
 
 var backgroundColor$7 = {
   profile: "#3b414d",
@@ -39289,7 +39346,7 @@ var shadowColor = {
   profile: "#292A33",
   cms: "#292A33"
 };
-var fallbackValues$w = {
+var fallbackValues$y = {
   backgroundColor: backgroundColor$7,
   shadowColor: shadowColor
 };
@@ -39330,12 +39387,12 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$w, "profile");
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$y, "profile");
 
-function _templateObject$z() {
+function _templateObject$B() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
 
-  _templateObject$z = function _templateObject() {
+  _templateObject$B = function _templateObject() {
     return data;
   };
 
@@ -39371,7 +39428,7 @@ var menu = posed.div({
     }
   }
 });
-var ImposterMenu = styled__default(menu)(_templateObject$z());
+var ImposterMenu = styled__default(menu)(_templateObject$B());
 
 var NavMenuMobile = function NavMenuMobile(_ref) {
   var id = _ref.id,
@@ -39392,7 +39449,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$w, "profile");
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$y, "profile");
 
 var IconsModule = function IconsModule(_ref) {
   var icon = _ref.icon,
@@ -39446,7 +39503,7 @@ var activeColor$5 = "#0E506D";
 var linkColor$3 = "#357fb8";
 var fontWeight$6 = FONT_WEIGHT_REGULAR;
 var modalLinkHoverFocus = "outline: none;\n  cursor: pointer;\n  text-decoration: underline;\n  text-decoration-color: #317D4F;";
-var fallbackValues$x = {
+var fallbackValues$z = {
   color: color$a,
   hoverColor: hoverColor$4,
   activeColor: activeColor$5,
@@ -39529,7 +39586,7 @@ var AutopayModal = function AutopayModal(_ref) {
   }, "".concat(planType, " ").concat(nextAutopayDate)))));
 };
 
-var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$x);
+var AutopayModalModule = themeComponent(AutopayModal, "AutopayModal", fallbackValues$z);
 
 var AmountModule = function AmountModule(_ref) {
   var totalAmountDue = _ref.totalAmountDue,
@@ -40091,13 +40148,13 @@ var lineItem = {
 };
 var labeledAmountSubtotal = {
   "default": "pL",
-  small: "pS"
+  small: "p"
 };
 var labeledAmountTotal = {
   "default": "h6",
-  small: "p"
+  small: "pL"
 };
-var fallbackValues$y = {
+var fallbackValues$A = {
   backgroundColor: backgroundColor$8,
   lineItem: lineItem,
   labeledAmountSubtotal: labeledAmountSubtotal,
@@ -40109,7 +40166,6 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       feeElems = _ref.feeElems,
       subtotal = _ref.subtotal,
       total = _ref.total,
-      variant = _ref.variant,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "16px"
@@ -40123,8 +40179,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
     as: "h2",
     variant: themeValues.labeledAmountTotal,
     label: "Total",
-    amount: displayCurrency(total),
-    extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";")
+    amount: displayCurrency(total)
   }));
 };
 
@@ -40169,8 +40224,6 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       _fees = _ref4.fees,
       subtotal = _ref4.subtotal,
       total = _ref4.total,
-      _ref4$variant = _ref4.variant,
-      variant = _ref4$variant === void 0 ? "default" : _ref4$variant,
       _ref4$hideTitle = _ref4.hideTitle,
       hideTitle = _ref4$hideTitle === void 0 ? false : _ref4$hideTitle,
       _ref4$titleText = _ref4.titleText,
@@ -40236,15 +40289,13 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     feeElems: feeElems,
     subtotal: subtotal,
     total: total,
-    themeValues: themeValues,
-    variant: variant
+    themeValues: themeValues
   })) : /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
     subtotal: subtotal,
     total: total,
-    themeValues: themeValues,
-    variant: variant
+    themeValues: themeValues
   });
   var title = hideTitle ? /*#__PURE__*/React__default.createElement(React.Fragment, null) : isCollapsible ? /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",
@@ -40279,12 +40330,12 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   });
 };
 
-var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$y, "default");
+var PaymentDetails$1 = themeComponent(PaymentDetails, "PaymentDetails", fallbackValues$A, "default");
 
 var linkColor$4 = {
   "default": "#357fb8"
 };
-var fontSize$9 = {
+var fontSize$b = {
   "default": "1rem"
 };
 var lineHeight$5 = {
@@ -40296,9 +40347,9 @@ var fontWeight$7 = {
 var modalLinkHoverFocus$1 = {
   "default": "outline: none; text-decoration: underline;"
 };
-var fallbackValues$z = {
+var fallbackValues$B = {
   linkColor: linkColor$4,
-  fontSize: fontSize$9,
+  fontSize: fontSize$b,
   lineHeight: lineHeight$5,
   fontWeight: fontWeight$7,
   modalLinkHoverFocus: modalLinkHoverFocus$1
@@ -40355,7 +40406,7 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
   }, link));
 };
 
-var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$z, "default");
+var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$B, "default");
 
 var PaymentFormACH = function PaymentFormACH(_ref) {
   var _routingNumberErrors, _accountNumberErrors;
@@ -40780,7 +40831,7 @@ var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$3 = "".concat(GREY_CHATEAU);
 var focusStyles = "outline: none;";
-var fallbackValues$A = {
+var fallbackValues$C = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
@@ -40788,10 +40839,10 @@ var fallbackValues$A = {
   focusStyles: focusStyles
 };
 
-function _templateObject$A() {
+function _templateObject$C() {
   var data = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    ", "\n    transition: opacity 0.3s ease;\n  "]);
 
-  _templateObject$A = function _templateObject() {
+  _templateObject$C = function _templateObject() {
     return data;
   };
 
@@ -40893,7 +40944,7 @@ var RadioSection = function RadioSection(_ref) {
     }
   };
   var borderStyles = "\n    border-width: 0 0 1px 0;\n    border-color: ".concat(themeValues.borderColor, ";\n    border-style: solid;\n    border-radius: 0px;\n    transform-origin: 100% 0;\n\n    &:last-child {\n      border-width: 0;\n    }\n  ");
-  var RightIcon = styled__default.img(_templateObject$A(), function (_ref2) {
+  var RightIcon = styled__default.img(_templateObject$C(), function (_ref2) {
     var isMobile = _ref2.isMobile;
     return isMobile ? "14px" : "18px";
   }, function (_ref3) {
@@ -41003,7 +41054,7 @@ var RadioSection = function RadioSection(_ref) {
   })));
 };
 
-var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$A);
+var RadioSection$1 = themeComponent(RadioSection, "RadioSection", fallbackValues$C);
 
 var RegistrationForm = function RegistrationForm(_ref) {
   var _emailErrorMessages, _passwordErrorMessage;
@@ -41293,7 +41344,7 @@ var ResetPasswordSuccess = withWindowSize(ResetConfirmationForm$2);
 var activeTabBackground = "#FFFFFF";
 var activeTabAccent = "#15749D";
 var activeTabHover = "#B8D5E1";
-var fallbackValues$B = {
+var fallbackValues$D = {
   activeTabBackground: activeTabBackground,
   activeTabAccent: activeTabAccent,
   activeTabHover: activeTabHover
@@ -41370,12 +41421,12 @@ var Tabs = function Tabs(_ref) {
   }))));
 };
 
-var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$B);
+var Tabs$1 = themeComponent(Tabs, "NavigationTab", fallbackValues$D);
 
 var activeTabBackground$1 = "#FFFFFF";
 var activeTabAccent$1 = "#15749D";
 var activeTabHover$1 = "#B8D5E1";
-var fallbackValues$C = {
+var fallbackValues$E = {
   activeTabBackground: activeTabBackground$1,
   activeTabAccent: activeTabAccent$1,
   activeTabHover: activeTabHover$1
@@ -41431,7 +41482,7 @@ var TabSidebar = function TabSidebar(_ref) {
   })));
 };
 
-var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$C);
+var TabSidebar$1 = themeComponent(TabSidebar, "ProfileTab", fallbackValues$E);
 
 var backgroundColor$9 = {
   "default": "#ffffff",
@@ -41445,7 +41496,7 @@ var border$3 = {
   "default": "#cdcdcd",
   footer: "#cdcdcd"
 };
-var fontSize$a = {
+var fontSize$c = {
   "default": "1rem",
   footer: "0.875rem"
 };
@@ -41465,11 +41516,11 @@ var accessibilityColor = {
   "default": "#3181E3",
   footer: "#3181E3"
 };
-var fallbackValues$D = {
+var fallbackValues$F = {
   backgroundColor: backgroundColor$9,
   linkColor: linkColor$5,
   border: border$3,
-  fontSize: fontSize$a,
+  fontSize: fontSize$c,
   lineHeight: lineHeight$6,
   fontWeight: fontWeight$8,
   modalLinkHoverFocus: modalLinkHoverFocus$2,
@@ -41527,7 +41578,7 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
   }, link));
 };
 
-var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$D, "default");
+var TermsAndConditionsModal$1 = themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues$F, "default");
 
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var onCheck = _ref.onCheck,
@@ -41602,7 +41653,7 @@ var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor = BRIGHT_GREY;
 var imageBackgroundColor = MATISSE_BLUE;
-var fallbackValues$E = {
+var fallbackValues$G = {
   fontWeight: fontWeight$9,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
@@ -41610,16 +41661,16 @@ var fallbackValues$E = {
   imageBackgroundColor: imageBackgroundColor
 };
 
-function _templateObject$B() {
+function _templateObject$D() {
   var data = _taggedTemplateLiteral(["\n  width: auto;\n  height: 215px;\n"]);
 
-  _templateObject$B = function _templateObject() {
+  _templateObject$D = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var WelcomeImage = styled__default.img(_templateObject$B());
+var WelcomeImage = styled__default.img(_templateObject$D());
 
 var WelcomeModule = function WelcomeModule(_ref) {
   var heading = _ref.heading,
@@ -41655,7 +41706,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   })))));
 };
 
-var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$E));
+var WelcomeModule$1 = /*#__PURE__*/React.memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues$G));
 
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
@@ -41703,7 +41754,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
 };
 
 var pageBackground = "#F6F6F9";
-var fallbackValues$F = {
+var fallbackValues$H = {
   pageBackground: pageBackground
 };
 
@@ -41750,7 +41801,7 @@ var CenterSingle = function CenterSingle(_ref) {
   })));
 };
 
-var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$F));
+var CenterSingle$1 = withWindowSize(themeComponent(CenterSingle, "Global", fallbackValues$H));
 
 var CenterStack = function CenterStack(_ref) {
   var header = _ref.header,
@@ -41792,7 +41843,7 @@ var CenterStack = function CenterStack(_ref) {
   })));
 };
 
-var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$F));
+var CenterStack$1 = withWindowSize(themeComponent(CenterStack, "Global", fallbackValues$H));
 
 var CenterSingle$2 = function CenterSingle(_ref) {
   var header = _ref.header,
@@ -41832,7 +41883,7 @@ var CenterSingle$2 = function CenterSingle(_ref) {
   })));
 };
 
-var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$F));
+var DefaultPageTemplate = withWindowSize(themeComponent(CenterSingle$2, "Global", fallbackValues$H));
 
 var SidebarSingleContent = function SidebarSingleContent(_ref) {
   var header = _ref.header,
@@ -41886,7 +41937,7 @@ var SidebarSingleContent = function SidebarSingleContent(_ref) {
   })));
 };
 
-var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$F));
+var SidebarSingleContent$1 = withWindowSize(themeComponent(SidebarSingleContent, "Global", fallbackValues$H));
 
 var SidebarStackContent = function SidebarStackContent(_ref) {
   var header = _ref.header,
@@ -41957,7 +42008,7 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
   })));
 };
 
-var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$F));
+var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$H));
 
 
 
@@ -42011,6 +42062,7 @@ exports.CountryDropdown = CountryDropdown;
 exports.Cover = Cover;
 exports.CustomerSearchIcon = CustomerSearchIcon;
 exports.DefaultPageTemplate = DefaultPageTemplate;
+exports.Detail = Detail$1;
 exports.DisplayBox = DisplayBox$1;
 exports.DisplayCard = DisplayCard;
 exports.Dropdown = Dropdown$1;
@@ -42077,7 +42129,6 @@ exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentSearchIcon = PaymentSearchIcon;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PendingIcon = PendingIcon;
-exports.PeriscopeFailedIcon = PeriscopeFailedIcon;
 exports.PhoneForm = PhoneForm;
 exports.Placeholder = Placeholder$1;
 exports.ProcessingFee = ProcessingFee$1;
@@ -42119,6 +42170,7 @@ exports.TermsAndConditionsModal = TermsAndConditionsModal$1;
 exports.Text = Text$1;
 exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
+exports.Title = Title$1;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.TrashIcon = TrashIcon$1;
 exports.TypeaheadInput = TypeaheadInput;