build: move test app, adjust tasks

packages/app/src/components/accounts/index.tsx

@@ -25,12 +25,14 @@ interface AccountItemProps extends FlexProps {
 const AccountItem = ({ label, address, selectedAddress, ...rest }: AccountItemProps) => {
   const loading = address === selectedAddress;
   return (
-    <Flex alignItems="center" {...rest}>
-      <Flex flex={1} overflow="hidden">
+    <Flex alignItems="center" maxWidth="100%" {...rest}>
+      <Flex flex={1} maxWidth="100%">
         <Text
-          display="inline-block"
+          display="block"
+          maxWidth="100%"
           textAlign="left"
           textStyle="body.small.medium"
+          style={{ wordBreak: 'break-word' }}
           {...getLoadingProps(!!selectedAddress)}
         >
           {label.replace(/\.id\.blockstack$/, '')}

packages/connect/src/react/components/app-icon/index.tsx

@@ -8,7 +8,7 @@ interface AppIconProps {
 }
 
 const AppIcon: React.FC<AppIconProps & BoxProps> = ({ src, alt, ...rest }) => (
-  <Box borderRadius="6px" overflow="hidden" size={6} {...rest}>
+  <Box borderRadius="6px" overflow="hidden" size="loose" {...rest}>
     <Image src={src} alt={alt} title={alt} loading="lazy" />
   </Box>
 );

packages/connect/src/react/components/checklist/index.tsx

@@ -21,16 +21,16 @@ const CheckList: React.FC<CheckListProps> = ({ items }) => (
       const { text } = item;
       return (
         <Flex
-          px={8}
-          pb={5}
-          pt={5}
+          px="extra-loose"
+          pb="base-loose"
+          pt="base-loose"
           borderBottom={items.length - 1 !== key ? '1px solid' : 'unset'}
           borderColor="inherit"
           align="center"
           textAlign="left"
           key={key}
         >
-          <Box color="blue" alignSelf="stretch" mt={1} mr={4}>
+          <Box color="blue" alignSelf="stretch" mt="extra-tight" mr="base">
             <Icon />
           </Box>
           <Item>{text}</Item>

packages/connect/src/react/components/modal/index.tsx

@@ -36,7 +36,7 @@ interface HeaderTitleProps {
 
 const HeaderTitle: React.FC<HeaderTitleProps> = ({ hideIcon = false, title }) => (
   <Flex align="center">
-    {hideIcon ? null : <Logo mr={2} />}
+    {hideIcon ? null : <Logo mr="tight" />}
     <Text fontWeight={500} fontSize={'12px'}>
       {title}
     </Text>
@@ -74,7 +74,7 @@ const ModalHeader = ({ title, back, hideIcon, close, hideTitleElements, ...rest
   const { doCloseAuth, doChangeScreen } = useConnect();
   return (
     <Flex
-      p={4}
+      p="base"
       borderRadius={['unset', '6px 6px 0 0']}
       bg="white"
       align="center"
@@ -105,7 +105,7 @@ const RenderScreen: React.FC = () => {
     }
     case States.SCREENS_SIGN_IN: {
       return (
-        <Box width="100%" p={5}>
+        <Box width="100%" p="base-loose">
           <ContinueWithAuth />
         </Box>
       );

packages/connect/src/react/components/powered-by.tsx

@@ -3,7 +3,7 @@ import { Flex, PseudoBox, Box } from '@blockstack/ui';
 import { BlockstackMini } from './vector';
 
 export const PoweredBy: React.FC = () => (
-  <Flex fontSize={['12px', '14px']} justifyContent="center" color="ink.600" textAlign="center" width="100%" my={6}>
+  <Flex fontSize={['12px', '14px']} justifyContent="center" color="ink.600" textAlign="center" width="100%" my="loose">
     <PseudoBox
       textAlign="center"
       onClick={() => typeof window !== 'undefined' && window.open('https://blockstack.org', '_blank')}

packages/connect/src/react/components/screen/screen-header.tsx

@@ -11,7 +11,7 @@ interface HeaderTitleProps {
 
 const HeaderTitle: React.FC<HeaderTitleProps> = ({ hideLogo, title }) => (
   <Flex align="center">
-    {hideLogo ? null : <Logo mr={2} />}
+    {hideLogo ? null : <Logo mr="tight" />}
     <Text fontWeight={500} textStyle={'body.small.medium'} fontSize={'12px'}>
       {title}
     </Text>
@@ -49,7 +49,7 @@ export const ScreenHeader = ({
   return (
     <Flex
       py={[4, 5]}
-      px={4}
+      px="base"
       height="56px"
       borderBottom="1px solid"
       borderBottomColor="inherit"
@@ -62,7 +62,7 @@ export const ScreenHeader = ({
       <Flex align="center">
         {!hideIcon ? <AppIcon src={appIcon} alt={appName || 'loading'} /> : null}
         {!hideIcon ? (
-          <Box mx={1} color="ink.300">
+          <Box mx="extra-tight" color="ink.300">
             <ChevronIcon direction="right" />
           </Box>
         ) : null}

packages/connect/src/react/components/screens/finished.tsx

@@ -28,16 +28,16 @@ export const Finished = () => {
     <Screen textAlign="center" noMinHeight>
       <FinishedIcon mt={10} name={name} icon={icon} />
       <ScreenBody
-        mt={4}
+        mt="base"
         body={[
           <Title>{name} has been connected to your Secret Key</Title>,
-          <Box mt={2}>
+          <Box mt="tight">
             Everything you do in {name} will be private, secure, and only accessible with your Secret Key.
           </Box>,
         ]}
       />
       <ScreenActions>
-        <Button width="100%" mt={4} size="lg" onClick={() => doCloseAuth()}>
+        <Button width="100%" mt="base" size="lg" onClick={() => doCloseAuth()}>
           Close
         </Button>
       </ScreenActions>

packages/connect/src/react/components/screens/how-it-works.tsx

@@ -55,17 +55,17 @@ export const HowItWorks: React.FC = () => {
         pretitle="How it works"
         body={[
           <Title>{name} keeps everything you do private with Blockstack&apos;s Secret Key technology</Title>,
-          <Text mt={2} display="block">
+          <Text mt="tight" display="block">
             Normally, apps keep your data for them to use. When you have a Secret Key, you no longer have to trust{' '}
             {name} with your data because {name} won&apos;t have access.
           </Text>,
-          <Box mt={2}>
+          <Box mt="tight">
             {howSecretKeyWorks({ name }).map(({ title, body }, key) => (
-              <Box mt={8} key={key}>
-                <Text mt={3} display="block" fontWeight="semibold">
+              <Box mt="extra-loose" key={key}>
+                <Text mt="base-tight" display="block" fontWeight="semibold">
                   {title}
                 </Text>
-                <Text mt={2} display="block">
+                <Text mt="tight" display="block">
                   {body}
                 </Text>
               </Box>
@@ -74,7 +74,7 @@ export const HowItWorks: React.FC = () => {
         ]}
       />
       <ScreenActions>
-        <Button width="100%" size="lg" mt={6} onClick={() => doAuth()}>
+        <Button width="100%" size="lg" mt="loose" onClick={() => doAuth()}>
           Get Started
         </Button>
       </ScreenActions>

packages/connect/src/react/components/screens/intro.tsx

@@ -20,7 +20,7 @@ const AppElement = ({
   icon: string;
 }) => (
   <Flex mx="auto" position="relative" {...rest}>
-    <AppIcon size="64px" mr={6} src={icon} alt={name} borderRadius="0" />
+    <AppIcon size="64px" mr="loose" src={icon} alt={name} borderRadius="0" />
     <Box position="absolute" left="50%" top="50%" ml="-16px" mt="-6px">
       <UnionLine />
     </Box>
@@ -34,17 +34,17 @@ export const Intro = () => {
 
   return (
     <Screen noMinHeight textAlign="center">
-      <AppElement mt={6} name={name} icon={icon} />
+      <AppElement mt="loose" name={name} icon={icon} />
       <ScreenBody
         fullWidth
-        mt={4}
+        mt="base"
         body={[
           <Title
             fontSize="20px"
             lineHeight="28px"
-            px={8}
+            px="extra-loose"
           >{`${name} guarantees your privacy by encrypting everything`}</Title>,
-          <Box mt={4} mx="auto" width="100%" height="1px" bg="#E5E5EC" />,
+          <Box mt="base" mx="auto" width="100%" height="1px" bg="#E5E5EC" />,
           <Box>
             <CheckList
               items={[
@@ -62,12 +62,12 @@ export const Intro = () => {
         ]}
       />
       <ScreenActions>
-        <Button width="100%" size="lg" mt={2} onClick={() => doAuth()}>
+        <Button width="100%" size="lg" mt="tight" onClick={() => doAuth()}>
           Get started
         </Button>
       </ScreenActions>
       <ScreenFooter>
-        <Stack mb={5} mt={3} spacing={4} isInline>
+        <Stack mb="base-loose" mt="base-tight" spacing="base" isInline>
           <Link textStyle="caption" color="blue" onClick={() => doAuth({ sendToSignIn: true })}>
             I already have a Secret Key
           </Link>

packages/connect/src/react/components/screens/sign-in.tsx

@@ -15,8 +15,8 @@ const ContinueWithAuth: React.FC = props => {
       justifyContent="center"
       border="1px solid"
       borderColor="inherit"
-      px={6}
-      py={3}
+      px="loose"
+      py="base-tight"
       borderRadius="6px"
       boxShadow="mid"
       height={14}
@@ -31,7 +31,7 @@ const ContinueWithAuth: React.FC = props => {
       {...bind}
       {...props}
     >
-      <Logo mr={2} />
+      <Logo mr="tight" />
       <Text fontWeight={500}>Continue with Secret Key</Text>
     </Flex>
   );

packages/connect/src/react/components/typography/index.tsx

@@ -7,7 +7,7 @@ const Title = (props: BoxProps) => (
 
 const Pretitle = (props: BoxProps) => (
   <Text
-    pt={6}
+    pt="loose"
     width="100%"
     fontWeight="medium"
     fontSize={['11px']}

packages/ui/src/icons/apps-icon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const AppsIcon: React.FC<BoxProps> = props => (
+  <Svg {...props}>
+    <rect y="1.02686" width="10.0435" height="9.88235" rx="1.75" fill="currentColor" />
+    <path
+      opacity="0.8"
+      d="M13.5697 10.9091H22.2999C23.0625 10.9091 23.5444 10.0897 23.1739 9.42317L18.8088 1.57201C18.4277 0.886573 17.4419 0.886572 17.0608 1.572L12.6957 9.42316C12.3251 10.0897 12.8071 10.9091 13.5697 10.9091Z"
+      fill="currentColor"
+    />
+    <rect opacity="0.64" y="13.7327" width="10.4348" height="10.2674" rx="5.13369" fill="currentColor" />
+    <path
+      opacity="0.4"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.672 14.0339C14.4783 13.8498 14.2188 13.7479 13.9494 13.7502C13.68 13.7525 13.4224 13.8588 13.2319 14.0462C13.0414 14.2337 12.9334 14.4872 12.931 14.7523C12.9287 15.0173 13.0322 15.2726 13.2194 15.4633L16.4894 18.6809L13.2194 21.8984C13.0266 22.088 12.9182 22.3451 12.9182 22.6133C12.9181 22.746 12.9446 22.8775 12.9962 23.0002C13.0478 23.1229 13.1235 23.2344 13.2189 23.3283C13.3142 23.4222 13.4275 23.4967 13.5521 23.5476C13.6768 23.5984 13.8104 23.6246 13.9453 23.6247C14.2179 23.6248 14.4793 23.5183 14.672 23.3288L17.9421 20.1112L21.2121 23.3288C21.4049 23.5185 21.6663 23.625 21.9389 23.625C22.2116 23.625 22.473 23.5185 22.6658 23.3288C22.8585 23.1391 22.9668 22.8819 22.9668 22.6136C22.9668 22.3454 22.8585 22.0881 22.6658 21.8984L19.3957 18.6809L22.6658 15.4633C22.7612 15.3694 22.8368 15.2579 22.8884 15.1352C22.94 15.0125 22.9665 14.881 22.9665 14.7483C22.9664 14.6155 22.9398 14.484 22.8881 14.3614C22.8364 14.2387 22.7607 14.1273 22.6653 14.0334C22.5698 13.9396 22.4565 13.8651 22.3318 13.8144C22.2071 13.7636 22.0735 13.7375 21.9386 13.7375C21.8036 13.7376 21.67 13.7638 21.5454 13.8146C21.4207 13.8655 21.3075 13.94 21.2121 14.0339L17.9421 17.2515L14.672 14.0339Z"
+      fill="currentColor"
+    />
+  </Svg>
+);

packages/ui/src/icons/blockchain-icon.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const BlockchainIcon: React.FC<BoxProps> = props => {
+  const color = props.color || 'currentColor';
+
+  return (
+    <Svg {...props}>
+      <rect width="12" height="12" rx="2.25" fill={color} />
+      <rect opacity="0.6" x="12" y="12" width="12" height="12" rx="2.25" fill={color} />
+      <rect
+        opacity="0.4"
+        x="14.75"
+        y="2.75"
+        width="6.5"
+        height="6.5"
+        rx="1"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <rect
+        opacity="0.4"
+        x="2.75"
+        y="14.75"
+        width="6.5"
+        height="6.5"
+        rx="1"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};

packages/ui/src/icons/blockstack-icon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const BlockstackIcon: React.FC<BoxProps> = props => (
+  <Svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.148042 1.08513C-5.58794e-08 1.42724 -3.80998e-08 1.86349 0 2.736L1.42713e-07 6L2.85387e-07 9.264C3.23525e-07 10.1365 0 10.5728 0.148042 10.9149C0.329866 11.335 0.664964 11.6701 1.08513 11.852C1.42724 12 1.86349 12 2.736 12H6H9.264C10.1365 12 10.5728 12 10.9149 11.852C11.335 11.6701 11.6701 11.335 11.852 10.9149C12 10.5728 12 10.1365 12 9.264V6V2.736C12 1.86349 12 1.42724 11.852 1.08513C11.6701 0.664963 11.335 0.329865 10.9149 0.148041C10.5728 -6.70552e-08 10.1365 -3.80998e-08 9.264 0L6 1.42713e-07L2.736 2.85387e-07C1.86349 3.23525e-07 1.40625 2.90573e-07 1.08513 0.148042C0.664964 0.329867 0.329866 0.664963 0.148042 1.08513ZM7.91566 5.16965C7.31682 5.16965 6.83125 4.68409 6.83125 4.08511C6.83125 3.48644 7.31682 3.00088 7.91566 3.00088C8.5145 3.00088 9.00007 3.48644 9.00007 4.08511C9.00007 4.68409 8.5145 5.16965 7.91566 5.16965ZM5.16787 4.085C5.16787 4.68358 4.68253 5.16893 4.08382 5.16893C3.48541 5.16893 3.00007 4.68358 3.00007 4.085C3.00007 3.48643 3.48541 3.00107 4.08382 3.00107C4.68253 3.00107 5.16787 3.48643 5.16787 4.085ZM7.91576 6.83459C7.31679 6.83459 6.83123 7.32016 6.83123 7.919C6.83123 8.51785 7.31679 9.00342 7.91576 9.00342C8.51444 9.00342 9 8.51785 9 7.919C9 7.32016 8.51444 6.83459 7.91576 6.83459ZM4.08392 6.83565C4.68248 6.83565 5.16783 7.32098 5.16783 7.91969C5.16783 8.51809 4.68248 9.00342 4.08392 9.00342C3.48535 9.00342 3 8.51809 3 7.91969C3 7.32098 3.48535 6.83565 4.08392 6.83565Z"
+      fill={props.color || 'currentColor'}
+    />
+  </Svg>
+);

packages/ui/src/icons/checkmark-icon.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const CheckmarkIcon: React.FC<BoxProps> = ({ size = 72, color = 'currentColor', ...props }) => (
+  <Svg width={size} height={size} fill="none" viewBox="0 0 72 72" {...props}>
+    <circle cx="36" cy="36" r="34.5" fill="#fff" stroke={color} strokeWidth="3"></circle>
+    <path stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M21 37l10 10 20-22"></path>
+  </Svg>
+);

packages/ui/src/icons/chevron-icon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+type Direction = 'up' | 'down' | 'left' | 'right';
+
+interface ChevronProps extends BoxProps {
+  direction?: Direction;
+  size?: number;
+}
+
+const rotate = (direction: Direction = 'right') => {
+  switch (direction) {
+    case 'left':
+      return '90';
+    case 'up':
+      return '180';
+    case 'right':
+      return '270';
+    case 'down':
+      return 0;
+    default:
+      throw new Error('`rotate` must receive direction parameter');
+  }
+};
+
+export const ChevronIcon: React.FC<ChevronProps> = ({ direction, size = 16, style = {}, ...props }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    style={{ ...style, transform: `rotate(${rotate(direction)}deg)` }}
+    {...props}
+  >
+    <path fill={props.color || 'currentColor'} d="M4.7 7.367l3.3 3.3 3.3-3.3-.943-.943L8 8.78 5.643 6.424l-.943.943z" />
+  </Svg>
+);

packages/ui/src/icons/chevron.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Box, BoxProps } from '../box';
-
-type Direction = 'up' | 'down' | 'left' | 'right';
-
-interface ChevronProps extends BoxProps {
-  direction?: Direction;
-  size?: number;
-}
-
-const rotate = (direction: Direction = 'right') => {
-  switch (direction) {
-    case 'left':
-      return '90';
-    case 'up':
-      return '180';
-    case 'right':
-      return '270';
-    case 'down':
-      return 0;
-    default:
-      throw new Error('`rotate` must receive direction parameter');
-  }
-};
-
-export const ChevronIcon = ({ direction, size = 16, ...props }: ChevronProps) => (
-  <Box {...props} style={{ transform: `rotate(${rotate(direction)}deg)` }}>
-    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
-      <path fill="#C1C3CC" d="M4.7 7.367l3.3 3.3 3.3-3.3-.943-.943L8 8.78 5.643 6.424l-.943.943z"></path>
-    </svg>
-  </Box>
-);

packages/ui/src/icons/connect-logo-icon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const ConnectLogoIcon: React.FC<BoxProps> = ({ color = 'currentColor', ...props }) => (
+  <Svg color={color} {...props}>
+    <rect width="24" height="24" rx="12" fill="currentColor" opacity="0.15" />
+    <path
+      d="M15.2727 10.0179H14.8636V8.8125C14.8636 8.06658 14.5619 7.35121 14.0249 6.82376C13.4879 6.29632 12.7595 6 12 6C11.2405 6 10.5121 6.29632 9.9751 6.82376C9.43807 7.35121 9.13636 8.06658 9.13636 8.8125V10.0179H8.72727C8.40189 10.0182 8.08994 10.1453 7.85985 10.3713C7.62977 10.5973 7.50036 10.9036 7.5 11.2232V16.0446C7.50036 16.3642 7.62977 16.6706 7.85985 16.8966C8.08994 17.1225 8.40189 17.2497 8.72727 17.25H15.2727C15.5981 17.2497 15.9101 17.1225 16.1401 16.8966C16.3702 16.6706 16.4996 16.3642 16.5 16.0446V11.2232C16.4996 10.9036 16.3702 10.5973 16.1401 10.3713C15.9101 10.1453 15.5981 10.0182 15.2727 10.0179ZM9.95455 8.8125C9.95455 8.2797 10.17 7.76872 10.5536 7.39197C10.9372 7.01523 11.4575 6.80357 12 6.80357C12.5425 6.80357 13.0628 7.01523 13.4464 7.39197C13.83 7.76872 14.0455 8.2797 14.0455 8.8125V10.0179H9.95455V8.8125ZM12.4091 13.7231V14.6384C12.4091 14.745 12.366 14.8471 12.2893 14.9225C12.2126 14.9978 12.1085 15.0402 12 15.0402C11.8915 15.0402 11.7874 14.9978 11.7107 14.9225C11.634 14.8471 11.5909 14.745 11.5909 14.6384V13.7231C11.4349 13.6346 11.313 13.4981 11.2441 13.3347C11.1752 13.1712 11.1631 12.99 11.2097 12.8192C11.2563 12.6483 11.359 12.4973 11.5019 12.3896C11.6448 12.282 11.8199 12.2236 12 12.2236C12.1801 12.2236 12.3552 12.282 12.4981 12.3896C12.641 12.4973 12.7437 12.6483 12.7903 12.8192C12.8369 12.99 12.8248 13.1712 12.7559 13.3347C12.687 13.4981 12.5651 13.6346 12.4091 13.7231Z"
+      fill="currentColor"
+    />
+    <rect x="10.5" y="11.25" width="3" height="5.25" fill="currentColor" />
+  </Svg>
+);

packages/ui/src/icons/encryption-icon.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const EncryptionIcon: React.FC<BoxProps> = props => (
+  <Svg {...props}>
+    <path
+      d="M18.5818 8.57143H17.7091V6C17.7091 4.4087 17.0655 2.88258 15.9198 1.75736C14.7741 0.632141 13.2202 0 11.6 0C9.97977 0 8.4259 0.632141 7.28022 1.75736C6.13454 2.88258 5.49091 4.4087 5.49091 6V8.57143H4.61818C3.92403 8.57218 3.25853 8.84334 2.76769 9.32541C2.27685 9.80748 2.00076 10.4611 2 11.1429V21.4286C2.00076 22.1103 2.27685 22.7639 2.76769 23.246C3.25853 23.7281 3.92403 23.9993 4.61818 24H18.5818C19.276 23.9993 19.9415 23.7281 20.4323 23.246C20.9231 22.7639 21.1992 22.1103 21.2 21.4286V11.1429C21.1992 10.4611 20.9231 9.80748 20.4323 9.32541C19.9415 8.84334 19.276 8.57218 18.5818 8.57143ZM7.23636 6C7.23636 4.86336 7.6961 3.77327 8.51444 2.96954C9.33278 2.16582 10.4427 1.71429 11.6 1.71429C12.7573 1.71429 13.8672 2.16582 14.6856 2.96954C15.5039 3.77327 15.9636 4.86336 15.9636 6V8.57143H7.23636V6Z"
+      fill="currentColor"
+    />
+  </Svg>
+);

packages/ui/src/icons/exlamation-mark-icon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const ExclamationMarkIcon: React.FC<BoxProps> = props => (
+  <Svg width="12" height="12" fill="none" viewBox="0 0 12 12" {...props}>
+    <circle cx="6" cy="6" r="6" fill={props.color || 'currentColor'} />
+    <path
+      fill="#fff" // TODO: abstract out to be the background color, related to darkmode changes
+      d="M6.62 3.64a.622.622 0 10-1.244 0l.083 2.983a.54.54 0 001.081 0l.08-2.984zM6 9c.368 0 .687-.31.69-.694A.7.7 0 006 7.617.69.69 0 006 9z"
+    />
+  </Svg>
+);

packages/ui/src/icons/eye-icon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const EyeIcon: React.FC<BoxProps> = props => (
+  <Svg width="24" height="20" viewBox="0 0 24 20" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.695 0.351482C19.9032 0.135371 20.1868 0.00948757 20.4855 0.000511017C20.7171 -0.00642408 20.9454 0.057366 21.1405 0.183512C21.3356 0.309658 21.4883 0.492283 21.5786 0.707441C21.669 0.922599 21.6927 1.16026 21.6468 1.38926C21.6008 1.61827 21.4873 1.82793 21.3212 1.99078L4.3048 19.1469C4.19867 19.2575 4.07178 19.3456 3.93152 19.4062C3.79125 19.4668 3.64043 19.4987 3.48783 19.5C3.33523 19.5012 3.1839 19.4718 3.04268 19.4135C2.90146 19.3552 2.77316 19.2691 2.66526 19.1603C2.55735 19.0515 2.47201 18.9222 2.4142 18.7798C2.35639 18.6374 2.32727 18.4849 2.32854 18.331C2.3298 18.1771 2.36143 18.0251 2.42157 17.8837C2.48171 17.7423 2.56917 17.6143 2.67885 17.5074L19.695 0.351482ZM0.193655 8.95376C2.47935 4.5123 7.03523 1.71636 11.9982 1.71636C13.5143 1.71601 14.9919 1.97725 16.3789 2.46512L14.7583 4.09901C13.9263 3.68538 12.9904 3.45188 12 3.45188C8.55044 3.45188 5.754 6.27118 5.75403 9.74917C5.75404 10.7476 5.98562 11.6913 6.39588 12.5301L3.92169 15.0246C2.39514 13.8491 1.11258 12.3359 0.194802 10.5571C-0.0645738 10.0547 -0.0649106 9.45653 0.193655 8.95376ZM17.6041 6.96802L20.0781 4.47375C21.6047 5.64932 22.8874 7.16248 23.8052 8.94153C24.0646 9.44387 24.0649 10.042 23.8064 10.5448C21.5205 14.9863 16.9647 17.7818 12.0018 17.7818C10.4857 17.7821 9.00815 17.5209 7.62116 17.033L9.2415 15.3994C10.0735 15.813 11.0096 16.0465 12 16.0465C15.4496 16.0465 18.246 13.227 18.246 9.74917C18.246 8.75058 18.0145 7.80688 17.6041 6.96802ZM9.24284 6.96914C10.0042 6.20163 11.0022 5.81824 12 5.81824C12.3155 5.81824 12.6308 5.85684 12.9387 5.93349L8.2154 10.6956C7.89855 9.40286 8.24082 7.97945 9.24284 6.96914ZM11.0613 13.5647L15.7846 8.80249C16.1013 10.0952 15.7589 11.5184 14.7569 12.5285C13.755 13.5388 12.3434 13.8839 11.0613 13.5647Z"
+      fill={props.color || 'currentColor'}
+    />
+    <path
+      d="M19.6951 0.351482C19.9034 0.135371 20.1869 0.00948757 20.4856 0.000511017C20.7173 -0.00642408 20.9456 0.057366 21.1406 0.183512C21.3357 0.309658 21.4884 0.492283 21.5787 0.707441C21.6691 0.922599 21.6928 1.16026 21.6469 1.38926C21.6009 1.61827 21.4874 1.82793 21.3213 1.99078L4.30491 19.1469C4.19879 19.2575 4.07189 19.3456 3.93163 19.4062C3.79137 19.4668 3.64054 19.4987 3.48794 19.5C3.33534 19.5012 3.18402 19.4718 3.0428 19.4135C2.90157 19.3552 2.77327 19.2691 2.66537 19.1603C2.55747 19.0515 2.47213 18.9222 2.41432 18.7798C2.35651 18.6374 2.32739 18.4849 2.32865 18.331C2.32992 18.1771 2.36154 18.0251 2.42169 17.8837C2.48183 17.7423 2.56929 17.6143 2.67896 17.5074L19.6951 0.351482Z"
+      fill={props.color || 'currentColor'}
+    />
+  </Svg>
+);

packages/ui/src/icons/index.tsx

@@ -1 +1,13 @@
-export * from './chevron';
+export * from './apps-icon';
+export * from './blockchain-icon';
+export * from './blockstack-icon';
+export * from './checkmark-icon';
+export * from './chevron-icon';
+export * from './connect-logo-icon';
+export * from './encryption-icon';
+export * from './exlamation-mark-icon';
+export * from './eye-icon';
+export * from './padlock-icon';
+export * from './plus-circle-icon';
+export * from './private-icon';
+export * from './union-line-icon';

packages/ui/src/icons/padlock-icon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const PadlockIcon: React.FC<BoxProps> = props => (
+  <Svg width="64" height="64" fill="none" viewBox="0 0 64 64" {...props}>
+    <path
+      d="M0 25.6C0 16.6392 0 12.1587 1.7439 8.73615C3.27787 5.72556 5.72556 3.27787 8.73615 1.7439C12.1587 0 16.6392 0 25.6 0L38.4 0C47.3608 0 51.8413 0 55.2638 1.7439C58.2744 3.27787 60.7221 5.72556 62.2561 8.73615C64 12.1587 64 16.6392 64 25.6V38.4C64 47.3608 64 51.8413 62.2561 55.2638C60.7221 58.2744 58.2744 60.7221 55.2638 62.2561C51.8413 64 47.3608 64 38.4 64H25.6C16.6392 64 12.1587 64 8.73615 62.2561C5.72556 60.7221 3.27787 58.2744 1.7439 55.2638C0 51.8413 0 47.3608 0 38.4L0 25.6Z"
+      fill="currentColor"
+      opacity="0.15"
+    />
+    <path
+      d="M40.7273 26.7143H39.6364V23.5C39.6364 21.5109 38.8318 19.6032 37.3997 18.1967C35.9676 16.7902 34.0253 16 32 16C29.9747 16 28.0324 16.7902 26.6003 18.1967C25.1682 19.6032 24.3636 21.5109 24.3636 23.5V26.7143H23.2727C22.405 26.7152 21.5732 27.0542 20.9596 27.6568C20.3461 28.2594 20.001 29.0764 20 29.9286V42.7857C20.001 43.6379 20.3461 44.4549 20.9596 45.0575C21.5732 45.6601 22.405 45.9991 23.2727 46H40.7273C41.595 45.9991 42.4268 45.6601 43.0404 45.0575C43.6539 44.4549 43.999 43.6379 44 42.7857V29.9286C43.999 29.0764 43.6539 28.2594 43.0404 27.6568C42.4268 27.0542 41.595 26.7152 40.7273 26.7143ZM26.5455 23.5C26.5455 22.0792 27.1201 20.7166 28.1431 19.7119C29.166 18.7073 30.5534 18.1429 32 18.1429C33.4466 18.1429 34.834 18.7073 35.8569 19.7119C36.8799 20.7166 37.4545 22.0792 37.4545 23.5V26.7143H26.5455V23.5Z"
+      fill="currentColor"
+    />
+  </Svg>
+);

packages/ui/src/icons/plus-circle-icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const PlusCircleIcon: React.FC<BoxProps> = props => (
+  <Svg {...props}>
+    <circle cx="12" cy="12" r="12" fill="currentColor" />
+    <g clipPath="url(#clip0)">
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M8.36 11.25a.75.75 0 000 1.5h3.375v3.376a.75.75 0 001.5 0V12.75h3.377a.75.75 0 000-1.5h-3.376V7.874a.75.75 0 10-1.5 0v3.376H8.358z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0">
+        <path fill="#fff" d="M4 12H16V24H4z" transform="rotate(-45 4 12)" />
+      </clipPath>
+    </defs>
+  </Svg>
+);

packages/ui/src/icons/private-icon.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const PrivateIcon: React.FC<BoxProps> = props => (
+  <Svg width="18" height="24" viewBox="0 0 18 24" fill="none" {...props}>
+    <path
+      d="M15.5455 8.57143H14.7273V6C14.7273 4.4087 14.1239 2.88258 13.0498 1.75736C11.9757 0.632141 10.519 0 9 0C7.48103 0 6.02428 0.632141 4.95021 1.75736C3.87614 2.88258 3.27273 4.4087 3.27273 6V8.57143H2.45455C1.80378 8.57218 1.17987 8.84334 0.719709 9.32541C0.259547 9.80748 0.000714665 10.4611 0 11.1429V21.4286C0.000714665 22.1103 0.259547 22.7639 0.719709 23.246C1.17987 23.7281 1.80378 23.9993 2.45455 24H15.5455C16.1962 23.9993 16.8201 23.7281 17.2803 23.246C17.7405 22.7639 17.9993 22.1103 18 21.4286V11.1429C17.9993 10.4611 17.7405 9.80748 17.2803 9.32541C16.8201 8.84334 16.1962 8.57218 15.5455 8.57143ZM4.90909 6C4.90909 4.86336 5.3401 3.77327 6.10729 2.96954C6.87449 2.16582 7.91502 1.71429 9 1.71429C10.085 1.71429 11.1255 2.16582 11.8927 2.96954C12.6599 3.77327 13.0909 4.86336 13.0909 6V8.57143H4.90909V6Z"
+      fill="currentColor"
+    />
+  </Svg>
+);

packages/ui/src/icons/union-line-icon.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Svg } from '../svg';
+import { BoxProps } from '../box';
+
+export const UnionLineIcon: React.FC<BoxProps> = props => (
+  <Svg width="32" height="7" fill="none" viewBox="0 0 32 7" {...props}>
+    <mask id="a" width="32" height="7" x="0" y="0" fill="#000" maskUnits="userSpaceOnUse">
+      <path fill="#fff" d="M0 0H32V7H0z" />
+      <path
+        fillRule="evenodd"
+        d="M3.5 5a1.5 1.5 0 001.415-1h22.17a1.5 1.5 0 100-1H4.915A1.5 1.5 0 103.5 5z"
+        clipRule="evenodd"
+      />
+    </mask>
+    <path
+      fill="#677282"
+      fillRule="evenodd"
+      d="M3.5 5a1.5 1.5 0 001.415-1h22.17a1.5 1.5 0 100-1H4.915A1.5 1.5 0 103.5 5z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#fff"
+      d="M4.915 4V2H3.5L3.03 3.334 4.915 4zm22.17 0l1.886-.667L28.5 2h-1.415v2zm0-1v2H28.5l.471-1.333L27.085 3zM4.915 3l-1.886.666L3.5 5h1.415V3zm-1.886.334A.5.5 0 013.5 3v4a3.5 3.5 0 003.3-2.334L3.03 3.334zM27.085 2H4.915v4h22.17V2zM28.5 3a.5.5 0 01.471.333L25.2 4.667A3.5 3.5 0 0028.5 7V3zm-.5.5a.5.5 0 01.5-.5v4A3.5 3.5 0 0032 3.5h-4zm.5.5a.5.5 0 01-.5-.5h4A3.5 3.5 0 0028.5 0v4zm.471-.333A.5.5 0 0128.5 4V0a3.5 3.5 0 00-3.3 2.333l3.771 1.333zM4.915 5h22.17V1H4.915v4zM3.5 4a.5.5 0 01-.471-.334L6.8 2.334A3.5 3.5 0 003.5 0v4zm.5-.5a.5.5 0 01-.5.5V0A3.5 3.5 0 000 3.5h4zM3.5 3a.5.5 0 01.5.5H0A3.5 3.5 0 003.5 7V3z"
+      mask="url(#a)"
+    />
+  </Svg>
+);

packages/ui/src/index.ts

@@ -6,13 +6,13 @@ export * from './text';
 export * from './button';
 export * from './button-group';
 export * from './css-reset';
+export * from './icons';
 export * from './input';
 export * from './input-group';
 export * from './input-element';
 export * from './input-addon';
 export * from './form-label';
 export * from './form-control';
-export * from './icons';
 export * from './modal';
 export * from './spinner';
 export * from './stack';

packages/ui/src/svg/index.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Box, BoxProps } from '../box';
+
+interface SVGProps {
+  viewBox?: string;
+  fill?: string;
+}
+
+type SVG = SVGProps & BoxProps;
+
+export const Svg = ({ width = 24, height = 24, viewBox = '0 0 24 24', fill = 'none', ...rest }: SVG) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+  // @ts-ignore
+  return <Box as="svg" width={width} height={height} viewBox={viewBox} fill={fill} {...rest} />;
+};

packages/ui/src/theme/sizes.tsx

@@ -27,9 +27,19 @@ export const baseSizes = {
   '64': '256px',
 };
 
-const sizes = {
-  ...baseSizes,
-  containers,
+export const namedSpacingUnits = {
+  none: baseSizes[0], //0px
+  'extra-tight': baseSizes[1], //4px
+  tight: baseSizes[2], //8px
+  'base-tight': baseSizes[3], //12px
+  base: baseSizes[4], //16px
+  'base-loose': baseSizes[5], //20px
+  loose: baseSizes[6], //24px
+  'extra-loose': baseSizes[8], //32px
 };
 
-export default sizes;
+export const sizes = {
+  ...baseSizes,
+  containers,
+  ...namedSpacingUnits,
+};

packages/ui/src/theme/theme.tsx

@@ -1,9 +1,9 @@
 import colors from './colors';
-import sizes, { baseSizes } from './sizes';
+import { sizes } from './sizes';
 import typography from './typography';
 import { Theme } from './types';
 
-const space = baseSizes;
+const space = sizes;
 
 export const shadows = {
   low: '0px 1px 2px rgba(0, 0, 0, 0.04)',