How to use the @kiwicom/orbit-design-tokens.defaultTokens.spaceMedium function in @kiwicom/orbit-design-tokens

}

ModalButtons.defaultProps = {
  labelConfirm: 'OK',
  labelCancel: 'Cancel',
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
  buttonWrapper: {
    flex: 1,
    ios: {
      // @TODO bottom margin needs to be currently set for iOS because of the persisting bug related to `SafeAreaView` and `Modal` on iPhone X https://github.com/facebook/react-native/issues/18177
      marginBottom: parseFloat(defaultTokens.spaceMedium),
    },
  },
  confirmButton: {
    marginStart: parseFloat(defaultTokens.spaceXSmall),
  },
});

edges {
        node {
          id
          ...ItineraryCard_data
        }
      }
    }
  `,
});

const styles = StyleSheet.create({
  container: {
    backgroundColor: defaultTokens.backgroundBody,
    paddingTop: parseInt(defaultTokens.spaceXSmall, 10),
    web: {
      paddingTop: parseInt(defaultTokens.spaceMedium, 10),
      paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    },
  },
});

|};

export default function StopoverDurationWrapper({ children }: Props) {
  return (

);

const styles = StyleSheet.create({
  container: {
    padding: 0,
    ios: {
      marginBottom: 8,
    },
    android: {
      marginVertical: 4,
    },
    web: {
      alignSelf: 'center',
      width: '100%',
      maxWidth: designTokens.widthScreenNormal,
      marginBottom: parseInt(defaultTokens.spaceMedium, 10),
      borderRadius: parseInt(defaultTokens.borderRadiusNormal, 10),
      boxShadow: '0 2px 4px 0 rgba(23,27,30,.1)',
      transitionDuration: '0.3s',
      transitionProperty: 'box-shadow',
      transitionTimingFunction: 'ease-out',
    },
  },
  containerElevated: {
    web: {
      boxShadow: '0 4px 12px 0 rgba(23,27,30,.3)',
    },
  },
});

);
  }
}

const styles = StyleSheet.create({
  line: {
    flexDirection: 'row',
    height: parseInt(defaultTokens.heightButtonNormal, 10),
  },
  icon: {
    paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    justifyContent: 'center',
  },
  radio: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceMedium, 10),
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  radioUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    fontSize: parseInt(defaultTokens.fontSizeButtonLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
});
export default SelectOption;

)}
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginBottom: parseInt(defaultTokens.spaceSmall, 10),
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: parseInt(defaultTokens.spaceSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceMedium, 10),
  },
  passengerName: {
    flex: 1,
  },
});

export default PassengerCard;

);
}

const styles = StyleSheet.create({
  line: {
    marginTop: parseFloat(defaultTokens.spaceMedium),
  },
  row: {
    flexDirection: 'row',
  },
  countryCode: {
    minWidth: 112,
  },
  phoneNumber: {
    flex: 1,
    marginStart: parseFloat(defaultTokens.spaceSmall),
  },
});

);
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: parseInt(defaultTokens.spaceMedium, 10),
    marginHorizontal: parseInt(defaultTokens.spaceMedium, 10),
  },
  location: {
    fontSize: parseInt(defaultTokens.fontSizeHeadingTitle3, 10),
    color: defaultTokens.colorHeading,
  },
  duration: {
    fontSize: parseInt(defaultTokens.fontSizeHeadingTitle3, 10),
    color: defaultTokens.colorTextSecondary,
    web: {
      fontWeight: designTokens.fontWeightMedium,
    },
  },
});

export default createFragmentContainer(SectorHeader, {

@media (min-width: ${BREAKPOINTS.TABLET}px) {
    flex-direction: column;
    width: 60vw;
    height: 230px;
  }
  @media (min-width: ${BREAKPOINTS.BIG_TABLET}px) {
    align-items: flex-start;
    width: 26vw;
    padding: 0 0 0 8vw;
    height: 280px;
  }
`;

const WrapperText = styled.div`
  width: 85vw;
  padding: ${defaultTokens.spaceMedium} 0 ${defaultTokens.spaceMedium} 0;
  @media (min-width: ${BREAKPOINTS.TABLET}px) {
    width: 75vw;
  }
  @media (min-width: ${BREAKPOINTS.BIG_TABLET}px) {
    width: 25vw;
  }
`;

props.infoTextWeight === 'bold' && styles.infoTextThick,
          ]}
        >
          {props.infoText}
        
        
      
    
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingStart: 13,
    paddingEnd: parseInt(defaultTokens.spaceMedium, 10),
    paddingVertical: parseInt(defaultTokens.spaceXXXSmall, 10),
  },
  infoBlock: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingStart: 19,
  },
  infoText: {
    fontSize: parseInt(defaultTokens.fontSizeTextNormal, 10),
    color: defaultTokens.colorTextPrimary,
  },
  infoTextThick: {
    web: {
      fontWeight: designTokens.fontWeightMedium,