@thecb/components 4.4.4 → 4.5.0-beta.1

package/dist/index.cjs.js

@@ -15222,215 +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 CheckIcon = function CheckIcon() {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "32",
-    height: "21",
-    viewBox: "0 0 32 21"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    stroke: "none",
-    strokeWidth: "1"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    fillRule: "nonzero",
-    transform: "translate(-870 -426)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(132 332)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(0 70)"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: "translate(738 24)"
-  }, /*#__PURE__*/React__default.createElement("rect", {
-    width: "32",
-    height: "21",
-    x: "0",
-    y: "0",
-    fill: "#CFE5F4",
-    rx: "1"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    fill: "#184390",
-    d: "M20.9 8.536a.292.292 0 00.213-.086.282.282 0 00.087-.209v-.295h.6c.05 0 .096-.02.137-.061A.186.186 0 0022 7.75v-.393c0-.082-.042-.139-.125-.172l-5.8-2.16a.127.127 0 00-.15 0l-5.8 2.16c-.083.033-.125.09-.125.172v.393c0 .05.02.094.063.135.041.041.087.061.137.061h.6v.295c0 .082.03.151.087.209.059.057.13.086.213.086h9.8zm.3 5.893v-.492a.282.282 0 00-.087-.208.292.292 0 00-.213-.086H20V8.929h-1.6v4.714h-1.6V8.929h-1.6v4.714h-1.6V8.929H12v4.714h-.9a.292.292 0 00-.213.086.282.282 0 00-.087.209v.49h10.4zM21.8 16c.05 0 .096-.02.137-.061a.186.186 0 00.063-.135v-.393a.563.563 0 00-.175-.418.584.584 0 00-.425-.172H10.6a.584.584 0 00-.425.172.563.563 0 00-.175.418v.393c0 .049.02.094.063.135.041.04.087.061.137.061h11.6z"
-  })))))));
-};
-
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -16612,7 +16403,7 @@ function parseToRgb(color) {
     };
   }
 
-  var rgbaMatched = rgbaRegex.exec(normalizedColor);
+  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
   if (rgbaMatched) {
     return {
@@ -16643,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);
@@ -21842,7 +21633,6 @@ var Jumbo$1 = withWindowSize(Jumbo);
 
 var fontWeight$4 = {
   "default": "600",
-  pS: "600",
   p: "600",
   pL: "600",
   h6: "700"
@@ -21857,8 +21647,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"
@@ -21866,12 +21655,12 @@ 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));
 };
 
@@ -21883,7 +21672,7 @@ var weightTitle = {
 };
 var paragraphVariant = {
   "default": "pL",
-  small: "pS"
+  small: "p"
 };
 var fallbackValues$l = {
   weightTitle: weightTitle,
@@ -39223,53 +39012,43 @@ var Modal$1 = function Modal(_ref) {
 
 var fontSize$8 = {
   "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,
@@ -39297,7 +39076,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"),
@@ -40124,11 +39903,11 @@ var lineItem = {
 };
 var labeledAmountSubtotal = {
   "default": "pL",
-  small: "pS"
+  small: "p"
 };
 var labeledAmountTotal = {
   "default": "h6",
-  small: "p"
+  small: "pL"
 };
 var fallbackValues$y = {
   backgroundColor: backgroundColor$8,
@@ -40142,7 +39921,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"
@@ -40156,8 +39934,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)
   }));
 };
 
@@ -40202,8 +39979,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,
@@ -40269,15 +40044,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%",
@@ -42034,7 +41807,6 @@ exports.CenterStack = CenterStack$1;
 exports.ChangePasswordForm = ChangePasswordForm;
 exports.ChargebackIcon = ChargebackIcon;
 exports.ChargebackReversalIcon = ChargebackReversalIcon;
-exports.CheckIcon = CheckIcon;
 exports.Checkbox = Checkbox$1;
 exports.CheckboxList = CheckboxList$1;
 exports.CheckmarkIcon = CheckmarkIcon;
@@ -42111,7 +41883,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.4.4",
+  "version": "4.5.0-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/detail/Detail.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { DetailText } from "./Detail.styled";
+import { safeChildren } from "../../../util/general";
+import {
+  fallbackValues,
+  mobileFallbackValues,
+  MOBILE_BREAKPOINT
+} from "./Detail.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+/*
+  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
+*/
+
+const isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
+const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+const mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;
+const fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues;
+
+const Detail = ({
+  themeValues,
+  weight = FONT_WEIGHT_REGULAR,
+  color = FIREFLY_GREY,
+  margin = 0,
+  textAlign,
+  extraStyles = ``,
+  className,
+  variant = "regular",
+  as = "p",
+  dataQa,
+  children,
+  ...rest
+}) => {
+  return (
+    <DetailText
+      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, <span />)}
+    </DetailText>
+  );
+};
+
+export default themeComponent(Detail, "Detail", fallbacks, "regular");

package/src/components/atoms/detail/Detail.styled.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const DetailText = styled.p`
+  font-size: ${({ fontSize }) => fontSize};
+  line-height: 1.5;
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  margin: ${({ margin }) => margin};
+  text-align: ${({ textAlign }) => textAlign};
+  font-family: ${({ fontFamily }) => fontFamily};
+
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/detail/Detail.theme.js

@@ -0,0 +1,32 @@
+const fontSize = {
+  large: "1.125rem",
+  regular: "1rem",
+  small: "0.875rem",
+  extraSmall: "0.75rem"
+};
+
+const fontFamily = {
+  large: "Public Sans",
+  regular: "Public Sans",
+  small: "Public Sans",
+  extraSmall: "Public Sans"
+};
+
+const mobileFontSize = {
+  large: "1.14285rem",
+  regular: "1",
+  small: "0.85714rem",
+  extraSmall: "0.71428rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};
+
+export const mobileFallbackValues = {
+  fontFamily,
+  fontSize: mobileFontSize
+};
+
+export const MOBILE_BREAKPOINT = 768;

package/src/components/atoms/detail/index.js

@@ -0,0 +1,3 @@
+import Detail from "./Detail";
+
+export default Detail;

package/src/components/atoms/heading/Heading.js

@@ -1,3 +1,9 @@
+/*
+SOON TO BE DEPRECATED AS OF 8/1/2021
+
+For new pages/applications, please us <Title /> and <Detail /> atoms
+
+*/
 import React from "react";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { FIREFLY_GREY } from "../../../constants/colors";

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

@@ -51,8 +51,6 @@ import NoPaymentResultsIcon from "./NoPaymentResultsIcon";
 import CustomerSearchIcon from "./CustomerSearchIcon";
 import PaymentSearchIcon from "./PaymentSearchIcon";
 import ResetPasswordIcon from "./ResetPasswordIcon";
-import PeriscopeFailedIcon from "./PeriscopeFailedIcon";
-import CheckIcon from "./CheckIcon";
 
 export {
   AccountsIcon,
@@ -107,7 +105,5 @@ export {
   NoPaymentResultsIcon,
   CustomerSearchIcon,
   PaymentSearchIcon,
-  ResetPasswordIcon,
-  PeriscopeFailedIcon,
-  CheckIcon
+  ResetPasswordIcon
 };

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -5,14 +5,7 @@ import { Stack } from "../layouts";
 import Heading from "../heading";
 import Paragraph from "../paragraph";
 
-const LabeledAmount = ({
-  variant = "pL",
-  label,
-  amount,
-  themeValues,
-  as,
-  extraStyles
-}) => {
+const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
   const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
   return (
     <Stack direction="row">
@@ -20,7 +13,7 @@ const LabeledAmount = ({
         variant={variant}
         as={as}
         weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: start; flex: 3;`}
+        extraStyles="text-align: start; flex: 3;"
       >
         {label}:
       </LabeledAmountText>
@@ -28,7 +21,7 @@ const LabeledAmount = ({
         variant={variant}
         as={as}
         weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: end; flex: 1;`}
+        extraStyles="text-align: end; flex: 1;"
       >
         {amount}
       </LabeledAmountText>

package/src/components/atoms/labeled-amount/LabeledAmount.theme.js

@@ -1,6 +1,5 @@
 const fontWeight = {
   default: "600",
-  pS: "600",
   p: "600",
   pL: "600",
   h6: "700"

package/src/components/atoms/line-item/LineItem.theme.js

@@ -1,5 +1,5 @@
 const weightTitle = { default: "600", small: "400" };
-const paragraphVariant = { default: "pL", small: "pS" };
+const paragraphVariant = { default: "pL", small: "p" };
 
 export const fallbackValues = {
   weightTitle,

package/src/components/atoms/paragraph/Paragraph.js

@@ -1,3 +1,9 @@
+/*
+SOON TO BE DEPRECATED AS OF 8/1/2021
+
+For new pages/applications, please us <Title /> and <Detail /> atoms
+
+*/
 import React from "react";
 import { fallbackValues } from "./Paragraph.theme";
 import { themeComponent } from "../../../util/themeUtils";

package/src/components/atoms/title/Title.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { TitleText } from "./Title.styled";
+import { safeChildren } from "../../../util/general";
+import {
+  fallbackValues,
+  mobileFallbackValues,
+  MOBILE_BREAKPOINT
+} from "./Title.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+/*
+  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
+*/
+
+const isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
+const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+const mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;
+const fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues;
+
+const Title = ({
+  themeValues,
+  weight = FONT_WEIGHT_REGULAR,
+  color = FIREFLY_GREY,
+  margin = 0,
+  textAlign,
+  extraStyles = ``,
+  className,
+  variant = "large",
+  as = "h1",
+  dataQa,
+  children,
+  ...rest
+}) => {
+  return (
+    <TitleText
+      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, <span />)}
+    </TitleText>
+  );
+};
+
+export default themeComponent(Title, "Title", fallbacks, "large");

package/src/components/atoms/title/Title.styled.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const TitleText = styled.h1`
+  font-size: ${({ fontSize }) => fontSize};
+  line-height: 1.5;
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  margin: ${({ margin }) => margin};
+  text-align: ${({ textAlign }) => textAlign};
+  font-family: ${({ fontFamily }) => fontFamily};
+
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/title/Title.theme.js

@@ -0,0 +1,26 @@
+const fontSize = {
+  large: "1.5rem",
+  small: "1.25rem"
+};
+
+const fontFamily = {
+  large: "Public Sans",
+  small: "Public Sans"
+};
+
+const mobileFontSize = {
+  large: "1.5rem",
+  small: "1.2142rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};
+
+export const mobileFallbackValues = {
+  fontFamily,
+  fontSize: mobileFontSize
+};
+
+export const MOBILE_BREAKPOINT = 768;

package/src/components/atoms/title/index.js

@@ -0,0 +1,3 @@
+import Title from "./Title";
+
+export default Title;

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

@@ -16,9 +16,7 @@ const Module = ({
   <Fragment>
     {heading && (
       <Heading
-        variant={
-          variant === "small" ? "h6" : variant === "default" ? "h5" : "h2"
-        }
+        variant={variant === "default" ? "h5" : "h2"}
         weight={themeValues.fontWeight}
         color={themeValues.fontColor}
         margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}

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

@@ -1,38 +1,20 @@
 import { WHITE, CHARADE_GREY } from "../../../constants/colors";
 
-const fontSize = {
-  default: "1.375rem",
-  largeTitle: "1.75rem",
-  small: "1.25rem"
-};
-const fontWeight = { default: "600", largeTitle: "700", small: "600" };
-const fontColor = {
-  default: CHARADE_GREY,
-  largeTitle: CHARADE_GREY,
-  small: CHARADE_GREY
-};
-const lineHeight = { default: "2rem", largeTitle: "2rem", small: "2rem" };
-const textAlign = { default: "left", largeTitle: "left", small: "left" };
-const titleType = { default: "h5", largeTitle: "h1", small: "h6" };
-const titleSpacing = {
-  default: "0.5rem",
-  largeTitle: "1.125rem",
-  small: "0.5rem"
-};
+const fontSize = { default: "1.375rem", largeTitle: "1.75rem" };
+const fontWeight = { default: "600", largeTitle: "700" };
+const fontColor = { default: CHARADE_GREY, largeTitle: CHARADE_GREY };
+const lineHeight = { default: "2rem", largeTitle: "2rem" };
+const textAlign = { default: "left", largeTitle: "left" };
+const titleType = { default: "h5", largeTitle: "h1" };
+const titleSpacing = { default: "0.5rem", largeTitle: "1.125rem" };
 const boxShadow = {
   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)"
 };
-const borderRadius = {
-  default: "0.25rem",
-  largeTitle: "0.25rem",
-  small: "0.25rem"
-};
-const backgroundColor = { default: WHITE, largeTitle: WHITE, small: WHITE };
+const borderRadius = { default: "0.25rem", largeTitle: "0.25rem" };
+const backgroundColor = { default: WHITE, largeTitle: WHITE };
 
 export const fallbackValues = {
   fontSize,

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

@@ -10,14 +10,12 @@ import LabeledAmount from "../../atoms/labeled-amount";
 import LineItem from "../../atoms/line-item";
 import Heading from "../../atoms/heading";
 import SolidDivider from "../../atoms/solid-divider";
-import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
 
 const PaymentDetailsContent = ({
   lineItemElems,
   feeElems,
   subtotal,
   total,
-  variant,
   themeValues
 }) => (
   <Stack childGap="16px">
@@ -37,7 +35,6 @@ const PaymentDetailsContent = ({
       variant={themeValues.labeledAmountTotal}
       label="Total"
       amount={displayCurrency(total)}
-      extraStyles={variant === "small" && `font-weight: ${FONT_WEIGHT_BOLD};`}
     />
   </Stack>
 );
@@ -77,7 +74,6 @@ const PaymentDetails = ({
   fees: _fees,
   subtotal,
   total,
-  variant = "default",
   hideTitle = false,
   titleText = "Payment Details",
   initiallyOpen = false,
@@ -117,12 +113,12 @@ const PaymentDetails = ({
       <SolidDivider />
       <Box padding="8px" />
       <PaymentDetailsContent
-        {...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
+        {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
       />
     </Stack>
   ) : (
     <PaymentDetailsContent
-      {...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
+      {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
     />
   );
   const title = hideTitle ? (

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

@@ -1,7 +1,7 @@
 const backgroundColor = { default: "transparent", small: "transparent" };
 const lineItem = { default: "default", small: "small" };
-const labeledAmountSubtotal = { default: "pL", small: "pS" };
-const labeledAmountTotal = { default: "h6", small: "p" };
+const labeledAmountSubtotal = { default: "pL", small: "p" };
+const labeledAmountTotal = { default: "h6", small: "pL" };
 
 export const fallbackValues = {
   backgroundColor,

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

@@ -1,37 +0,0 @@
-import React from "react";
-
-const CheckIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="32"
-      height="21"
-      viewBox="0 0 32 21"
-    >
-      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
-        <g fillRule="nonzero" transform="translate(-870 -426)">
-          <g transform="translate(132 332)">
-            <g transform="translate(0 70)">
-              <g transform="translate(738 24)">
-                <rect
-                  width="32"
-                  height="21"
-                  x="0"
-                  y="0"
-                  fill="#CFE5F4"
-                  rx="1"
-                ></rect>
-                <path
-                  fill="#184390"
-                  d="M20.9 8.536a.292.292 0 00.213-.086.282.282 0 00.087-.209v-.295h.6c.05 0 .096-.02.137-.061A.186.186 0 0022 7.75v-.393c0-.082-.042-.139-.125-.172l-5.8-2.16a.127.127 0 00-.15 0l-5.8 2.16c-.083.033-.125.09-.125.172v.393c0 .05.02.094.063.135.041.041.087.061.137.061h.6v.295c0 .082.03.151.087.209.059.057.13.086.213.086h9.8zm.3 5.893v-.492a.282.282 0 00-.087-.208.292.292 0 00-.213-.086H20V8.929h-1.6v4.714h-1.6V8.929h-1.6v4.714h-1.6V8.929H12v4.714h-.9a.292.292 0 00-.213.086.282.282 0 00-.087.209v.49h10.4zM21.8 16c.05 0 .096-.02.137-.061a.186.186 0 00.063-.135v-.393a.563.563 0 00-.175-.418.584.584 0 00-.425-.172H10.6a.584.584 0 00-.425.172.563.563 0 00-.175.418v.393c0 .049.02.094.063.135.041.04.087.061.137.061h11.6z"
-                ></path>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-};
-
-export default CheckIcon;

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

@@ -1,206 +0,0 @@
-import React from "react";
-
-const PeriscopeFailedIcon = () => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      width="632"
-      height="345"
-      viewBox="0 0 632 345"
-    >
-      <defs>
-        <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"
-        ></path>
-        <filter
-          id="periscope-failed-filter-2"
-          width="111.3%"
-          height="124.5%"
-          x="-5.7%"
-          y="-12.3%"
-          filterUnits="objectBoundingBox"
-        >
-          <feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-            stdDeviation="8"
-          ></feGaussianBlur>
-          <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"
-          ></feColorMatrix>
-        </filter>
-        <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"
-        ></path>
-        <filter
-          id="periscope-failed-filter-4"
-          width="152.7%"
-          height="277.7%"
-          x="-26.4%"
-          y="-88.9%"
-          filterUnits="objectBoundingBox"
-        >
-          <feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-            stdDeviation="8"
-          ></feGaussianBlur>
-          <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"
-          ></feColorMatrix>
-        </filter>
-        <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"
-        ></path>
-        <filter
-          id="periscope-failed-filter-6"
-          width="137.8%"
-          height="252.4%"
-          x="-18.9%"
-          y="-76.2%"
-          filterUnits="objectBoundingBox"
-        >
-          <feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-            stdDeviation="8"
-          ></feGaussianBlur>
-          <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"
-          ></feColorMatrix>
-        </filter>
-        <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"
-        ></path>
-        <filter
-          id="periscope-failed-filter-8"
-          width="126.4%"
-          height="252.4%"
-          x="-13.2%"
-          y="-76.2%"
-          filterUnits="objectBoundingBox"
-        >
-          <feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-            stdDeviation="8"
-          ></feGaussianBlur>
-          <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"
-          ></feColorMatrix>
-        </filter>
-        <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"
-        ></path>
-        <filter
-          id="periscope-failed-filter-10"
-          width="126.4%"
-          height="252.4%"
-          x="-13.2%"
-          y="-76.2%"
-          filterUnits="objectBoundingBox"
-        >
-          <feOffset in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-          <feGaussianBlur
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-            stdDeviation="8"
-          ></feGaussianBlur>
-          <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"
-          ></feColorMatrix>
-        </filter>
-      </defs>
-      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
-        <g transform="translate(-404 -259)">
-          <g transform="translate(132 195)">
-            <g transform="translate(288 64)">
-              <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"
-              ></path>
-              <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"
-              ></path>
-              <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"
-              ></path>
-              <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"
-              ></path>
-              <g>
-                <use
-                  fill="#000"
-                  filter="url(#periscope-failed-filter-2)"
-                  xlinkHref="#periscope-failed-path-1"
-                ></use>
-                <use fill="#15749D" xlinkHref="#periscope-failed-path-1"></use>
-              </g>
-              <g transform="translate(0 96.764)">
-                <g>
-                  <use
-                    fill="#000"
-                    filter="url(#periscope-failed-filter-4)"
-                    xlinkHref="#periscope-failed-path-3"
-                  ></use>
-                  <use fill="#FFF" xlinkHref="#periscope-failed-path-3"></use>
-                </g>
-                <g>
-                  <use
-                    fill="#000"
-                    filter="url(#periscope-failed-filter-6)"
-                    xlinkHref="#periscope-failed-path-5"
-                  ></use>
-                  <use fill="#FFF" xlinkHref="#periscope-failed-path-5"></use>
-                </g>
-                <g>
-                  <use
-                    fill="#000"
-                    filter="url(#periscope-failed-filter-8)"
-                    xlinkHref="#periscope-failed-path-7"
-                  ></use>
-                  <use fill="#FFF" xlinkHref="#periscope-failed-path-7"></use>
-                </g>
-                <g>
-                  <use
-                    fill="#000"
-                    filter="url(#periscope-failed-filter-10)"
-                    xlinkHref="#periscope-failed-path-9"
-                  ></use>
-                  <use fill="#FFF" xlinkHref="#periscope-failed-path-9"></use>
-                </g>
-                <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)"
-                ></path>
-              </g>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-};
-
-export default PeriscopeFailedIcon;