UNPKG

blockstack-ui

Version:

Blockstack UI components built with css-in-js and styled-system.

165 lines (159 loc) 17.8 kB
import React from 'react' import { Box } from '../primitives' import { computeSize } from './helper' import PropTypes from 'prop-types' const DefaultPaths = () => ( <> <path d="M27.5312 13.9048C27.6406 15.9126 29.3359 17.186 31.8828 17.186C34.5078 17.186 36.1797 15.8501 36.1797 13.7251C36.1797 12.0845 35.2109 11.1392 32.8516 10.6392L31.6172 10.3813C30.1562 10.0688 29.5781 9.52197 29.5781 8.70166C29.5781 7.67041 30.5469 7.02979 31.8672 7.02979C33.2344 7.02979 34.1641 7.7251 34.2734 8.85791H35.9688C35.9141 6.88916 34.2812 5.5376 31.8906 5.5376C29.4922 5.5376 27.7969 6.86572 27.7969 8.79541C27.7969 10.4204 28.8203 11.4673 31.0781 11.9438L32.3047 12.2017C33.8125 12.5298 34.4062 13.0767 34.4062 13.9517C34.4062 14.9595 33.3828 15.6938 31.9531 15.6938C30.4531 15.6938 29.3906 15.022 29.2344 13.9048H27.5312Z" fill="currentColor" /> <path d="M38.2069 6.83447V8.77979H37.0116V10.1157H38.2069V14.8345C38.2069 16.4204 38.8553 17.0532 40.5194 17.0532C40.8944 17.0532 41.2694 17.022 41.4569 16.9751V15.6392C41.3475 15.6626 41.0741 15.6782 40.9022 15.6782C40.2147 15.6782 39.9022 15.3579 39.9022 14.647V10.1157H41.4647V8.77979H39.9022V6.83447H38.2069Z" fill="currentColor" /> <path d="M45.7653 15.8032C44.8591 15.8032 44.2653 15.3345 44.2653 14.6157C44.2653 13.9126 44.8356 13.4673 45.8434 13.397L47.8669 13.272V13.9204C47.8669 14.9907 46.945 15.8032 45.7653 15.8032ZM45.2966 17.1392C46.3747 17.1392 47.4137 16.561 47.8903 15.647H47.9294V16.9985H49.5466V11.3345C49.5466 9.68604 48.2731 8.63135 46.2809 8.63135C44.2497 8.63135 42.9841 9.7251 42.8903 11.2095H44.4841C44.6325 10.4751 45.2419 10.0063 46.2184 10.0063C47.2497 10.0063 47.8669 10.5532 47.8669 11.4673V12.1001L45.6169 12.2329C43.6637 12.3423 42.5622 13.2251 42.5622 14.6626C42.5622 16.1392 43.6872 17.1392 45.2966 17.1392Z" fill="currentColor" /> <path d="M58.4019 11.6079C58.2534 9.99072 56.9644 8.63135 54.8472 8.63135C52.5112 8.63135 50.98 10.2798 50.98 12.8892C50.98 15.5454 52.5112 17.1548 54.8628 17.1548C56.8394 17.1548 58.2378 15.9673 58.4175 14.2173H56.7925C56.5972 15.1704 55.9175 15.7407 54.8784 15.7407C53.5659 15.7407 52.6987 14.6938 52.6987 12.8892C52.6987 11.1235 53.5581 10.0376 54.8628 10.0376C55.9644 10.0376 56.6206 10.7329 56.7925 11.6079H58.4019Z" fill="currentColor" /> <path d="M61.5384 12.3032H61.5228V5.7251H59.8353V16.9985H61.5228V14.0454L62.2259 13.3501L65.015 16.9985H66.9759L63.4369 12.3188L66.8431 8.77979H64.8587L61.5384 12.3032Z" fill="currentColor" /> <path d="M67.5969 11.1079C67.5969 12.3032 68.3703 13.0532 69.9328 13.4126L71.2687 13.7251C72.1672 13.9282 72.4719 14.2407 72.4719 14.772C72.4719 15.4438 71.8469 15.8657 70.8312 15.8657C69.8 15.8657 69.2141 15.4438 69.0578 14.5845H67.3859C67.5422 16.147 68.7766 17.1548 70.8312 17.1548C72.7687 17.1548 74.1672 16.1235 74.1672 14.6235C74.1672 13.436 73.5266 12.7798 71.8469 12.3892L70.5109 12.0845C69.6203 11.8813 69.2453 11.5298 69.2453 11.0142C69.2453 10.3579 69.8547 9.9126 70.7687 9.9126C71.7141 9.9126 72.3 10.4126 72.3937 11.2095H73.9797C73.925 9.69385 72.6828 8.63135 70.7687 8.63135C68.8781 8.63135 67.5969 9.63916 67.5969 11.1079Z" fill="currentColor" /> <path d="M85.6825 8.49854H85.7606L88.1981 16.9985H89.8466L92.8934 5.7251H91.0731L88.9872 14.5532H88.9247L86.5341 5.7251H84.9091L82.5262 14.5532H82.4637L80.3778 5.7251H78.5575L81.5966 16.9985H83.2528L85.6825 8.49854Z" fill="currentColor" /> <path d="M96.0378 15.8032C95.1316 15.8032 94.5378 15.3345 94.5378 14.6157C94.5378 13.9126 95.1081 13.4673 96.1159 13.397L98.1394 13.272V13.9204C98.1394 14.9907 97.2175 15.8032 96.0378 15.8032ZM95.5691 17.1392C96.6472 17.1392 97.6862 16.561 98.1628 15.647H98.2019V16.9985H99.8191V11.3345C99.8191 9.68604 98.5456 8.63135 96.5534 8.63135C94.5222 8.63135 93.2566 9.7251 93.1628 11.2095H94.7566C94.905 10.4751 95.5144 10.0063 96.4909 10.0063C97.5222 10.0063 98.1394 10.5532 98.1394 11.4673V12.1001L95.8894 12.2329C93.9362 12.3423 92.8347 13.2251 92.8347 14.6626C92.8347 16.1392 93.9597 17.1392 95.5691 17.1392Z" fill="currentColor" /> <path d="M101.682 16.9985H103.37V5.7251H101.682V16.9985Z" fill="currentColor" /> <path d="M105.327 16.9985H107.014V5.7251H105.327V16.9985Z" fill="currentColor" /> <path d="M112.346 9.99072C113.526 9.99072 114.323 10.8735 114.362 12.1313H110.252C110.338 10.8892 111.166 9.99072 112.346 9.99072ZM114.354 14.5845C114.127 15.3032 113.416 15.7876 112.455 15.7876C111.104 15.7876 110.244 14.8423 110.244 13.4126V13.311H116.049V12.7329C116.049 10.2407 114.627 8.63135 112.346 8.63135C110.026 8.63135 108.541 10.3501 108.541 12.9282C108.541 15.522 110.002 17.1548 112.416 17.1548C114.299 17.1548 115.721 16.0845 115.955 14.5845H114.354Z" fill="currentColor" /> <path d="M118.014 6.83447V8.77979H116.818V10.1157H118.014V14.8345C118.014 16.4204 118.662 17.0532 120.326 17.0532C120.701 17.0532 121.076 17.022 121.264 16.9751V15.6392C121.154 15.6626 120.881 15.6782 120.709 15.6782C120.022 15.6782 119.709 15.3579 119.709 14.647V10.1157H121.272V8.77979H119.709V6.83447H118.014Z" fill="currentColor" /> <path fillRule="evenodd" clipRule="evenodd" d="M1.02834 3.92207C1.00058 4.3133 0.999999 4.8172 0.999999 5.55854L1 16.4385C1 17.1799 1.00059 17.6838 1.02834 18.075C1.05541 18.4568 1.10467 18.6546 1.16449 18.7928C1.36652 19.2597 1.73885 19.632 2.2057 19.834C2.34393 19.8939 2.54178 19.9431 2.92353 19.9702C3.31476 19.9979 3.81867 19.9985 4.56 19.9985L15.44 19.9985C16.1813 19.9985 16.6852 19.9979 17.0765 19.9702C17.4582 19.9431 17.6561 19.8939 17.7943 19.834C18.2612 19.632 18.6335 19.2597 18.8355 18.7928C18.8953 18.6546 18.9446 18.4568 18.9717 18.075C18.9994 17.6838 19 17.1799 19 16.4385L19 5.55853C19 4.8172 18.9994 4.31329 18.9717 3.92206C18.9446 3.54032 18.8953 3.34247 18.8355 3.20424C18.6335 2.73738 18.2611 2.36505 17.7943 2.16303C17.6561 2.10321 17.4582 2.05395 17.0765 2.02687C16.6852 1.99912 16.1813 1.99853 15.44 1.99853L4.56 1.99853C3.81867 1.99853 3.31476 1.99912 2.92353 2.02687C2.54178 2.05395 2.34393 2.10321 2.2057 2.16303C1.73885 2.36505 1.36652 2.73738 1.16449 3.20424C1.10467 3.34247 1.05541 3.54032 1.02834 3.92207ZM18.1914 20.7518C17.6213 20.9985 16.8942 20.9985 15.44 20.9985L4.56 20.9985C3.10582 20.9985 2.37873 20.9985 1.80856 20.7518C1.10827 20.4488 0.549776 19.8903 0.246736 19.19C-1.03978e-07 18.6198 -1.3576e-07 17.8927 -1.99324e-07 16.4385L-6.74904e-07 5.55854C-7.38468e-07 4.10436 -7.7025e-07 3.37727 0.246736 2.80709C0.549776 2.10681 1.10827 1.54831 1.80856 1.24527C2.37873 0.998535 3.10582 0.998535 4.56 0.998535L15.44 0.998534C16.8942 0.998534 17.6213 0.998534 18.1914 1.24527C18.8917 1.54831 19.4502 2.10681 19.7533 2.80709C20 3.37727 20 4.10436 20 5.55853L20 16.4385C20 17.8927 20 18.6198 19.7533 19.19C19.4502 19.8903 18.8917 20.4488 18.1914 20.7518Z" fill="currentColor" /> <path fillRule="evenodd" clipRule="evenodd" d="M10.8854 7.80705C10.8854 6.53306 11.9186 5.5 13.1928 5.5C14.4669 5.5 15.5001 6.53306 15.5001 7.80705C15.5001 9.08146 14.467 10.1146 13.1928 10.1146C11.9185 10.1146 10.8854 9.08146 10.8854 7.80705ZM13.1928 6.5C12.4708 6.5 11.8854 7.08546 11.8854 7.80705C11.8854 8.52924 12.4709 9.11461 13.1928 9.11461C13.9147 9.11461 14.5001 8.52924 14.5001 7.80705C14.5001 7.08546 13.9148 6.5 13.1928 6.5ZM4.50012 7.80687C4.50012 6.53317 5.53282 5.50033 6.80637 5.50033C8.08033 5.50033 9.11312 6.53308 9.11312 7.80687C9.11312 9.08067 8.08033 10.1134 6.80637 10.1134C5.53282 10.1134 4.50012 9.08058 4.50012 7.80687ZM6.80637 6.50033C6.08522 6.50033 5.50012 7.08533 5.50012 7.80687C5.50012 8.52841 6.08522 9.11342 6.80637 9.11342C7.52811 9.11342 8.11312 8.52832 8.11312 7.80687C8.11312 7.08542 7.52811 6.50033 6.80637 6.50033ZM13.1929 12.8895C12.4708 12.8895 11.8854 13.475 11.8854 14.1969C11.8854 14.9188 12.4708 15.5042 13.1929 15.5042C13.9145 15.5042 14.5 14.9189 14.5 14.1969C14.5 13.4749 13.9145 12.8895 13.1929 12.8895ZM10.8854 14.1969C10.8854 12.9226 11.9185 11.8895 13.1929 11.8895C14.4669 11.8895 15.5 12.9227 15.5 14.1969C15.5 15.471 14.4669 16.5042 13.1929 16.5042C11.9185 16.5042 10.8854 15.4711 10.8854 14.1969ZM4.5 14.198C4.5 12.9241 5.53274 11.8913 6.80653 11.8913C8.08031 11.8913 9.11305 12.9241 9.11305 14.198C9.11305 15.4715 8.08022 16.5042 6.80653 16.5042C5.53283 16.5042 4.5 15.4715 4.5 14.198ZM6.80653 12.8913C6.08509 12.8913 5.5 13.4763 5.5 14.198C5.5 14.9191 6.085 15.5042 6.80653 15.5042C7.52805 15.5042 8.11305 14.9191 8.11305 14.198C8.11305 13.4763 7.52796 12.8913 6.80653 12.8913Z" fill="currentColor" /> </> ) const InvertedPaths = () => ( <> <path d="M27.5312 13.9048C27.6406 15.9126 29.3359 17.186 31.8828 17.186C34.5078 17.186 36.1797 15.8501 36.1797 13.7251C36.1797 12.0845 35.2109 11.1392 32.8516 10.6392L31.6172 10.3813C30.1562 10.0688 29.5781 9.52197 29.5781 8.70166C29.5781 7.67041 30.5469 7.02979 31.8672 7.02979C33.2344 7.02979 34.1641 7.7251 34.2734 8.85791H35.9688C35.9141 6.88916 34.2812 5.5376 31.8906 5.5376C29.4922 5.5376 27.7969 6.86572 27.7969 8.79541C27.7969 10.4204 28.8203 11.4673 31.0781 11.9438L32.3047 12.2017C33.8125 12.5298 34.4062 13.0767 34.4062 13.9517C34.4062 14.9595 33.3828 15.6938 31.9531 15.6938C30.4531 15.6938 29.3906 15.022 29.2344 13.9048H27.5312Z" fill="white" /> <path d="M38.2069 6.83447V8.77979H37.0116V10.1157H38.2069V14.8345C38.2069 16.4204 38.8553 17.0532 40.5194 17.0532C40.8944 17.0532 41.2694 17.022 41.4569 16.9751V15.6392C41.3475 15.6626 41.0741 15.6782 40.9022 15.6782C40.2147 15.6782 39.9022 15.3579 39.9022 14.647V10.1157H41.4647V8.77979H39.9022V6.83447H38.2069Z" fill="white" /> <path d="M45.7653 15.8032C44.8591 15.8032 44.2653 15.3345 44.2653 14.6157C44.2653 13.9126 44.8356 13.4673 45.8434 13.397L47.8669 13.272V13.9204C47.8669 14.9907 46.945 15.8032 45.7653 15.8032ZM45.2966 17.1392C46.3747 17.1392 47.4137 16.561 47.8903 15.647H47.9294V16.9985H49.5466V11.3345C49.5466 9.68604 48.2731 8.63135 46.2809 8.63135C44.2497 8.63135 42.9841 9.7251 42.8903 11.2095H44.4841C44.6325 10.4751 45.2419 10.0063 46.2184 10.0063C47.2497 10.0063 47.8669 10.5532 47.8669 11.4673V12.1001L45.6169 12.2329C43.6637 12.3423 42.5622 13.2251 42.5622 14.6626C42.5622 16.1392 43.6872 17.1392 45.2966 17.1392Z" fill="white" /> <path d="M58.4019 11.6079C58.2534 9.99072 56.9644 8.63135 54.8472 8.63135C52.5112 8.63135 50.98 10.2798 50.98 12.8892C50.98 15.5454 52.5112 17.1548 54.8628 17.1548C56.8394 17.1548 58.2378 15.9673 58.4175 14.2173H56.7925C56.5972 15.1704 55.9175 15.7407 54.8784 15.7407C53.5659 15.7407 52.6987 14.6938 52.6987 12.8892C52.6987 11.1235 53.5581 10.0376 54.8628 10.0376C55.9644 10.0376 56.6206 10.7329 56.7925 11.6079H58.4019Z" fill="white" /> <path d="M61.5384 12.3032H61.5228V5.7251H59.8353V16.9985H61.5228V14.0454L62.2259 13.3501L65.015 16.9985H66.9759L63.4369 12.3188L66.8431 8.77979H64.8587L61.5384 12.3032Z" fill="white" /> <path d="M67.5969 11.1079C67.5969 12.3032 68.3703 13.0532 69.9328 13.4126L71.2687 13.7251C72.1672 13.9282 72.4719 14.2407 72.4719 14.772C72.4719 15.4438 71.8469 15.8657 70.8312 15.8657C69.8 15.8657 69.2141 15.4438 69.0578 14.5845H67.3859C67.5422 16.147 68.7766 17.1548 70.8312 17.1548C72.7687 17.1548 74.1672 16.1235 74.1672 14.6235C74.1672 13.436 73.5266 12.7798 71.8469 12.3892L70.5109 12.0845C69.6203 11.8813 69.2453 11.5298 69.2453 11.0142C69.2453 10.3579 69.8547 9.9126 70.7687 9.9126C71.7141 9.9126 72.3 10.4126 72.3937 11.2095H73.9797C73.925 9.69385 72.6828 8.63135 70.7687 8.63135C68.8781 8.63135 67.5969 9.63916 67.5969 11.1079Z" fill="white" /> <path d="M85.6825 8.49854H85.7606L88.1981 16.9985H89.8466L92.8934 5.7251H91.0731L88.9872 14.5532H88.9247L86.5341 5.7251H84.9091L82.5262 14.5532H82.4637L80.3778 5.7251H78.5575L81.5966 16.9985H83.2528L85.6825 8.49854Z" fill="white" /> <path d="M96.0378 15.8032C95.1316 15.8032 94.5378 15.3345 94.5378 14.6157C94.5378 13.9126 95.1081 13.4673 96.1159 13.397L98.1394 13.272V13.9204C98.1394 14.9907 97.2175 15.8032 96.0378 15.8032ZM95.5691 17.1392C96.6472 17.1392 97.6862 16.561 98.1628 15.647H98.2019V16.9985H99.8191V11.3345C99.8191 9.68604 98.5456 8.63135 96.5534 8.63135C94.5222 8.63135 93.2566 9.7251 93.1628 11.2095H94.7566C94.905 10.4751 95.5144 10.0063 96.4909 10.0063C97.5222 10.0063 98.1394 10.5532 98.1394 11.4673V12.1001L95.8894 12.2329C93.9362 12.3423 92.8347 13.2251 92.8347 14.6626C92.8347 16.1392 93.9597 17.1392 95.5691 17.1392Z" fill="white" /> <path d="M101.682 16.9985H103.37V5.7251H101.682V16.9985Z" fill="white" /> <path d="M105.327 16.9985H107.014V5.7251H105.327V16.9985Z" fill="white" /> <path d="M112.346 9.99072C113.526 9.99072 114.323 10.8735 114.362 12.1313H110.252C110.338 10.8892 111.166 9.99072 112.346 9.99072ZM114.354 14.5845C114.127 15.3032 113.416 15.7876 112.455 15.7876C111.104 15.7876 110.244 14.8423 110.244 13.4126V13.311H116.049V12.7329C116.049 10.2407 114.627 8.63135 112.346 8.63135C110.026 8.63135 108.541 10.3501 108.541 12.9282C108.541 15.522 110.002 17.1548 112.416 17.1548C114.299 17.1548 115.721 16.0845 115.955 14.5845H114.354Z" fill="white" /> <path d="M118.014 6.83447V8.77979H116.818V10.1157H118.014V14.8345C118.014 16.4204 118.662 17.0532 120.326 17.0532C120.701 17.0532 121.076 17.022 121.264 16.9751V15.6392C121.154 15.6626 120.881 15.6782 120.709 15.6782C120.022 15.6782 119.709 15.3579 119.709 14.647V10.1157H121.272V8.77979H119.709V6.83447H118.014Z" fill="white" /> <path fillRule="evenodd" clipRule="evenodd" d="M1.02834 3.92207C1.00058 4.3133 0.999999 4.8172 0.999999 5.55854L1 16.4385C1 17.1799 1.00059 17.6838 1.02834 18.075C1.05541 18.4568 1.10467 18.6546 1.16449 18.7928C1.36652 19.2597 1.73885 19.632 2.2057 19.834C2.34393 19.8939 2.54178 19.9431 2.92353 19.9702C3.31476 19.9979 3.81867 19.9985 4.56 19.9985L15.44 19.9985C16.1813 19.9985 16.6852 19.9979 17.0765 19.9702C17.4582 19.9431 17.6561 19.8939 17.7943 19.834C18.2612 19.632 18.6335 19.2597 18.8355 18.7928C18.8953 18.6546 18.9446 18.4568 18.9717 18.075C18.9994 17.6838 19 17.1799 19 16.4385L19 5.55853C19 4.8172 18.9994 4.31329 18.9717 3.92206C18.9446 3.54032 18.8953 3.34247 18.8355 3.20424C18.6335 2.73738 18.2611 2.36505 17.7943 2.16303C17.6561 2.10321 17.4582 2.05395 17.0765 2.02687C16.6852 1.99912 16.1813 1.99853 15.44 1.99853L4.56 1.99853C3.81867 1.99853 3.31476 1.99912 2.92353 2.02687C2.54178 2.05395 2.34393 2.10321 2.2057 2.16303C1.73885 2.36505 1.36652 2.73738 1.16449 3.20424C1.10467 3.34247 1.05541 3.54032 1.02834 3.92207ZM18.1914 20.7518C17.6213 20.9985 16.8942 20.9985 15.44 20.9985L4.56 20.9985C3.10582 20.9985 2.37873 20.9985 1.80856 20.7518C1.10827 20.4488 0.549776 19.8903 0.246736 19.19C-1.03978e-07 18.6198 -1.3576e-07 17.8927 -1.99324e-07 16.4385L-6.74904e-07 5.55854C-7.38468e-07 4.10436 -7.7025e-07 3.37727 0.246736 2.80709C0.549776 2.10681 1.10827 1.54831 1.80856 1.24527C2.37873 0.998535 3.10582 0.998535 4.56 0.998535L15.44 0.998534C16.8942 0.998534 17.6213 0.998534 18.1914 1.24527C18.8917 1.54831 19.4502 2.10681 19.7533 2.80709C20 3.37727 20 4.10436 20 5.55853L20 16.4385C20 17.8927 20 18.6198 19.7533 19.19C19.4502 19.8903 18.8917 20.4488 18.1914 20.7518Z" fill="#00D4FF" /> <path fillRule="evenodd" clipRule="evenodd" d="M10.8854 7.80705C10.8854 6.53306 11.9186 5.5 13.1928 5.5C14.4669 5.5 15.5001 6.53306 15.5001 7.80705C15.5001 9.08146 14.467 10.1146 13.1928 10.1146C11.9185 10.1146 10.8854 9.08146 10.8854 7.80705ZM13.1928 6.5C12.4708 6.5 11.8854 7.08546 11.8854 7.80705C11.8854 8.52924 12.4709 9.11461 13.1928 9.11461C13.9147 9.11461 14.5001 8.52924 14.5001 7.80705C14.5001 7.08546 13.9148 6.5 13.1928 6.5ZM4.50012 7.80687C4.50012 6.53317 5.53282 5.50033 6.80637 5.50033C8.08033 5.50033 9.11312 6.53308 9.11312 7.80687C9.11312 9.08067 8.08033 10.1134 6.80637 10.1134C5.53282 10.1134 4.50012 9.08058 4.50012 7.80687ZM6.80637 6.50033C6.08522 6.50033 5.50012 7.08533 5.50012 7.80687C5.50012 8.52841 6.08522 9.11342 6.80637 9.11342C7.52811 9.11342 8.11312 8.52832 8.11312 7.80687C8.11312 7.08542 7.52811 6.50033 6.80637 6.50033ZM13.1929 12.8895C12.4708 12.8895 11.8854 13.475 11.8854 14.1969C11.8854 14.9188 12.4708 15.5042 13.1929 15.5042C13.9145 15.5042 14.5 14.9189 14.5 14.1969C14.5 13.4749 13.9145 12.8895 13.1929 12.8895ZM10.8854 14.1969C10.8854 12.9226 11.9185 11.8895 13.1929 11.8895C14.4669 11.8895 15.5 12.9227 15.5 14.1969C15.5 15.471 14.4669 16.5042 13.1929 16.5042C11.9185 16.5042 10.8854 15.4711 10.8854 14.1969ZM4.5 14.198C4.5 12.9241 5.53274 11.8913 6.80653 11.8913C8.08031 11.8913 9.11305 12.9241 9.11305 14.198C9.11305 15.4715 8.08022 16.5042 6.80653 16.5042C5.53283 16.5042 4.5 15.4715 4.5 14.198ZM6.80653 12.8913C6.08509 12.8913 5.5 13.4763 5.5 14.198C5.5 14.9191 6.085 15.5042 6.80653 15.5042C7.52805 15.5042 8.11305 14.9191 8.11305 14.198C8.11305 13.4763 7.52796 12.8913 6.80653 12.8913Z" fill="#00D4FF" /> </> ) const StacksWalletLogo = ({ width, typeSize = 16, invert, color = invert ? 'unset' : 'blue.dark', ...rest }) => { const baseWidth = 122 const computedWidth = computeSize(width, baseWidth, typeSize) const Component = invert ? InvertedPaths : DefaultPaths return ( <Box width={computedWidth} color={color} {...rest}> <Box is="svg" display="inline-block" viewBox={`0 0 ${baseWidth} 21`} fill="none" style={{ width: '100%' }} > <Component /> </Box> </Box> ) } StacksWalletLogo.propTypes = { width: PropTypes.oneOf([PropTypes.number, PropTypes.string, PropTypes.array]), typeSize: PropTypes.number, invert: PropTypes.bool, color: PropTypes.string } export default StacksWalletLogo