@thecb/components 8.4.0-beta.9 → 8.4.1-beta.0

package/dist/index.cjs.js

@@ -13945,6 +13945,114 @@ var GenericCard = function GenericCard() {
   }));
 };
 
+var GenericErrorIcon = function GenericErrorIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "474",
+    height: "308",
+    viewBox: "0 0 474 308",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M107.968 73H347.689C351.538 73 354.658 76.12 354.658 79.968V258.366C354.658 262.214 351.538 265.334 347.689 265.334H107.968C104.119 265.334 101 262.214 101 258.366V79.968C101 76.12 104.119 73 107.968 73",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M200.435 148.429C201.244 146.174 203.256 144.701 205.477 144.701C207.698 144.701 209.71 146.174 210.518 148.429C211.038 149.878 212.634 150.632 214.083 150.112C215.532 149.593 216.286 147.997 215.766 146.547C214.239 142.287 210.267 139.126 205.477 139.126C200.687 139.126 196.715 142.286 195.187 146.547C194.668 147.997 195.422 149.593 196.871 150.112C198.32 150.632 199.916 149.878 200.435 148.429ZM246.435 148.429C247.244 146.174 249.256 144.701 251.477 144.701C253.698 144.701 255.71 146.174 256.518 148.429C257.038 149.878 258.634 150.632 260.083 150.112C261.532 149.593 262.286 147.997 261.766 146.547C260.239 142.287 256.267 139.126 251.477 139.126C246.687 139.126 242.715 142.286 241.187 146.547C240.668 147.997 241.422 149.593 242.871 150.112C244.32 150.632 245.916 149.878 246.435 148.429ZM208 195.674C209.54 195.674 210.788 194.426 210.788 192.886C210.788 190.622 212.623 188.788 214.885 188.788H241.305C243.569 188.788 245.404 190.623 245.404 192.886C245.404 194.426 246.652 195.674 248.191 195.674C249.731 195.674 250.979 194.426 250.979 192.886C250.979 187.544 246.648 183.213 241.305 183.213H214.885C209.543 183.213 205.213 187.544 205.213 192.886C205.213 194.426 206.461 195.674 208 195.674ZM31.6619 247.285C31.7125 249.493 29.9631 251.325 27.7546 251.375L12.5756 251.723C10.367 251.774 8.53559 250.024 8.48496 247.816C8.43432 245.607 10.1837 243.776 12.3922 243.725L27.5712 243.377C29.7798 243.327 31.6112 245.076 31.6619 247.285ZM99.6215 251.376C101.831 251.361 103.609 249.559 103.595 247.35C103.58 245.141 101.777 243.362 99.5683 243.376L47.1963 243.724C44.9872 243.739 43.2083 245.542 43.223 247.751C43.2377 249.96 45.0404 251.739 47.2495 251.724L99.6215 251.376ZM423.796 247.354C423.808 249.563 422.027 251.364 419.818 251.376L356.062 251.724C353.853 251.736 352.052 249.955 352.04 247.746C352.028 245.537 353.809 243.736 356.018 243.724L419.774 243.376C421.984 243.364 423.784 245.145 423.796 247.354ZM473.424 247.33C473.45 249.539 471.68 251.35 469.471 251.376L439.636 251.724C437.427 251.75 435.615 249.98 435.589 247.771C435.564 245.562 437.333 243.75 439.542 243.724L469.377 243.376C471.586 243.351 473.398 245.121 473.424 247.33Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M101 99H355V73H101V99Z",
+    fill: "#CACED8"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M117 86C117 87.6569 115.657 89 114 89C112.343 89 111 87.6569 111 86C111 84.3431 112.343 83 114 83C115.657 83 117 84.3431 117 86Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M127 86C127 87.6569 125.657 89 124 89C122.343 89 121 87.6569 121 86C121 84.3431 122.343 83 124 83C125.657 83 127 84.3431 127 86Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M137 86C137 87.6569 135.657 89 134 89C132.343 89 131 87.6569 131 86C131 84.3431 132.343 83 134 83C135.657 83 137 84.3431 137 86Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M352 102H104V96H352V102Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M223.998 268C223.998 265.691 222.126 263.819 219.817 263.819C217.508 263.819 215.636 265.691 215.636 268V288.614H204C201.691 288.614 199.819 290.486 199.819 292.795C199.819 295.104 201.691 296.976 204 296.976H219.817C222.126 296.976 223.998 295.104 223.998 292.795V268ZM239.491 268C239.491 265.691 237.619 263.819 235.31 263.819C233.001 263.819 231.129 265.691 231.129 268V293.574C231.129 295.883 233.001 297.755 235.31 297.755H251.127C253.436 297.755 255.308 295.883 255.308 293.574C255.308 291.265 253.436 289.393 251.127 289.393H239.491V268Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M102.461 202.558C103.91 204.226 103.732 206.753 102.064 208.201L79.804 227.532C78.136 228.981 75.6096 228.803 74.1611 227.135C72.7126 225.467 72.8905 222.94 74.5585 221.492L96.8185 202.161C98.4864 200.712 101.013 200.89 102.461 202.558Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M396.5 185.5C394.291 185.5 392.5 187.291 392.5 189.5C392.5 191.709 394.291 193.5 396.5 193.5H404.869L380.696 219.39L358.454 202.109C356.71 200.754 354.197 201.069 352.842 202.814C351.486 204.558 351.802 207.071 353.546 208.427L378.673 227.949C380.307 229.218 382.639 229.032 384.051 227.52L415.814 193.5H429.5C431.709 193.5 433.5 191.709 433.5 189.5C433.5 187.291 431.709 185.5 429.5 185.5H396.5Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M107.969 76C105.777 76 104 77.7769 104 79.969V258.366C104 260.557 105.777 262.334 107.969 262.334H347.69C349.881 262.334 351.658 260.557 351.658 258.366V79.969C351.658 77.7766 349.881 76 347.69 76H107.969ZM98 79.969C98 74.4631 102.463 70 107.969 70H347.69C353.195 70 357.658 74.4634 357.658 79.969V258.366C357.658 263.871 353.195 268.334 347.69 268.334H107.969C102.463 268.334 98 263.871 98 258.366V79.969Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M78.0922 220.617C75.9411 220.114 73.7895 221.45 73.2864 223.601C72.7833 225.752 74.1193 227.904 76.2704 228.407L125.537 239.929C126.148 245.765 131.082 250.314 137.079 250.314H143.723C145.932 250.314 147.723 248.523 147.723 246.314C147.723 244.105 145.932 242.314 143.723 242.314H137.079C135.088 242.314 133.474 240.7 133.474 238.708C133.474 236.717 135.088 235.103 137.079 235.103C139.288 235.103 141.079 233.312 141.079 231.103C141.079 228.894 139.288 227.103 137.079 227.103C133.095 227.103 129.579 229.111 127.49 232.17L78.0922 220.617Z",
+    fill: "#3B5BDB"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M452.68 155.302C450.663 157.996 448.259 160.384 445.551 162.382C444.575 163.102 443.215 162.995 442.358 162.138L439.438 159.218C438.636 158.416 437.423 158.218 436.397 158.698C435.931 158.916 435.458 159.12 434.979 159.312C434.678 159.431 434.375 159.545 434.071 159.655C432.987 160.039 432.245 161.041 432.245 162.192L432.244 166.276C432.244 167.493 431.354 168.533 430.15 168.706C428.54 168.939 426.895 169.059 425.221 169.059C423.513 169.059 421.835 168.934 420.195 168.693C418.992 168.516 418.104 167.478 418.104 166.262V162.151C418.104 161.024 417.395 160.02 416.333 159.641C415.469 159.331 414.625 158.979 413.805 158.584C412.782 158.093 411.564 158.298 410.761 159.1L407.877 161.985C407.015 162.847 405.646 162.949 404.67 162.218C402.004 160.218 399.64 157.839 397.656 155.16C396.934 154.185 397.039 152.823 397.897 151.966L400.811 149.05C401.609 148.251 401.814 147.041 401.332 146.021C400.973 145.257 400.649 144.474 400.362 143.672C399.981 142.609 398.979 141.896 397.849 141.897H393.739C392.523 141.897 391.485 141.008 391.308 139.806C391.067 138.165 390.942 136.487 390.942 134.78C390.942 133.072 391.067 131.394 391.308 129.753C391.485 128.551 392.523 127.662 393.738 127.662H397.849C398.979 127.662 399.982 126.949 400.363 125.885C400.642 125.103 400.958 124.337 401.308 123.59C401.786 122.569 401.581 121.361 400.784 120.564L397.862 117.643C397.004 116.785 396.898 115.426 397.617 114.45C399.617 111.741 402.004 109.337 404.698 107.32C405.673 106.59 407.042 106.693 407.904 107.554L410.792 110.444C411.594 111.245 412.811 111.45 413.833 110.961C414.645 110.572 415.479 110.224 416.333 109.918C417.396 109.539 418.104 108.535 418.104 107.407V103.297C418.104 102.082 418.992 101.043 420.195 100.866C421.835 100.625 423.513 100.5 425.221 100.5C426.92 100.5 428.59 100.624 430.223 100.863C431.436 101.04 432.327 102.095 432.314 103.322L432.267 107.351C432.254 108.494 432.97 109.514 434.047 109.897C434.889 110.195 435.71 110.535 436.51 110.914C437.538 111.401 438.76 111.189 439.558 110.377L442.406 107.481C443.262 106.61 444.634 106.497 445.616 107.225C448.288 109.206 450.662 111.568 452.659 114.229C453.391 115.204 453.288 116.573 452.426 117.435L449.541 120.32C448.74 121.122 448.534 122.34 449.026 123.364C449.42 124.184 449.773 125.028 450.082 125.893C450.462 126.954 451.465 127.662 452.593 127.662H456.703C457.918 127.662 458.957 128.551 459.134 129.753C459.375 131.394 459.5 133.072 459.5 134.78C459.5 136.49 459.374 138.171 459.133 139.815C458.956 141.013 457.924 141.9 456.713 141.906L452.572 141.923C451.449 141.928 450.452 142.635 450.073 143.692C449.77 144.537 449.425 145.363 449.04 146.165C448.55 147.189 448.754 148.406 449.557 149.208L452.447 152.096C453.308 152.958 453.41 154.326 452.68 155.302Z",
+    fill: "#CACED8",
+    stroke: "#292A33",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M382.155 168.156C380.905 169.826 379.414 171.306 377.734 172.546C377.13 172.992 376.287 172.927 375.755 172.395L373.944 170.584C373.447 170.087 372.695 169.964 372.058 170.261C371.77 170.396 371.476 170.523 371.178 170.642C370.993 170.717 370.805 170.787 370.616 170.854C369.944 171.094 369.484 171.715 369.484 172.427V174.961C369.484 175.715 368.931 176.36 368.184 176.468C367.186 176.611 366.166 176.685 365.129 176.685C364.07 176.685 363.029 176.608 362.011 176.459C361.266 176.349 360.716 175.706 360.716 174.952L360.715 172.402C360.715 171.704 360.276 171.081 359.618 170.846C359.082 170.654 358.558 170.435 358.05 170.191C357.415 169.886 356.66 170.013 356.162 170.51L354.374 172.3C353.84 172.834 352.99 172.898 352.385 172.444C350.732 171.204 349.266 169.728 348.036 168.068C347.588 167.463 347.653 166.619 348.185 166.087L349.992 164.279C350.487 163.784 350.614 163.034 350.316 162.4C350.092 161.927 349.891 161.441 349.714 160.944C349.477 160.285 348.856 159.843 348.155 159.843H345.606C344.853 159.843 344.209 159.293 344.099 158.547C343.95 157.529 343.873 156.489 343.873 155.43C343.873 154.371 343.95 153.331 344.099 152.313C344.209 151.568 344.853 151.017 345.606 151.017H348.155C348.856 151.017 349.478 150.575 349.714 149.915C349.887 149.429 350.084 148.955 350.301 148.492C350.597 147.858 350.469 147.109 349.975 146.615L348.164 144.803C347.632 144.272 347.566 143.429 348.012 142.824C349.252 141.144 350.732 139.654 352.402 138.403C353.008 137.95 353.856 138.013 354.39 138.549L356.181 140.34C356.678 140.837 357.433 140.964 358.067 140.66C358.57 140.42 359.088 140.204 359.617 140.014C360.276 139.779 360.716 139.156 360.716 138.457V135.908C360.716 135.155 361.266 134.51 362.011 134.401C363.029 134.252 364.07 134.175 365.129 134.175C366.182 134.175 367.217 134.251 368.23 134.399C368.982 134.509 369.535 135.164 369.526 135.924L369.498 138.423C369.489 139.131 369.933 139.763 370.601 140.001C371.123 140.185 371.633 140.396 372.129 140.632C372.766 140.933 373.523 140.802 374.018 140.299L375.785 138.503C376.315 137.963 377.167 137.892 377.775 138.344C379.432 139.573 380.904 141.037 382.142 142.687C382.596 143.292 382.533 144.14 381.998 144.676L380.209 146.464C379.712 146.962 379.585 147.717 379.889 148.351C380.134 148.86 380.352 149.384 380.545 149.92C380.78 150.578 381.402 151.017 382.101 151.017L384.65 151.016C385.404 151.016 386.048 151.568 386.157 152.313C386.306 153.331 386.384 154.371 386.384 155.43C386.384 156.491 386.306 157.533 386.156 158.552C386.047 159.295 385.407 159.845 384.656 159.848L382.088 159.86C381.391 159.863 380.774 160.302 380.539 160.957C380.35 161.48 380.136 161.992 379.898 162.49C379.594 163.125 379.721 163.88 380.218 164.377L382.01 166.168C382.545 166.702 382.608 167.551 382.155 168.156Z",
+    fill: "#CACED8",
+    stroke: "#292A33",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M415.001 134.779C415.001 140.424 419.577 145 425.222 145C430.866 145 435.442 140.424 435.442 134.779C435.442 129.134 430.866 124.558 425.222 124.558C419.577 124.558 415.001 129.134 415.001 134.779Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M425.222 126.058C430.037 126.058 433.942 129.963 433.942 134.779C433.942 139.596 430.037 143.5 425.222 143.5C420.405 143.5 416.501 139.596 416.501 134.779C416.501 129.963 420.405 126.058 425.222 126.058ZM436.942 134.779C436.942 128.306 431.694 123.058 425.222 123.058C418.748 123.058 413.501 128.306 413.501 134.779C413.501 141.253 418.748 146.5 425.222 146.5C431.694 146.5 436.942 141.253 436.942 134.779Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M358.791 155.431C358.791 158.931 361.628 161.768 365.129 161.768C368.629 161.768 371.467 158.931 371.467 155.431C371.467 151.93 368.629 149.093 365.129 149.093C361.628 149.093 358.791 151.93 358.791 155.431Z",
+    fill: "#F6F6F9"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M365.129 150.593C367.8 150.593 369.967 152.758 369.967 155.431C369.967 158.102 367.8 160.268 365.129 160.268C362.456 160.268 360.291 158.102 360.291 155.431C360.291 152.758 362.456 150.593 365.129 150.593ZM372.967 155.431C372.967 151.101 369.457 147.593 365.129 147.593C360.799 147.593 357.291 151.101 357.291 155.431C357.291 159.759 360.799 163.268 365.129 163.268C369.457 163.268 372.967 159.759 372.967 155.431Z",
+    fill: "#292A33"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M159.146 27.899C161.226 26.41 163.766 25.524 166.518 25.524C173.522 25.524 179.201 31.203 179.201 38.208C179.201 45.212 173.522 50.891 166.518 50.891H109.108C100.911 50.891 94.2649 44.245 94.2649 36.047C94.2649 27.85 100.911 21.204 109.108 21.204C112.441 21.204 115.506 22.316 117.984 24.17C120.469 15.329 128.583 8.84497 138.219 8.84497C149.165 8.84497 158.154 17.212 159.146 27.899ZM415.354 42.963C417.095 41.716 419.223 40.973 421.529 40.973C427.397 40.973 432.154 45.73 432.154 51.598C432.154 57.467 427.397 62.223 421.529 62.223H373.435C366.567 62.223 361 56.657 361 49.789C361 42.921 366.567 37.354 373.435 37.354C376.226 37.354 378.795 38.285 380.87 39.838C382.952 32.432 389.75 27 397.822 27C406.992 27 414.522 34.01 415.354 42.963ZM69.491 141.356C68.241 141.356 67.056 141.631 65.985 142.113C64.929 140.771 63.293 139.906 61.453 139.906C60.912 139.906 60.391 139.985 59.894 140.125C57.947 135.058 53.048 131.456 47.296 131.456C41.027 131.456 35.77 135.733 34.247 141.525C33.701 141.415 33.136 141.356 32.557 141.356C27.831 141.356 24 145.187 24 149.913C24 154.639 27.831 158.47 32.557 158.47H69.491C74.217 158.47 78.048 154.639 78.048 149.913C78.048 145.187 74.217 141.356 69.491 141.356ZM228.163 307.832C260.286 307.832 286.327 302.049 286.327 294.916C286.327 287.783 260.286 282 228.163 282C196.04 282 170 287.783 170 294.916C170 302.049 196.04 307.832 228.163 307.832Z",
+    fill: "#3B5BDB",
+    fillOpacity: "0.2"
+  }));
+};
+
 var IconAdd = function IconAdd() {
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14755,7 +14863,7 @@ var ExternalLinkIcon = function ExternalLinkIcon(_ref) {
   }), /*#__PURE__*/React__default.createElement("mask", {
     id: "mask0_902_435-".concat(text),
     style: {
-      "mask-type": "alpha"
+      maskType: "alpha"
     },
     maskUnits: "userSpaceOnUse",
     x: "1",
@@ -17677,13 +17785,16 @@ var ArrowRightCircleIconSmall = function ArrowRightCircleIconSmall(_ref) {
 
 var ArrowRightIcon = function ArrowRightIcon(_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
+      _ref$labelledBy = _ref.labelledBy,
+      labelledBy = _ref$labelledBy === void 0 ? "" : _ref$labelledBy;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
-    fill: "none"
+    fill: "none",
+    "aria-labelledby": labelledBy
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -18105,13 +18216,16 @@ var ChargebackReversalIconMedium = function ChargebackReversalIconMedium(_ref) {
 
 var PlusCircleIcon = function PlusCircleIcon(_ref) {
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color;
+      color = _ref$color === void 0 ? ROYAL_BLUE_VIVID : _ref$color,
+      _ref$labelledBy = _ref.labelledBy,
+      labelledBy = _ref$labelledBy === void 0 ? "" : _ref$labelledBy;
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
-    fill: "none"
+    fill: "none",
+    "aria-labelledby": labelledBy
   }, /*#__PURE__*/React__default.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -19770,9 +19884,9 @@ var fontFamily$2 = {
   primary: "Public Sans",
   secondary: "Open Sans"
 };
-var hoverColor$2 = "#116285";
-var activeColor$3 = "#0E506D";
-var externalLinkColor = "#15749D";
+var hoverColor$2 = SAPPHIRE_BLUE;
+var activeColor$3 = PEACOCK_BLUE;
+var externalLinkColor = MATISSE_BLUE;
 var fallbackValues$a = {
   fontFamily: fontFamily$2,
   hoverColor: hoverColor$2,
@@ -42838,20 +42952,35 @@ var MISC_BILL_ICON = "MISC_SINGLE_BILL";
 var iconsMap = (_iconsMap = {}, _defineProperty(_iconsMap, ACCOUNTS_GENERIC_ICON, AccountGenericIcon), _defineProperty(_iconsMap, ACCOUNTS_CONSTRUCTION_ICON, AccountConstructionIcon), _defineProperty(_iconsMap, ACCOUNTS_HEALTH_ICON, AccountMedicalIcon), _defineProperty(_iconsMap, ACCOUNTS_DENTAL_ICON, AccountDentalIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_ELECTRIC_ICON, AccountElectricIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GARBAGE_ICON, AccountGarbageIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_GAS_ICON, AccountGasIcon), _defineProperty(_iconsMap, ACCOUNTS_UTILITY_WATER_ICON, AccountWaterIcon), _defineProperty(_iconsMap, PROPERTIES_PERSONAL_ICON, PropertyPersonalIcon), _defineProperty(_iconsMap, PROPERTIES_GARAGE_ICON, PropertyGarageIcon), _defineProperty(_iconsMap, PROPERTIES_BUSINESS_ICON, PropertyBusinessIcon), _defineProperty(_iconsMap, PROPERTIES_STOREFRONT_ICON, PropertyStorefrontIcon), _defineProperty(_iconsMap, PROPERTIES_APARTMENT_ICON, PropertyApartmentIcon), _defineProperty(_iconsMap, PROPERTIES_LAND_ICON, PropertyLandIcon), _defineProperty(_iconsMap, PROPERTIES_CAR_ICON, PropertyCarIcon), _defineProperty(_iconsMap, PROPERTIES_MOTORCYCLE_ICON, PropertyMotorcycleIcon), _defineProperty(_iconsMap, PROPERTIES_COMMERCIAL_AUTO_ICON, PropertyCommercialVehicleIcon), _defineProperty(_iconsMap, MISC_BILL_ICON, AccountBillIcon), _iconsMap);
 
 var background$3 = {
-  "default": "".concat(WHITE),
-  hover: "".concat(CORNFLOWER_BLUE)
+  "default": MOON_RAKER
 };
 var color$b = {
-  "default": "".concat(ROYAL_BLUE_VIVID)
+  "default": ROYAL_BLUE_VIVID
 };
 var fallbackValues$I = {
   background: background$3,
   color: color$b
 };
 
+var Container = styled__default(Box).withConfig({
+  displayName: "LinkCardstyled__Container",
+  componentId: "sc-l5q1h2-0"
+})(["display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:40px;flex-shrink:0;align-self:stretch;border-radius:8px;&:hover,&:active{cursor:pointer;box-shadow:0px 0px 0px 0px rgba(41,42,51,0.1),0px 5px 11px 0px rgba(41,42,51,0.1),0px 4px 19px 0px rgba(41,42,51,0.09),0px 27px 26px 0px rgba(41,42,51,0.05),0px 56px 31px 0px rgba(41,42,51,0.01),0px 80px 33px 0px rgba(41,42,51,0);}&:hover:not(:active){border:1px solid ", ";background-color:", ";}&:active{border:1px solid ", ";}"], MOON_RAKER, LINK_WATER, ROYAL_BLUE_VIVID);
+var Title$2 = styled__default(Heading$1).withConfig({
+  displayName: "LinkCardstyled__Title",
+  componentId: "sc-l5q1h2-1"
+})(["display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:150%;background-color:transparent;"]);
+var Subtitle = styled__default(Paragraph$1).withConfig({
+  displayName: "LinkCardstyled__Subtitle",
+  componentId: "sc-l5q1h2-2"
+})(["overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:stretch;font-size:14px;line-height:150 %;letter-spacing:0.14px;"]);
+var Footer = styled__default(Stack).withConfig({
+  displayName: "LinkCardstyled__Footer",
+  componentId: "sc-l5q1h2-3"
+})(["align-items:center;width:100%;"]);
+
 var LinkCard = function LinkCard(_ref) {
-  var _ref$variant = _ref.variant,
-      _ref$title = _ref.title,
+  var _ref$title = _ref.title,
       title = _ref$title === void 0 ? "Test Workflow" : _ref$title,
       _ref$subtitle = _ref.subtitle,
       subtitle = _ref$subtitle === void 0 ? "Link your benefit plan" : _ref$subtitle,
@@ -42867,19 +42996,24 @@ var LinkCard = function LinkCard(_ref) {
       extraHoverStyles = _ref$extraHoverStyles === void 0 ? "" : _ref$extraHoverStyles,
       _ref$extraActiveStyle = _ref.extraActiveStyles,
       extraActiveStyles = _ref$extraActiveStyle === void 0 ? "" : _ref$extraActiveStyle;
-  var activeAndHoverStyles = "cursor: pointer;\n    border-radius: 8px;\n    border: 1px solid ".concat(themeValues.color, ";\n    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 0px 4px 19px 0px rgba(41, 42, 51, 0.09), 0px 27px 26px 0px rgba(41, 42, 51, 0.05), 0px 56px 31px 0px rgba(41, 42, 51, 0.01), 0px 80px 33px 0px rgba(41, 42, 51, 0.00);");
-  return /*#__PURE__*/React__default.createElement(Box, {
-    border: "1px solid ".concat(MOON_RAKER, ";"),
+
+  var _useContext = React.useContext(styled.ThemeContext),
+      isMobile = _useContext.isMobile;
+
+  var locatorSlug = title.toLowerCase.gsub(/\s/, "-");
+  console.log("locatorSlug", locatorSlug);
+  return /*#__PURE__*/React__default.createElement(Container, {
+    border: "1px solid ".concat(themeValues.background, ";"),
     borderRadius: "8px",
-    dataQa: "link-card-".concat(title),
+    dataQa: "link-card-".concat(locatorSlug),
     width: "100%",
-    maxWidth: "288px",
-    minWidth: "240px",
+    maxWidth: isMobile ? "100%" : "288px",
+    minWidth: isMobile ? "240px" : "288px",
     minHeight: "141px",
     padding: "24px",
-    extraStyles: "\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        width: 100%;\n        gap: 40px;\n        flex-shrink: 0;\n        align-self: stretch;\n        ".concat(extraStyles, "\n      "),
-    hoverStyles: "".concat(activeAndHoverStyles, "\n        border: 0;\n        ").concat(extraHoverStyles, "\n      "),
-    activeStyles: "".concat(activeAndHoverStyles, "\n        background-color: ").concat(CORNFLOWER_BLUE, ";\n        ").concat(extraActiveStyles, "\n      "),
+    extraStyles: extraStyles,
+    hoverStyles: extraHoverStyles,
+    activeStyles: extraActiveStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: 0,
@@ -42892,30 +43026,27 @@ var LinkCard = function LinkCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: 0,
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, /*#__PURE__*/React__default.createElement(Title$2, {
     variant: "h6",
     weight: FONT_WEIGHT_SEMIBOLD,
     color: themeValues.color,
-    margin: 0,
-    extraStyles: "display: -webkit-box; \n              background-color: transparent;\n              -webkit-box-orient: vertical; \n              -webkit-line-clamp: 2; \n              align-self: stretch;\n              overflow: hidden; \n              text-overflow: ellipsis; \n              font-family: Public Sans; \n              font-size: 16px; \n              font-style: normal; \n              font-weight: 600; \n              line-height: 150%;\n            "
+    margin: 0
   }, title)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 0 40px",
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+  }, /*#__PURE__*/React__default.createElement(Subtitle, {
     variant: "pS",
-    color: themeValues.color,
-    extraStyles: "overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; /* CB Standard/Desktop/D - P Small - Regular */ font-family: Public Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ letter-spacing: 0.14px;"
+    color: themeValues.color
   }, subtitle)), /*#__PURE__*/React__default.createElement(Box, {
     background: "transparent",
     borderWidthOverride: "0 0 0 0",
     padding: "0",
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Footer, {
     direction: "row",
     childGap: "6px",
-    justify: "space-between",
-    extraStyles: "width: 100%; justify-content: space-between"
-  }, showLeft && leftContent, showRight && rightContent))));
+    justify: "space-between"
+  }, showLeft && !leftContent && /*#__PURE__*/React__default.createElement(Box, null), showLeft && leftContent, showRight && rightContent))));
 };
 
 var LinkCard$1 = themeComponent(LinkCard, "LinkCard", fallbackValues$I, "default");
@@ -50364,6 +50495,7 @@ exports.FormattedCreditCard = FormattedCreditCard$1;
 exports.Frame = Frame;
 exports.GenericCard = GenericCard;
 exports.GenericCardLarge = GenericCardLarge;
+exports.GenericErrorIcon = GenericErrorIcon;
 exports.GoToEmailIcon = GoToEmailIcon$1;
 exports.Grid = Grid;
 exports.GuidedCheckoutImage = GuidedCheckoutImage;